/* ===== BASE ===== */

body{
    min-height: 100vh;
    transition: background .3s, color .3s;
}

body.light{
    background:#f5f5f5 !important;
    color:#111 !important;
}


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

nav{
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
}




/* ===== PRODUCT CARD ===== */

.product-card{
    border-radius: 14px;
    transition: transform .25s, box-shadow .25s;
    cursor: pointer;
}

.product-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.product-card img{
    object-fit: contain;
}


/* ===== FAVORITE BUTTON ===== */

.fav-btn{
    border: none;
    background: transparent;
    font-size: 20px;
    transition: transform .2s;
}

.fav-btn:hover{
    transform: scale(1.2);
}


/* ===== SKELETON LOADER ===== */

.skeleton{
    height: 320px;
    border-radius: 12px;
    background: linear-gradient(
        90deg,
        #2a2a2a 25%,
        #3a3a3a 37%,
        #2a2a2a 63%
    );
    background-size: 400% 100%;
    animation: shimmer 1.4s infinite;
}

body.light .skeleton{
    background: linear-gradient(
        90deg,
        #e0e0e0 25%,
        #f0f0f0 37%,
        #e0e0e0 63%
    );
}

@keyframes shimmer{
    0%{background-position: 100% 0;}
    100%{background-position: -100% 0;}
}


/* ===== PAGINATION ===== */

#pagination button{
    margin: 3px;
}


/* ===== CART ===== */

.offcanvas-body img{
    background: white;
    border-radius: 8px;
    padding: 4px;
}


/* ===== ADMIN PANEL ===== */

#adminList small{
    opacity:.9;
}


/* ===== MODAL IMAGE ===== */

#pmImage{
    background:white;
    border-radius:12px;
    padding:10px;
}


/* ===== INPUTS DARK MODE FIX ===== */

body.light input,
body.light select,
body.light textarea{
    background:#fff !important;
    color:#000 !important;
}


/* ===== SCROLLBAR (OPTIONAL MODERN LOOK) ===== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-thumb{
    background:#555;
    border-radius:10px;
}

body.light ::-webkit-scrollbar-thumb{
    background:#bbb;
}