/* General body styling (can be overridden by Nicepage's body styles) */
body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0; /* Reset margin as Nicepage might add its own */
    padding: 0; /* Reset padding */
}

/* Styles for the main content section, adapting Nicepage's sheet structure */
.u-section-1 .u-sheet-1 {
    min-height: 400px; /* Example height, adjust as needed */
    padding-top: 50px; /* Add some top padding */
    padding-bottom: 50px; /* Add some bottom padding */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally within the sheet */
    justify-content: center; /* Center content vertically if sheet has fixed height */
    max-width: 1140px; /* Max width to match Nicepage's typical sheet width */
    margin: 0 auto; /* Center the sheet itself */
}

/* Styles for the main heading */
.u-text-default.u-text-1 {
    margin-bottom: 30px; /* Space below the heading */
    color: #333; /* Darker text color */
    font-size: 2.5em; /* Larger font size */
    font-weight: 700; /* Bold */
}

/* Container for input fields and button */
.u-container-style.u-group.u-group-1 {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9; /* Light background for the group */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content; /* Adjust width to content */
    max-width: 90%; /* Max width for responsiveness */
}

/* Layout for the container layout inside the group */
.u-container-layout-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Space between elements */
}

/* Styles for labels */
.u-label {
    font-size: 1.1em;
    color: #555;
    display: flex; /* Use flex to align label and input on the same line */
    align-items: center;
    gap: 10px; /* Space between label text and input */
}

/* Styles for input fields and select dropdown */
.u-input-rectangle {
    border: 1px solid #ccc;
    padding: 8px 12px;
    border-radius: 5px;
    width: 220px; /* Fixed width for consistency */
    max-width: 100%; /* Ensure responsiveness */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    font-size: 1em;
}

/* Styles for the Refresh button */
.u-btn-1 {
    background-color: #478ac9; /* Nicepage primary color */
    color: white;
    padding: 12px 25px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.u-btn-1:hover {
    background-color: #3e7bb3; /* Darker shade on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

.u-btn-2 {
  --radius: 6px;
  font-weight: 700;
  font-size: 0.9375rem;
  background-image: none;
  margin: 15px 11px 0 auto;
  padding: 27px 92px 29px 91px;
}

/* Risk Summary Info (Time, Location) */
.risk-summary-info {
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 1.1em;
    color: #666;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Space between time and location */
}

.risk-summary-info p {
    margin: 0; /* Remove default paragraph margins */
}

/* Container for all individual risk indicators */
.risk-indicators-container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: center; /* Center items horizontally */
    gap: 30px; /* Space between each risk indicator item */
    margin-top: 40px;
    width: 100%; /* Take full width of the sheet */
}

/* Individual risk indicator item */
.risk-indicator-item {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center content horizontally */
    justify-content: flex-start; /* Align content to the top */
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    flex: 1 1 calc(25% - 30px); /* Approx 4 items per row, accounting for gap */
    min-width: 180px; /* Minimum width for each item before wrapping */
    min-height: 270px; /* Ensure consistent height for all boxes */
    box-sizing: border-box;
    text-align: center;
}

/* Label for each risk indicator */
.risk-label {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 10px; /* Consistent space below label */
    color: #444;
    height: 4.0em; /* Increased height to reliably fit longer text like "Mood-Related Environmental Conditions" */
    display: flex; /* Use flex to center text vertically if it's shorter */
    align-items: center;
    justify-content: center;
    width: 100%; /* Take full width for centering */
    line-height: 1.2; /* Adjust line height for better multi-line appearance */
    overflow: hidden; /* Hide overflow if text is too long (shouldn't happen with increased height) */
}

/* Small traffic light container */
.traffic-light-small {
    display: flex;
    flex-direction: column; /* Stack lights vertically */
    justify-content: center;
    align-items: center;
    background: #333; /* Dark background for the casing */
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 10px; /* Consistent space below traffic light */
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5); /* Inner shadow for depth */
}

/* Individual small light styles */
.light-small {
    width: 30px; /* Smaller lights */
    height: 30px;
    margin: 4px 0; /* Vertical margin between lights */
    border-radius: 50%;
    background: #1a1a1a; /* Darker grey for inactive lights to look unlit */
    border: 2px solid #555; /* Border for definition */
    transition: background 0.4s ease, box-shadow 0.4s ease; /* Smooth transitions */
}

