/* ==========================================================================
   MODERN 2026 RESTAURANT DESIGN SYSTEM
   Overrides legacy style.css — keeps Bootstrap 5 markup intact
   Author: redesigned for production
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS — DB-driven via theme_color.blade.php ----------
   Every visible color reads from --theme-* variables emitted by the admin's
   "Theme Color" settings. Defaults (the second arg of var()) only fire if the
   DB value is missing — they match the warm cream + terracotta restaurant
   identity. Change a color in the admin panel and the whole site updates.
*/
:root {
    /* Surfaces */
    --m-bg:            var(--theme-bg, #FBF7EE);
    --m-bg-2:          var(--theme-surface-alt, #F5EFDF);
    --m-bg-3:          var(--theme-surface-alt, #EFE7D2);
    --m-surface:       var(--theme-surface, #FFFFFF);
    --m-surface-2:     var(--theme-surface-alt, #FAF6EB);
    --m-line:          var(--theme-line, rgba(60,40,20,.08));
    --m-line-2:        var(--theme-line-strong, rgba(60,40,20,.14));

    /* Text */
    --m-text:          var(--theme-text, #2A1F17);
    --m-text-soft:     var(--theme-text-soft, #5C4938);
    --m-text-mute:     var(--theme-text-muted, #8C7A66);

    /* Brand — primary CTA color (admin's colorPrimary in DB) */
    --m-brand:         var(--theme-brand, #B8541A);
    --m-brand-2:       var(--theme-brand, #D77A3A);
    --m-brand-dark:    var(--theme-brand-dark, #8B3F12);
    --m-brand-soft:    var(--theme-brand-soft, rgba(184,84,26,.10));
    --m-brand-glow:    var(--theme-brand-glow, rgba(184,84,26,.30));

    /* Gold aliases brand so the whole site speaks one color identity */
    --m-gold:          var(--m-brand);
    --m-gold-2:        var(--m-brand-2);
    --m-gold-soft:     var(--m-brand-soft);
    --m-gold-glow:     var(--m-brand-glow);

    /* Amber — distinct from brand, used only for star ratings */
    --m-amber:         var(--theme-accent, #E0A82E);
    --m-amber-soft:    var(--theme-accent-soft, rgba(224,168,46,.18));

    /* Legacy aliases */
    --m-accent:        var(--m-brand);
    --m-accent-2:      var(--m-brand-2);

    /* Status — DB-driven */
    --m-success:       var(--theme-success, #2D8659);
    --m-success-soft:  var(--theme-success-soft, rgba(45,134,89,.12));
    --m-danger:        var(--theme-danger, #C73E3E);
    --m-danger-soft:   var(--theme-danger-soft, rgba(199,62,62,.10));
    --m-warning:       var(--theme-warning, #D89B1F);
    --m-warning-soft:  var(--theme-warning-soft, rgba(216,155,31,.14));
    --m-info:          var(--theme-info, #2B7AB8);
    --m-info-soft:     var(--theme-info-soft, rgba(43,122,184,.12));

    /* Hero / footer dark surface (DB-driven) */
    --m-dark:          var(--theme-dark, #2A1F17);
    --m-dark-2:        #3A2D22;
    --m-dark-text:     var(--theme-dark-text, #FBF7EE);

    /* Cream legacy aliases */
    --m-cream:         var(--theme-bg, #FBF7EE);
    --m-cream-2:       var(--theme-surface-alt, #F5EFDF);

    /* Radius — derived from a single DB token */
    --m-r:     var(--theme-radius, 14px);
    --m-r-sm:  calc(var(--theme-radius, 14px) - 4px);
    --m-r-lg:  calc(var(--theme-radius, 14px) + 6px);
    --m-r-xl:  calc(var(--theme-radius, 14px) + 14px);
    --m-r-pill: 999px;

    /* Shadows — tinted by the brand & dark accent for cohesion */
    --m-shadow-sm:  0 1px 3px rgba(var(--theme-dark-rgb, 42,31,23), .06), 0 1px 2px rgba(var(--theme-dark-rgb, 42,31,23), .04);
    --m-shadow:     0 8px 24px -6px rgba(var(--theme-dark-rgb, 42,31,23), .12), 0 4px 10px -4px rgba(var(--theme-dark-rgb, 42,31,23), .06);
    --m-shadow-lg:  0 24px 48px -12px rgba(var(--theme-dark-rgb, 42,31,23), .18), 0 12px 24px -8px rgba(var(--theme-dark-rgb, 42,31,23), .10);
    --m-shadow-brand: 0 14px 30px -8px rgba(var(--theme-brand-rgb, 184,84,26), .35);
    --m-glow-gold:  0 8px 24px -8px rgba(var(--theme-brand-rgb, 184,84,26), .4);

    /* Typography */
    --m-font-display: "Playfair Display", "Cormorant Garamond", "Tajawal", serif;
    --m-font-body:    "Inter", "DM Sans", "Tajawal", "Cairo", -apple-system, system-ui, sans-serif;
    --m-font-mono:    "JetBrains Mono", "DM Mono", monospace;

    /* Motion */
    --m-ease:        cubic-bezier(.2,.7,.2,1);
    --m-ease-out:    cubic-bezier(.16,1,.3,1);
    --m-fast:        .25s;
    --m-base:        .4s;
    --m-slow:        .7s;

    /* Layout */
    --m-container:    1240px;
    --m-header-h:     86px;
}

/* RTL token mirroring */
html[dir="rtl"], body[dir="rtl"] { direction: rtl; }

/* ---------- 2. BASE RESET / TYPOGRAPHY ---------- */
html { scroll-behavior: smooth; }
body {
    font-family: var(--m-font-body) !important;
    background: var(--m-bg) !important;
    color: var(--m-text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    line-height: 1.65;
    letter-spacing: .005em;
    font-feature-settings: "ss01","cv01","cv03";
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--m-font-display) !important;
    color: var(--m-text);
    letter-spacing: -.01em;
    font-weight: 600;
    line-height: 1.15;
}

p { color: var(--m-text-soft); }

a { color: inherit; text-decoration: none; transition: color var(--m-fast) var(--m-ease); }
a:hover { color: var(--m-gold-2); }

img { max-width: 100%; height: auto; }

/* Default safe rendering for any image inside aspect-ratio containers */
.wsus__menu_item_img img,
.wsus__offer_item_single img,
.wsus__single_team_img img,
.wsus__single_blog_img img,
.wsus__about_us_img img,
.wsus__menu_details_images img,
.wsus__about_video_bg img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

::selection { background: var(--m-gold); color: #111; }

/* Hide legacy Ramadan SVG decoration so it doesn't fight new design */
#ramadan-elegant-bg { display: none !important; }

/* Default container alignment */
.container, .container-fluid { padding-left: 24px; padding-right: 24px; }
@media (min-width: 1280px) { .container { max-width: var(--m-container) !important; } }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--m-bg-2); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--m-gold), #8c701a); border-radius: 6px; }

/* ---------- 3. UTILITIES ---------- */
.m-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--m-font-body);
    font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--m-gold);
    font-weight: 600;
    padding: 8px 16px;
    border: 1px solid var(--m-gold-soft);
    border-radius: var(--m-r-pill);
    background: rgba(212,175,55,.05);
}
.m-eyebrow::before {
    content: ""; width: 22px; height: 1px; background: var(--m-gold);
}

.m-divider {
    width: 60px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--m-gold), transparent);
    margin: 24px auto;
}

.m-text-gold { color: var(--m-gold) !important; }
.m-text-mute { color: var(--m-text-mute) !important; }

.m-gradient-text {
    background: linear-gradient(135deg, var(--m-gold-2) 0%, var(--m-gold) 50%, #b8932b 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- 4. BUTTONS — polished primary CTA ---------- */
.common_btn,
.btn-primary,
.wsus__reservation_form button,
button[type="submit"].common_btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 14px;                                     /* clear space between icon & text */
    padding: 14px 30px !important;
    background: linear-gradient(135deg, var(--m-brand) 0%, var(--m-brand-dark) 100%) !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: var(--m-r-pill) !important;
    font-family: var(--m-font-body) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: .02em;
    text-transform: capitalize;
    text-decoration: none !important;
    line-height: 1.4 !important;
    white-space: nowrap;
    box-shadow:
        0 8px 22px -6px rgba(var(--theme-brand-rgb, 184,84,26), .50),
        inset 0 1px 0 rgba(255,255,255,.20);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform .35s cubic-bezier(.2,.7,.2,1),
        box-shadow .35s cubic-bezier(.2,.7,.2,1),
        filter .2s ease;
    cursor: pointer;
    user-select: none;
}

/* Icon styling — slightly larger + small badge feel */
.common_btn > i,
.btn-primary > i,
.wsus__reservation_form button > i,
button[type="submit"].common_btn > i {
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

/* Subtle shimmer that sweeps across on hover */
.common_btn::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 20%,
        rgba(255,255,255,.18) 50%,
        transparent 80%
    );
    transform: skewX(-20deg);
    transition: inset-inline-start .7s cubic-bezier(.2,.7,.2,1);
    z-index: 0;
    pointer-events: none;
}
.common_btn:hover::before { inset-inline-start: 130%; }

/* Make sure text/icons sit above the shimmer */
.common_btn > * { position: relative; z-index: 1; }

.common_btn:hover {
    transform: translateY(-3px);
    color: #FFFFFF !important;
    filter: brightness(1.06);
    box-shadow:
        0 18px 38px -8px rgba(var(--theme-brand-rgb, 184,84,26), .55),
        0 0 0 6px rgba(var(--theme-brand-rgb, 184,84,26), .10),  /* outer glow ring as part of the button shadow */
        inset 0 1px 0 rgba(255,255,255,.25);
}
.common_btn:hover > i { transform: translateX(2px); }
html[dir="rtl"] .common_btn:hover > i { transform: translateX(-2px); }

.common_btn:active { transform: translateY(-1px) scale(.98); }
.common_btn:focus { outline: none; box-shadow:
    0 18px 38px -8px rgba(var(--theme-brand-rgb, 184,84,26), .55),
    0 0 0 4px rgba(var(--theme-brand-rgb, 184,84,26), .25),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* Variant: smaller / denser for tight UI areas */
.common_btn.m-btn-sm {
    padding: 10px 20px !important;
    font-size: 13px !important;
    gap: 10px;
}
.common_btn.m-btn-sm > i { font-size: 12px !important; }

/* Variant: full-width on its container */
.common_btn.m-btn-block {
    width: 100%;
    justify-content: center;
}

/* === Ghost / outline button === */
.m-btn-ghost {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 26px;
    background: var(--m-surface);
    color: var(--m-text) !important;
    border: 1.5px solid var(--m-line-2);
    border-radius: var(--m-r-pill);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    transition: all .3s cubic-bezier(.2,.7,.2,1);
    cursor: pointer;
    line-height: 1.4;
}
.m-btn-ghost > i { color: var(--m-brand); transition: transform .3s, color .2s; font-size: 14px; }
.m-btn-ghost:hover {
    background: var(--m-brand);
    color: #fff !important;
    border-color: var(--m-brand);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -6px rgba(var(--theme-brand-rgb, 184,84,26), .35);
}
.m-btn-ghost:hover > i { color: #fff; transform: translateX(2px); }
html[dir="rtl"] .m-btn-ghost:hover > i { transform: translateX(-2px); }

/* Mobile: slightly smaller padding so buttons don't dominate the screen */
@media (max-width: 575.98px) {
    .common_btn,
    .btn-primary,
    .wsus__reservation_form button,
    button[type="submit"].common_btn {
        padding: 12px 22px !important;
        font-size: 13.5px !important;
        gap: 10px;
    }
    .m-btn-ghost { padding: 11px 20px; font-size: 13.5px; gap: 10px; }
}

/* ============================================================
   TOPBAR v2  (.m-topbar)
   Clean, RTL-friendly, mobile-first, no overlay tricks.
   ============================================================ */
.m-topbar {
    background: var(--m-dark) !important;
    color: rgba(255,255,255,.78);
    font-size: 13px;
    line-height: 1;
    border-bottom: 1px solid rgba(0,0,0,.25);
    position: relative;
    /* Must be HIGHER than .main_menu (1020) so dropdowns from the topbar
       (language picker, etc.) escape and overlay the navbar below. */
    z-index: 1100;
}
.m-topbar::after {
    content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--m-brand) 40%, var(--m-brand) 60%, transparent);
    opacity: .35;
    pointer-events: none;
}
.m-topbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 6px 0;
    flex-wrap: wrap;
}
.m-topbar__left,
.m-topbar__right {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    flex-wrap: wrap;
}
.m-topbar__right { gap: 12px; }

/* Info items (clock, email) */
.m-tb-item {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.72);
    text-decoration: none;
    font-size: 12.5px;
    transition: color .2s var(--m-ease);
    white-space: nowrap;
}
.m-tb-item i { color: var(--m-gold-2); font-size: 13px; }
.m-tb-link:hover { color: var(--m-gold-2); }
.m-tb-text { color: inherit; }

/* WhatsApp/Phone CTA button — always green for brand recognition */
.m-tb-phone {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 4px 14px 4px 4px;
    background: linear-gradient(135deg, rgba(37,211,102,.18), rgba(37,211,102,.06));
    border: 1px solid rgba(37,211,102,.30);
    border-radius: 999px;
    color: #fff !important;
    text-decoration: none !important;
    transition: transform .2s var(--m-ease), box-shadow .2s var(--m-ease), background .2s var(--m-ease), border-color .2s var(--m-ease);
    line-height: 1;
}
html[dir="rtl"] .m-tb-phone { padding: 4px 4px 4px 14px; }
.m-tb-phone:hover {
    background: linear-gradient(135deg, #25D366, #128C7E);
    border-color: #25D366;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -4px rgba(37,211,102,.45);
    color: #fff !important;
}
.m-tb-phone__icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    position: relative;
}
.m-tb-phone__icon i { color: #fff; line-height: 1; }
.m-tb-phone__pulse {
    position: absolute; inset: -3px;
    border-radius: 50%;
    border: 2px solid #25D366;
    opacity: .8;
    animation: m-phone-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes m-phone-pulse {
    0%   { transform: scale(.85); opacity: .8; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(.85); opacity: 0; }
}
.m-tb-phone__text {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.1;
    color: #fff;
    text-align: start;
}
.m-tb-phone__text small {
    color: rgba(255,255,255,.62);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}
.m-tb-phone__text strong {
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
    direction: ltr;
    white-space: nowrap;
}

/* Language picker — native select with custom skin */
.m-tb-lang {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    padding: 0 30px 0 36px;
    height: 32px;
    transition: background .2s, border-color .2s;
    cursor: pointer;
    margin: 0;
}
html[dir="rtl"] .m-tb-lang {
    padding: 0 36px 0 30px;
}
.m-tb-lang:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.22);
}
.m-tb-lang__icon {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--m-gold-2);
    font-size: 12px;
    pointer-events: none;
}
.m-tb-lang__caret {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.55);
    font-size: 9px;
    pointer-events: none;
}
.m-tb-lang__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: 0;
    outline: none;
    color: #fff !important;
    font-size: 12.5px;
    font-weight: 500;
    padding: 0 6px;
    margin: 0;
    cursor: pointer;
    height: 100%;
    width: auto;
    min-width: 90px;
    line-height: 30px;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.m-tb-lang__select:focus { box-shadow: none; outline: none; }
.m-tb-lang__select option {
    background: #fff;
    color: var(--m-text);
    padding: 8px;
}

/* Social icons */
.m-tb-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.m-tb-social a {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.75) !important;
    border: 1px solid rgba(255,255,255,.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: all .25s var(--m-ease);
}
.m-tb-social a:hover {
    background: var(--m-brand);
    color: #fff !important;
    border-color: var(--m-brand);
    transform: translateY(-2px);
}

/* Mobile: collapse to two-row layout, center the right cluster */
@media (max-width: 767.98px) {
    .m-topbar__row { gap: 8px; padding: 8px 0; }
    .m-topbar__left,
    .m-topbar__right {
        width: 100%;
        justify-content: center;
        gap: 10px;
    }
    .m-tb-text { font-size: 11.5px; }
    .m-tb-phone__text small { display: none; }
    .m-tb-phone__text strong { font-size: 12.5px; }
    .m-tb-lang { height: 30px; padding: 0 28px 0 32px; }
    html[dir="rtl"] .m-tb-lang { padding: 0 32px 0 28px; }
    .m-tb-lang__select { font-size: 12px; min-width: 70px; }
}

@media (max-width: 480px) {
    /* Hide the long opening-hours text on tiny screens to keep header tidy */
    .m-topbar__left .m-tb-item:first-child .m-tb-text { display: none; }
}

/* ============================================================
   LEGACY TOPBAR (.wsus__topbar) — kept for any view that hasn't
   been migrated to .m-topbar yet.
   ============================================================ */
.wsus__topbar {
    background: var(--m-dark) !important;
    background-image: linear-gradient(90deg, rgba(0,0,0,.10), transparent 30%, transparent 70%, rgba(0,0,0,.10));
    border-bottom: 1px solid rgba(0,0,0,.25);
    padding: 0;
    font-size: 13px;
    color: rgba(255,255,255,.7);
    position: relative;
    z-index: 5;
}
.wsus__topbar::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--m-brand) 30%, var(--m-brand) 70%, transparent);
    opacity: .4;
}
.wsus__topbar_inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px;
    min-height: 52px;
    padding: 6px 0;
    flex-wrap: wrap;
}

/* LEFT: info (hours + email) */
.wsus__topbar .wsus__topbar_info {
    list-style: none; padding: 0; margin: 0;
    display: flex; align-items: center; gap: 22px;
    flex-wrap: wrap;
}
.wsus__topbar_info > li {
    display: inline-flex !important;
    align-items: center; gap: 8px;
    color: rgba(255,255,255,.7);
    font-size: 12.5px;
}
.wsus__topbar_info > li i { color: var(--m-gold-2); font-size: 13px; }
.wsus__topbar_info > li > span { color: rgba(255,255,255,.7); }
.wsus__topbar_info a {
    color: rgba(255,255,255,.75) !important;
    transition: color var(--m-fast) var(--m-ease);
    display: inline-flex; align-items: center; gap: 8px;
}
.wsus__topbar_info a:hover { color: var(--m-gold-2) !important; }

/* RIGHT cluster */
.topbar_right {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
    margin-left: auto;
}
html[dir="rtl"] .topbar_right { margin-left: 0; margin-right: auto; }

/* Prominent phone display */
.topbar_phone {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 4px 14px 4px 4px;
    border-radius: var(--m-r-pill);
    background: linear-gradient(135deg, rgba(37,211,102,.16), rgba(37,211,102,.04));
    border: 1px solid rgba(37,211,102,.25);
    color: #fff !important;
    text-decoration: none !important;
    transition: all var(--m-base) var(--m-ease);
    line-height: 1;
    position: relative;
}
html[dir="rtl"] .topbar_phone { padding: 4px 4px 4px 14px; }
.topbar_phone:hover {
    background: linear-gradient(135deg, #25D366, #128C7E);
    border-color: #25D366;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -4px rgba(37,211,102,.5);
}
.topbar_phone_icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    position: relative;
}
.topbar_phone_icon i { color: #fff; }
.topbar_phone_icon .phone_pulse {
    position: absolute; inset: -3px;
    border-radius: 50%;
    border: 2px solid #25D366;
    opacity: .8;
    animation: m-phone-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes m-phone-pulse {
    0%   { transform: scale(.85); opacity: .8; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(.85); opacity: 0; }
}
.topbar_phone_text {
    display: inline-flex; flex-direction: column;
    gap: 2px;
    line-height: 1.1;
    color: #fff;
}
.topbar_phone_text small {
    color: rgba(255,255,255,.55);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
}
.topbar_phone_text strong {
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
    direction: ltr;
}

/* Language switcher (custom styled overlay over native select) */
.topbar_language {
    position: relative;
    display: inline-block;
}
.topbar_lang_label {
    display: inline-flex; align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--m-r-pill);
    color: rgba(255,255,255,.9);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
    transition: all var(--m-fast) var(--m-ease);
    height: 32px;
    user-select: none;
}
.topbar_lang_label:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.20);
    color: #fff;
}
.topbar_lang_label i.fa-globe {
    color: var(--m-gold-2);
    font-size: 13px;
}
.topbar_lang_caret { font-size: 9px !important; opacity: .6; }
.topbar_lang_current { color: inherit; }

/* Hide the actual <select> visually but keep it clickable for the form to submit */
.topbar_language select#select_js3 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    background: transparent !important;
    border: 0 !important;
    color: transparent !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
/* Style the dropdown options (browser-controlled but at least readable) */
.topbar_language select#select_js3 option {
    background: var(--m-surface);
    color: var(--m-text);
    padding: 6px;
}

/* Social icons */
.topbar_icon { gap: 8px; margin: 0; padding: 0; list-style: none; }
.topbar_icon a {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.75) !important;
    border: 1px solid rgba(255,255,255,.10);
    font-size: 11.5px;
    transition: all var(--m-base) var(--m-ease);
}
.topbar_icon a:hover {
    background: var(--m-brand);
    color: #fff !important;
    border-color: var(--m-brand);
    transform: translateY(-2px) rotate(-3deg);
}

@media (max-width: 767.98px) {
    .wsus__topbar_inner { justify-content: center; gap: 10px; padding: 8px 0; }
    .wsus__topbar_info { justify-content: center; gap: 12px; font-size: 11.5px; }
    .topbar_right { gap: 10px; width: 100%; justify-content: center; }
    .topbar_phone_text small { display: none; }
    .topbar_phone_text strong { font-size: 12.5px; }
}

/* ---------- 6. NAVBAR ---------- */
.main_menu, nav.main_menu {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--m-line);
    padding: 16px 0 !important;
    position: sticky; top: 0; z-index: 1020;
    transition: all var(--m-base) var(--m-ease);
    box-shadow: 0 1px 0 rgba(60,40,20,.04);
}
.main_menu.is-scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    padding: 12px 0 !important;
    box-shadow: var(--m-shadow-sm);
}

.navbar-brand img { max-height: 52px; width: auto !important; }

.main_menu .navbar-nav { gap: 2px; }
.main_menu .nav-item .nav-link {
    color: var(--m-text) !important;
    font-weight: 500 !important;
    font-size: 14.5px !important;
    padding: 10px 18px !important;
    border-radius: var(--m-r-pill) !important;
    transition: all var(--m-base) var(--m-ease);
    position: relative;
    text-transform: capitalize;
}
.main_menu .nav-item .nav-link:hover,
.main_menu .nav-item .nav-link.active {
    color: var(--m-brand) !important;
    background: var(--m-brand-soft);
}
.main_menu .nav-item .nav-link::after {
    content: ""; position: absolute; left: 50%; bottom: 4px;
    width: 0; height: 2px; background: var(--m-brand);
    transition: width var(--m-base) var(--m-ease), left var(--m-base) var(--m-ease);
}
.main_menu .nav-item .nav-link:hover::after,
.main_menu .nav-item .nav-link.active::after {
    width: 18px; left: calc(50% - 9px);
}

.main_menu .menu_icon { gap: 10px; align-items: center; }
.main_menu .menu_icon > li > a {
    width: 42px; height: 42px;
    background: var(--m-bg-2);
    border: 1px solid var(--m-line);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--m-text) !important;
    font-size: 14px;
    transition: all var(--m-base) var(--m-ease);
    position: relative;
}
.main_menu .menu_icon > li > a:hover {
    background: var(--m-brand);
    color: #fff !important;
    border-color: var(--m-brand);
    transform: translateY(-2px);
}
.main_menu .menu_icon > li > a.common_btn {
    width: auto !important; height: auto !important; border-radius: var(--m-r-pill) !important;
}
.topbar_cart_qty {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    background: var(--m-brand);
    color: #fff;
    font-size: 10px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--m-bg);
    font-weight: 700;
}

