*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

:root{
--primary:#0f172a;
--secondary:#2563eb;
--accent:#38bdf8;
--light:#f8fafc;
--dark:#020617;
}

body{
background:#f8fafc;
overflow-x:hidden;
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:1rem;
background:rgba(255,255,255,.8);
backdrop-filter:blur(12px);
position:sticky;
top:0;
z-index:1000;
}

.logo{
font-size:1.4rem;
font-weight:700;
color:var(--secondary);
}

.nav-icons{
display:flex;
gap:1rem;
font-size:1.2rem;
}

.cart-btn{
position:relative;
cursor:pointer;
margin-left: -8px;
}

#cart-count{
position:absolute;
top:-8px;
right:-10px;
background:red;
color:#fff;
font-size:.7rem;
padding:2px 6px;
border-radius:50%;
}

.hero{
height:80vh;
background:
linear-gradient(
rgba(0,0,0,.5),
rgba(0,0,0,.5)
),
url('https://images.unsplash.com/photo-1483985988355-763728e1935b');
background-size:cover;
background-position:center;
display:flex;
align-items:center;
padding:1.5rem;
}

.hero-content{
color:white;
}

.hero-content h1{
font-size:2.5rem;
margin-bottom:1rem;
}

.hero-content p{
margin-bottom:1.5rem;
line-height:1.7;
}

.hero-btn{
background:var(--secondary);
color:white;
border:none;
padding:1rem 2rem;
border-radius:50px;
cursor:pointer;
font-size:1rem;
}

.section{
padding:4rem 1rem;
}

.section-title{
text-align:center;
font-size:2rem;
font-weight:700;
margin-bottom:2rem;
}

.products{
display:grid;
gap:1.5rem;
}

.product-card{
background:white;
border-radius:20px;
padding:1rem;
box-shadow:0 10px 25px rgba(0,0,0,.08);
position:relative;
transition:.4s;
}

.product-card:hover{
transform:translateY(-8px);
}

.product-card img{
width:100%;
height:220px;
object-fit:cover;
border-radius:15px;
}

.badge{
position:absolute;
top:15px;
left:15px;
background:red;
color:white;
padding:5px 10px;
font-size:.8rem;
border-radius:20px;
}

.product-card h3{
margin-top:1rem;
}

.product-card p{
margin:.7rem 0;
font-weight:600;
color:var(--secondary);
}

.add-cart{
width:100%;
border:none;
background:var(--secondary);
color:white;
padding:.9rem;
border-radius:12px;
cursor:pointer;
}

.floating-cart{
position:fixed;
bottom:20px;
right:20px;
width:60px;
height:60px;
border-radius:50%;
background:var(--secondary);
color:white;
display:flex;
justify-content:center;
align-items:center;
font-size:1.3rem;
box-shadow:0 10px 25px rgba(0,0,0,.2);
cursor:pointer;
}

#floating-count{
position:absolute;
top:-5px;
right:-5px;
background:red;
width:22px;
height:22px;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
font-size:.7rem;
}

@media(min-width:768px){

.products{
grid-template-columns:repeat(2,1fr);
}

.hero-content h1{
font-size:4rem;
}

}

@media(min-width:1024px){

.products{
grid-template-columns:repeat(4,1fr);
}

.navbar{
padding:1rem 5%;
}

.hero{
padding:5%;
}

}


.cart-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
opacity:0;
visibility:hidden;
transition:.4s;
z-index:999;
}

.cart-overlay.show{
opacity:1;
visibility:visible;
}

.cart-drawer{
position:fixed;
top:0;
right:-100%;
width:90%;
max-width:400px;
height:100vh;
background:white;
z-index:1000;
transition:.4s;
display:flex;
flex-direction:column;
}

.cart-drawer.show{
right:0;
}

.cart-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:1rem;
border-bottom:1px solid #ddd;
}

.close-cart{
font-size:2rem;
cursor:pointer;
}

