/* ==========================
   LIGHT THEME
========================== */

:root{

    --background:#fff5f7;
    --surface:#f8f8f8;
    --card:#ffffff;

    --text:#222222;
    --text-light:#666666;

    --primary:#ff4fa3;
    --primary-hover:#ff7ac6;

    --border:#dddddd;

    --shadow:0 10px 20px rgba(0,0,0,.08);

}


/* ==========================
   DARK THEME
========================== */

body.dark{

    --background:#121212;
    --surface:#1b1b1b;
    --card:#242424;

    --text:#ffffff;
    --text-light:#bbbbbb;

    --primary:#ff69b4;
    --primary-hover:#ff87c8;

    --border:#444;

    --shadow:0 10px 25px rgba(0,0,0,.45);

}



*{

    box-sizing:border-box;

}



body{

    font-family:Arial,sans-serif;

    background:var(--background);

    margin:0;

    color:var(--text);

    animation:pageLoad .6s ease;

    transition:

    background-color .3s,

    color .3s;

}



/* ================= NAVBAR ================= */


nav{

    position:sticky;

    top:0;

    z-index:1000;


    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:18px 40px;


    background:rgba(255,79,163,.95);

    backdrop-filter:blur(10px);


    box-shadow:0 5px 25px rgba(0,0,0,.12);


    overflow:hidden;

}




nav h1{

    margin:0;

    color:white;


    font-size:28px;

    font-weight:800;

    letter-spacing:1px;


    cursor:pointer;


    transition:.3s;

}



nav h1:hover{

    transform:scale(1.05) rotate(-2deg);

}



.nav-links{

    display:flex;

    align-items:center;

    gap:12px;

}



nav a{

    text-decoration:none;


    color:white;


    padding:10px 18px;


    border-radius:999px;


    font-weight:600;


    transition:.25s;

}



nav a:hover{

    background:rgba(255,255,255,.2);

    transform:translateY(-2px);

}




.active-nav{

    background:white;

    color:#ff4fa3 !important;

}



.back-btn{

    background:rgba(255,255,255,.15);

}



.cart-btn{

    background:white;

    color:#ff4fa3 !important;


    box-shadow:0 6px 20px rgba(255,255,255,.25);

}
/* ================= HERO ================= */

header{

    height:80vh;

    background:
    linear-gradient(
    135deg,
    #ff4fa3,
    #ff9d00,
    #00c2ff
    );

    background-size:300% 300%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:white;

    text-align:center;

    padding:20px;

    animation:heroGradient 10s infinite;

}



header h1,
header h2{

    animation:slideDown .8s;

}



header p{

    animation:slideUp .8s;

}




.btn{

    background:white;

    color:var(--primary);

    padding:14px 28px;

    border-radius:50px;

    text-decoration:none;

    font-weight:bold;

    transition:.2s;

}



.btn:hover{

    transform:translateY(-3px) scale(1.05);

}





/* ================= LAYOUT ================= */


.container{

    width:90%;

    max-width:1100px;

    margin:auto;

}



.section{

    padding:60px 0;

}




.section-title{

    text-align:center;

    font-size:28px;

    color:var(--text);

}



.section-sub{

    text-align:center;

    opacity:.7;

    color:var(--text);

}





/* ================= CARDS ================= */



.grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));


    gap:20px;


    margin-top:30px;

}





.card,
.product{


    background:var(--card);


    color:var(--text);


    padding:20px;


    border-radius:18px;


    box-shadow:var(--shadow);


    border:1px solid var(--border);


    transition:.25s;

}





.card:hover,
.product:hover{


    transform:translateY(-8px) scale(1.02);


    box-shadow:

    0 20px 35px rgba(0,0,0,.15);


}





/* ================= BUTTONS ================= */



button{

    font-family:inherit;

    border:none;

    cursor:pointer;

    font-weight:600;

}




.small-btn{


    padding:10px 16px;


    border-radius:999px;


    background:

    linear-gradient(

    135deg,

    var(--primary),

    var(--primary-hover)

    );


    color:white;


    transition:.2s;


}




.small-btn:hover{


    transform:translateY(-3px);


}