.navbar-toggler {
    border: 1px solid var(--m-line-2) !important;
    color: var(--m-brand) !important;
    width: 44px; height: 44px;
    border-radius: 12px !important;
    background: var(--m-surface) !important;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--m-brand-soft) !important; }

/* Dropdown styling */
.droap_menu, .dropdown-menu {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    border-radius: var(--m-r) !important;
    padding: 8px !important;
    box-shadow: var(--m-shadow);
}
.droap_menu li a, .dropdown-menu .dropdown-item {
    color: var(--m-text-soft) !important;
    border-radius: var(--m-r-sm) !important;
    padding: 10px 14px !important;
}
.droap_menu li a:hover, .dropdown-menu .dropdown-item:hover {
    background: var(--m-gold-soft) !important;
    color: var(--m-gold) !important;
}

/* Search popup */
.wsus__search_form {
    background: rgba(11,11,13,.92) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.wsus__search_form form { width: min(560px, 90%) !important; }
.wsus__search_form input {
    width: 100% !important;
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line-2) !important;
    color: var(--m-text) !important;
    font-family: var(--m-font-body) !important;
    font-size: 1.05rem !important;
    padding: 18px 130px 18px 28px !important;
    border-radius: var(--m-r-pill) !important;
    box-shadow: var(--m-shadow);
}
html[dir="rtl"] .wsus__search_form input { padding: 18px 28px 18px 130px !important; }
.wsus__search_form input:focus {
    outline: none;
    border-color: var(--m-gold) !important;
    box-shadow: 0 0 0 3px var(--m-gold-soft), var(--m-shadow) !important;
}
.wsus__search_form button {
    background: linear-gradient(135deg, var(--m-brand), var(--m-brand-dark)) !important;
    color: #fff !important;
    border-radius: var(--m-r-pill) !important;
    padding: 12px 28px !important;
    border: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .85rem !important;
    right: 6px !important;
    box-shadow: var(--m-glow-gold);
}
html[dir="rtl"] .wsus__search_form button { right: auto !important; left: 6px !important; }
.wsus__search_form .close_search {
    background: var(--m-surface) !important;
    color: var(--m-gold) !important;
    border: 1px solid var(--m-line-2) !important;
    width: 50px !important; height: 50px !important;
    line-height: 48px !important;
    transition: all .25s var(--m-ease);
}
.wsus__search_form .close_search:hover {
    background: var(--m-gold) !important;
    color: #fff !important;
    transform: rotate(90deg);
}

/* ---------- 7. HERO / BANNER ---------- */
.wsus__banner {
    position: relative;
    background: linear-gradient(180deg, var(--m-bg) 0%, var(--m-bg-2) 100%) !important;
    padding: 50px 0 90px !important;
    overflow: hidden;
}
.wsus__banner::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(70% 60% at 85% 15%, rgba(184,84,26,.10), transparent 60%),
        radial-gradient(50% 50% at 10% 90%, rgba(224,168,46,.08), transparent 60%);
    pointer-events: none;
}
.wsus__banner::after {
    content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 60px;
    background: linear-gradient(180deg, transparent, var(--m-bg));
    pointer-events: none;
}
.wsus__banner_overlay { background: transparent !important; position: relative; z-index: 1; }
.banner_shape_1, .banner_shape_2, .banner_shape_3 { opacity: .3; mix-blend-mode: multiply; }

.wsus__banner_slider {
    min-height: 580px;
    display: flex; align-items: center;
    padding: 40px 0;
}

.wsus__banner_text h1 {
    font-size: clamp(2.4rem, 5vw, 4.6rem) !important;
    font-weight: 600 !important;
    color: var(--m-text) !important;
    line-height: 1.05 !important;
    margin-bottom: 18px;
    letter-spacing: -.015em;
}
.wsus__banner_text h1::first-line { color: var(--m-brand); }
.wsus__banner_text h3 {
    font-size: clamp(.95rem, 1.5vw, 1.1rem) !important;
    color: var(--m-brand) !important;
    font-family: var(--m-font-body) !important;
    font-weight: 700 !important;
    letter-spacing: .28em;
    text-transform: uppercase;
    margin-bottom: 18px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    background: var(--m-brand-soft);
    border: 1px solid var(--m-brand-soft);
    border-radius: var(--m-r-pill);
}
.wsus__banner_text h3::before {
    content: ""; width: 14px; height: 1px; background: var(--m-brand);
}
.wsus__banner_text p {
    color: var(--m-text-soft) !important;
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    margin-bottom: 32px !important;
    max-width: 540px;
}
.wsus__banner_text ul { gap: 14px; padding: 0; list-style: none; }