.cart-items{
flex:1;
overflow-y:auto;
padding:1rem;
}

.cart-footer{
padding:1rem;
border-top:1px solid #ddd;
}

.checkout-btn{
width:100%;
padding:1rem;
border:none;
background:var(--secondary);
color:white;
border-radius:12px;
cursor:pointer;
margin-top:1rem;
}

.empty-cart{
text-align:center;
margin-top:3rem;
color:gray;
}



.cart-item{
display:flex;
gap:1rem;
margin-bottom:1rem;
padding-bottom:1rem;
border-bottom:1px solid #eee;
}

.cart-item img{
width:70px;
height:70px;
object-fit:cover;
border-radius:10px;
}

.cart-info{
flex:1;
}

.cart-info h4{
font-size:.9rem;
}

.cart-price{
font-weight:600;
color:var(--secondary);
}

.remove-btn{
background:red;
color:white;
border:none;
padding:.3rem .8rem;
border-radius:6px;
cursor:pointer;
margin-top:.5rem;
}


#search{
padding:.7rem;
border:none;
border-radius:10px;
outline:none;
width:130px;
}



#theme-toggle{
background:none;
border:none;
font-size:1.2rem;
cursor:pointer;
}



.flash-sale{
padding:4rem 1rem;
text-align:center;
background:var(--primary);
color:white;
}

.countdown{
display:flex;
justify-content:center;
gap:1rem;
margin-top:2rem;
}

.countdown div{
background:white;
color:black;
padding:1rem;
border-radius:15px;
min-width:70px;
}

.countdown span{
font-size:1.5rem;
font-weight:700;
display:block;
}



#toast{
position:fixed;
bottom:100px;
left:50%;
transform:translateX(-50%);
background:#22c55e;
color:white;
padding:1rem 2rem;
border-radius:50px;
opacity:0;
pointer-events:none;
transition:.4s;
z-index:9999;
}

#toast.show{
opacity:1;
}


.dark-mode{
background:#020617;
color:white;
}

.dark-mode .product-card{
background:#0f172a;
color:white;
}

.dark-mode .cart-drawer{
background:#0f172a;
color:white;
}

.dark-mode .navbar{
background:rgba(15,23,42,.9);
}
.categories{
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
margin-bottom:20px;
}

.cat{
padding:8px 15px;
border:none;
border-radius:20px;
cursor:pointer;
background:#e2e8f0;
transition:.3s;
}

.cat.active{
background:#2563eb;
color:white;
}

.cat:hover{
transform:scale(1.05);
}
.modal-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
display:none;
z-index:999;
}

.modal{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:white;
padding:20px;
width:90%;
max-width:400px;
border-radius:15px;
display:none;
z-index:1000;
text-align:center;
}

.modal img{
width:100%;
border-radius:10px;
margin-bottom:10px;
}

.close-modal{
position:absolute;
top:10px;
right:15px;
font-size:25px;
cursor:pointer;
}
.product-card{
background: #ffffff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
transition: all 0.35s ease;
position: relative;
cursor: pointer;
display: flex;
flex-direction: column;
}

