/* Core Styling for HealthGPT Web Application */
body {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* Modern font stack */
    margin: 0;
    padding: 0;
    background: #eef2f6; /* Light, soft background */
    color: #333;
    line-height: 1.6;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ensure full viewport height */
}

/* Main container for forms/content (e.g., login, register) */
.container {
    max-width: 700px; /* WIDENED FROM 500px to 700px */
    width: 90%; /* Responsive width: still 90% of viewport on mobile */
    background: #ffffff;
    padding: 40px; /* Increased padding for more inner space */
    border-radius: 12px; /* Softer rounded corners */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* More pronounced shadow */
    text-align: center;
    box-sizing: border-box; /* Include padding in width/height */
}

/* Header & Logo */
.app-header {
    margin-bottom: 35px; /* Increased bottom margin */
}
.app-header img {
    max-width: 160px; /* Slightly larger logo */
    height: auto;
    margin-bottom: 15px; /* More space below logo */
}
.app-header h1 {
    color: #2c3e50; /* Darker primary text */
    font-size: 2.5em; /* Larger main title */
    margin: 0 0 8px 0; /* More space below h1 */
}
.app-header h2 {
    color: #7f8c8d; /* Subtitle color */
    font-size: 1.3em; /* Slightly larger subtitle */
    font-weight: normal;
    margin: 0;
}

/* Section Headings */
h3 {
    color: #34495e; /* Section title color */
    font-size: 1.5em; /* Slightly larger heading */
    margin-top: 30px; /* More space above */
    margin-bottom: 25px; /* More space below */
    border-bottom: 1px solid #eee; /* Subtle separator */
    padding-bottom: 12px; /* More padding below separator */
}

/* Intro Text */
.intro {
    font-size: 1.05em; /* Slightly larger text */
    margin-bottom: 30px; /* More space below */
    color: #555;
}
.intro ul {
    list-style-type: none; /* Remove default bullets */
    padding: 0;
    margin: 20px 0; /* More vertical margin */
    text-align: left;
}
.intro ul li {
    background: #ecf0f1; /* Light background for list items */
    padding: 12px 18px; /* More padding */
    margin-bottom: 10px; /* More space between items */
    border-radius: 6px; /* Slightly softer radius */
    display: flex;
    align-items: center;
}
.intro ul li::before {
    content: '✓'; /* Custom checkmark */
    color: #27ae60; /* Green checkmark */
    font-weight: bold;
    margin-right: 12px; /* More space for checkmark */
    font-size: 1.3em; /* Larger checkmark */
}

/* Form Groups */
.form-group {
    margin-bottom: 22px; /* More space between form groups */
    text-align: left;
}
label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #34495e;
    font-size: 1em; /* Slightly larger label font */
}
input[type="text"], input[type="email"], input[type="password"], select {
    width: 100%;
    padding: 14px 18px; /* Even more padding */
    border: 1px solid #bdc3c7; /* Softer border */
    border-radius: 8px; /* More rounded */
    box-sizing: border-box;
    font-size: 1.05em; /* Slightly larger input font */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input:focus, select:focus {
    border-color: #3498db; /* Blue focus border */
    outline: none;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.3); /* Subtle glowing effect */
}

/* --- BUTTONS --- */

/* Main Submit Button Style (e.g., Login, Register, initial Top Up buttons) */
.form-submit-button {
    background-color: #3498db; /* Primary blue button */
    color: white;
    padding: 16px 30px; /* Larger buttons */
    border: none;
    border-radius: 10px; /* More rounded buttons */
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    width: 100%; /* Full width within its container */
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 20px; /* Spacing below elements */
    text-decoration: none; /* For <a> tag styled as button */
    display: inline-block; /* For <a> tag styled as button */
    box-sizing: border-box; /* For <a> tag styled as button */
}
.form-submit-button:hover {
    background-color: #2980b9; /* Darker blue on hover */
    transform: translateY(-3px); /* More pronounced lift */
}
.form-submit-button:active {
    transform: translateY(0); /* Press down effect */
}