/* ---------- HERO BANNER IMAGE — no shadow, decorative accents ---------- */
.wsus__banner_img {
    position: relative;
    padding: 40px;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Soft brand-tinted glow circle behind the image (replaces hard shadow) */
.wsus__banner_img::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgba(var(--theme-brand-rgb, 184,84,26), .18),
        rgba(var(--theme-brand-rgb, 184,84,26), .04) 50%,
        transparent 75%);
    filter: blur(20px);
    z-index: -2;
    animation: m-banner-glow 8s ease-in-out infinite alternate;
}

/* Subtle dotted ring behind the image */
.wsus__banner_img::after {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    border: 1.5px dashed rgba(var(--theme-brand-rgb, 184,84,26), .25);
    z-index: -1;
    animation: m-banner-rotate 30s linear infinite;
}

@keyframes m-banner-glow {
    0%   { transform: scale(1);   opacity: .8; }
    100% { transform: scale(1.08); opacity: 1; }
}
@keyframes m-banner-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.wsus__banner_img .img {
    position: relative;
    border-radius: 50%;          /* round food photo — looks gourmet */
    overflow: visible;            /* allow badge to escape and float */
    aspect-ratio: 1/1;
    width: 100%;
    max-width: 480px;
    box-shadow: none;             /* ⊘ no shadow */
    background: transparent;
}
.wsus__banner_img .img img {
    width: 100% !important; height: 100% !important;
    object-fit: contain;          /* show the whole food without cropping */
    object-position: center;
    transition: transform 1.5s cubic-bezier(.2,.7,.2,1);
    border-radius: 50%;
    background: transparent;
    /* Soft contour drop — far gentler than a box-shadow */
    filter: drop-shadow(0 10px 18px rgba(var(--theme-dark-rgb, 42,31,23), .15));
    animation: m-banner-float 6s ease-in-out infinite alternate;
}
.wsus__banner_img:hover .img img {
    transform: scale(1.04) rotate(-3deg);
}

@keyframes m-banner-float {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

/* Offer / discount badge — floating chip on the image */
.wsus__banner_img .img > span {
    position: absolute;
    top: 8%;
    inset-inline-end: 0;
    z-index: 3;
    background: linear-gradient(135deg, var(--m-brand), var(--m-brand-dark)) !important;
    color: #fff !important;
    width: auto !important;
    height: auto !important;
    padding: 14px 22px !important;
    border-radius: var(--m-r-pill);
    font-family: var(--m-font-display);
    font-weight: 700;
    font-size: 13px;
    box-shadow:
        0 14px 30px -6px rgba(var(--theme-brand-rgb, 184,84,26), .50),
        inset 0 1px 0 rgba(255,255,255,.20);
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    text-align: center;
    border: 3px solid var(--m-bg);  /* breaking effect against the page */
    transform: rotate(-6deg);
    transition: transform .35s var(--m-ease);
}
.wsus__banner_img:hover .img > span {
    transform: rotate(0deg) scale(1.05);
}

/* Mobile: compact decorative effects */
@media (max-width: 991.98px) {
    .wsus__banner_img { padding: 24px; }
    .wsus__banner_img .img { max-width: 360px; }
    .wsus__banner_img .img > span { font-size: 12px; padding: 10px 18px !important; }
}
@media (max-width: 575.98px) {
    .wsus__banner_img::before,
    .wsus__banner_img::after { display: none; }   /* hide decorative rings on tiny screens */
    .wsus__banner_img .img { max-width: 280px; }
}

/* Slick dots / arrows for banner slider */
.banner_slider .slick-dots { bottom: 16px; }
.banner_slider .slick-dots li button:before {
    color: var(--m-gold) !important;
    font-size: 10px;
    opacity: .35;
}
.banner_slider .slick-dots li.slick-active button:before { opacity: 1; color: var(--m-gold) !important; }

/* ---------- 8. SECTION HEADING ---------- */
.wsus__section_heading {
    text-align: center;
}
.wsus__section_heading h4 {
    color: var(--m-brand) !important;
    font-family: var(--m-font-body) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .3em !important;
    text-transform: uppercase;
    margin-bottom: 14px !important;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    border: 1px solid var(--m-brand-soft);
    border-radius: var(--m-r-pill);
    background: var(--m-brand-soft);
}
.wsus__section_heading h4::before, .wsus__section_heading h4::after {
    content: ""; width: 16px; height: 1px; background: var(--m-brand);
}
.wsus__section_heading h2 {
    font-size: clamp(2rem, 3.6vw, 3.2rem) !important;
    color: var(--m-text) !important;
    margin-bottom: 14px !important;
    font-weight: 600;
    line-height: 1.2;
}
.wsus__section_heading > span {
    display: block; max-width: 100px; margin: 0 auto 18px;
}
.wsus__section_heading > span img {
    filter: brightness(0) saturate(100%) invert(28%) sepia(64%) saturate(680%) hue-rotate(2deg);
    opacity: .65;
}
.wsus__section_heading p {
    color: var(--m-text-soft) !important;
    max-width: 640px; margin: 0 auto !important;
    font-size: 1rem;
    line-height: 1.7;
}

/* ---------- 9. WHY CHOOSE / SERVICES ---------- */
.wsus__why_choose {
    padding: 80px 0;
    background: linear-gradient(180deg, var(--m-bg) 0%, var(--m-bg-2) 100%);
    border-bottom: 1px solid var(--m-line);
}
.wsus__choose_single {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    border-radius: var(--m-r-lg) !important;
    padding: 28px !important;
    margin-bottom: 24px;
    transition: all var(--m-base) var(--m-ease);
    position: relative;
    overflow: hidden;
}
.wsus__choose_single::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--m-gold), transparent);
    transform: scaleX(0); transition: transform var(--m-base) var(--m-ease);
}
.wsus__choose_single:hover {
    transform: translateY(-6px);
    border-color: var(--m-gold-soft) !important;
    box-shadow: var(--m-shadow);
}
.wsus__choose_single:hover::before { transform: scaleX(1); }

.wsus__choose_single .icon, .wsus__choose_single .icon_1 {
    width: 64px !important; height: 64px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--m-brand-soft), rgba(184,84,26,.04)) !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    color: var(--m-brand) !important;
    font-size: 26px !important;
    border: 1px solid var(--m-brand-soft) !important;
    flex-shrink: 0;
}
.wsus__choose_single .icon i { color: var(--m-brand) !important; }
.wsus__choose_single .text {
    flex: 1; padding-left: 18px; padding-right: 18px;
}
.wsus__choose_single .text h3 {
    font-size: 1.15rem !important;
    font-family: var(--m-font-display) !important;
    color: var(--m-text) !important;
    margin-bottom: 6px !important;
}
.wsus__choose_single .text p {
    color: var(--m-text-mute) !important;
    font-size: .95rem;
    margin: 0 !important;
}

/* ---------- 10. OFFER ITEM (Today Special) ---------- */
.wsus__offer_item {
    padding: 100px 0 !important;
    position: relative;
}
.wsus__offer_item_single {
    /* Source product thumbnails are 480×480 square. 5:6 keeps the card
       slightly portrait for a cleaner "tall card" look while only cropping
       the image vertically by a tiny margin. */
    aspect-ratio: 5/6;
    border-radius: var(--m-r-xl) !important;
    overflow: hidden;
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    padding: 28px !important;
    display: flex; flex-direction: column; justify-content: flex-end;
    margin-bottom: 24px;
    transition: transform var(--m-base) var(--m-ease);
    isolation: isolate;
    background-color: var(--m-bg-2);
}
.wsus__offer_item_single::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.4) 50%, rgba(11,11,13,.92) 100%);
}
.wsus__offer_item_single:hover { transform: translateY(-8px); }
.wsus__offer_item_single > span:first-child {
    position: absolute; top: 22px; left: 22px;
    background: var(--m-accent) !important;
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--m-r-pill);
    font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
}
.wsus__offer_item_single .title {
    color: #fff !important;
    font-family: var(--m-font-display) !important;
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
    display: block;
}
.wsus__offer_item_single .title:hover { color: var(--m-gold) !important; }
.wsus__offer_item_single p {
    color: rgba(255,255,255,.78) !important;
    font-size: .95rem;
    margin-bottom: 18px !important;
}
.wsus__offer_item_single ul { gap: 8px; padding: 0; list-style: none; margin: 0 !important; }
.wsus__offer_item_single ul a {
    width: 40px; height: 40px;
    background: rgba(255,255,255,.12) !important;
    backdrop-filter: blur(10px);
    color: #fff !important;
    border-radius: 50% !important;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.18);
    transition: all var(--m-base) var(--m-ease);
}
.wsus__offer_item_single ul a:hover {
    background: var(--m-gold) !important;
    color: #fff !important;
    border-color: var(--m-gold);
    transform: translateY(-2px);
}

/* ---------- 11. MENU SECTION ---------- */
.wsus__menu {
    padding: 100px 0 !important;
    background: linear-gradient(180deg, var(--m-bg-2) 0%, var(--m-bg) 100%);
    position: relative;
}
/* ============================================================
   FILTER TOOLBAR — wraps category filter + view toggle
   ============================================================ */
.m-filter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.m-filter-toolbar .menu_filter {
    flex: 1 1 auto;
    margin: 0 !important;
    justify-content: center;
}

/* === GRID / LIST VIEW TOGGLE === */
.m-view-toggle {
    display: inline-flex;
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-pill);
    padding: 4px;
    box-shadow: var(--m-shadow-sm);
    flex-shrink: 0;
}
.m-view-toggle__btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: var(--m-text-mute);
    font-size: 14px;
    cursor: pointer;
    transition: all .25s var(--m-ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.m-view-toggle__btn:hover { color: var(--m-brand); }
.m-view-toggle__btn.active {
    background: linear-gradient(135deg, var(--m-brand), var(--m-brand-dark));
    color: #fff;
    box-shadow: 0 6px 14px -4px rgba(var(--theme-brand-rgb, 184,84,26), .40);
}

/* === COMPACT LIST VIEW — multi-column, horizontal mini-cards === */
.m-view-list {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 16px;
}

/* Override Bootstrap column widths so 3-4 compact list cards fit per row */
.m-view-list > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
@media (min-width: 768px) {
    .m-view-list > [class*="col-"] { flex: 0 0 50% !important; max-width: 50% !important; }
}
@media (min-width: 992px) {
    .m-view-list > [class*="col-"] { flex: 0 0 33.3333% !important; max-width: 33.3333% !important; }
}
@media (min-width: 1400px) {
    .m-view-list > [class*="col-"] { flex: 0 0 25% !important; max-width: 25% !important; }
}

/* The card itself becomes a compact horizontal layout */
.m-view-list .wsus__menu_item {
    flex-direction: row !important;
    min-height: 130px;                /* compact height */
    align-items: stretch;
    height: auto;
    margin-bottom: 0 !important;
    overflow: hidden;
}
.m-view-list .wsus__menu_item .wsus__menu_item_img {
    flex: 0 0 130px !important;
    width: 130px !important;
    height: 130px !important;
    aspect-ratio: 1/1 !important;
    border-radius: 0 !important;
    background: var(--m-bg-2);
}

/* Hide most overlay badges (no room in compact view) */
.m-view-list .wsus__menu_item_img > .wishlist_overlay {
    width: 28px !important; height: 28px !important;
    top: 8px !important; inset-inline-end: 8px !important;
    font-size: 12px;
}
.m-view-list .wsus__menu_item_img > .discount_badge {
    top: 8px !important; inset-inline-start: 8px !important;
    padding: 3px 8px;
    font-size: 10px;
}
.m-view-list .wsus__menu_item_img .calorie-badge {
    bottom: 6px !important; inset-inline-end: 6px !important;
    padding: 2px 7px 2px 6px;
    font-size: 10px;
    gap: 3px;
    width: max-content;
}
.m-view-list .wsus__menu_item_img .calorie-badge::after { font-size: 8px; }
.m-view-list .wsus__menu_item_img .calorie-badge i {
    font-size: 9px;
    width: 10px;
    height: auto;
}
.m-view-list .wsus__menu_item_img .category {
    display: none;                   /* category text would clip; rely on filter chips above */
}

/* Text side */
.m-view-list .wsus__menu_item_text {
    flex: 1 1 auto !important;
    min-width: 0;                    /* allow text to truncate */
    text-align: start !important;
    padding: 12px 14px !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.m-view-list .wsus__menu_item_text .rating {
    justify-content: flex-start !important;
    margin: 0 !important;
    font-size: 11px;
    letter-spacing: 1px;
}
.m-view-list .wsus__menu_item_text .rating span {
    font-size: 10.5px;
    margin-inline-start: 4px;
}
.m-view-list .wsus__menu_item_text .title {
    text-align: start !important;
    font-size: .98rem !important;
    margin: 2px 0 !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2;
}
.m-view-list .m-allergen-indicator {
    margin: 0;
    padding: 2px 7px;
    font-size: 9.5px;
    align-self: flex-start;
}
.m-view-list .wsus__menu_card_footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px dashed var(--m-line);
    gap: 8px;
}
.m-view-list .wsus__menu_card_footer .price {
    font-size: 1.05rem !important;
    line-height: 1;
}
.m-view-list .wsus__menu_card_footer .price img.Saudi_Riyal { width: 12px !important; }
.m-view-list .wsus__menu_card_footer .price del {
    font-size: .55em !important;
}
.m-view-list .wsus__add_btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    font-size: 12px;
    box-shadow: 0 6px 14px -4px rgba(var(--theme-brand-rgb, 184,84,26), .40);
}

/* Mobile: single column, slightly bigger thumbnail */
@media (max-width: 575.98px) {
    .m-view-list .wsus__menu_item .wsus__menu_item_img {
        flex: 0 0 110px !important;
        width: 110px !important;
        height: 110px !important;
    }
    .m-view-list .wsus__menu_item { min-height: 110px; }
    .m-view-list .wsus__menu_item_text { padding: 10px 12px !important; }
    .m-view-toggle { display: none; }
    .m-filter-toolbar { justify-content: center; }
}

/* ---------- CATEGORY FILTER PILLS — modern, elegant ---------- */
.menu_filter {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 50px;
    padding: 0;
    background: transparent;
    border: 0;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    position: relative;
}

/* Each filter pill: clean rounded chip with brand-tinted hover */
.menu_filter button {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    color: var(--m-text-soft) !important;
    padding: 11px 22px !important;
    border-radius: var(--m-r-pill) !important;
    font-family: var(--m-font-body) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    letter-spacing: .015em;
    transition: all .35s cubic-bezier(.2,.7,.2,1);
    margin: 0 !important;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(var(--theme-dark-rgb, 42,31,23), .04);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    line-height: 1.3;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Tiny dot before each label for visual rhythm */
.menu_filter button::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--m-text-mute);
    opacity: .35;
    transition: all .35s cubic-bezier(.2,.7,.2,1);
    flex-shrink: 0;
}