.product-card:hover{
transform: translateY(-10px);
box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

/* IMAGE */
.product-card img{
width: 100%;
height: 220px;
object-fit: cover;
transition: transform 0.4s ease;
}

.product-card:hover img{
transform: scale(1.05);
}

/* BADGE */
.badge{
position: absolute;
top: 12px;
left: 12px;
background: linear-gradient(135deg, #ef4444, #f97316);
color: white;
padding: 5px 12px;
font-size: 0.75rem;
font-weight: 600;
border-radius: 999px;
z-index: 2;
letter-spacing: 0.5px;
}

/* TEXT AREA */
.product-card h3{
font-size: 1rem;
margin: 12px 12px 5px;
color: #0f172a;
font-weight: 600;
}

.product-card p{
margin: 0 12px 10px;
font-weight: 700;
color: #2563eb;
font-size: 1.05rem;
}

/* BUTTON */
.add-cart{
margin: 10px 12px 15px;
padding: 10px;
border: none;
border-radius: 10px;
background: #2563eb;
color: white;
font-weight: 600;
cursor: pointer;
transition: 0.3s ease;
}

.add-cart:hover{
background: #1d4ed8;
transform: scale(1.02);
}

/* MOBILE RESPONSIVE POLISH */
@media (max-width: 600px){
.product-card img{
height: 180px;
}
}
.checkout-container{
max-width: 500px;
margin: auto;
padding: 20px;
}

.order-summary{
background: #f8fafc;
padding: 15px;
border-radius: 12px;
margin-bottom: 20px;
}

#checkout-form{
display: flex;
flex-direction: column;
gap: 12px;
}

#checkout-form input,
#checkout-form textarea{
padding: 12px;
border: 1px solid #ddd;
border-radius: 10px;
outline: none;
}

#checkout-form button{
padding: 12px;
border: none;
background: #2563eb;
color: white;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
}

#summary-items{
font-size: 0.9rem;
margin-bottom: 10px;
}
.success-container{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:#f8fafc;
}

.success-card{
text-align:center;
background:white;
padding:30px;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
max-width:400px;
width:90%;
}

.checkmark{
font-size:50px;
color:green;
margin-bottom:10px;
}

.success-card button{
margin-top:20px;
padding:10px 20px;
border:none;
background:#2563eb;
color:white;
border-radius:10px;
cursor:pointer;
}
.orders-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.orders-container h1 {
    font-size: 28px;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.order-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 15px;
    transition: 0.3s ease;
}

.order-card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.order-card h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #111;
}

.order-card p {
    font-size: 14px;
    color: #555;
    margin: 4px 0;
}
.order-card button {
    margin-top: 10px;
    padding: 10px 14px;
    border: none;
    background: #111827;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s ease;
}

.order-card button:hover {
    background: #2563eb;
}
.empty-orders {
    text-align: center;
    color: #888;
    padding: 60px 20px;
    font-size: 16px;
    border: 1px dashed #ccc;
    border-radius: 10px;
    background: #fafafa;
}
.order-card::before {
    content: "Order";
    display: inline-block;
    font-size: 12px;
    background: #e0f2fe;
    color: #0369a1;
    padding: 4px 8px;
    border-radius: 5px;
    margin-bottom: 8px;
}
.orders-btn {
    padding: 10px 16px;
    background: #111827;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Hover effect */
.orders-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* Active click effect */
.orders-btn:active {
    transform: scale(0.96);
}

/* LEFT SIDE */
.nav-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* CENTER LOGO */
.logo {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
}

/* RIGHT SIDE */
.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* LINKS */
.navbar a {
    text-decoration: none;
    color: #111827;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    transition: 0.3s ease;
}

.navbar a:hover {
    background: #111827;
    color: white;
}

/* THEME BUTTON */
#theme-toggle {
    padding: 8px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
}
.navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;

    padding:18px 30px;

    background:#050912;

    border-bottom:1px solid rgba(255,255,255,.08);
}

/* BRAND */
.logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
    cursor:pointer;
    line-height:1;
}

.logo-n{
    font-size:4rem;
    font-weight:900;
    color:lawngreen;
}

.logo-ova{
    font-size:2.5rem;
    font-weight:800;
    color:white;
    margin-right:8px;
}

.logo-c{
    font-size:4rem;
    font-weight:900;
    color:#ff1493;
}

.logo-art{
    font-size:2.5rem;
    font-weight:800;
    color:white;
}

.logo-cart {
    color: #111827;
    position: relative;
    margin-left: 2px;
}

.logo-cart::after {
    content: "🛒";
    font-size: 0.9rem;
    margin-left: 4px;
}

