:root {
    --bg-color: #FFFDF8;
    --primary-color: #7A1F1F;
    --secondary-color: #B8863B;
    --accent-color: #F8EEDC;
    --text-color: #2E2E2E;
    --border-color: #E9D9C3;
    --hover-gold: #C89A3D;
    --heading-font: 'Cormorant Garamond', serif;
    --body-font: 'Poppins', sans-serif;
}

html {
    /* Was `zoom: 1.1`. `zoom` is non-standard and Safari (iOS + macOS)
       mispositions position:fixed overlays (cart drawer, search panel,
       auth modal, Razorpay checkout) under a zoomed html — they render
       shifted off-viewport. font-size scaling gets the same overall size
       bump via rem-based spacing without that bug. */
    font-size: 110%;
}

/* iOS Safari shows its own default tap-highlight overlay on any tappable
   element with no author styling for it - on unstyled native controls
   (buttons especially) that highlight can pick up the device's system
   accent/tint color rather than anything defined in this stylesheet, which
   is invisible on desktop testing since only touch browsers apply it at
   all. Reported as e.g. the wishlist heart flashing red on iPhone even
   though nothing here defines a red tap state. */
* {
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-color);
    font-family: var(--body-font);
    color: var(--text-color);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .heading-font {
    font-family: var(--heading-font);
    color: var(--primary-color);
}

/* Navbar */
.navbar {
    background: #fff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    border-bottom: 2px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: transform .35s ease;
    height: 80px;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar > .container,
.navbar > .container-fluid {
    height: 100%;
}

.navbar-brand {
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.navbar-logo {
    height: 100%;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

.nav-link {
    color: var(--text-color) !important;
    margin-left: 20px;
    padding: 6px 10px !important;
    border: 1px solid transparent;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.85rem;
    position: relative;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.nav-link:hover {
    color: var(--hover-gold) !important;
    background-color: var(--accent-color);
    border-color: var(--border-color);
}

/* Persistent "you are here" state for the current page's nav link, distinct
   from the hover-only highlight above. */
.nav-link.active {
    color: var(--hover-gold) !important;
    background-color: var(--accent-color);
    border-color: var(--hover-gold);
    font-weight: 600;
}

.nav-link.active::after {
    transform: scaleX(1);
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 10px;
    right: 10px;
    background-color: var(--hover-gold);
    transition: width 0.3s ease;
    transform: scaleX(0);
}

.nav-link:hover::after {
    transform: scaleX(1);
}

/* Collections/Settings nav dropdowns - Bootstrap's raw defaults (white
   background, blue-ish hover) don't match the site's cream/maroon/gold
   palette. Applies on both desktop and mobile; the mobile media query
   below only overrides layout (full-width, no floating card chrome). */
.dropdown-menu {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    padding: 8px;
}

.dropdown-item {
    color: var(--text-color);
    border-radius: 6px;
    padding: 8px 14px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--accent-color);
    color: var(--hover-gold);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary-color);
    color: #fff;
}

.dropdown-divider {
    border-top-color: var(--border-color);
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 2px solid var(--border-color);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
        padding: 10px 20px 20px;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

    .navbar-nav {
        width: 100%;
    }

    .nav-link {
        margin-left: 0;
        padding: 10px 0;
        border-bottom: 1px solid var(--border-color);
    }

    .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: none;
    }

    .navbar-nav .dropdown-menu {
        border: none;
        box-shadow: none;
        padding-left: 15px;
        background: var(--accent-color);
    }
}

/* Small filled circle showing the count, sitting inline right after the
   "Cart"/"Wishlist" label. Kept in normal document flow (not absolutely
   positioned) so it lands in the same place next to the text on both the
   desktop navbar and the full-width mobile menu, with no separate mobile
   override needed. */
.cart-count,
.wishlist-count {
    display: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    padding: 3px;
    margin-left: 6px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Navbar search */
.nav-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 320px;
    max-width: 360px;
    margin: 0 24px;
}

.nav-search-icon {
    position: absolute;
    left: 14px;
    color: var(--secondary-color);
    font-size: 0.9rem;
    pointer-events: none;
}

.nav-search-input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    background: var(--accent-color);
    font-family: var(--body-font);
    font-size: 0.9rem;
    color: var(--text-color);
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.nav-search-input:focus {
    border-color: var(--hover-gold);
    background: #fff;
}

@media (max-width: 991.98px) {
    /* Mobile: the search bar collapses down to just a tappable "lens" icon
       sitting in the main navbar row (next to the logo/toggler), instead of
       a full text input pushed down among the nav links. Tapping it expands
       a full-width search field as an overlay just below the navbar. */
    .nav-search-wrap {
        position: static;
        flex: 0 0 auto;
        max-width: none;
        margin: 0 4px;
        display: flex;
        align-items: center;
    }

    .nav-search-icon {
        position: static;
        pointer-events: auto;
        cursor: pointer;
        color: var(--text-color);
        font-size: 1.25rem;
        line-height: 1;
        padding: 8px;
    }

    .nav-search-input {
        display: none;
    }

    .nav-search-wrap.expanded {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        background: #fff;
        padding: 12px 16px;
        margin: 0;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border-bottom: 2px solid var(--border-color);
        z-index: 1035;
    }

    .nav-search-wrap.expanded .nav-search-icon {
        position: absolute;
        left: 30px;
        pointer-events: none;
        padding: 0;
        font-size: 0.9rem;
        color: var(--secondary-color);
    }

    .nav-search-wrap.expanded .nav-search-input {
        display: block;
        width: 100%;
        padding-left: 36px;
    }
}

.search-highlight {
    animation: searchGlow 0.9s ease;
}

@keyframes searchGlow {
    0% { box-shadow: 0 0 0 0 rgba(200, 154, 61, 0.65); }
    60% { box-shadow: 0 0 0 10px rgba(200, 154, 61, 0); }
    100% { box-shadow: 0 0 0 0 rgba(200, 154, 61, 0); }
}

.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-panel {
    position: fixed;
    top: 20vh;
    left: 50%;
    transform: translateX(-50%);
    width: 70vw;
    height: 70vh;
    max-height: 70vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    z-index: 1045;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.search-panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.search-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.search-panel-title {
    margin: 0;
    font-family: var(--heading-font);
    color: var(--primary-color);
}

.search-panel-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--text-color);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}