.menu_filter button:hover {
    color: var(--m-brand) !important;
    border-color: var(--m-brand-soft) !important;
    background: var(--m-surface) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -6px rgba(var(--theme-brand-rgb, 184,84,26), .25);
}
.menu_filter button:hover::before {
    background: var(--m-brand);
    opacity: 1;
    transform: scale(1.4);
}

.menu_filter button.active,
.menu_filter button.first_menu_product:first-child {
    background: linear-gradient(135deg, var(--m-brand), var(--m-brand-dark)) !important;
    color: #fff !important;
    border-color: var(--m-brand) !important;
    box-shadow:
        0 10px 22px -6px rgba(var(--theme-brand-rgb, 184,84,26), .50),
        inset 0 1px 0 rgba(255,255,255,.20);
    transform: translateY(-1px);
}

/* Override the "first_menu_product:first-child" match when not actually active */
.menu_filter button:not(.active) {
    background: var(--m-surface) !important;
    color: var(--m-text-soft) !important;
    border-color: var(--m-line) !important;
    box-shadow: 0 1px 2px rgba(var(--theme-dark-rgb, 42,31,23), .04);
}
.menu_filter button:not(.active):hover {
    color: var(--m-brand) !important;
    border-color: var(--m-brand-soft) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -6px rgba(var(--theme-brand-rgb, 184,84,26), .25);
}

.menu_filter button.active::before {
    background: rgba(255,255,255,.85);
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 0 3px rgba(255,255,255,.20);
}

/* Active state: subtle shimmer that sweeps once */
.menu_filter button.active::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.25) 50%, transparent 80%);
    transform: skewX(-20deg);
    animation: m-filter-shimmer 1.4s ease-out;
    pointer-events: none;
}
@keyframes m-filter-shimmer {
    0%   { inset-inline-start: -100%; }
    100% { inset-inline-start: 130%; }
}

/* Mobile: horizontal scroll instead of wrapping */
@media (max-width: 575.98px) {
    .menu_filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 4px 4px 14px;
        margin-bottom: 30px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--m-brand-soft) transparent;
    }
    .menu_filter::-webkit-scrollbar { height: 4px; }
    .menu_filter::-webkit-scrollbar-track { background: transparent; }
    .menu_filter::-webkit-scrollbar-thumb { background: var(--m-brand-soft); border-radius: 4px; }
    .menu_filter button {
        flex-shrink: 0;
        padding: 9px 18px !important;
        font-size: 12.5px !important;
    }
}

.wsus__menu_item {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    border-radius: var(--m-r-lg) !important;
    overflow: hidden;
    margin: 0 0 28px !important;        /* override legacy margin-top: 75px */
    transition: transform var(--m-base) var(--m-ease),
                box-shadow var(--m-base) var(--m-ease),
                border-color var(--m-base) var(--m-ease);
    position: relative;
    box-shadow: var(--m-shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.wsus__menu_item:hover {
    transform: translateY(-8px);
    border-color: var(--m-brand-soft) !important;
    box-shadow: var(--m-shadow-lg);
}
/* ⚠ MUST override legacy style.css which had this absolutely positioned with
   top:-50px (image floated ABOVE the card, overlapping the title and getting
   cropped by the card border). The new design keeps the image *inside* the
   card flow. */
.wsus__menu_item .wsus__menu_item_img,
.wsus__menu_item_img {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1;             /* square image — perfect for 480×480 source */
    overflow: hidden;
    background: var(--m-bg-2);
    flex-shrink: 0;
    isolation: isolate;
    box-shadow: none !important;
    margin: 0 !important;
}
.wsus__menu_item .wsus__menu_item_img img,
.wsus__menu_item_img > .wsus__menu_img_link img {
    border: 0 !important;
    border-radius: 0 !important;
}
.wsus__menu_item_img::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(42,31,23,.40));
    opacity: 0;
    transition: opacity var(--m-base) var(--m-ease);
    z-index: 2;
    pointer-events: none;
}
.wsus__menu_item:hover .wsus__menu_item_img::after { opacity: 1; }

.wsus__menu_item_img img {
    width: 100% !important; height: 100% !important;
    /* "contain" keeps the WHOLE image visible — no part of it gets cropped
       even if the image aspect ratio differs from the card's 1:1 frame. */
    object-fit: contain !important;
    object-position: center;
    transition: transform var(--m-slow) var(--m-ease);
    display: block;
    background: var(--m-bg-2);
    padding: 4px;
}
.wsus__menu_item:hover .wsus__menu_item_img img { transform: scale(1.05); }

.wsus__menu_item_img .category {
    position: absolute; top: 14px; left: 14px;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(10px);
    color: var(--m-brand) !important;
    padding: 5px 12px !important;
    border-radius: var(--m-r-pill);
    font-size: 11px;
    border: 0 !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    z-index: 2;
    box-shadow: var(--m-shadow-sm);
}
html[dir="rtl"] .wsus__menu_item_img .category { left: auto; right: 14px; }

.calorie-badge {
    position: absolute; top: 14px; right: 14px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    color: var(--m-text) !important;
    padding: 5px 11px;
    border-radius: var(--m-r-pill);
    font-size: 11px;
    border: 0;
    z-index: 2;
    font-weight: 600;
    box-shadow: var(--m-shadow-sm);
}
.calorie-badge i { color: var(--m-brand); margin-right: 4px; }
html[dir="rtl"] .calorie-badge { right: auto; left: 14px; }
html[dir="rtl"] .wsus__menu_item_img .category { left: auto; right: auto; left: 14px; }
html[dir="rtl"] .calorie-badge { right: auto; left: auto; right: 14px; }

/* Quick action overlay (appears on hover over image) */
.wsus__menu_item_img > .wsus__quick_actions, .wsus__menu_item .wsus__quick_actions {
    position: absolute;
    bottom: 14px; left: 50%;
    transform: translate(-50%, 14px);
    display: inline-flex;
    gap: 8px;
    z-index: 3;
    opacity: 0;
    transition: all var(--m-base) var(--m-ease);
}
.wsus__menu_item:hover .wsus__quick_actions {
    opacity: 1;
    transform: translate(-50%, 0);
}
.wsus__menu_item .wsus__quick_actions a {
    width: 38px; height: 38px;
    background: rgba(255,255,255,.96);
    color: var(--m-brand);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: all var(--m-fast) var(--m-ease);
    box-shadow: var(--m-shadow-sm);
}
.wsus__menu_item .wsus__quick_actions a:hover {
    background: var(--m-brand);
    color: #fff;
    transform: scale(1.08);
}

/* (Older duplicate of .wsus__menu_item_text + children removed.
   The authoritative rules live in section 11.5 ENHANCED MENU CARD below.) */

/* Legacy 3-icon action row — only used by very old markup, otherwise inert */
.wsus__menu_item_text ul {
    gap: 10px;
    margin: 0 !important;
    padding: 0;
    list-style: none;
    align-items: center;
    justify-content: center;
}
.wsus__menu_item_text ul a {
    width: 38px; height: 38px;
    background: var(--m-bg-2);
    color: var(--m-text-soft) !important;
    border: 1px solid var(--m-line) !important;
    border-radius: 50% !important;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--m-base) var(--m-ease);
    font-size: 13px;
}
.wsus__menu_item_text ul a:hover {
    background: var(--m-brand-soft) !important;
    color: var(--m-brand) !important;
    border-color: var(--m-brand-soft) !important;
    transform: translateY(-2px);
}
/* The first action (Add to cart) gets the brand treatment */
.wsus__menu_item_text ul li:first-child a {
    background: linear-gradient(135deg, var(--m-brand), var(--m-brand-dark)) !important;
    color: #fff !important;
    border-color: var(--m-brand) !important;
    width: 44px; height: 44px;
    font-size: 15px;
    box-shadow: var(--m-shadow-brand);
}
.wsus__menu_item_text ul li:first-child a:hover {
    transform: translateY(-3px) scale(1.04);
    color: #fff !important;
    box-shadow: 0 16px 32px -8px rgba(184,84,26,.5);
    filter: brightness(1.05);
}

/* ---------- 11.5 ENHANCED MENU CARD ---------- */

/* Image link — wraps the <img>, so badges stay above it */
.wsus__menu_img_link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    text-decoration: none;
}
.wsus__menu_img_link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;       /* no cropping — full image visible */
    object-position: center;
    transition: transform var(--m-slow) var(--m-ease);
}

/* Discount badge (top-start corner) */
.wsus__menu_item_img > .discount_badge {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    background: linear-gradient(135deg, var(--m-brand), var(--m-brand-dark));
    color: #fff !important;
    padding: 5px 11px;
    border-radius: var(--m-r-pill);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    z-index: 5;
    box-shadow: var(--m-shadow-brand);
    border: 0 !important;
    pointer-events: none;
}

/* Calorie badge — minimalist: fire icon + number, glassy pill
   Sizing tuned so the icon and number read as one balanced unit:
   the number is the data, the icon is the supporting glyph. */
.calorie-badge,
.wsus__menu_item_img > .calorie-badge {
    position: absolute;
    top: auto;
    bottom: 12px;
    inset-inline-end: 12px;
    inset-inline-start: auto;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--m-text) !important;
    padding: 4px 10px 4px 8px;
    border-radius: var(--m-r-pill);
    font-size: 11.5px;
    font-weight: 700;
    border: 0;
    z-index: 5;
    box-shadow: 0 4px 14px -4px rgba(var(--theme-dark-rgb, 42,31,23), .22);
    pointer-events: none;
    line-height: 1;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}
.calorie-badge i {
    color: #FF5722 !important;
    font-size: 10.5px;       /* slightly smaller than the number for balance */
    width: 12px;             /* fixed glyph slot keeps badges visually aligned */
    text-align: center;
    margin: 0 !important;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(229, 57, 46, .35));
}

/* Wishlist heart (top-end corner) */
.wsus__menu_item_img > .wishlist_overlay {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 38px; height: 38px;
    background: rgba(255,255,255,.96);
    color: var(--m-text-soft) !important;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    font-size: 14px;
    z-index: 6;
    transition: all .25s var(--m-ease);
    box-shadow: var(--m-shadow-sm);
    cursor: pointer;
    border: 0;
    text-decoration: none;
}
.wsus__menu_item_img > .wishlist_overlay:hover {
    background: var(--m-brand);
    color: #fff !important;
    transform: scale(1.08);
}
.wsus__menu_item_img > .wishlist_overlay i { transition: transform .2s; line-height: 1; }
.wsus__menu_item_img > .wishlist_overlay:hover i { transform: scale(1.1); }

/* Category pill (bottom-start corner) */
.wsus__menu_item_img .category {
    position: absolute !important;
    top: auto !important;
    bottom: 14px;
    inset-inline-start: 14px;
    inset-inline-end: auto !important;
    z-index: 5;
    background: rgba(255,255,255,.95) !important;
    backdrop-filter: blur(8px);
    color: var(--m-brand) !important;
    padding: 5px 12px !important;
    border-radius: var(--m-r-pill);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    box-shadow: var(--m-shadow-sm);
    text-decoration: none;
    border: 0 !important;
}