/* SEARCH */
.search-container{
    flex:1;

    max-width:650px;

    display:flex;
    align-items:center;
    gap:12px;

    padding:14px 18px;

    background:#111827;

    border:2px solid lawngreen;

    border-radius:18px;
}

.search-container i{
    color:#d1d5db;
    font-size:1.1rem;
}

.search-container input{
    width:100%;

    background:transparent;

    border:none;

    outline:none;

    color:white;

    font-size:1rem;
}

.search-container input::placeholder{
    color:#9ca3af;
}
.nav-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-width:220px;
}

.auth-icon,
.cart-btn,
#theme-toggle{
    background:none;
    border:none;

    color:white;

    font-size:1.7rem;

    cursor:pointer;

    position:relative;
}

#cart-count{
    position:absolute;

    top:-10px;
    right:-12px;

    width:22px;
    height:22px;

    border-radius:50%;

    background:#ff1493;

    color:white;

    font-size:.75rem;

    display:flex;
    justify-content:center;
    align-items:center;

    font-weight:700;
}
.auth-icon:hover,
.wishlist-icon:hover,
.cart-btn:hover,
#theme-toggle:hover{

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

    transform:translateY(-2px);
}
@media(max-width:768px){

    .nav-actions{
        gap:8px;
    }

    .auth-icon,
    .wishlist-icon,
    .cart-btn,
    #theme-toggle{

        width:34px;
        height:34px;
        font-size:1rem;
    }
}
/* divider effect */
.auth-icon,
.wishlist-icon,
.cart-btn,
#theme-toggle{

    width:38px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    transition:.3s;
}




/* ACTIONS */
@media (max-width: 768px) {

    .navbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .search-container {
        order: 3;
        width: 100%;
        margin: 6px 0 0;
    }

    .nav-actions {
        gap: 8px;
    }

    .logo {
        font-size: 16px;
    }
}
@media(max-width:768px){

    .navbar{
        flex-wrap:wrap;
        padding:15px;
        gap:15px;
    }

    .search-container{
        order:3;
        width:100%;
        max-width:none;
    }

    .logo-n,
    .logo-c{
        font-size:2.8rem;
    }

    .logo-ova,
    .logo-art{
        font-size:1.8rem;
    }

    .nav-actions{
        gap:18px;
    }

    .auth-icon,
    .cart-btn,
    #theme-toggle{
        font-size:1.3rem;
    }
}

/* LEFT */
.nav-left a {
    text-decoration: none;
    color: #111827;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    transition: 0.3s;
}

.nav-left a:hover {
    background: #111827;
    color: #fff;
}



/* RIGHT SIDE GROUP */
.nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

/* SEARCH BOX */
.search-box input {
    padding: 8px 12px;
    border: 1px solid blue;
    border-radius: 20px;
    outline: none;
    width: 130px;
    transition: 0.3s;
}

.search-box input:focus {
    width: 220px;
    border-color: #2563eb;
}

/* CART */
.cart-btn,
#theme-toggle {
    padding: 6px;
    margin: 0;
    flex-shrink: 0;
    margin-left: 5px;
}


.cart-btn span {
    position: absolute;
    top: -6px;
    right: -6px;
    background: red;
    color: white;
    font-size: 10px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* THEME BUTTON */
#theme-toggle {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
}
.auth-box {
    width: 300px;
    margin: 50px auto;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.auth-box input {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.auth-box button {
    width: 100%;
    padding: 10px;
    background: #111827;
    color: white;
    border: none;
    border-radius: 6px;
}
.auth-icon {
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: 0.3s;
}

.auth-icon:hover {
    background: #111827;
    color: #fff;
}
.wishlist-btn{
    position:absolute;
    top:10px;
    right:10px;

    width:40px;
    height:40px;

    border-radius:50%;

    background:white;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    font-size:20px;

    box-shadow:0 4px 10px rgba(0,0,0,.15);

    z-index:10;
}

.wishlist-btn.active{
    color:#ff1493;
}
/* =========================
   WISHLIST ICON
========================= */

.wishlist-icon{
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-size: 1.4rem;

    color: white;

    transition: 0.3s;
    margin-right: 30px;
}

.wishlist-icon:hover{
    color: #ff1493;
    transform: scale(1.08);
}

#wishlist-count{
    position: absolute;

    top: -8px;
    right: -10px;

    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    background: #ff1493;

    color: white;

    border-radius: 50%;

    font-size: 11px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;
}
.wishlist-page{
    max-width:1200px;
    margin:auto;
    padding:30px 20px;
}

.wishlist-page h1{
    margin-bottom:25px;
}

#wishlist-products{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.wishlist-card{
    background:#fff;
    border-radius:15px;
    padding:15px;
    text-align:center;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.wishlist-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:10px;
}

