/* auth.css - Styles for Authentication Modals */

/* Basic Reset for Modal Elements (if needed) */
.modal-overlay *,
.modal-overlay *::before,
.modal-overlay *::after {
    box-sizing: border-box;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 1001; /* Ensure it's above the sticky header */
    opacity: 0; /* Start invisible for transition */
    transition: opacity 0.3s ease-in-out;
    padding: 15px; /* Padding for small screens */
}

.modal-overlay.active {
    display: flex;
    opacity: 1; /* Fade in */
}

.modal-content {
    background-color: #fff; /* Use root variable if defined: var(--white); */
    padding: 30px 40px;
    border-radius: 8px; /* Use root variable if defined: var(--border-radius); */
    position: relative;
    max-width: 450px;
    width: 100%; /* Take available width up to max-width */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transform: scale(0.95); /* Start slightly smaller for transition */
    transition: transform 0.3s ease-in-out;
}

.modal-overlay.active .modal-content {
     transform: scale(1); /* Scale up */
}


.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
}
.modal-close:hover {
    color: #333; /* Use root variable if defined: var(--dark); */
}

/* Modal Steps Styling (Signup) */
#modal-choice-step h2,
#modal-form-step h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 1rem;
    color: #333; /* Use root variable if defined: var(--dark); */
    font-size: 1.6rem;
    font-weight: 600;
}
#modal-choice-step p {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #555;
}

.modal-choice-buttons {
    display: flex;
    justify-content: space-around;
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.modal-choice-buttons .btn {
    flex-grow: 1; /* Make buttons fill space */
}

/* Form Styling inside Modals */
.auth-modal h2 { /* Target h2 in old modals too */
     text-align: center;
    margin-top: 0;
    margin-bottom: 1rem;
    color: #333;
    font-size: 1.6rem;
    font-weight: 600;
}

.auth-modal p { /* Target paragraph in forgot password */
     text-align: center;
     margin-bottom: 15px;
     color: #555;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #555;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    line-height: 1.4;
    font-family: inherit; /* Inherit body font */
}
.form-group input:focus {
    outline: none;
    border-color: #4CAF50; /* Use root variable if defined: var(--primary); */
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

/* Specific style for checkbox group */
.form-group.form-inline {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.form-group.form-inline input[type="checkbox"] {
    width: auto; /* Override full width */
    margin-right: 8px;
    flex-shrink: 0;
}
.form-group.form-inline label {
    margin-bottom: 0; /* Remove bottom margin */
    font-weight: normal; /* Normal weight for checkbox label */
}

.btn-full-width {
    width: 100%;
    padding: 12px;
    margin-top: 10px; /* Space above button */
    font-size: 1rem;
}

/* Links inside modals */
.modal-login-link,
.modal-extra-links {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
    color: #555;
}
.modal-login-link a,
.modal-extra-links a {
    color: #4CAF50; /* Use root variable if defined: var(--primary); */
    font-weight: 600;
    text-decoration: none;
}
.modal-login-link a:hover,
.modal-extra-links a:hover {
    text-decoration: underline;
}

/* Error and Status Messages */
.error-message {
    color: #dc3545; /* Red for errors */
    font-size: 0.9em;
    min-height: 1.2em; /* Prevent layout shifts */
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: center;
}

.status-message {
    font-size: 0.9em;
    min-height: 1.2em;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}
.status-message.success {
    color: #28a745; /* Green for success */
}
.status-message.error {
     color: #dc3545; /* Red for errors */
}
.status-message.info {
     color: #17a2b8; /* Blue for info */
}

/* Button Styles (ensure consistency or use base styles) */
/* These should ideally inherit from your main style.css .btn classes */
.modal-content .btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 30px; /* Example: var(--button-border-radius); */
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: all 0.3s;
    text-align: center;
    font-size: 1rem; /* Example: var(--base-font-size); */
    text-decoration: none;
    line-height: normal;
}
.modal-content .btn:hover {
     text-decoration: none;
     opacity: 0.9;
}
.modal-content .btn-primary {
    background: #4CAF50; /* Example: var(--primary); */
    color: #fff; /* Example: var(--white); */
}
.modal-content .btn-outline {
    background: transparent;
    border: 2px solid #4CAF50; /* Example: var(--primary); */
    color: #4CAF50; /* Example: var(--primary); */
}
.modal-content .btn-outline:hover {
    background: #4CAF50; /* Example: var(--primary); */
    color: #fff; /* Example: var(--white); */
}
.modal-content .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* Small screen adjustments */
@media (max-width: 480px) {
    .modal-content {
        padding: 25px 20px;
    }
     .modal-choice-buttons {
        flex-direction: column; /* Stack choice buttons */
    }
    #modal-choice-step h2,
    #modal-form-step h2,
    .auth-modal h2 {
        font-size: 1.4rem;
    }
}

/* auth.css */

/* Styles for the overlay of the NEW signup modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none; /* Initially hidden */
    justify-content: center;
    align-items: center;
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    padding: 15px;
}
.modal-overlay.active {
    display: flex; /* Show using flex */
    opacity: 1;
}

/* Styles for the content box within ANY modal */
.modal-content {
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 8px;
    position: relative; /* For close button positioning */
    max-width: 450px;
    width: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    /* Scale transition applied to the content within the new modal overlay */
    transition: transform 0.3s ease-in-out;
    transform: scale(1); /* Default state */
}
.modal-overlay.active .modal-content {
     /* Optional: scale effect if desired only on new modal */
     /* transform: scale(1); */
}
/* Ensure the new modal's content doesn't get unwanted transform from below */
#signup-modal-new .modal-content {
     transform: scale(0.95); /* Start slightly smaller */
}
#signup-modal-new.active .modal-content {
      transform: scale(1); /* Scale up */
}


/* --- Styles for the OLDER modals (#login-modal, #forgot-password-modal) --- */
/* Make THEM act like the overlay */
#login-modal,
#forgot-password-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* ADD Overlay background */
    display: none; /* JS will toggle this to flex */
    justify-content: center; /* ADD flex centering */
    align-items: center; /* ADD flex centering */
    z-index: 1001; /* ADD z-index */
    padding: 15px; /* ADD padding */
    /* Optional: Add transitions if you want fade */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* When JS sets display:flex, also handle opacity */
#login-modal[style*="display: flex"],
#forgot-password-modal[style*="display: flex"] {
    opacity: 1;
}

/* Ensure the direct child .modal-content within the old modals doesn't break */
#login-modal > .modal-content,
#forgot-password-modal > .modal-content {
     /* Styles are already defined in .modal-content above */
     /* Make sure no conflicting position: absolute is here */
     position: relative; /* Should be default */
     /* Ensure scaling doesn't apply here unless intended */
     transform: none; /* Override any inherited transform */
}


/* Common styles (Close button, forms, etc. - Keep as they were) */
.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
}
.modal-close:hover {
    color: #333;
}

/* ... (keep all your other form-group, button, error message styles) ... */