/* Dashboard Button Style (ASK ERRIC, Symptoms, My Profile, etc.) */
/* This is the primary button style for the client dashboard actions */
.button {
    display: block; /* Makes each button take its own line */
    width: 100%; /* Makes them fill the width of the middle column */
    padding: 1rem; /* Adjust this for button height (e.g., 1.2rem for taller) */
    margin: 0.75rem 0; /* Vertical spacing between dashboard buttons */
    font-size: 1.1rem; /* Adjust this for text size (e.g., 1.2rem for larger text) */
    background: #0077cc; /* A slightly different blue for dashboard actions */
    color: white;
    border: none;
    border-radius: 8px; /* Slightly less rounded than form buttons */
    cursor: pointer;
    text-align: center;
    text-decoration: none; /* For <a> tags */
    transition: background-color 0.3s ease; /* Smooth hover effect */
    box-sizing: border-box; /* Include padding in width */
}
.button:hover:not(.disabled) {
    background-color: #005f99;
}
.button:active:not(.disabled) {
    transform: none; /* No press down effect for these by default */
}


/* Specific button colors (can apply to either .form-submit-button or .button) */
.button-red {
    background-color: #e74c3c !important; /* Red for warnings/delete */
}
.button-red:hover {
    background-color: #c0392b !important;
}

/* Disabled button state (applies to both .form-submit-button and .button) */
.form-submit-button.disabled,
.button.disabled {
    background: #cccccc;
    cursor: not-allowed;
    opacity: 0.7;
    transform: none; /* Ensure no transform on disabled buttons */
}

/* Logout Button (specific style) */
.logout-button {
    background-color: #e63946; /* Red logout button */
    color: white;
    padding: 0.6rem 1.2rem; /* Smaller padding */
    border: none;
    border-radius: 5px; /* Less rounded */
    font-weight: bold;
    cursor: pointer;
    display: inline-block; /* To align better in a text-align: center div */
    width: auto; /* Override 100% width for general button/dashboard button */
    font-size: 0.9em; /* Smaller font size for logout */
    transition: background-color 0.3s ease;
}
.logout-button:hover {
    background-color: #c9303d;
}