/* Body container — compact, sits right under the image */
.wsus__menu_item_text {
    padding: 16px 18px 18px !important;
    text-align: center;
    background: var(--m-surface);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Rating */
.wsus__menu_item_text .rating {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 2px;
    color: var(--m-amber) !important;
    font-size: 13px;
    margin: 0 0 8px !important;
    letter-spacing: 1.5px;
    line-height: 1;
}
.wsus__menu_item_text .rating span {
    color: var(--m-text-mute) !important;
    margin-inline-start: 6px;
    font-size: 11.5px;
    letter-spacing: 0;
}

/* Title — bigger and more prominent. Safe display (no -webkit-box hacks
   that some legacy stylesheets accidentally collapse). */
.wsus__menu_item_text .title {
    color: var(--m-text) !important;
    font-family: var(--m-font-display) !important;
    font-size: 1.15rem !important;
    margin: 0 0 10px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: block !important;       /* ALWAYS visible — no flex/box weirdness */
    visibility: visible !important;
    opacity: 1 !important;
    text-align: center !important;
    word-break: break-word;
    /* Cap to 2 lines max with ellipsis (modern browsers) */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.wsus__menu_item_text .title:hover { color: var(--m-brand) !important; }

/* Footer row: price + circular add-to-cart button — pushed to bottom of body */
.wsus__menu_card_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;       /* keeps footer at the bottom when row stretches cards */
    padding-top: 12px;
    border-top: 1px solid var(--m-line);
    gap: 10px;
}

.wsus__menu_card_footer .price {
    margin: 0 !important;
    text-align: start;
    line-height: 1.1;
    flex: 1 1 auto;
    color: var(--m-brand) !important;
    /* Crisp sans-serif with tabular numerics — reads cleaner for prices than the
       display serif. Numbers always line up across cards. */
    font-family: var(--m-font-body) !important;
    font-size: 1.55rem !important;
    font-weight: 800;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "ss01" 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.wsus__menu_card_footer .price .m-price-amount { line-height: 1; }
.wsus__menu_card_footer .price img.Saudi_Riyal {
    width: 18px !important;
    height: auto !important;
    margin: 0 !important;
    /* Tint the SVG to match the brand color via CSS filter */
    filter: brightness(0) saturate(100%) invert(28%) sepia(64%) saturate(2000%) hue-rotate(8deg) brightness(94%) contrast(91%);
    vertical-align: -2px;
    flex-shrink: 0;
}
.wsus__menu_card_footer .price del {
    color: var(--m-text-mute) !important;
    font-size: .68em;
    opacity: .65;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.wsus__menu_card_footer .price del img.Saudi_Riyal {
    width: 11px !important;
    filter: brightness(0) saturate(100%) invert(58%) sepia(8%) saturate(360%) hue-rotate(2deg) brightness(95%) contrast(86%);
}

.wsus__add_btn {
    width: 46px; height: 46px;
    min-width: 46px;
    background: linear-gradient(135deg, var(--m-brand), var(--m-brand-dark));
    color: #fff !important;
    border: 0;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .25s var(--m-ease), box-shadow .25s var(--m-ease), filter .15s;
    box-shadow: 0 10px 22px -6px rgba(var(--theme-brand-rgb, 184,84,26), .50);
    flex-shrink: 0;
    text-decoration: none;
}
.wsus__add_btn:hover {
    transform: translateY(-2px) scale(1.06);
    color: #fff !important;
    filter: brightness(1.06);
    box-shadow: 0 16px 30px -6px rgba(var(--theme-brand-rgb, 184,84,26), .55);
}
.wsus__add_btn:active { transform: scale(.95); }
.wsus__add_btn i { transition: transform .25s; line-height: 1; }
.wsus__add_btn:hover i { transform: rotate(90deg); }

@media (max-width: 380px) {
    .wsus__menu_item { min-height: 380px; }
    .wsus__menu_card_footer .price { font-size: 1.4rem !important; }
    .wsus__menu_card_footer .price img.Saudi_Riyal { width: 16px !important; }
    .wsus__add_btn { width: 42px; height: 42px; min-width: 42px; }
}

/* ---------- 12. ADVERTISEMENT BANNERS ---------- */
.wsus__add_slider { padding: 60px 0 !important; }
.wsus__add_slider_single {
    aspect-ratio: 16/9;
    border-radius: var(--m-r-xl) !important;
    overflow: hidden;
    position: relative;
    display: flex; align-items: center;
    padding: 36px !important;
    background-size: cover !important;
    background-position: center !important;
    isolation: isolate;
    transition: transform var(--m-base) var(--m-ease);
    margin-bottom: 24px;
}
.wsus__add_slider_single::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(11,11,13,.85), rgba(11,11,13,.2));
}
.wsus__add_slider_single:hover { transform: translateY(-4px); }
.wsus__add_slider_single .text { color: #fff; max-width: 65%; }
.wsus__add_slider_single h3 {
    font-family: var(--m-font-display);
    font-size: 1.6rem !important;
    color: #fff !important;
    margin-bottom: 8px !important;
}
.wsus__add_slider_single p { color: rgba(255,255,255,.75) !important; font-size: .95rem; margin: 0 !important; }

/* ---------- 13. CHEFS / TEAM ---------- */
.wsus__team {
    padding: 100px 0 !important;
    background: var(--m-bg-2) !important;
    position: relative;
}
.wsus__single_team {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    border-radius: var(--m-r-lg) !important;
    overflow: hidden;
    margin-bottom: 24px;
    transition: all var(--m-base) var(--m-ease);
}
.wsus__single_team:hover {
    transform: translateY(-6px);
    border-color: var(--m-gold-soft) !important;
}
.wsus__single_team_img {
    aspect-ratio: 1/1;
    overflow: hidden;
    position: relative;
}
.wsus__single_team_img img {
    width: 100% !important; height: 100% !important;
    object-fit: cover;
    transition: transform var(--m-slow) var(--m-ease);
    filter: grayscale(20%);
}
.wsus__single_team:hover .wsus__single_team_img img { transform: scale(1.05); filter: grayscale(0); }
.wsus__single_team_text {
    padding: 22px !important;
    text-align: center;
}
.wsus__single_team_text h4 {
    color: var(--m-text) !important;
    font-family: var(--m-font-display) !important;
    font-size: 1.25rem !important;
    margin-bottom: 4px !important;
}
.wsus__single_team_text p {
    color: var(--m-gold) !important;
    font-size: .85rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 16px !important;
}
.wsus__single_team_text ul {
    gap: 10px; padding: 0; list-style: none; margin: 0 !important;
}
.wsus__single_team_text ul a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--m-line);
    color: var(--m-text-soft) !important;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--m-base) var(--m-ease);
    font-size: 13px;
}
.wsus__single_team_text ul a:hover {
    background: var(--m-gold);
    color: #fff !important;
    border-color: var(--m-gold);
    transform: translateY(-2px);
}

/* ---------- 14. APP DOWNLOAD ---------- */
.wsus__download { padding: 60px 0 !important; }
.wsus__download_bg {
    border-radius: var(--m-r-xl) !important;
    overflow: hidden;
    background-size: cover !important;
    background-position: center !important;
    position: relative;
    isolation: isolate;
}
.wsus__download_overlay {
    background: linear-gradient(120deg, rgba(11,11,13,.92), rgba(194,91,63,.2)) !important;
    padding: 70px 50px;
}
.wsus__download_text h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
    color: #fff !important;
    margin-bottom: 14px !important;
}
.wsus__download_text p { color: rgba(255,255,255,.75) !important; margin-bottom: 28px !important; }
.wsus__download_text ul { gap: 14px; padding: 0; list-style: none; }
.wsus__download_text ul a {
    display: inline-flex !important; align-items: center; gap: 12px;
    background: #fff !important; color: #111 !important;
    padding: 12px 22px !important;
    border-radius: var(--m-r) !important;
    transition: all var(--m-base) var(--m-ease);
}
.wsus__download_text ul a:hover { transform: translateY(-2px); background: var(--m-gold) !important; }
.wsus__download_text ul a i { font-size: 26px; }
.wsus__download_text ul a p { color: #111 !important; margin: 0 !important; line-height: 1.2; font-size: 14px; font-weight: 600; }
.wsus__download_text ul a p span { color: #555 !important; font-size: 11px; font-weight: 400; display: block; }

/* ---------- 15. COUNTER ---------- */
.wsus__counter {
    background-color: var(--m-bg-2) !important;
    background-blend-mode: multiply !important;
    position: relative;
}
.wsus__counter_overlay { background: rgba(11,11,13,.8) !important; }
.wsus__single_counter {
    text-align: center;
    padding: 24px;
    border-radius: var(--m-r-lg);
    transition: all var(--m-base) var(--m-ease);
}
.wsus__single_counter:hover { background: rgba(212,175,55,.06); }
.wsus__single_counter > i {
    font-size: 38px !important;
    color: var(--m-gold) !important;
    margin-bottom: 14px !important;
    display: inline-block;
}
.wsus__single_counter .text h2,
.wsus__single_counter .counter {
    font-size: clamp(2.4rem, 4vw, 3.2rem) !important;
    color: #fff !important;
    font-family: var(--m-font-display) !important;
    margin-bottom: 4px !important;
    font-weight: 700;
}
.wsus__single_counter .text p {
    color: var(--m-text-mute) !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 12px !important;
    margin: 0 !important;
}

/* ---------- 16. TESTIMONIALS ---------- */
.wsus__testimonial {
    padding: 100px 0 !important;
    background: var(--m-bg) !important;
}
.wsus__single_testimonial {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    border-radius: var(--m-r-lg) !important;
    padding: 28px !important;
    margin: 12px;
    transition: all var(--m-base) var(--m-ease);
    position: relative;
}
.wsus__single_testimonial:hover {
    transform: translateY(-4px);
    border-color: var(--m-gold-soft) !important;
}
.wsus__single_testimonial::before {
    content: "\201C";
    position: absolute; top: 16px; right: 24px;
    font-family: var(--m-font-display);
    font-size: 100px;
    color: var(--m-gold-soft);
    line-height: 1;
    opacity: .5;
}
.wsus__testimonial_header { gap: 14px; align-items: center; margin-bottom: 16px; }
.wsus__testimonial_header .img {
    width: 56px !important; height: 56px !important;
    border-radius: 50% !important;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--m-gold-soft);
}
.wsus__testimonial_header .img img { width: 100% !important; height: 100% !important; object-fit: cover; }
.wsus__testimonial_header .text h4 {
    font-size: 1.05rem !important;
    color: var(--m-text) !important;
    margin-bottom: 2px !important;
    font-family: var(--m-font-display) !important;
}
.wsus__testimonial_header .text p {
    font-size: .8rem !important;
    color: var(--m-text-mute) !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 !important;
}
.wsus__single_testimonial_body .feedback {
    color: var(--m-text-soft) !important;
    font-style: italic;
    line-height: 1.8;
    margin-bottom: 14px !important;
    font-size: 1rem;
}
.wsus__single_testimonial_body .rating {
    color: var(--m-amber) !important;
    letter-spacing: 3px;
    font-size: 14px;
}
.wsus__testimonial_product {
    margin-top: 14px;
    border-top: 1px solid var(--m-line);
    padding-top: 14px;
}
.wsus__testimonial_product img {
    width: 60px !important; height: 60px !important;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--m-line);
}

/* ---------- 17. BLOG ---------- */
.wsus__blog {
    background-blend-mode: multiply !important;
    background-color: var(--m-bg-2) !important;
}
.wsus__blog_overlay { background: rgba(11,11,13,.86); }
.wsus__single_blog {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    border-radius: var(--m-r-lg) !important;
    overflow: hidden;
    margin-bottom: 24px;
    transition: all var(--m-base) var(--m-ease);
}
.wsus__single_blog:hover {
    transform: translateY(-6px);
    border-color: var(--m-gold-soft) !important;
    box-shadow: var(--m-shadow);
}
.wsus__single_blog_img {
    aspect-ratio: 16/10;
    display: block;
    overflow: hidden;
    position: relative;
}
.wsus__single_blog_img img {
    width: 100% !important; height: 100% !important;
    object-fit: cover;
    transition: transform var(--m-slow) var(--m-ease);
}
.wsus__single_blog:hover .wsus__single_blog_img img { transform: scale(1.05); }

.wsus__single_blog_text { padding: 22px !important; }
.wsus__single_blog_text .category {
    display: inline-block;
    background: rgba(212,175,55,.1);
    color: var(--m-gold) !important;
    padding: 4px 12px;
    border-radius: var(--m-r-pill);
    font-size: 12px;
    border: 1px solid var(--m-gold-soft);
    margin-bottom: 12px;
}
.wsus__single_blog_text ul {
    gap: 16px; padding: 0; list-style: none;
    margin-bottom: 12px !important;
    color: var(--m-text-mute);
    font-size: 13px;
}
.wsus__single_blog_text ul li i { color: var(--m-gold); margin-right: 6px; }
.wsus__single_blog_text .title {
    color: var(--m-text) !important;
    font-family: var(--m-font-display) !important;
    font-size: 1.25rem !important;
    line-height: 1.35 !important;
    display: block;
}
.wsus__single_blog_text .title:hover { color: var(--m-gold) !important; }

/* ---------- 18. BRAND / PARTNERS ---------- */
.wsus__brand {
    background-color: var(--m-bg-2) !important;
    background-blend-mode: multiply !important;
    border-top: 1px solid var(--m-line);
    border-bottom: 1px solid var(--m-line);
}
.wsus__brand_overlay {
    background: rgba(11,11,13,.85);
    padding: 50px 0;
}
.wsus__single_brand {
    display: block;
    text-align: center;
    padding: 12px 18px;
    opacity: .55;
    filter: grayscale(70%) brightness(1.4);
    transition: all var(--m-base) var(--m-ease);
}
.wsus__single_brand:hover { opacity: 1; filter: grayscale(0%) brightness(1); }
.wsus__single_brand img { max-height: 50px; width: auto !important; margin: 0 auto; }

/* ---------- 19. FOOTER (dark warm — elegant contrast against cream body) ---------- */
footer {
    background-color: var(--m-dark) !important;
    background-blend-mode: multiply !important;
    border-top: 1px solid var(--m-dark-2);
    color: rgba(255,255,255,.75);
    margin-top: 80px;            /* breathing room above the footer */
    padding-top: 50px;       /* no outer padding — internal layers handle spacing */
    position: relative;
}
.footer_overlay {
    background: rgba(42, 31, 23, 0.94);
    padding: 60px 0 0 !important;   /* top padding only — bottom strip handles bottom */
}

@media (max-width: 991.98px) {
    footer { margin-top: 50px; }
    .footer_overlay { padding: 40px 0 0 !important; }
}
footer .wsus__footer_content > span {
    color: rgba(255,255,255,.65) !important;
    display: block;
    margin: 14px 0 22px;
    font-size: .92rem;
    line-height: 1.75;
}
footer .wsus__footer_content h3 { color: #fff !important; }
footer .wsus__footer_content ul li a { color: rgba(255,255,255,.6) !important; }
footer .wsus__footer_content ul li a:hover { color: var(--m-gold-2) !important; }

/* Address / phone / email rows — icon in a circular chip + text
   ⚠ MUST override legacy style.css which made the icon position:absolute
       (causing it to render stacked above the text instead of inline). */
footer .wsus__footer_content .info,
.wsus__footer_content .info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: rgba(255,255,255,.72) !important;
    font-size: .9rem;
    line-height: 1.55;
    text-decoration: none !important;
    padding: 6px 0 !important;
    padding-left: 0 !important;            /* override legacy padding-left:35px */
    padding-right: 0 !important;
    margin: 0 !important;
    position: relative;
    transition: color .25s var(--m-ease);
}
footer .wsus__footer_content .info:hover,
.wsus__footer_content .info:hover { color: #fff !important; }

footer .wsus__footer_content .info > i,
.wsus__footer_content .info > i {
    /* Reset legacy absolute positioning */
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    -webkit-transform: none !important;

    /* Apply chip style */
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: var(--m-gold-2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    margin: 0 !important;
    flex-shrink: 0;
    transition: all .25s var(--m-ease);
    text-align: center;
    vertical-align: middle;
}
footer .wsus__footer_content .info:hover > i,
.wsus__footer_content .info:hover > i {
    background: var(--m-brand) !important;
    border-color: var(--m-brand) !important;
    color: #fff !important;
    transform: scale(1.05) !important;
}
footer .wsus__footer_content form input {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #fff !important;
}
footer .wsus__footer_content form input::placeholder { color: rgba(255,255,255,.4) !important; }
footer .wsus__footer_social_link h5 { color: #fff !important; }
footer .wsus__footer_social_link ul a {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.7) !important;
}
footer .wsus__footer_social_link ul a:hover { background: var(--m-brand) !important; color: #fff !important; border-color: var(--m-brand); }
.wsus__footer_content .footer_logo {
    display: inline-block;
    margin-bottom: 18px;
}
.wsus__footer_content .footer_logo img { max-height: 56px; width: auto !important; }
.wsus__footer_content > span,
.wsus__footer_content .info {
    color: var(--m-text-mute) !important;
    display: block;
    margin-bottom: 12px;
    font-size: .92rem;
    line-height: 1.7;
}
.wsus__footer_content .info i {
    color: var(--m-gold);
    margin-right: 10px;
    width: 20px;
    text-align: center;
}
.wsus__footer_content .info:hover { color: var(--m-gold) !important; }

.wsus__footer_content h3 {
    color: var(--m-text) !important;
    font-size: 1.05rem !important;
    font-family: var(--m-font-body) !important;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 22px !important;
    position: relative;
    padding-bottom: 12px;
}
.wsus__footer_content h3::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 30px; height: 2px;
    background: var(--m-gold);
}
html[dir="rtl"] .wsus__footer_content h3::after { left: auto; right: 0; }

.wsus__footer_content ul { padding: 0; list-style: none; margin: 0; }
.wsus__footer_content ul li { margin-bottom: 10px; }
.wsus__footer_content ul li a {
    color: var(--m-text-mute) !important;
    transition: all var(--m-fast) var(--m-ease);
    display: inline-block;
    font-size: .92rem;
}
.wsus__footer_content ul li a:hover {
    color: var(--m-gold) !important;
    transform: translateX(4px);
}
html[dir="rtl"] .wsus__footer_content ul li a:hover { transform: translateX(-4px); }

.wsus__footer_content form {
    position: relative;
    margin-bottom: 20px;
}
.wsus__footer_content form input {
    width: 100%;
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    color: var(--m-text) !important;
    padding: 14px 60px 14px 18px !important;
    border-radius: var(--m-r-pill);
    font-size: .92rem;
}
.wsus__footer_content form input:focus {
    outline: none;
    border-color: var(--m-gold-soft) !important;
}
.wsus__footer_content form button {
    position: absolute; top: 4px; right: 4px;
    width: 44px; height: 44px;
    background: linear-gradient(135deg, var(--m-brand), var(--m-brand-dark)) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--m-fast) var(--m-ease);
    cursor: pointer;
}
.wsus__footer_content form button:hover { transform: scale(1.06); }
html[dir="rtl"] .wsus__footer_content form button { right: auto; left: 4px; }
html[dir="rtl"] .wsus__footer_content form input { padding: 14px 18px 14px 60px !important; }

.wsus__footer_social_link h5 {
    color: var(--m-text) !important;
    font-size: .9rem;
    margin-bottom: 12px;
    font-weight: 500;
}
.wsus__footer_social_link ul { gap: 10px; }
.wsus__footer_social_link ul a {
    width: 38px; height: 38px;
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    color: var(--m-text-soft) !important;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--m-base) var(--m-ease);
}
.wsus__footer_social_link ul a:hover {
    background: var(--m-gold);
    color: #fff !important;
    border-color: var(--m-gold);
    transform: translateY(-2px);
}