.search-panel-close:hover {
    background: var(--accent-color);
    color: var(--primary-color);
}

.search-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.search-results-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 18px;
}

.search-result-item {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.search-result-item:hover {
    background: var(--accent-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.search-result-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
}

.search-result-name {
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.92rem;
}

.search-result-price {
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-top: 2px;
}

@media (max-width: 767.98px) {
    .search-panel {
        width: 92vw;
        height: 70vh;
        max-height: 70vh;
    }

    .search-results-list {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* Hero Section */
.hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--bg-color) 0%, var(--accent-color) 100%);
    padding: 50px 20px;
    overflow: hidden;
}

.hero-content {
    max-width: 600px;
}

@media (max-width: 767.98px) {
    .hero-content {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 65%);
        padding: 28px 20px 40px;
        border-radius: 18px;
    }
}

.logo {
    width: 400px;
    max-width: 95%;
    opacity: 0;
    animation: logoReveal 1.5s ease forwards;
}

@keyframes logoReveal {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes logoAutoHide {
    from { opacity: 1; }
    to { opacity: 0; visibility: hidden; }
}

@media (max-width: 767.98px) {
    .logo {
        animation: logoReveal 1.5s ease forwards, logoAutoHide 0.8s ease forwards 5s;
    }
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    opacity: 0;
    animation: fadeUp 1.5s ease forwards 0.5s;
}

.line {
    width: 0;
    height: 2px;
    background: var(--hover-gold);
    margin: 25px 0;
    animation: growLine 1.5s ease forwards 1s;
}

@keyframes growLine {
    from { width: 0; }
    to { width: 150px; }
}

.tagline {
    margin-top: 15px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--secondary-color);
    font-weight: 600;
    opacity: 0;
    animation: fadeUp 1.5s ease forwards 1.2s;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-text {
    margin-top: 20px;
    font-size: 18px;
    color: var(--text-color);
    line-height: 1.8;
    opacity: 0;
    animation: fadeUp 1.5s ease forwards 1.4s;
}

/* Buttons */
.btn-primary-custom {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 12px 28px;
    font-weight: 600;
    border-radius: 8px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.btn-primary-custom:hover {
    background: var(--hover-gold);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(200, 154, 61, 0.4);
}

.btn-secondary-custom {
    background: #fff;
    border: 2px solid var(--border-color);
    color: var(--text-color);
    padding: 12px 28px;
    font-weight: 600;
    border-radius: 8px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.btn-secondary-custom:hover {
    background: var(--hover-gold);
    color: #fff;
    border-color: var(--hover-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(200, 154, 61, 0.4);
}

/* Feature Cards */
.features {
    padding: 80px 20px;
    background: var(--bg-color);
}

.feature-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(184, 134, 59, 0.15);
    border-color: var(--hover-gold);
}

.feature-icon {
    font-size: 40px;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.feature-card h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 10px;
    font-family: var(--heading-font);
}

/* Product Cards */
.products {
    padding: 60px 0;
}

.section-header h3 {
    font-size: 2.6rem;
    font-weight: 700;
    margin: 0;
    color: var(--primary-color);
    font-family: var(--heading-font);
}

.header-line {
    width: 80px;
    height: 3px;
    background: var(--hover-gold);
    margin: 15px 0;
}

.product-card {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    text-decoration: none;
}

.product-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 30px rgba(122, 31, 31, 0.1);
}

.product-card .card-img-top {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    transition: transform 0.5s ease;
}

.card-img-wrapper {
    overflow: hidden;
    position: relative;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

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

.product-card .card-body {
    padding: 14px;
    background: #fff;
    position: relative;
    z-index: 2;
}

.product-card .card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 6px;
    font-family: var(--heading-font);
}

.product-card .card-text {
    font-size: 12.5px;
    color: #666;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color);
}

.product-review-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 0.78rem;
    margin-bottom: 10px;
}

.product-review-stars,
.review-stars {
    color: #d39b22;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Real price first, then struck-through fake MRP, then the auto discount */
.mrp-now {
    font-weight: 700;
}

.mrp-old {
    text-decoration: line-through;
    color: #999;
    font-weight: 500;
    font-size: 0.9em;
    margin-left: 6px;
}

.mrp-off {
    color: #388e3c;
    font-weight: 700;
    font-size: 0.85em;
    margin-left: 6px;
}

/* Home page cards use a more compact price line */
.product-price--home {
    font-size: 0.85rem;
}

.product-price--home .mrp-old {
    font-size: 0.8em;
}

.product-price--home .mrp-off {
    font-size: 0.78em;
}

.btn-card-outline {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12.5px;
    transition: all 0.3s ease;
}

.btn-card-outline:hover:not(:disabled) {
    background: var(--primary-color);
    color: #fff;
}

/* Standalone outline button (e.g. "Apply Coupon") - sized to match a
   Bootstrap .form-control's height, unlike the deliberately compact
   .btn-card-outline used inside product cards. */
.btn-outline-standalone {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
    border-radius: 8px;
    padding: 0.375rem 0.75rem;
    font-size: 0.95rem;
    height: 100%;
    transition: all 0.3s ease;
}

.btn-outline-standalone:hover:not(:disabled) {
    background: var(--primary-color);
    color: #fff;
}

.btn-outline-standalone:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-card-filled {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #fff;
    font-weight: 600;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12.5px;
    transition: all 0.3s ease;
}

.btn-card-filled:hover:not(:disabled) {
    background: var(--hover-gold);
    border-color: var(--hover-gold);
    color: #fff;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Out-of-stock card buttons: deliberately muted/grey so they don't read as
   an active, clickable "Add to Cart" button. */
.btn-card-outofstock {
    background: #ececec;
    border: 1px solid #d0d0d0;
    color: #8a8a8a;
    font-weight: 600;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12.5px;
    opacity: 1;
}

.btn-card-outofstock:disabled {
    opacity: 1;
}

/* Small top-right wishlist heart on each product card. Deliberately a single
   fixed color at all times (never recolored on state change) - state is
   shown only by the glyph itself swapping outline (not wishlisted) <->
   filled (wishlisted), never by color, and only ever changes on an explicit
   click. */
.wishlist-heart-btn {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.2s ease;
}

.wishlist-heart-btn:active,
.wishlist-heart-btn:focus {
    background: rgba(255, 255, 255, 0.85);
    color: #333;
    outline: none;
}

.wishlist-heart-btn:hover {
    transform: scale(1.12);
}

.stock-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 10;
}

.stock-out {
    background: #ffebe6;
    color: var(--primary-color);
    border: 1px solid rgba(122, 31, 31, 0.2);
}

.stock-in {
    background: #e6f4ea;
    color: #1e8e3e;
    border: 1px solid rgba(30, 142, 62, 0.2);
}

/* Horizontal Scroll Container */
.horizontal-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 24px;
    padding: 20px 10px 40px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-color) var(--accent-color);
}

