/* 1. VARIABLES (COLORS & GLOBALS) */
:root {
    --pink: #d63384;
    --pink-dark: #b42a6c;
    --purple: purple;
    --light-pink: #fdf2f8;
    --shadow: 0 8px 25px rgba(0,0,0,.15);
    --radius: 12px;
}
/* 2. RESET & BASE */
body {
    font-family: 'Poppins', sans-serif;
    background: #fff;
    color: #000;
}
a {
    color: var(--purple);
    text-decoration: none;
}
a:hover {
    color: darkmagenta;
}
.text-pink { color: var(--pink); }
.text-purple { color: var(--purple); }
/* 3. BUTTONS (ONE TIME ONLY) */
.btn-pink {
    background: var(--pink);
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 8px 20px;
    transition: .3s;
}

.btn-pink:hover {
    background: var(--pink-dark);
    transform: scale(1.05);
}
 .top-header {
                background-color: #d63384;
                color: white;
                font-size: 12px;
                border-radius: 50%;
                padding: 2px 6px;             
            }
/* 4. HEADER (DESKTOP + MOBILE SAFE) */
.navbar,
header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1050;
}
.navbar {
    overflow: visible !important;
}   
.cart-count {
            position: absolute;
            top: -6px;
            right: -8px;
            background: #e91e63;
            color: #fff;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 50%;
        }
.subcategory-card:hover {
            background-color: #d63384 !important;
        }

/* 5. SEARCH (DESKTOP + MOBILE SAFE) */
.search-bar {
    position: relative;
    width: 100%;
    z-index: 3000;
}

.search-bar input {
    width: 100%;
    height: 42px;
    border-radius: 30px;
    padding: 10px 45px 10px 20px;
    font-size: 14px;
}
.search-bar i {
    pointer-events: none; /* ← THIS FIXES MOBILE */
}
/* Search results (desktop + mobile) */
.search-results,
#mobileSearchResults {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-height: 300px;
    overflow-y: auto;
    z-index: 9999;
}
.search-results a,
#mobileSearchResults a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    color: #000;
}
.search-results a:hover,
#mobileSearchResults a:hover {
    background: var(--light-pink);
    color: var(--pink);
}
/* 6. DROPDOWNS / MEGA MENU */
.categories {
    position: relative;
    cursor: pointer;
}
.mega-menu,
.dropdown-menu {
    display: none;
    position: absolute;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 1000;
}
.categories:hover .mega-menu,
.dropdown:hover .dropdown-menu {
    display: block;
}
/* 7. CARDS & PRODUCTS */
.card {
    transition: .3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    background: #d097b2;
}

.card img {
    transition: .4s;
}

.card:hover img {
    transform: scale(1.08);
}
/* 8. QUANTITY CONTROLS */
.qty-input {
    width: 70px;
    height: 35px;
    border: 2px solid #000;
    text-align: center;
}

.qty-btn {
    width: 28px;
    height: 28px;
    background: #f1f1f1;
    border: 1px solid #ccc;
    cursor: pointer;
}
/* 9. MODALS (FIXED) */
.modal {
    z-index: 9999 !important;
}

.modal-backdrop {
    z-index: 9998 !important;
    background: rgba(0,0,0,.6);
}
body.modal-open {
    overflow: auto !important;
}
/* 10. FOOTER */
footer {
    background: var(--purple);
    color: #f4eeee;
    padding: 40px 0;
    text-align: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
/* 11. MOBILE MEDIA QUERY (ONLY ONE) */
@media (max-width: 991px) {
    body {
        overflow-x: hidden;
    }

    #mainNavbar {
        display: none !important;
    }
}
@media (max-width: 991px) {

    .mobile-logo img {
        height: 42px;
        width: auto;
        object-fit: contain;
    }

    .mobile-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}
.offcanvas {
    z-index: 1055;
}
@media (min-width: 992px) {
    .desktop-login-icon {
        font-size: 1.15rem; /* perfect balance */
    }
}