.wsus__footer_bottom {
    background: rgba(0,0,0,.18);
    padding: 22px 0 !important;
    border-top: 1px solid rgba(255,255,255,.06);
}
.wsus__footer_bottom_text p {
    margin: 0;
    color: rgba(255,255,255,.45) !important;
    font-size: .85rem;
}
.wsus__footer_bottom_text ul {
    gap: 18px; padding: 0; list-style: none; margin: 0;
}
.wsus__footer_bottom_text ul a {
    color: rgba(255,255,255,.5) !important;
    font-size: .85rem;
    transition: color var(--m-fast) var(--m-ease);
}
.wsus__footer_bottom_text ul a:hover { color: var(--m-gold-2) !important; }

/* ---------- 20. SCROLL TO TOP ---------- */
.wsus__scroll_btn {
    position: fixed;
    bottom: 30px; right: 30px;
    width: 52px; height: 52px;
    background: linear-gradient(135deg, var(--m-brand), var(--m-brand-dark));
    color: #fff !important;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: var(--m-glow-gold);
    z-index: 999;
    font-size: 0;
    transition: all var(--m-base) var(--m-ease);
    opacity: 0; pointer-events: none;
}
.wsus__scroll_btn.is-visible { opacity: 1; pointer-events: auto; }
.wsus__scroll_btn::before {
    content: "\f077";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    font-size: 16px;
}
.wsus__scroll_btn:hover { transform: translateY(-4px) scale(1.05); }
html[dir="rtl"] .wsus__scroll_btn { right: auto; left: 30px; }

/* ---------- 21. MINI CART POPUP ---------- */
.wsus__menu_cart_area {
    background: rgba(11,11,13,.6) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    /* Must overlay the sticky navbar (1020) and topbar (1100) */
    z-index: 1200 !important;
}
.wsus__menu_cart_boody {
    background: var(--m-surface) !important;
    color: var(--m-text);
    box-shadow: var(--m-shadow-lg);
    border-left: 1px solid var(--m-line) !important;
    padding: 24px !important;
    overflow-y: auto;
    z-index: 1201;
}
html[dir="rtl"] .wsus__menu_cart_boody {
    border-left: 0 !important;
    border-right: 1px solid var(--m-line) !important;
    left: 0; right: auto !important;
    transform-origin: left !important;
}
.wsus__menu_cart_header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--m-line);
    margin-bottom: 18px;
}
.wsus__menu_cart_header h5 {
    color: var(--m-text) !important;
    margin: 0 !important;
    font-size: 1rem;
    font-family: var(--m-font-body) !important;
    text-transform: uppercase;
    letter-spacing: .14em;
}
.close_cart {
    width: 32px; height: 32px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--m-line);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--m-gold);
    cursor: pointer;
    transition: all var(--m-fast) var(--m-ease);
}
.close_cart:hover { background: var(--m-gold); color: #111; }

.mini_cart_list { padding: 0; list-style: none; margin: 0; }
.mini_cart_list li {
    display: flex; gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--m-line);
    position: relative;
}
.menu_cart_img {
    width: 70px; height: 70px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--m-line);
}
.menu_cart_img img { width: 100%; height: 100%; object-fit: cover; }
.menu_cart_text { flex: 1; min-width: 0; }
.menu_cart_text .title {
    color: var(--m-text) !important;
    font-size: .95rem !important;
    font-family: var(--m-font-body) !important;
    font-weight: 500;
    line-height: 1.3;
    display: block;
    margin-bottom: 4px;
}
.menu_cart_text .title:hover { color: var(--m-gold) !important; }
.menu_cart_text .size, .menu_cart_text .extra {
    color: var(--m-text-mute) !important;
    font-size: .78rem;
    display: block;
    margin: 0 0 2px !important;
}
.menu_cart_text .price { color: var(--m-gold) !important; font-weight: 600; margin: 6px 0 0 !important; }
.del_icon {
    position: absolute; top: 14px; right: 0;
    width: 26px; height: 26px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--m-line);
    color: var(--m-danger);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all var(--m-fast) var(--m-ease);
}
.del_icon:hover { background: var(--m-danger); color: #fff; }

.subtotal, .tax, .total {
    display: flex; justify-content: space-between;
    color: var(--m-text-soft) !important;
    margin: 10px 0 !important;
    font-size: .92rem;
}
.total {
    color: var(--m-text) !important;
    font-size: 1.05rem !important;
    padding-top: 10px;
    border-top: 1px solid var(--m-line);
    margin-top: 10px !important;
    font-weight: 600;
}
.total strong { color: var(--m-gold) !important; }

.cart_view, .checkout {
    display: block;
    text-align: center;
    padding: 12px 20px;
    margin-top: 10px;
    border-radius: var(--m-r-pill);
    font-weight: 500;
    transition: all var(--m-base) var(--m-ease);
}
.cart_view {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--m-line);
    color: var(--m-text) !important;
}
.cart_view:hover { background: var(--m-line); color: var(--m-gold) !important; }
.checkout {
    background: linear-gradient(135deg, var(--m-brand), var(--m-brand-dark));
    color: #fff !important;
    box-shadow: var(--m-glow-gold);
}
.checkout:hover { transform: translateY(-2px); }

/* ---------- 22. RESERVATION MODAL ---------- */
.wsus__reservation .modal-content,
.wsus__cart_popup .modal-content {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    border-radius: var(--m-r-lg) !important;
    color: var(--m-text);
    overflow: hidden;
}
.wsus__reservation .modal-header,
.wsus__cart_popup .modal-header {
    border-bottom: 1px solid var(--m-line) !important;
    padding: 22px 26px !important;
}
.wsus__reservation .modal-title {
    color: var(--m-text) !important;
    font-family: var(--m-font-display) !important;
    font-size: 1.35rem !important;
    font-weight: 600 !important;
}
.wsus__reservation .btn-close,
.wsus__cart_popup .btn-close {
    filter: invert(1) brightness(.7);
    opacity: .7;
}
.wsus__reservation .btn-close:hover { opacity: 1; }
.wsus__reservation .modal-body { padding: 26px !important; }

.reservation_input,
.wsus__reservation_form input,
.wsus__reservation_form select,
input.form-control,
select.form-control,
textarea.form-control {
    width: 100% !important;
    background: var(--m-bg-2) !important;
    border: 1px solid var(--m-line-2) !important;
    color: var(--m-text) !important;
    padding: 12px 16px !important;
    border-radius: var(--m-r) !important;
    margin-bottom: 14px !important;
    font-size: .95rem !important;
    transition: border-color var(--m-fast) var(--m-ease), box-shadow var(--m-fast) var(--m-ease);
    height: auto !important;
}
.reservation_input:focus,
.wsus__reservation_form input:focus,
.wsus__reservation_form select:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--m-gold) !important;
    box-shadow: 0 0 0 3px var(--m-gold-soft) !important;
    outline: none !important;
    background: var(--m-bg-2) !important;
    color: var(--m-text) !important;
}
.wsus__reservation_form button[type="submit"] {
    width: 100%;
    padding: 14px 26px !important;
    background: linear-gradient(135deg, var(--m-brand), var(--m-brand-dark)) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--m-r-pill) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--m-base) var(--m-ease);
    box-shadow: var(--m-glow-gold);
}
.wsus__reservation_form button[type="submit"]:hover { transform: translateY(-2px); }

/* ---------- 23. BREADCRUMB ---------- */
.breadcrumb_section, .wsus__breadcrumb {
    padding: 100px 0 60px;
    background-color: var(--m-bg-2) !important;
    background-blend-mode: multiply !important;
    border-bottom: 1px solid var(--m-line);
    text-align: center;
    position: relative;
}
.breadcrumb_section::before, .wsus__breadcrumb::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,11,13,.5) 0%, var(--m-bg) 100%);
}
.breadcrumb_section > .container, .wsus__breadcrumb > .container { position: relative; z-index: 1; }
.breadcrumb_section h1, .wsus__breadcrumb h1 {
    font-size: clamp(2rem, 4vw, 3.4rem) !important;
    color: var(--m-text) !important;
    margin-bottom: 12px;
}
.breadcrumb_section ul, .wsus__breadcrumb ul {
    list-style: none; padding: 0; margin: 0;
    display: inline-flex; gap: 6px;
    color: var(--m-text-mute);
    font-size: .9rem;
}
.breadcrumb_section ul a, .wsus__breadcrumb ul a { color: var(--m-gold) !important; }
.breadcrumb_section ul li:not(:last-child)::after,
.wsus__breadcrumb ul li:not(:last-child)::after {
    content: "/";
    margin-left: 6px;
    color: var(--m-line-2);
}

/* ---------- 24. CARDS / GENERIC SECTIONS ---------- */
section { color: var(--m-text); }
.card, .wsus__card {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    border-radius: var(--m-r) !important;
    color: var(--m-text);
}
.card-header, .card-footer {
    background: transparent !important;
    border-color: var(--m-line) !important;
    color: var(--m-text);
}

/* Tables */
table.table {
    color: var(--m-text-soft) !important;
    border-color: var(--m-line) !important;
}
table.table thead th {
    color: var(--m-gold) !important;
    background: var(--m-bg-2) !important;
    border-color: var(--m-line) !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8rem;
    padding: 14px !important;
}
table.table tbody td {
    border-color: var(--m-line) !important;
    padding: 14px !important;
    vertical-align: middle;
}
table.table tbody tr:hover { background: var(--m-bg-2) !important; }

/* ---------- 25. TOAST OVERRIDES ---------- */
#toast-container > div {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    border-left: 4px solid var(--m-gold) !important;
    color: var(--m-text) !important;
    border-radius: var(--m-r) !important;
    box-shadow: var(--m-shadow);
    opacity: 1 !important;
}
#toast-container > .toast-success { border-left-color: var(--m-success) !important; }
#toast-container > .toast-error { border-left-color: var(--m-danger) !important; }

/* ---------- 26. PRELOADER (hidden by default, only shows with .preloader class) ---------- */
#preloader {
    display: none;
    position: fixed; inset: 0;
    background: var(--m-bg);
    z-index: 99999;
    align-items: center; justify-content: center;
}
#preloader.preloader {
    display: flex;
}
#preloader.preloader::before {
    content: "";
    width: 50px; height: 50px;
    border: 3px solid var(--m-line-2);
    border-top-color: var(--m-brand);
    border-radius: 50%;
    animation: m-spin 1s linear infinite;
}
@keyframes m-spin { to { transform: rotate(360deg); } }

/* ---------- 27. GENERIC PAGE WRAPPER ---------- */
.wsus__about, .wsus__contact, .wsus__faq, .wsus__blog_main,
.wsus__cart, .wsus__checkout, .wsus__login_register,
.wsus__product, .wsus__chefs, .wsus__testimonial_main,
.wsus__privacy, .wsus__dashboard, .wsus__error {
    padding: 80px 0;
    background: var(--m-bg);
}

/* ---------- 28. ABOUT US ---------- */
.wsus__about_text h2,
.wsus__about_text h3 {
    font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
    margin-bottom: 16px !important;
    color: var(--m-text) !important;
}
.wsus__about_text p {
    color: var(--m-text-soft) !important;
    margin-bottom: 18px;
}
.wsus__about_img,
.wsus__about_img img {
    border-radius: var(--m-r-xl);
    overflow: hidden;
}

/* ---------- 29. CONTACT US ---------- */
.wsus__contact_info {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    padding: 28px !important;
    text-align: center;
    transition: all var(--m-base) var(--m-ease);
    margin-bottom: 24px;
    height: 100%;
}
.wsus__contact_info:hover {
    transform: translateY(-4px);
    border-color: var(--m-gold-soft);
}
.wsus__contact_info i, .wsus__contact_info .icon {
    font-size: 28px;
    color: var(--m-gold);
    width: 70px; height: 70px;
    border-radius: 50%;
    background: var(--m-gold-soft);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    border: 1px solid var(--m-gold-soft);
}
.wsus__contact_info h4 {
    color: var(--m-text) !important;
    margin-bottom: 8px;
    font-family: var(--m-font-display) !important;
    font-size: 1.2rem !important;
}
.wsus__contact_info p, .wsus__contact_info a {
    color: var(--m-text-mute) !important;
    margin: 0;
    font-size: .95rem;
}
.wsus__contact_info a:hover { color: var(--m-gold) !important; }