/* Flash Messages */
.flash-message { /* Added a base class for all flash messages */
    padding: 18px; /* More padding for messages */
    margin-bottom: 25px; /* More space below messages */
    border-radius: 8px; /* Softer rounded corners */
    font-weight: bold;
    text-align: center;
    border: 1px solid transparent;
    font-size: 1em; /* Slightly larger font for messages */
    animation: fadeIn 0.5s ease-out; /* Fade in animation */
}
.error { color: #c0392b; background-color: #fce7e7; border-color: #e74c3c; }
.success { color: #27ae60; background-color: #e6f7ed; border-color: #2ecc71; }
.info { color: #2980b9; background-color: #e8f5fb; border-color: #3498db; }

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Small text and password toggle */
small {
    display: block;
    margin-top: 10px; /* More space above small text */
    color: #7f8c8d;
    font-size: 0.9em; /* Slightly larger small text */
    text-align: left;
}
.toggle-pw {
    cursor: pointer;
    font-size: 0.95em; /* Slightly larger toggle text */
    color: #3498db;
    margin-top: 8px; /* More space above toggle */
    display: inline-block;
    text-decoration: underline;
}
.toggle-pw:hover {
    color: #2980b9;
}

/* Footer & General Links */
footer {
    text-align: center;
    margin-top: 40px; /* More space above footer */
    font-size: 0.85em; /* Slightly larger footer text */
    color: #a0a0a0;
}
footer p { margin: 0; }

p a {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
}
p a:hover {
    text-decoration: underline;
}

/* Call to action login link on landing page */
.cta-login {
    margin-top: 30px;
    font-size: 1.1em;
}

/* --- DASHBOARD SPECIFIC STYLES --- */
.dashboard-container {
    display: flex;
    min-height: 100vh; /* Changed from calc() as header is external now */
    width: 100%; /* Ensure dashboard container takes full width */
    max-width: none; /* Remove max-width from .container for dashboard */
    padding: 0; /* Remove padding from .container for dashboard */
    box-shadow: none; /* Remove shadow from .container for dashboard */
    background: #eef2f6; /* Maintain body background */
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
    align-items: flex-start; /* Align content to the top of columns */
}
/* Column widths for dashboard */
.left-column {
    width: 30%; /* INCREASED from 20% to 30% for news/ads */
    background: #fff8dc; /* Light yellow background */
    padding: 1.5rem;
    box-sizing: border-box;
}
.middle-column {
    width: 40%; /* DECREASED from 50% to 40% for action buttons */
    background: #ffffff;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 1.5rem;
    box-sizing: border-box;
}
.right-column {
    width: 30%; /* Kept at 30% for client info */
    background: #e9f3ff; /* Light blue background */
    padding: 1.5rem;
    box-sizing: border-box;
}

/* Dashboard specific elements */
.gc-box span {
    display: block;
    margin-bottom: 0.5rem;
}
/* No more .logout-container, as the button is standalone in the header */


/* Responsive adjustments */
@media (max-width: 992px) { /* Adjust breakpoint for larger tablets/laptops */
    .dashboard-container {
        flex-direction: column; /* Stack columns vertically */
    }
    .left-column, .middle-column, .right-column {
        width: 100%; /* Full width when stacked */
        border-left: none; /* Remove side borders when stacked */
        border-right: none;
        border-bottom: 1px solid #ccc; /* Add bottom border between stacked sections */
    }
    .middle-column {
        border-top: 1px solid #ccc; /* Border at top of middle column */
    }
}

@media (max-width: 600px) { /* Adjust breakpoint for smaller phones */
    .container {
        margin: 15px auto;
        padding: 20px;
    }
    .app-header h1 {
        font-size: 1.8em;
    }
    h3 {
        font-size: 1.2em;
    }
    /* Reduce padding/font size for mobile forms */
    input[type="text"], input[type="email"], input[type="password"], select {
        padding: 10px 12px;
        font-size: 0.95em;
    }
    /* Ensure dashboard buttons scale on smaller screens */
    .button { /* Targets the dashboard buttons specifically */
        padding: 0.8rem;
        font-size: 0.95rem;
    }
    .form-submit-button { /* Targets main form buttons */
        padding: 12px 18px;
        font-size: 1em;
    }
    .logout-button { /* Targets logout button */
        padding: 0.5rem 1rem;
        font-size: 0.8em;
    }
}
@media (max-width: 480px) { /* Adjust breakpoint for very small phones */
    .container {
        width: 95%;
        padding: 15px;
    }
    .app-header img {
        max-width: 100px;
    }
    .app-header h1 {
        font-size: 1.5em;
    }
    .app-header h2 {
        font-size: 0.9em;
    }
    h3 {
        font-size: 1.05em;
    }
    .intro ul li {
        font-size: 0.9em;
        padding: 8px 12px;
    }
    small {
        font-size: 0.75em;
    }
    .toggle-pw {
        font-size: 0.8em;
    }
    footer {
        font-size: 0.7em;
    }
}
.gc-summary {
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.gc-warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    font-weight: bold;
}
.gc-actions {
    margin-top: 15px;
}
.gc-actions a {
    display: inline-block;
    margin: 5px;
    padding: 8px 12px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
.gc-actions a.btn-earn {
    background: #28a745;
}
.gc-actions a:hover {
    opacity: 0.9;
}
.payment-options {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}
.stripe-btn {
    background: #635bff;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
}
.stripe-btn:hover {
    background: #5146d8;
}