/* Active small light colors with glow effect */
.light-small.active.purple {
    background: purple;
    box-shadow: 0 0 10px purple, 0 0 15px purple;
}
.light-small.active.red {
    background: red;
    box-shadow: 0 0 10px red, 0 0 15px red;
}
.light-small.active.yellow {
    background: yellow;
    box-shadow: 0 0 10px yellow, 0 0 15px yellow;
}
.light-small.active.green {
    background: green;
    box-shadow: 0 0 10px green, 0 0 15px green;
}

/* Text displaying the risk level (e.g., Bajo, Medio) */
.risk-level-text {
    font-size: 1.2em;
    font-weight: bold;
    color: #222;
    margin-top: auto; /* Pushes this text to the bottom, ensuring vertical alignment */
}

/* Link at the bottom */
.u-text-5 .u-btn-2 {
    font-size: 1.1em;
    text-decoration: none;
    color: #478ac9; /* Nicepage link color */
    transition: color 0.3s ease;
}

.u-text-5 .u-btn-2:hover {
    color: #3e7bb3; /* Darker on hover */
    text-decoration: underline;
}

/* --- Responsive Image Adjustments for Header --- */
header .u-sheet-1 {
    display: flex !important; /* Ensure flexbox is applied */
    flex-direction: row !important; /* Ensure items are in a row */
    flex-wrap: wrap !important; /* Allow wrapping if space runs out */
    justify-content: space-between !important; /* Logo left, buttons/login right */
    align-items: center !important; /* Vertically align all items in the center */
    min-height: 100px !important; /* Give the header sheet a minimum height to accommodate larger items */
    padding: 10px 20px !important;
    box-sizing: border-box !important; /* Include padding in width/height */
}

/* Base styles for all header images */
header .u-image-1,
header .u-image-2,
header .u-image-3,
header .u-image-4 {
    position: static !important; /* Force static positioning to work with flexbox */
    margin: 0 10px !important; /* Add some margin between items, override Nicepage */
    height: auto !important; /* Maintain aspect ratio and override Nicepage */
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
    min-width: 80px !important; /* Prevent images from becoming too tiny */
}

/* Specific adjustments for the main logo (weRpatients) */
header .u-image-1 {
    width: 220px !important; /* Increased width for logo */
    max-width: 280px !important;
    margin-right: auto !important; /* Push subsequent items to the right */
    margin-left: 0 !important; /* Ensure it stays left */
}

/* Specific adjustments for Google Play and Apple Store buttons */
header .u-image-2, /* App Store */
header .u-image-3 { /* Google Play */
    width: 200px !important; /* Significantly increased width */
    max-width: 250px !important; /* Significantly increased max width */
}

/* Specific adjustments for the last image (image12.png) */
header .u-image-4 {
    width: 180px !important;
    max-width: 220px !important;
}

/* Styling for the LOGIN button */
header .u-btn.u-button-style.u-btn-1 {
    position: static !important; /* Force static positioning */
    margin-left: auto !important; /* Push it to the far right */
    align-self: center !important; /* Align vertically in center */
    padding: 10px 20px !important;
    font-size: 1.1em !important;
    background-color: #f00 !important; /* Example red color for LOGIN button */
    color: white !important;
    border-radius: 5px !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important; /* Prevent text wrapping inside the button */
    min-width: 80px !important; /* Ensure it doesn't get too small */
}


/* Media queries for responsiveness */
@media (max-width: 992px) { /* Tablets */
    .risk-indicator-item {
        flex: 1 1 calc(33.33% - 30px);
    }
    /* Stack header images vertically on smaller tablets */
    header .u-sheet-1 {
        flex-direction: column !important; /* Stack them vertically */
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
    }
    header .u-image-1,
    header .u-image-2,
    header .u-image-3,
    header .u-image-4,
    header .u-btn.u-button-style.u-btn-1 { /* Include the button in stacking */
        width: 70% !important; /* Adjust width for stacked layout */
        max-width: 300px !important;
        margin: 0 auto !important; /* Center horizontally when stacked */
        align-self: center !important;
    }
}

@media (max-width: 768px) { /* Smaller tablets and large phones */
    header .u-image-1,
    header .u-image-2,
    header .u-image-3,
    header .u-image-4,
    header .u-btn.u-button-style.u-btn-1 {
        width: 80% !important;
        max-width: 350px !important;
    }
}

@media (max-width: 480px) { /* Mobile phones */
    header .u-image-1,
    header .u-image-2,
    header .u-image-3,
    header .u-image-4,
    header .u-btn.u-button-style.u-btn-1 {
        width: 90% !important;
        max-width: 400px !important;
    }
}