.wsus__contact_form {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    padding: 36px !important;
}
.wsus__contact_form h3 {
    color: var(--m-text) !important;
    margin-bottom: 18px !important;
    font-size: 1.6rem !important;
}
.wsus__contact_form input,
.wsus__contact_form textarea {
    width: 100% !important;
    background: var(--m-bg-2) !important;
    border: 1px solid var(--m-line-2) !important;
    color: var(--m-text) !important;
    padding: 14px 16px !important;
    border-radius: var(--m-r) !important;
    margin-bottom: 14px;
    font-size: .95rem;
    transition: border-color var(--m-fast) var(--m-ease);
}
.wsus__contact_form textarea { min-height: 130px; resize: vertical; }
.wsus__contact_form input:focus,
.wsus__contact_form textarea:focus {
    border-color: var(--m-gold) !important;
    box-shadow: 0 0 0 3px var(--m-gold-soft) !important;
    outline: none;
}

/* ---------- 30. FAQ ---------- */
.wsus__faq_main .accordion-item, .accordion-item {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    border-radius: var(--m-r) !important;
    margin-bottom: 12px;
    overflow: hidden;
}
.wsus__faq_main .accordion-button, .accordion-button {
    background: var(--m-surface) !important;
    color: var(--m-text) !important;
    font-weight: 500 !important;
    padding: 18px 22px !important;
    font-size: 1rem !important;
    box-shadow: none !important;
    border: 0 !important;
}
.accordion-button:not(.collapsed) {
    background: var(--m-bg-2) !important;
    color: var(--m-gold) !important;
}
.accordion-button::after {
    filter: invert(1) brightness(.8);
}
.accordion-body {
    padding: 0 22px 18px !important;
    color: var(--m-text-soft) !important;
    background: var(--m-surface);
}

/* ---------- 31. PRODUCT FILTER / GRID PAGE ---------- */
.wsus__product_main { padding: 80px 0; background: var(--m-bg); }
.wsus__product_main_left {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    padding: 24px !important;
    position: sticky; top: calc(var(--m-header-h) + 20px);
}
.wsus__product_main_left h4 {
    color: var(--m-text) !important;
    font-size: 1.05rem !important;
    text-transform: uppercase;
    letter-spacing: .14em;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--m-line);
    margin-bottom: 18px !important;
    font-family: var(--m-font-body) !important;
    font-weight: 600;
}
.wsus__product_main_left ul { list-style: none; padding: 0; margin: 0; }
.wsus__product_main_left ul li {
    margin-bottom: 8px;
}
.wsus__product_main_left ul li a {
    display: flex; justify-content: space-between; align-items: center;
    color: var(--m-text-soft) !important;
    padding: 8px 12px;
    border-radius: var(--m-r-sm);
    transition: all var(--m-fast) var(--m-ease);
    font-size: .92rem;
}
.wsus__product_main_left ul li a:hover, .wsus__product_main_left ul li a.active {
    background: var(--m-gold-soft);
    color: var(--m-gold) !important;
}
.wsus__product_main_left ul li a span {
    color: var(--m-text-mute) !important;
    font-size: .8rem;
}

/* Range slider */
.wsus__price_range_slider .ui-slider {
    background: var(--m-line) !important;
    height: 4px !important;
    border: 0 !important;
}
.wsus__price_range_slider .ui-slider-range {
    background: var(--m-gold) !important;
}
.wsus__price_range_slider .ui-slider-handle {
    background: var(--m-gold) !important;
    border: 3px solid var(--m-bg) !important;
    border-radius: 50% !important;
    width: 18px !important; height: 18px !important;
    top: -8px !important;
}

/* Product tags */
.wsus__product_tag a {
    display: inline-block;
    padding: 6px 14px;
    background: var(--m-bg-2);
    color: var(--m-text-soft) !important;
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-pill);
    font-size: .82rem;
    margin: 2px;
    transition: all var(--m-fast) var(--m-ease);
}
.wsus__product_tag a:hover {
    background: var(--m-gold);
    color: #fff !important;
    border-color: var(--m-gold);
}

/* ---------- 32. PRODUCT DETAIL ---------- */
.wsus__product_details { padding: 80px 0; background: var(--m-bg); }
.wsus__product_details_text h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.4rem) !important;
    margin-bottom: 12px !important;
}
.wsus__product_details_text .price {
    font-family: var(--m-font-display) !important;
    color: var(--m-gold) !important;
    font-size: 1.8rem !important;
    margin-bottom: 14px !important;
}
.wsus__product_details_text .price del {
    color: var(--m-text-mute) !important;
    font-size: 1.1rem;
    margin-left: 10px;
    opacity: .6;
}
.wsus__product_details_text .rating {
    color: var(--m-gold) !important;
    margin-bottom: 12px;
    letter-spacing: 2px;
}
.wsus__product_details_text .description {
    color: var(--m-text-soft) !important;
    line-height: 1.8;
    margin-bottom: 20px;
}
.wsus__product_details_select label {
    color: var(--m-text-mute) !important;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .14em;
    margin-bottom: 8px;
    display: block;
}
.wsus__product_details_select select {
    background: var(--m-bg-2) !important;
    border: 1px solid var(--m-line-2) !important;
    color: var(--m-text) !important;
    border-radius: var(--m-r) !important;
    padding: 12px 14px !important;
    width: 100% !important;
}
.wsus__product_qty {
    display: flex; align-items: center; gap: 4px;
    background: var(--m-bg-2);
    border: 1px solid var(--m-line-2);
    border-radius: var(--m-r-pill);
    padding: 4px;
    width: fit-content;
}
.wsus__product_qty button, .wsus__product_qty .btn {
    width: 36px; height: 36px;
    border-radius: 50% !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--m-gold) !important;
    font-size: 14px;
}
.wsus__product_qty input {
    width: 50px;
    background: transparent !important;
    border: 0 !important;
    color: var(--m-text) !important;
    text-align: center;
    font-weight: 600;
}

/* Tabs */
.nav-tabs {
    border-bottom: 1px solid var(--m-line) !important;
    gap: 6px;
    margin-bottom: 24px;
}
.nav-tabs .nav-link {
    background: transparent !important;
    border: 0 !important;
    color: var(--m-text-mute) !important;
    padding: 12px 18px !important;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    font-weight: 500;
    transition: all var(--m-fast) var(--m-ease);
}
.nav-tabs .nav-link.active {
    color: var(--m-gold) !important;
    border-bottom-color: var(--m-gold) !important;
}

/* ---------- 33. CART PAGE ---------- */
.wsus__main_cart_table {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    overflow: hidden;
}
.wsus__cart_summary {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    padding: 28px !important;
}
.wsus__cart_summary h4 {
    color: var(--m-text) !important;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .95rem !important;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--m-line);
    margin-bottom: 18px !important;
    font-family: var(--m-font-body) !important;
    font-weight: 600;
}
.wsus__cart_summary ul { list-style: none; padding: 0; margin: 0 0 18px; }
.wsus__cart_summary ul li {
    display: flex; justify-content: space-between;
    color: var(--m-text-soft) !important;
    padding: 10px 0;
    border-bottom: 1px dashed var(--m-line);
    font-size: .95rem;
}
.wsus__cart_summary ul li:last-child {
    color: var(--m-gold) !important;
    font-size: 1.05rem !important;
    font-weight: 700;
    border-bottom: 0;
}

/* ---------- 34. CHECKOUT ---------- */
.wsus__checkout_form {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    padding: 32px !important;
    margin-bottom: 24px;
}
.wsus__checkout_form h4 {
    color: var(--m-text) !important;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 1rem !important;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--m-line);
    margin-bottom: 22px !important;
    font-family: var(--m-font-body) !important;
    font-weight: 600;
}
.wsus__checkout_form label {
    color: var(--m-text-mute) !important;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .14em;
    margin-bottom: 6px;
    display: block;
}
.payment_method_list label {
    display: flex !important; align-items: center; gap: 12px;
    background: var(--m-bg-2);
    border: 1px solid var(--m-line);
    padding: 14px 18px !important;
    border-radius: var(--m-r);
    margin-bottom: 10px;
    cursor: pointer;
    transition: all var(--m-fast) var(--m-ease);
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: .95rem !important;
    color: var(--m-text-soft) !important;
}
.payment_method_list input[type="radio"]:checked + label,
.payment_method_list label:hover {
    border-color: var(--m-gold) !important;
    background: var(--m-gold-soft) !important;
    color: var(--m-text) !important;
}

/* ---------- 35. AUTH (login / register / forgot / reset) ---------- */
.wsus__login_register {
    min-height: calc(100vh - var(--m-header-h));
    display: flex; align-items: center;
    background: var(--m-bg);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}
.wsus__login_register::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(60% 50% at 80% 20%, rgba(212,175,55,.12), transparent 60%),
        radial-gradient(50% 40% at 20% 80%, rgba(194,91,63,.1), transparent 60%);
    pointer-events: none;
}
.wsus__login_register_box {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-xl);
    padding: 44px !important;
    max-width: 480px;
    margin: 0 auto;
    box-shadow: var(--m-shadow-lg);
    position: relative;
}
.wsus__login_register_box h2 {
    text-align: center;
    margin-bottom: 8px !important;
    font-size: 2rem !important;
}
.wsus__login_register_box p {
    text-align: center;
    color: var(--m-text-mute) !important;
    margin-bottom: 28px !important;
}
.wsus__login_register_box input {
    width: 100% !important;
    background: var(--m-bg-2) !important;
    border: 1px solid var(--m-line-2) !important;
    color: var(--m-text) !important;
    padding: 14px 16px !important;
    border-radius: var(--m-r) !important;
    margin-bottom: 14px;
    font-size: .95rem;
}
.wsus__login_register_box button[type="submit"] {
    width: 100%;
    padding: 14px !important;
    background: linear-gradient(135deg, var(--m-brand), var(--m-brand-dark)) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--m-r-pill) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 14px !important;
    cursor: pointer;
    transition: all var(--m-base) var(--m-ease);
    margin-top: 8px;
    box-shadow: var(--m-glow-gold);
}
.wsus__login_register_box button[type="submit"]:hover { transform: translateY(-2px); }

.wsus__login_register_divider {
    text-align: center;
    margin: 22px 0;
    color: var(--m-text-mute);
    position: relative;
    font-size: .85rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.wsus__login_register_divider::before, .wsus__login_register_divider::after {
    content: ""; position: absolute; top: 50%;
    width: calc(50% - 30px); height: 1px;
    background: var(--m-line);
}
.wsus__login_register_divider::before { left: 0; }
.wsus__login_register_divider::after { right: 0; }

.wsus__social_auth a {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px;
    background: var(--m-bg-2);
    border: 1px solid var(--m-line);
    color: var(--m-text) !important;
    border-radius: var(--m-r);
    margin-bottom: 8px;
    transition: all var(--m-fast) var(--m-ease);
    font-size: .92rem;
}
.wsus__social_auth a:hover { border-color: var(--m-gold); color: var(--m-gold) !important; }

/* ---------- 36. DASHBOARD ---------- */
.wsus__dashboard_left {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    padding: 22px !important;
    position: sticky; top: calc(var(--m-header-h) + 20px);
}
.wsus__dashboard_user { text-align: center; padding-bottom: 18px; border-bottom: 1px solid var(--m-line); }
.wsus__dashboard_user img {
    width: 80px; height: 80px;
    border-radius: 50%;
    border: 3px solid var(--m-gold);
    object-fit: cover;
    margin-bottom: 10px;
}
.wsus__dashboard_user h4 { color: var(--m-text) !important; font-size: 1.05rem !important; margin: 0; }
.wsus__dashboard_user p { color: var(--m-text-mute) !important; font-size: .85rem; }

.wsus__dashboard_left ul { list-style: none; padding: 0; margin: 18px 0 0; }
.wsus__dashboard_left ul li a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: var(--m-r-sm);
    color: var(--m-text-soft) !important;
    margin-bottom: 4px;
    transition: all var(--m-fast) var(--m-ease);
    font-size: .92rem;
}
.wsus__dashboard_left ul li a:hover, .wsus__dashboard_left ul li a.active {
    background: var(--m-gold-soft);
    color: var(--m-gold) !important;
}
.wsus__dashboard_left ul li a i { width: 18px; }

.wsus__dashboard_right_single {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    padding: 24px !important;
    margin-bottom: 24px;
}
.wsus__dashboard_card {
    background: linear-gradient(135deg, var(--m-surface), var(--m-bg-2));
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    padding: 24px;
    text-align: center;
    transition: all var(--m-base) var(--m-ease);
}
.wsus__dashboard_card:hover { border-color: var(--m-gold-soft); transform: translateY(-4px); }
.wsus__dashboard_card i {
    font-size: 30px;
    color: var(--m-gold);
    width: 64px; height: 64px;
    background: var(--m-gold-soft);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.wsus__dashboard_card h3 {
    font-family: var(--m-font-display) !important;
    font-size: 1.8rem !important;
    color: var(--m-text) !important;
    margin: 0 0 4px !important;
}
.wsus__dashboard_card p { color: var(--m-text-mute) !important; margin: 0; }

/* ---------- 37. QR / DISPLAY SCREEN BANDS ---------- */
.sticky-header.header-qr {
    background: rgba(11,11,13,.85) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--m-line);
}
.header-logo { max-height: 50px; }

/* ---------- 38. ERROR / MAINTENANCE ---------- */
.wsus__error, .wsus__maintenance {
    min-height: calc(100vh - var(--m-header-h));
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 60px 0;
    background: var(--m-bg);
}
.wsus__error h1 {
    font-size: clamp(5rem, 12vw, 9rem) !important;
    background: linear-gradient(135deg, var(--m-brand), var(--m-brand-dark));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    margin-bottom: 8px !important;
    line-height: 1;
}
.wsus__error h2 { font-size: 1.6rem !important; margin-bottom: 14px !important; }
.wsus__error p { color: var(--m-text-mute) !important; max-width: 420px; margin: 0 auto 24px !important; }

