@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --primary: #6366F1;
    --secondary: #A5B4FC;
    --bg: #FFFFFF;
    --text: #0F172A;
    --surface: #F8FAFC;
    --notify: #EF4444;
    --gradient: linear-gradient(135deg, #6366F1 0%, #A5B4FC 100%);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Updated Body: Changed from strict flex centering to a column layout */
body {
    background: #eef2f6;
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* =========================================
   1. HEADER STYLES (User Provided)
========================================= */
.header-wrapper {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    height: 90px;
    display: flex;
    align-items: center;
    padding: 0 6%;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
    justify-content: space-between;
}

.logo {
    font-weight: 800;
    font-size: 1.8rem;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 35px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    font-size: 1rem;
    position: relative;
    transition: 0.3s;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--primary);
    transition: 0.3s;
}

.nav-links a:hover::after { width: 100%; }
.nav-links a:hover { color: var(--primary); }

.header-right {
    display: flex;
    align-items: center;
    gap: 25px;
}

.search-box {
    position: relative;
    width: 250px;
}

.search-box input {
    width: 100%;
    padding: 12px 20px 12px 45px;
    border-radius: 15px;
    border: 1px solid #E2E8F0;
    background: var(--surface);
    outline: none;
    transition: 0.3s;
}

.search-box input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.search-box i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
}

.icon-container {
    position: relative;
    font-size: 1.6rem;
    cursor: pointer;
    transition: 0.3s;
    color: var(--text);
}

.icon-container:hover {
    color: var(--primary);
    transform: translateY(-2px);
}

.cart-badge::after {
    content: '3';
    position: absolute;
    top: -5px;
    right: -8px;
    background: var(--notify);
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    border: 2px solid white;
}

/* =========================================
   2. LOGIN PAGE LAYOUT & ANIMATIONS
========================================= */

/* New Wrapper to handle centering under the header */
.login-wrapper {
    flex: 1; /* Takes up remaining height below header */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 100px 20px 0px; /* Breathing room */
}

/* Background Bubbles fixed to wrapper */
.bg-bubbles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    z-index: -1;
    overflow: hidden;
    filter: blur(60px);
}

.bubble {
    position: absolute;
    border-radius: 50%;
    opacity: 0.6;
    animation: float 8s infinite ease-in-out;
}

.b1 {
    width: 300px; height: 300px;
    background: var(--primary);
    top: -50px; left: -50px;
}
.b2 {
    width: 400px; height: 400px;
    background: var(--secondary);
    bottom: -100px; right: -50px;
    animation-delay: -2s;
}
.b3 {
    width: 200px; height: 200px;
    background: var(--notify);
    bottom: 20%; left: 20%;
    opacity: 0.2;
    animation-delay: -4s;
}

@keyframes float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.05); }
}

h2 { font-weight: 700; margin-bottom: 10px; color: var(--text); }
p { font-size: 14px; font-weight: 300; line-height: 20px; letter-spacing: 0.5px; margin: 20px 0 30px; }
span { font-size: 12px; color: #64748b; margin-bottom: 15px; }

/* Main Login Container */
.container {
    background-color: var(--bg);
    border-radius: 30px;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.1);
    position: relative;
    overflow: hidden;
    width: 900px;
    max-width: 100%;
    min-height: 600px;
}

.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; }
.container.right-panel-active .sign-in-container { transform: translateX(100%); }

.sign-up-container { left: 0; width: 50%; opacity: 0; z-index: 1; }
.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-color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 50px;
    height: 100%;
    text-align: center;
}

/* Social Buttons */
.social-container { margin: 20px 0; }
.social-container a {
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    height: 40px;
    width: 40px;
    color: var(--text);
    text-decoration: none;
    transition: 0.3s;
}
.social-container a:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
}

/* Inputs */
.input-group { position: relative; width: 100%; margin-bottom: 15px; }

.icon-bubble {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background: var(--surface);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #64748b;
    transition: 0.3s ease;
}

input {
    background-color: var(--surface);
    border: none;
    padding: 15px 15px 15px 55px;
    border-radius: 20px;
    width: 100%;
    outline: none;
    font-family: inherit;
    transition: 0.3s;
    border: 2px solid transparent;
}

input:focus {
    border-color: var(--secondary);
    background: #fff;
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.1);
}

