:root {
    --primary-color: #FFC107;
    /* Taxi Yellow from mockup */
    --primary-hover: #FFD54F;
    --text-color: #ffffff;
    /* Revert to white for global (Landing page) */
    --form-text-color: #333333;
    /* Dark text for the white form card */
    --bg-overlay: rgba(0, 0, 0, 0.4);
    --btn-border-radius: 12px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #1a1a1a;
    /* Use new background image with overlay for readability */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)),
        url('../images/taxi_background_v2.png') no-repeat left center fixed;
    background-size: cover;
    color: var(--text-color);
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


.container {
    width: 100%;
    max-width: 1200px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    /* Mobile first: Column */
    align-items: center;
    justify-content: center;
    /* Center content vertically on mobile */
    height: 100%;
    gap: 2rem;
    /* Add gap between brand and form on mobile */
}

/* Brand Section - Hidden on Login for this design or minimized? 
   The mockup keeps the focus on the form. We'll hide the big brand section 
   and put the logo inside the form card if needed, or keep it minimal.
   For now, we'll keep it but adapt it. */
/* Brand Section - Mobile: Centered, Top */
.brand-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 auto;
    /* Don't take extra space on mobile */
    margin-bottom: 0;
}

.logo-icon {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    border: 2px solid rgba(255, 193, 7, 0.3);
    padding: 1.5rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
}

.brand-title {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 0.5rem;
}

.brand-slogan {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

/* Actions Area */
.actions-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.btn {
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 12px;
    /* Match mockup input radius */
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background-color: var(--primary-color);
    color: #000;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Divider */
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #999;
    font-size: 0.8rem;
    width: 100%;
    margin: 2rem 0;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #eee;
}

.divider span {
    padding: 0 10px;
    text-transform: lowercase;
}

/* Social Login */
.social-login {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.social-btn {
    flex: 1;
    padding: 0.8rem;
    border-radius: 12px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    border: 1px solid #e0e0e0;
    color: #333;
    font-weight: 500;
    font-size: 0.9rem;
    gap: 10px;
}

.social-btn:hover {
    background-color: #f9f9f9;
}

.social-btn img {
    width: 20px;
    height: 20px;
}

/* Footer Legals */
.legal-footer {
    display: none;
    /* Hide for clean look or move inside form */
}

.legal-footer a {
    color: var(--primary-color);
    text-decoration: none;
}

.legal-footer a:hover {
    text-decoration: underline;
}

/* Responsive adjustments for Tablet/Desktop */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
        /* Desktop: Row */
        justify-content: flex-end;
        align-items: center;
        gap: 3rem;
    }

    .brand-section {
        flex: 1;
        /* Take remaining space */
        align-items: flex-start;
        /* Left align on desktop if needed, or keep center */
        text-align: left;
        margin-bottom: 0;
    }

    /* If you want left alignment for desktop brand */
    .brand-section {
        align-items: flex-start;
        text-align: left;
    }

    .brand-section {
        flex: 0 1 auto;
    }

    .brand-title {
        font-size: 3.5rem;
    }

    .actions-section {
        max-width: 400px;
    }
}

/* Mobile Background Fix */
@media (max-width: 768px) {
    body {
        /* On mobile, center the background so the taxi is likely visible */
        background-position: center center;
        background-attachment: scroll;
        /* Fix for mobile browser url bar jump */
    }
}

/* --- Form Styles for Login/Register Pages --- */
.form-section {
    width: 100%;
    max-width: 450px;
    background: #ffffff;
    /* Solid White */
    color: var(--form-text-color);
    /* scoped dark text */
    padding: 3rem 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.5s ease-out;
    margin-right: 5%;
    /* Spacing from right edge */
}

.form-header {
    text-align: left;
    /* Left align title as per mockup */
    margin-bottom: 2rem;
}

.form-title {
    font-size: 2rem;
    font-weight: 800;
    color: #000;
    margin-bottom: 0.5rem;
}

.form-header p {
    color: #666 !important;
    font-size: 0.95rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    color: #444;
    font-size: 0.9rem;
    font-weight: 600;
    padding-left: 2px;
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: var(--btn-border-radius);
    color: #333;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.15);
}

.form-footer {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
}

.auth-link {
    color: #000;
    text-decoration: none;
    font-weight: 700;
}

.auth-link:hover {
    text-decoration: underline;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Password Toggle Style --- */
.password-wrapper {
    position: relative;
    width: 100%;
}

.password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    cursor: pointer;
    z-index: 100;
    font-size: 1.1rem;
    background: none;
    border: none;
    padding: 5px;
    /* Increase touch target */
    pointer-events: auto;
    /* Ensure clickable */
}

.password-toggle:hover {
    color: var(--primary-color);
}

/* Checkbox / Forgot Password Row */
.form-options {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.form-options a {
    color: #666;
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 500;
}

.form-options a:hover {
    color: var(--primary-color);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    body {
        /* On mobile, align to the left side to show the taxi */
        background-position: 35% center;
        background-attachment: scroll;
        /* Fix for mobile browser url bar jump */
    }

    /* Container adjustments for Mobile */
    .container {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem;
        gap: 2rem;
    }

    .brand-section {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        align-items: center;
    }

    .form-section {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        max-width: 100%;
    }
}