.qty-btn{


    width:36px;


    height:36px;


    border-radius:50%;


    background:var(--primary);


    color:white;


    font-size:18px;


}





.quantity-controls{


    display:flex;


    justify-content:center;


    align-items:center;


    gap:10px;


    margin-top:12px;


}





/* ================= INPUTS ================= */



input,
textarea{


    width:100%;


    padding:12px;


    margin:8px 0 15px;


    border-radius:10px;


    border:1px solid var(--border);


    background:var(--card);


    color:var(--text);


    outline:none;


}





input::placeholder,
textarea::placeholder{

    color:var(--text-light);

}





input:focus,
textarea:focus{


    border-color:var(--primary);


    box-shadow:

    0 0 0 3px rgba(255,79,163,.15);


}





select{


    background:var(--card);


    color:var(--text);


    border:1px solid var(--border);


    padding:12px;


    border-radius:10px;


}
/* ================= CHECKOUT ================= */


.checkout-layout{

    display:grid;

    grid-template-columns:1.4fr 1fr;

    gap:25px;

    margin-top:30px;

}



.pay-btn{


    width:100%;


    padding:14px;


    background:var(--primary);


    color:white;


    border-radius:12px;


}





/* ================= TOAST ================= */


#toast {


    position: fixed;


    bottom: 35px;


    left: 50%;


    transform:

    translateX(-50%)

    translateY(30px);



    background:

    linear-gradient(

    135deg,

    #ff4fa3,

    #ff9d00

    );



    color:white;



    padding:16px 30px;



    border-radius:50px;



    font-size:16px;



    font-weight:700;



    letter-spacing:.5px;



    box-shadow:

    0 10px 30px rgba(255,79,163,.35);



    opacity:0;



    pointer-events:none;



    transition:.35s ease;



    z-index:9999;



    border:

    2px solid rgba(255,255,255,.5);


}





#toast.show {


    opacity:1;


    transform:


    translateX(-50%)


    translateY(0);



}





/* ================= FOOTER ================= */


footer{


    background:#111;


    color:white;


    text-align:center;


    padding:40px 20px;


    margin-top:60px;


}





/* ================= DARK MODE FIXES ================= */



body.dark footer{


    background:#050505;


}



body.dark .section-sub{


    color:var(--text-light);


}



body.dark .card p,
body.dark .product p{


    color:var(--text-light);


}





/* ================= ANIMATIONS ================= */



@keyframes pageLoad{


    from{


        opacity:0;


        transform:translateY(15px);


    }


    to{


        opacity:1;


        transform:translateY(0);


    }


}




@keyframes heroGradient{


    0%{


        background-position:0% 50%;


    }



    50%{


        background-position:100% 50%;


    }



    100%{


        background-position:0% 50%;


    }


}




@keyframes slideDown{


    from{


        opacity:0;


        transform:translateY(-20px);


    }



    to{


        opacity:1;


        transform:translateY(0);


    }


}





@keyframes slideUp{


    from{


        opacity:0;


        transform:translateY(20px);


    }



    to{


        opacity:1;


        transform:translateY(0);


    }


}





/* ================= GLOBAL TRANSITIONS ================= */


*{


    transition:


    background-color .3s,


    color .3s,


    border-color .3s,


    box-shadow .3s;


}





/* ================= MOBILE ================= */


@media(max-width:900px){


    nav{


        flex-direction:column;


        gap:15px;


        padding:20px;


    }




    .nav-links{


        flex-wrap:wrap;


        justify-content:center;


    }


}





@media(max-width:768px){



    .checkout-layout{


        grid-template-columns:1fr;


    }





    header{


        height:auto;


        padding:80px 20px;


    }





    .qty-btn{


        width:44px;


        height:44px;


    }


}


.product-image{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:15px;

    margin-bottom:15px;

}


.no-image{

    height:220px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#eee;

    border-radius:15px;

    font-size:40px;

}

/* ==========================
   PRODUCT IMAGES
========================== */


.product-image{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:18px;

    margin-bottom:15px;

}



.no-image{

    width:100%;

    height:220px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f8f8f8;

    border-radius:18px;

    font-size:50px;

    margin-bottom:15px;

}