input:focus + .icon-bubble, .input-group:focus-within .icon-bubble {
    background: var(--gradient);
    color: #fff;
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
}

.forgot-pass {
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
    margin: 15px 0;
    transition: 0.3s;
}
.forgot-pass:hover { color: var(--primary); }

/* Buttons */
button {
    border-radius: 25px;
    border: none;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: bold;
    padding: 15px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
    cursor: pointer;
}
button:active { transform: scale(0.95); }
button:focus { outline: none; }

.btn-primary {
    background: var(--gradient);
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
    margin-top: 10px;
}

button.btn-ghost {
    background-color: transparent;
    border-color: #FFFFFF;
    border: 2px solid #fff;
}

/* Overlay Panels */
.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: var(--gradient);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    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%); }

.overlay-panel {
    position: absolute;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    padding: 0 40px; text-align: center; top: 0; height: 100%; width: 50%;
    transform: translateX(0); transition: transform 0.6s ease-in-out;
}
.overlay-panel h2 { color: #fff; }

.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%); }

.mobile-toggle { display: none; margin-top: 20px; font-size: 14px; }
.mobile-toggle span { color: var(--primary); font-weight: bold; cursor: pointer; font-size: 14px; }

/* =========================================
   3. BOTTOM NAV (Mobile)
========================================= */
.bottom-nav {
    position: fixed;
    bottom: 0px; left: 50%;
    transform: translateX(-50%);
    width: 92%; max-width: 400px;
    background: #111827;
    height: 70px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    display: none;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    z-index: 1001;
}

.nav-btn {
    text-decoration: none; color: #64748B;
    display: flex; flex-direction: column; align-items: center;
    font-size: 0.7rem; font-weight: 700; transition: 0.3s;
}
.nav-btn i { font-size: 1.5rem; margin-bottom: 2px; }
.nav-btn.active { color: var(--secondary); }

.home-main {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    width: 65px; height: 65px; border-radius: 50%;
    margin-top: -45px; justify-content: center;
    color: white !important;
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);
    border: 5px solid var(--bg);
}

/* =========================================
   4. RESPONSIVE QUERIES
========================================= */
.mobile-only { display: none; }

@media (max-width: 1024px) {
    .nav-links, .search-box, .header-right { display: none; }
    .mobile-only { display: flex; }
    .header-wrapper { height: 70px; padding: 0 20px; }
    .mobile-header { width: 100%; display: flex; justify-content: space-between; align-items: center; }
    .bottom-nav { display: flex; }
    .logo { position: absolute; left: 50%; transform: translateX(-50%); }
}

@media (max-width: 768px) {
    /* Prevent bottom nav from covering the login form */
    .login-wrapper { padding-bottom: 100px !important; padding-top: 100px !important;} 
    
    .container { width: 90%; min-height: 550px; }
    .overlay-container { display: none; }
    
    .sign-in-container, .sign-up-container { width: 100%; left: 0; transition: 0.4s ease-in-out; }
    
    .sign-up-container { transform: translateY(100%); opacity: 0; z-index: 1; }
    .sign-in-container { transform: translateY(0); opacity: 1; z-index: 5; }
    
    .container.right-panel-active .sign-in-container { transform: translateY(-100%); opacity: 0; }
    .container.right-panel-active .sign-up-container { transform: translateY(0); opacity: 1; z-index: 5; }
    
    .mobile-toggle { display: block; }
}

.bottom-nav {
    padding: 15px 10px 0px;
}

.alert {
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 15px;
    font-size: 13px;
    text-align: center;
    backdrop-filter: blur(10px);
    animation: slideDown .4s ease;
    z-index: 999;
    margin-top: 80px;
    margin-bottom: -70px;
}

