@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
:root {
    --brand: #1f1f1f;
    --brand-2: #2f2f2f;
    --accent: #4f4f4f;
    --dark: #1f1f1f;
    --light: #fff;
}

/* Colored variants */
.badge-dress {
    background: #ffe8ef;
}

.badge-abaya {
    background: #eaf4ff;
}

.badge-shoes {
    background: #fff4e5;
}

.badge-bags {
    background: #eafaf0;
}

.badge-tops {
    background: #f3e8ff;
}

.badge-skirts {
    background: #fff0f0;
}

.badge-accessories {
    background: #e8f7ff;
}

.badge-beauty {
    background: #fff4fb;
}

* {
    font-family: "Tajawal", sans-serif;
    box-sizing: border-box
}

body {
    color: var(--dark);
    background: #fff;
}


/* Sticky bottom nav for mobile & tablet */
.mobile-bottom-nav {
    padding: 0;
    border-top: 0;
    background: var(--brand);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
}

.mobile-bottom-nav .nav-link {
    color: rgba(255, 255, 255, .85);
    font-size: .60rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mobile-bottom-nav .nav-link .nav-icon {
    color: inherit;
}

.mobile-bottom-nav .nav-link.active {
    color: #fff;
}

.mobile-bottom-nav .badge {
    border: 3px solid #fff;
}

.mobile-bottom-nav .nav-icon {
    font-size: 1.25rem;
    line-height: 1
}

.mobile-bottom-nav .logo-badge {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(66, 63, 64, 0.35);
    margin-top: -22px;
    border: 4px solid #fff;
}

.mobile-bottom-nav .logo-badge img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

/* Cards and sections */
.section-title {
    font-weight: 700;
    font-size: 1.25rem
}

.category-chip {
    border-radius: 999px;
    background: #fff;
    border: 1px solid #eee;
    padding: .5rem 1rem
}

.category-chip.active {
    background: var(--accent);
    border-color: var(--brand);
    color: var(--brand)
}

.product-card .badge-sale {
    position: absolute;
    top: .5rem;
    left: .5rem;
    background: var(--brand);
}

.product-card .like-btn {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: #fff;
    border-radius: 999px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08)
}

.price {
    font-weight: 700
}

.price .old {
    color: #999;
    text-decoration: line-through;
    font-weight: 400;
    margin-left: .5rem
}

.bg-brand {
    background: var(--brand);
}

.btn-brand {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--light);
    box-shadow: 0 8px 20px rgba(60, 56, 57, 0.25)
}

.btn-brand:hover {
    background: #ff3f79;
    border-color: #ff3f79;
    color: var(--light);
    box-shadow: 0 10px 24px rgba(46, 42, 43, 0.35)
}

a {
    text-decoration: none;
    color: var(--dark);
}

a:hover {
    color: var(--brand);
}

.box-40px {
    width: 40px;
    height: 40px;
}

/* Utilities */
.hero {
    background: radial-gradient(1200px 400px at 70% -50%, var(--accent), transparent 60%),
        linear-gradient(180deg, #fff, #fff);
}

.hero .hero-card {
    background: #fff;
    padding: 1.5rem;
}

/* Global card polish */
.card {
    border: 1px solid #f0f0f0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
}

.card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}

/* Category grid */
.category-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
}

.category-card .card {
    border-radius: 14px;
}

.category-card .card:hover {
    transform: translateY(-2px);
    transition: transform .2s ease;
}

.category-card:hover h6 {
    color: var(--brand);
}

/* Category circular wrapper */
.thumb-badge {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

.thumb-badge .category-thumb {
    width: 60px;
    height: 60px;
    border-radius: 12px;
}

.category-card:hover .category-thumb {
    transform: scale(1.03);
    transition: transform .2s ease;
}

/* Search Modal Styling */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(2px);
}

#searchModal .modal-content {
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    background: transparent;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#searchModal .modal-body {
    padding: 2rem;
}

#searchModal .form-control {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 1rem 3rem 1rem 1rem;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

#searchModal .form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem rgba(34, 31, 32, 0.25);
    background: rgba(255, 255, 255, 1);
}

#searchModal .bi-search {
    color: #999;
    font-size: 1.2rem;
    z-index: 10;
}

/* Very small screens: reduce thumb size */
@media (max-width: 575.98px) {
    .thumb-badge {
        width: 56px;
        height: 56px;
    }

    .thumb-badge .category-thumb {
        width: 46px;
        height: 46px;
    }
}

.product-card img {
    transition: transform .25s ease;
}

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

.product-card .card-body {
    display: flex;
    flex-direction: column;
    gap: .35rem
}

.product-card .card-body .actions {
    margin-top: .25rem
}

/* Desktop sidebar filters etc. */
.filter-sidebar {
    position: sticky;
    top: 84px
}

/* Ensure space for fixed bottom nav on mobile */
@media (max-width: 991.98px) {
    body {
        padding-bottom: 72px
    }
}

/* On large screens move nav to the top under the search bar */
@media (min-width: 992px) {
    .mobile-bottom-nav {
        padding: 10px;
        ;
        position: sticky;
        top: 0;
        /* approximate height of top search bar */
        bottom: auto;
        border-top: 0;
        border-bottom: 0;
        background: var(--brand);
        box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    }

    .mobile-bottom-nav .nav-link {
        flex-direction: row;
        gap: .5rem;
        font-size: 1.2rem;
        color: rgba(255, 255, 255, .9);
    }

    .mobile-bottom-nav .nav-link.active,
    .mobile-bottom-nav .nav-link:hover {
        color: #fff;
        background: rgba(255, 255, 255, .12);
        border-radius: 8px;
    }

    .mobile-bottom-nav .badge {
        border-color: #fff;
    }

    .mobile-bottom-nav .logo-badge {
        width: 65px;
        height: 65px;
        position: relative;
        transform: translateY(11px);
        box-shadow: -2px -8px 24px 3px rgba(46, 44, 44, 0.35);
    }

}

/* Pagination */
.pagination .page-item .page-link {
    color: var(--brand);
}

.pagination .page-item .page-link:focus {
    box-shadow: none;
}

.pagination .page-item.active .page-link {
    background: var(--brand);
    color: var(--light);
    border-color: var(--brand);
}

/* product gallery */
.carousel-control-prev span,
.carousel-control-next span {
    transform: scale(.5);
}

/* main inputs */
.form-control:focus {
    box-shadow: none;
    border-color: var(--brand);
}

/* Footer */
footer a {
    text-decoration: none;
    color: var(--light);
}