.horizontal-scroll-container::-webkit-scrollbar {
    height: 6px;
}

.horizontal-scroll-container::-webkit-scrollbar-track {
    background: var(--accent-color);
    border-radius: 10px;
}

.horizontal-scroll-container::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 10px;
}

.horizontal-scroll-item {
    flex: 0 0 auto;
    width: 240px;
    scroll-snap-align: start;
}

/* Wrapping card grid - every card the same fixed size as the horizontal-scroll cards */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.card-grid-item {
    flex: 0 0 240px;
    width: 240px;
}

@media (max-width: 767.98px) {
    .card-grid {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0 16px 14px;
        margin: 0 -16px;
        scroll-snap-type: x proximity;
    }

    .horizontal-scroll-item {
        width: 78vw;
        max-width: 300px;
    }

    .card-grid-item {
        flex: 0 0 78vw;
        width: 78vw;
        max-width: 300px;
        scroll-snap-align: start;
    }

    .product-card .card-body {
        padding: 10px;
    }

    .product-card .card-title {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .product-card .card-text {
        font-size: 11px;
        margin-bottom: 8px;
    }

    .product-price {
        font-size: 0.95rem;
    }

    .btn-card-outline,
    .btn-card-filled,
    .btn-card-outofstock {
        padding: 4px 6px;
        font-size: 11px;
    }
}

@media (max-width: 359.98px) {
    .card-grid-item {
        flex: 0 0 78vw;
        width: 78vw;
    }
}

/* Footer */
footer {
    background: #FAF5F0 url('../images/footer_bg.png') no-repeat center center;
    background-size: cover;
    color: #3E3833;
    padding: 80px 20px 40px;
    border-top: none;
    position: relative;
    overflow: hidden;
}

.footer-title {
    font-family: var(--heading-font);
    color: #4A3C31;
    font-size: 1.3rem;
    margin-bottom: 14px;
    position: relative;
    display: inline-block;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 40px;
    height: 1px;
    background-color: #DCC8A5;
}

.text-center .footer-title::after {
    left: 50%;
    transform: translateX(-50%);
}

.footer-link {
    color: #6F665E;
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
    margin-bottom: 8px;
}

.footer-link:hover {
    color: #3E3833;
    text-decoration: none;
}

.footer-bottom {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #E8DFD1;
    text-align: center;
    font-size: 0.9rem;
    color: #6F665E;
    position: relative;
    z-index: 2;
}

.footer-text {
    color: #6F665E;
}

@media (max-width: 767.98px) {
    /* Smaller footer text on mobile so long lines (the contact email in
       particular) fit on a single line instead of wrapping awkwardly. */
    .footer-title {
        font-size: 1.1rem;
    }

    .footer-link,
    .footer-text,
    .footer-bottom {
        font-size: 0.75rem;
    }
}


/* Modal styling */
.modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-color);
    border-radius: 16px 16px 0 0;
}

.modal-title {
    font-family: var(--heading-font);
    color: var(--primary-color);
    font-weight: 700;
}

/* Drawer styling */
.offcanvas {
    background-color: var(--bg-color);
}

.offcanvas-header {
    border-bottom: 1px solid var(--border-color);
}

.offcanvas-title {
    font-family: var(--heading-font);
    color: var(--primary-color);
}