/* ---------- 39. RESPONSIVE ---------- */
@media (max-width: 991.98px) {
    .main_menu .navbar-collapse {
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--m-bg-2);
        border-bottom: 1px solid var(--m-line);
        padding: 18px;
        box-shadow: var(--m-shadow);
    }
    .main_menu .navbar-nav { gap: 0; padding: 8px 0; }
    .main_menu .menu_icon { justify-content: center; padding-top: 12px; border-top: 1px solid var(--m-line); }
    .wsus__banner_slider { min-height: auto; padding: 30px 0; }
    .wsus__banner_text { text-align: center; padding: 24px 0; }
    .wsus__banner_text p { margin-left: auto; margin-right: auto; }
    .wsus__banner_text ul { justify-content: center; }
    .wsus__choose_single { flex-direction: column; text-align: center; }
    .wsus__choose_single .text { padding: 16px 0 0 !important; }
    .wsus__download_overlay { padding: 40px 24px; text-align: center; }
    .wsus__download_text ul { justify-content: center; }
    footer .row > div { margin-bottom: 32px; }
    .wsus__topbar { display: none; }
}

@media (max-width: 575.98px) {
    .wsus__login_register_box { padding: 28px !important; }
    .menu_filter { width: 100%; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
    .menu_filter button { white-space: nowrap; }
    .wsus__scroll_btn { width: 44px; height: 44px; bottom: 20px; right: 20px; }
    .wsus__section_heading h2 { font-size: 1.8rem !important; }
}

/* ---------- 40. SAUDI RIYAL ICON UNIFIED (brand-colored) ---------- */
img.Saudi_Riyal {
    width: 14px; height: auto;
    margin: 0 4px;
    filter: brightness(0) saturate(100%) invert(28%) sepia(64%) saturate(2000%) hue-rotate(8deg) brightness(94%) contrast(91%);
    vertical-align: -2px;
}
.menu_cart_text .Saudi_Riyal,
.subtotal .Saudi_Riyal, .tax .Saudi_Riyal, .total .Saudi_Riyal,
.price .Saudi_Riyal { width: 14px; }

/* ---------- 41. ENTRANCE ANIMATIONS ---------- */
@keyframes m-fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.m-anim-up { animation: m-fadeUp .8s var(--m-ease-out) both; }

/* ---------- 42. NICE-SELECT (legacy plugin) ---------- */
.nice-select {
    background: var(--m-bg-2) !important;
    border: 1px solid var(--m-line-2) !important;
    color: var(--m-text) !important;
    border-radius: var(--m-r) !important;
}
.nice-select .list {
    background: #FFFFFF !important;          /* fully opaque so cart icons don't bleed through */
    border: 1px solid var(--m-line) !important;
    border-radius: var(--m-r) !important;
    box-shadow: 0 18px 40px -8px rgba(0,0,0,.25), 0 6px 14px -4px rgba(0,0,0,.12);
    z-index: 99999 !important;               /* above sticky navbar, cart icons, etc. */
    position: absolute;
    min-width: 100%;
    padding: 6px !important;
    overflow: hidden;
}
.nice-select .option {
    background: #FFFFFF !important;
    color: var(--m-text) !important;
    padding: 8px 14px !important;
    border-radius: var(--m-r-sm) !important;
    font-weight: 500;
    line-height: 1.4 !important;
    min-height: auto !important;
}
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    background: var(--m-brand-soft) !important;
    color: var(--m-brand) !important;
}
.nice-select .option.selected {
    background: var(--m-brand) !important;
    color: #FFFFFF !important;
    font-weight: 600;
}
.nice-select::after { border-color: var(--m-brand) !important; }

/* Topbar variant: keep dropdown opaque white but anchor it correctly */
.m-topbar .nice-select { background: rgba(255,255,255,.06) !important; }
.m-topbar .nice-select .current { color: #fff !important; }
.m-topbar .nice-select .list {
    background: #FFFFFF !important;
    color: var(--m-text) !important;
    z-index: 99999 !important;
    margin-top: 4px;
}
.m-topbar .nice-select .list .option { color: var(--m-text) !important; background: #FFFFFF !important; }
.m-topbar .nice-select .list .option:hover { background: var(--m-brand-soft) !important; color: var(--m-brand) !important; }
.m-topbar .nice-select .list .option.selected { background: var(--m-brand) !important; color: #fff !important; }

/* ---------- 43. SELECT2 ---------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--m-bg-2) !important;
    border: 1px solid var(--m-line-2) !important;
    border-radius: var(--m-r) !important;
    color: var(--m-text) !important;
    height: auto !important;
    padding: 10px 14px !important;
    min-height: 46px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--m-text) !important; padding: 0 !important; line-height: 1.4 !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 12px !important; }
.select2-dropdown {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    color: var(--m-text);
}
.select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--m-gold-soft) !important;
    color: var(--m-gold) !important;
}

/* ---------- 44. DATEPICKER ---------- */
.datepicker.dropdown-menu {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    color: var(--m-text);
    border-radius: var(--m-r) !important;
    padding: 10px;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
    background: var(--m-gold-soft) !important;
    color: var(--m-gold) !important;
}
.datepicker table tr td.active.day, .datepicker table tr td.active.day:hover {
    background: var(--m-gold) !important; color: #111 !important;
}

/* ---------- 45. MISC FIXES ---------- */
hr { border-color: var(--m-line) !important; opacity: 1 !important; }
.modal-backdrop.show { opacity: .8; background: var(--m-bg); }

/* ---------- 46. BOOTSTRAP UTILITY ADJUSTMENTS ---------- */
.text-primary { color: var(--m-brand) !important; }
.text-success { color: var(--m-success) !important; }
.text-danger  { color: var(--m-danger) !important; }
.text-warning { color: var(--m-warning) !important; }
.text-info    { color: var(--m-info) !important; }
.text-muted   { color: var(--m-text-mute) !important; }
.text-dark    { color: var(--m-text) !important; }
.text-secondary { color: var(--m-text-soft) !important; }

.bg-primary   { background: var(--m-brand) !important; color: #fff !important; }
.bg-success   { background: var(--m-success) !important; color: #fff !important; }
.bg-danger    { background: var(--m-danger) !important; color: #fff !important; }
.bg-light     { background: var(--m-surface) !important; color: var(--m-text) !important; }
.bg-dark      { background: var(--m-dark) !important; color: #fff !important; }
.bg-white     { background: var(--m-surface) !important; }

.border, .border-top, .border-end, .border-bottom, .border-start { border-color: var(--m-line) !important; }

/* Alerts */
.alert {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    color: var(--m-text) !important;
    border-radius: var(--m-r) !important;
    padding: 14px 18px !important;
}
.alert-success { background: rgba(74,222,128,.1) !important; border-color: rgba(74,222,128,.3) !important; color: var(--m-success) !important; }
.alert-danger  { background: rgba(248,113,113,.1) !important; border-color: rgba(248,113,113,.3) !important; color: var(--m-danger) !important; }
.alert-warning { background: rgba(251,191,36,.1) !important; border-color: rgba(251,191,36,.3) !important; color: #fbbf24 !important; }
.alert-info    { background: rgba(96,165,250,.1) !important; border-color: rgba(96,165,250,.3) !important; color: #60a5fa !important; }

/* Badges */
.badge {
    background: var(--m-gold-soft) !important;
    color: var(--m-gold) !important;
    border-radius: var(--m-r-pill) !important;
    padding: 4px 10px !important;
    font-weight: 500 !important;
    font-size: .72rem !important;
    letter-spacing: .04em;
}
.badge.bg-primary { background: var(--m-gold) !important; color: #111 !important; }
.badge.bg-success { background: rgba(74,222,128,.18) !important; color: var(--m-success) !important; }
.badge.bg-danger  { background: rgba(248,113,113,.18) !important; color: var(--m-danger) !important; }

/* Generic table-striped */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: var(--m-bg-2) !important;
    color: var(--m-text-soft) !important;
}
.table-striped > tbody > tr:nth-of-type(even) > * {
    background: var(--m-surface) !important;
    color: var(--m-text-soft) !important;
}

/* Bootstrap form-check baseline */
.form-check-input {
    background-color: var(--m-bg-2) !important;
    border-color: var(--m-line-2) !important;
    box-shadow: none !important;
}
.form-check-input:checked {
    background-color: var(--m-gold) !important;
    border-color: var(--m-gold) !important;
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--m-gold-soft) !important;
}
.form-check-label {
    color: var(--m-text-soft) !important;
}

/* Dropdowns */
.dropdown-menu {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    box-shadow: var(--m-shadow);
    border-radius: var(--m-r) !important;
    padding: 6px !important;
}
.dropdown-menu .dropdown-item {
    color: var(--m-text-soft) !important;
    border-radius: var(--m-r-sm) !important;
    padding: 8px 12px !important;
}
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus {
    background: var(--m-gold-soft) !important;
    color: var(--m-gold) !important;
}
.dropdown-divider { border-color: var(--m-line) !important; }

/* SweetAlert2 dark theme */
.swal2-popup {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    border-radius: var(--m-r-xl) !important;
    color: var(--m-text) !important;
}
.swal2-title { color: var(--m-text) !important; font-family: var(--m-font-display) !important; }
.swal2-html-container { color: var(--m-text-soft) !important; }
.swal2-icon.swal2-warning { border-color: #fbbf24; color: #fbbf24; }
.swal2-icon.swal2-success { border-color: var(--m-success); }
.swal2-icon.swal2-error { border-color: var(--m-danger); }
.swal2-styled.swal2-confirm {
    background: linear-gradient(135deg, var(--m-brand), var(--m-brand-dark)) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--m-r-pill) !important;
    padding: 10px 24px !important;
}
.swal2-styled.swal2-cancel {
    background: rgba(248,113,113,.12) !important;
    color: var(--m-danger) !important;
    border: 1px solid rgba(248,113,113,.3) !important;
    border-radius: var(--m-r-pill) !important;
    padding: 10px 24px !important;
}

/* Loader spinner / preloader */
.fas.fa-spinner, .far.fa-spinner, .fa.fa-spinner {
    animation: m-spin 1s linear infinite;
    display: inline-block;
}

/* Scoped fix: theme_color forces these via !important — we must override LAST */
body { background: var(--m-bg) !important; color: var(--m-text) !important; }
.footer_overlay { background: rgba(42, 31, 23, 0.94) !important; }
.header_overlay { background: transparent !important; }

/* Topbar social icon override (theme_color forces background) */
.topbar_icon li a { background: rgba(255,255,255,.06) !important; color: rgba(255,255,255,.8) !important; }
.topbar_icon li a:hover { background: var(--m-brand) !important; color: #fff !important; }

/* Navbar nav-link forced color override (theme_color sets color) */
.main_menu .navbar-nav .nav-item .nav-link { color: var(--m-text) !important; }
.main_menu .navbar-nav .nav-item .nav-link:hover,
.main_menu .navbar-nav .nav-item .nav-link.active { color: var(--m-brand) !important; }

/* Mobile menu open background (theme_color forces) */
@media (max-width: 999.99px) {
    .main_menu #navbarNav { background: var(--m-surface) !important; box-shadow: var(--m-shadow); }
    .main_menu .navbar-nav .nav-item .nav-link { color: var(--m-text) !important; }
    .main_menu .navbar-nav .nav-item .nav-link:hover { color: var(--m-brand) !important; }
}

/* ============================================================
   SKELETON LOADERS — animated placeholders while content loads
   ============================================================ */

/* Generic shape — used for any block (image, line, circle, etc.) */
.m-skel,
.m-skel-shape {
    display: block;
    background-color: var(--m-bg-2);
    background-image: linear-gradient(
        90deg,
        var(--m-bg-2) 0%,
        rgba(255,255,255,.55) 40%,
        rgba(255,255,255,.55) 60%,
        var(--m-bg-2) 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: 200% 0;
    animation: m-skel-shine 1.4s ease-in-out infinite;
    border-radius: 6px;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    color: transparent !important;
}

@keyframes m-skel-shine {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Shape variants */
.m-skel-line   { height: 12px; width: 100%; border-radius: 6px; margin-bottom: 8px; }
.m-skel-line.short { width: 60%; }
.m-skel-line.tiny  { width: 35%; height: 10px; }
.m-skel-circle { border-radius: 50%; }
.m-skel-pill   { height: 22px; width: 70px; border-radius: 999px; }
.m-skel-square { aspect-ratio: 1/1; width: 100%; }

/* === Product card skeleton (matches .wsus__menu_item layout) === */
.m-skel-card {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    overflow: hidden;
    box-shadow: var(--m-shadow-sm);
    height: 100%;
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
}
.m-skel-card__img {
    aspect-ratio: 1/1;
    width: 100%;
    background: var(--m-bg-2);
    position: relative;
    overflow: hidden;
}
.m-skel-card__img::after {
    content: "";
    position: absolute; inset: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.55) 50%,
        transparent 100%
    );
    background-size: 50% 100%;
    background-repeat: no-repeat;
    background-position: -100% 0;
    animation: m-skel-sweep 1.4s ease-in-out infinite;
}
@keyframes m-skel-sweep {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}
.m-skel-card__body {
    padding: 16px 18px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.m-skel-card__rating  { width: 80px;  height: 12px; }
.m-skel-card__title   { width: 90%;   height: 16px; }
.m-skel-card__title-2 { width: 60%;   height: 16px; }
.m-skel-card__footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--m-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.m-skel-card__price { width: 70px; height: 18px; }
.m-skel-card__btn   { width: 44px; height: 44px; border-radius: 50%; }

/* List view skeleton variant */
.m-view-list .m-skel-card {
    flex-direction: row !important;
    min-height: 130px;
    height: 130px;
}
.m-view-list .m-skel-card__img {
    flex: 0 0 130px !important;
    width: 130px !important;
    height: 130px !important;
    aspect-ratio: 1/1 !important;
}
.m-view-list .m-skel-card__body { padding: 12px 14px; gap: 6px; }
.m-view-list .m-skel-card__title { height: 14px; }
.m-view-list .m-skel-card__title-2 { display: none; }
.m-view-list .m-skel-card__footer { padding-top: 6px; }
.m-view-list .m-skel-card__btn { width: 36px; height: 36px; }

/* === Generic section skeleton (for hero blocks, profile cards, etc.) === */
.m-skel-section {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    padding: 22px;
    box-shadow: var(--m-shadow-sm);
}

/* End of file */