/* Error */
.alert.error {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Success */
.alert.success {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* OTP */

/* --- OTP Specific Styles --- */
.otp-wrapper {
    width: 500px; /* Slimmer than the login box for a focused look */
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.single-form {
    width: 100%;
    position: relative;
    padding: 20px;
}

.main-icon {
    position: relative !important;
    transform: none !important;
    left: 0 !important;
    margin: 0 auto 20px auto;
    width: 70px !important;
    height: 70px !important;
    font-size: 2rem;
    background: var(--gradient) !important;
    color: white !important;
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
}

.otp-input-group {
    display: flex;
    gap: 12px;
    margin: 20px 0 30px 0;
    justify-content: center;
}

.otp-field {
    width: 50px;
    height: 60px;
    padding: 0 !important; /* Reset previous input padding */
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 15px;
    background: var(--surface);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    color: var(--primary);
}

.otp-field:focus {
    border-color: var(--primary);
    background: #fff;
    transform: scale(1.08); /* Bubbly pop effect */
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.1);
}

.resend-container {
    margin-top: 25px;
}

.resend-container p {
    margin-bottom: 5px;
}

.resend-link {
    background: none;
    border: none;
    color: var(--primary);
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    text-transform: none;
    padding: 0;
    font-size: 14px;
}

.resend-link:disabled {
    color: #94a3b8;
    cursor: not-allowed;
}

/* Mobile tweak for OTP */
@media (max-width: 480px) {
    .otp-field {
        width: 40px;
        height: 50px;
        font-size: 1.2rem;
    }
    .otp-input-group {
        gap: 8px;
    }
}

/* 1. Ensure the wrapper takes full width and fills the remaining height */
.login-wrapper {
    flex: 1; 
    width: 100%; /* Add this to ensure it spans the whole screen width */
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    position: relative;
    padding: 120px 20px 70px;
    z-index: 1;
}

/* 2. Specific fix for the OTP Container */
.otp-wrapper {
    /* Remove absolute positioning if it was inherited */
    position: relative; 
    transform: none;
    margin: 100px auto 60px;
    
    background-color: var(--bg);
    border-radius: 30px;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.1);
    width: 100%;
    max-width: 450px; /* Adjust this for the desired card width */
    min-height: auto; /* Let content dictate height or set a fixed one */
    overflow: hidden;
}

/* 3. Ensure the form inside the OTP wrapper doesn't float left */
.otp-wrapper .single-form {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.otp-wrapper form {
    width: 100%;
    padding: 40px; /* Give it some nice internal breathing room */
}
.alert {
    width: 100%;
    padding: 12px 15px;
    border-radius: 12px;
    font-size: 14px;
    margin-top: 12px;
    text-align: center;
    font-weight: 600;
}

.alert.error {
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444;
}

.alert.success {
    background: rgba(34, 197, 94, 0.12);
    color: #22C55E;
}

.attempt-warning {
    margin-top: 10px;
    color: #F59E0B;
    font-size: 13px;
    text-align: center;
    font-weight: 600;
}

/* =========================================
   FORGOT PASSWORD MODAL
========================================= */

.forgot-modal{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.65);

    backdrop-filter:blur(10px);

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

    z-index:9999;

}

.forgot-modal.active{

    display:flex;

}

.forgot-modal-box{

    width:100%;

    max-width:460px;

    background:#fff;

    border-radius:30px;

    padding:40px 35px;

    position:relative;

    text-align:center;

    animation:popupScale .35s ease;

}

@keyframes popupScale{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.forgot-close{

    position:absolute;

    top:18px;

    right:18px;

    width:40px;

    height:40px;

    border:none;

    background:#f8fafc;

    border-radius:50%;

    cursor:pointer;

    font-size:1.2rem;

}

.forgot-icon{

    width:80px;

    height:80px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#eef2ff;

    display:flex;

    align-items:center;

    justify-content:center;

}

.forgot-icon i{

    font-size:2rem;

    color:#6366F1;

}

.forgot-modal-box h2{

    font-size:2rem;

    margin-bottom:10px;

    color:#0F172A;

}

.forgot-modal-box p{

    color:#64748B;

    line-height:1.7;

    margin-bottom:25px;

}

.forgot-input{

    position:relative;

    margin-bottom:20px;

}

.forgot-input i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#94A3B8;

}

.forgot-input input{

    width:100%;

    height:58px;

    border:1px solid #E2E8F0;

    border-radius:16px;

    padding-left:50px;

    outline:none;

    font-size:.95rem;

}

.forgot-input input:focus{

    border-color:#6366F1;

}

.forgot-submit{

    width:100%;

    height:58px;

    border:none;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        #6366F1,
        #818CF8
    );

    color:#fff;

    font-size:1rem;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.forgot-submit:hover{

    transform:translateY(-2px);

}

@media(max-width:576px){

    .forgot-modal-box{

        padding:30px 20px;

    }

    .forgot-modal-box h2{

        font-size:1.7rem;

    }

}