/* ADD THIS AT THE VERY TOP OF LOGIN.CSS */
* {
    box-sizing: border-box;
}
/* IMPORTS & VARS */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Poppins:wght@300;400;500;600&display=swap');

:root {
    --primary: #0D261F;
    --gold: #C5A059;
    --error: #d93025;
}

body {
    background: #f0f2f5;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow-x: hidden;
}

.back-link {
    position: absolute;
    top: 20px;
    left: 20px;
    text-decoration: none;
    color: var(--primary);
    font-weight: 600;
    z-index: 100;
}

/* MAIN CARD */
.container {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    width: 900px;
    max-width: 100%;
    min-height: 600px; /* Taller for the signup form */
}

/* FORMS */
.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
}

.sign-in-container { left: 0; width: 50%; z-index: 2; }
.sign-up-container { left: 0; width: 50%; opacity: 0; z-index: 1; }

/* SLIDING LOGIC */
.container.right-panel-active .sign-in-container { transform: translateX(100%); }
.container.right-panel-active .sign-up-container { 
    transform: translateX(100%); 
    opacity: 1; 
    z-index: 5; 
    animation: show 0.6s; 
}

@keyframes show {
    0%, 49.99% { opacity: 0; z-index: 1; }
    50%, 100% { opacity: 1; z-index: 5; }
}

form {
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 40px;
    text-align: center;
}

/* TYPOGRAPHY */
.auth-title { font-family: 'Playfair Display', serif; color: var(--primary); margin-bottom: 5px; }
.auth-span { font-size: 12px; color: #888; margin-bottom: 20px; }

/* INPUT STYLES & VALIDATION */
.signup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two Columns */
    gap: 15px;
    width: 100%;
    margin-bottom: 15px;
}

.input-group {
    position: relative;
    text-align: left;
}

.full-width { grid-column: span 2; } /* Forces input to take both columns */

input {
    background: #f4f8f7;
    border: 1px solid #eee;
    padding: 12px 15px;
    width: 100%;
    outline: none;
    border-radius: 4px;
    font-size: 13px;
    box-sizing: border-box; /* Critical for grid */
}

/* Validation Colors */
input.error { border-color: var(--error); background: #fff0f0; }
input.success { border-color: #2ecc71; }

.error-msg {
    color: var(--error);
    font-size: 10px;
    position: absolute;
    bottom: -16px;
    left: 0;
    visibility: hidden;
}
.input-group.invalid .error-msg { visibility: visible; }

/* BUTTONS */
.action-btn {
    border-radius: 20px;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 12px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: 0.3s;
    cursor: pointer;
    margin-top: 10px;
}
.action-btn:hover { background: var(--gold); border-color: var(--gold); }

.forgot-pass { color: #333; font-size: 12px; text-decoration: none; margin: 15px 0; }

/* CHECKBOX */
.terms-container {
    width: 100%;
    text-align: left;
    margin-bottom: 15px;
    position: relative;
}
.label-text { font-size: 12px; color: #555; }
.label-text a { color: var(--gold); }

/* OVERLAY (The Sliding Panel) */
.overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}
.container.right-panel-active .overlay-container { transform: translateX(-100%); }

.overlay {
    background: linear-gradient(to right, #0D261F, #1E4036);
    color: #FFFFFF;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay { transform: translateX(50%); }

/* --- 1. GLOBAL SAFETY FIX (Add at very top of file) --- */
* {
    box-sizing: border-box;
}

/* --- 2. LOGO STYLING --- */
.overlay-logo {
    max-width: 100px; /* Limits width so it fits perfectly */
    height: auto;
    margin-bottom: 25px; /* Spacing between logo and text */
    display: block;
}

/* --- 3. DESKTOP OVERLAY PANEL FIX --- */
.overlay-panel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    
    /* UPDATE: Better padding so text doesn't hit edges */
    padding: 0 50px; 
    
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

/* Ensure text wraps correctly inside the panel */
.overlay-panel h1 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.overlay-panel p {
    font-size: 14px;
    line-height: 1.6;
    margin: 10px 0 30px 0;
    max-width: 100%; /* Ensure text stays inside */
}

.overlay-left { transform: translateX(-20%); }
.container.right-panel-active .overlay-left { transform: translateX(0); }
.overlay-right { right: 0; transform: translateX(0); }
.container.right-panel-active .overlay-right { transform: translateX(20%); }

.ghost-btn {
    background: transparent;
    border-color: #fff;
    border-radius: 20px;
    border: 1px solid #fff;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 12px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 15px;
}

.mobile-switch { display: none; } /* Hidden on Desktop */

/* ========================================= */
/* --- MOBILE REPAIRS (Replace your bottom block) --- */
/* ========================================= */
@media (max-width: 768px) {
    
    /* 1. ENABLE SCROLLING ON EVERYTHING */
    html, body {
        overflow-y: auto !important; /* Force scroll ability */
        height: auto !important;
        min-height: 100vh;
    }

    /* 2. FIX BACK LINK POSITION */
    .back-link {
        position: absolute;
        top: 20px; 
        left: 20px;
        z-index: 200; /* Stays on top of everything */
    }

    /* 3. CONTAINER MUST GROW */
    .container {
        width: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        
        /* Allow container to grow tall */
        min-height: 100vh; 
        height: auto; 
        
        /* Space at bottom for scrolling */
        padding-bottom: 80px; 
        overflow: visible; 
    }

    /* 4. PUSH FORM DOWN (The Anti-Overlap Fix) */
    .form-container {
        position: relative; 
        width: 100%;
        height: auto;
        
        /* INCREASED: Pushes form down 130px to clear the Back Link */
        padding-top: 130px; 
        padding-bottom: 40px;
        transition: none;
    }

    /* 5. HIDE DESKTOP SLIDER */
    .overlay-container {
        display: none;
    }

    /* 6. MOBILE TOGGLE LOGIC */
    .sign-up-container { display: none; }
    .sign-in-container { display: flex; }

    .mobile-active { display: flex !important; animation: fadeIn 0.5s forwards; }
    .mobile-hidden { display: none !important; }

    /* 7. SWITCH LINK STYLING */
    .mobile-switch {
        display: block;
        margin-top: 20px;
        font-size: 13px;
        padding-bottom: 20px;
    }
    .mobile-switch a {
        color: var(--gold);
        font-weight: 700;
        text-decoration: none;
    }

    /* 8. STACK INPUTS */
    .signup-grid { grid-template-columns: 1fr; }
    .full-width { grid-column: span 1; }
}