.empty-wishlist{
    text-align:center;
    padding:50px;
    font-size:18px;
}
.notification-icon{
    position:relative;

    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:white;

    cursor:pointer;

    font-size:1.3rem;

    transition:.3s;
}

.notification-icon:hover{
    color:lawngreen;
    transform:translateY(-2px);
}

#notification-count{
    position:absolute;

    top:-6px;
    right:-6px;

    min-width:18px;
    height:18px;

    border-radius:50%;

    background:#ff1493;

    color:white;

    font-size:10px;
    font-weight:700;

    display:flex;
    align-items:center;
    justify-content:center;
}
/* =========================
   SIGNUP PAGE
========================= */

.auth-container{
    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:20px;

    background:
    linear-gradient(
        135deg,
        #0f172a,
        #1e293b
    );
}

.auth-card{

    width:100%;
    max-width:420px;

    background:white;

    padding:35px;

    border-radius:24px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.15);

    text-align:center;
}

.auth-logo{
    margin-bottom:20px;
}

.logo-n,
.logo-c{
    font-size:3rem;
    font-weight:900;
}

.logo-n{
    color:lawngreen;
}

.logo-c{
    color:#ff1493;
}

.logo-ova,
.logo-art{
    font-size:1.8rem;
    font-weight:800;
    color:#111827;
}

.auth-card h2{
    margin-bottom:10px;
    color:#111827;
}

.auth-subtitle{
    color:#6b7280;
    margin-bottom:25px;
}

.auth-card form{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.auth-card input{

    padding:14px;

    border:1px solid #d1d5db;

    border-radius:12px;

    font-size:15px;

    outline:none;

    transition:.3s;
}

.auth-card input:focus{

    border-color:#3b82f6;

    box-shadow:
    0 0 0 4px
    rgba(59,130,246,.15);
}

.auth-card button{

    padding:14px;

    border:none;

    border-radius:12px;

    background:
    linear-gradient(
        135deg,
        lawngreen,
        #22c55e
    );

    color:white;

    font-size:16px;
    font-weight:700;

    cursor:pointer;

    transition:.3s;
}

.auth-card button:hover{

    transform:translateY(-2px);

    box-shadow:
    0 10px 25px rgba(34,197,94,.3);
}

.login-link{

    margin-top:20px;

    color:#6b7280;
}

.login-link a{

    color:#2563eb;

    text-decoration:none;

    font-weight:700;
}
.auth-card{

    backdrop-filter: blur(15px);

    animation: fadeUp .6s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(30px);
    }

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

#login-msg{

    margin-top:15px;

    font-weight:600;
}

.auth-card button{

    width:100%;
}

.auth-card button:active{

    transform:scale(.98);
}
.auth-wrapper{
    position:relative;
}

.account-menu{

    position:absolute;

    top:45px;
    right:0;

    width:180px;

    background:white;

    border-radius:10px;

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

    display:none;

    overflow:hidden;

    z-index:999;
}

.account-menu a{

    display:block;

    padding:12px 15px;

    text-decoration:none;

    color:#333;
}

.account-menu a:hover{

    background:#f3f4f6;
}

.account-menu.show{

    display:block;
}