/**
 * Fokawood Luxury Mobile Header & Navigation Styles
 * Ultra-Modern, Glassmorphism, App-Style UX, Persian RTL Optimized
 */

:root {
    --foka-primary: #ff7a00;
    --foka-primary-dark: #ea580c;
    --foka-primary-light: #fff7ed;
    --foka-primary-border: #fed7aa;
    --foka-wood: #706d54;
    --foka-dark: #0f172a;
    --foka-slate: #334155;
    --foka-muted: #64748b;
    --foka-border: #e2e8f0;
    --foka-bg-glass: rgba(255, 255, 255, 0.94);
    --foka-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
    --foka-shadow-md: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
    --foka-shadow-lg: 0 20px 40px -10px rgba(15, 23, 42, 0.15);
    --foka-radius-sm: 10px;
    --foka-radius-md: 14px;
    --foka-radius-lg: 20px;
    --foka-radius-full: 9999px;
    --foka-header-height: 64px;
    --foka-bottom-bar-height: 62px;
    --foka-font: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   1. Modern Mobile Topbar & Mobile Components Visibility
   ========================================================================== */

/* Strictly hide ALL mobile elements on Desktop (min-width: 992px) */
@media screen and (min-width: 992px) {
    .foka-mobile-topbar,
    .foka-mobile-top-header,
    .foka-mobile-drawer,
    .foka-mobile-bottom-bar,
    .foka-msearch-modal,
    .foka-mobile-search-modal,
    header.foka-mobile-top-header,
    nav.foka-mobile-bottom-bar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
}

/* Activate on Mobile & Tablet screens (<= 991px) */
@media screen and (max-width: 991px) {
    /* Hide default theme desktop header bar on mobile */
    
    #topbar {
        display: none !important;
    }

    /* Mobile Topbar Container with 100% Solid Opaque Background (Zero bleed-through on scroll) */
    .foka-mobile-topbar,
    .foka-mobile-top-header,
    header.foka-mobile-top-header {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999999 !important;
        width: 100% !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
        transition: box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease !important;
        box-sizing: border-box !important;
    }

    body.admin-bar .foka-mobile-topbar,
    body.admin-bar .foka-mobile-top-header,
    body.admin-bar header.foka-mobile-top-header {
        top: 32px !important;
    }

    @media screen and (max-width: 782px) {
        body.admin-bar .foka-mobile-topbar,
        body.admin-bar .foka-mobile-top-header,
        body.admin-bar header.foka-mobile-top-header {
            top: 46px !important;
        }
    }

    /* Mobile Body Offset so page content starts cleanly below fixed mobile top header */
    body {
        padding-top: 58px !important;
    }
    body.admin-bar {
        padding-top: 90px !important;
    }
    @media screen and (max-width: 782px) {
        body.admin-bar {
            padding-top: 104px !important;
        }
    }

    .foka-mobile-topbar.foka-header-scrolled,
    .foka-mobile-top-header.foka-header-scrolled {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border-bottom-color: #cbd5e1 !important;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1) !important;
    }

    .foka-mtop-container {
        padding: 7px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    /* Single Row: Luxury Menu & Brand on Right, Contact Capsule, Lang & Account on Left */
    .foka-mtop-inner,
    .foka-mtop-single-row,
    .foka-mtop-main-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        height: 44px !important;
        gap: 6px !important;
        box-sizing: border-box !important;
    }

    .foka-mtop-right-col {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
        min-width: 0 !important;
    }

    /* Luxury Architectural Menu Button */
    .foka-mtop-menu-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 11px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-sizing: border-box !important;
        outline: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    }

    .foka-mtop-menu-btn:active {
        background: #fff7ed !important;
        border-color: #fed7aa !important;
        transform: scale(0.92) !important;
    }

    .foka-luxury-hamburger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 5px !important;
        width: 17px !important;
    }

    .foka-luxury-hamburger span {
        display: block !important;
        height: 2px !important;
        border-radius: 99px !important;
        background: #0f172a !important;
        transition: all 0.22s ease !important;
    }

    .foka-luxury-hamburger .foka-hb-line-1 {
        width: 100% !important;
    }

    .foka-luxury-hamburger .foka-hb-line-2 {
        width: 60% !important;
        align-self: flex-start !important;
    }

    .foka-mtop-menu-btn:hover .foka-luxury-hamburger span,
    .foka-mtop-menu-btn:active .foka-luxury-hamburger span {
        background: #ff7a00 !important;
    }

    .foka-mtop-menu-btn:hover .foka-luxury-hamburger .foka-hb-line-2,
    .foka-mtop-menu-btn:active .foka-luxury-hamburger .foka-hb-line-2 {
        width: 100% !important;
    }

    /* Brand Link & Typography */
    .foka-mtop-brand-link {
        display: flex !important;
        align-items: center !important;
        text-decoration: none !important;
        transition: transform 0.2s ease !important;
    }

    .foka-mtop-brand-link:active {
        transform: scale(0.98) !important;
    }

    .foka-mtop-brand-info {
        display: flex !important;
        flex-direction: column !important;
        text-align: right !important;
        line-height: 1.4 !important;
        gap: 3px !important;
        justify-content: center !important;
    }

    .foka-mtop-brand-main {
        font-family: var(--foka-font) !important;
        font-size: 14.5px !important;
        font-weight: 900 !important;
        color: #0f172a !important;
        letter-spacing: 0 !important;
        line-height: 1.35 !important;
        white-space: nowrap !important;
        display: inline-block !important;
    }

    .foka-mtop-brand-main .foka-highlight,
    .foka-mtop-brand-main span.foka-highlight,
    .foka-highlight {
        color: #ff7a00 !important;
        background: linear-gradient(135deg, #ff7a00 0%, #ea580c 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        font-weight: 900 !important;
        display: inline !important;
    }

    .foka-mtop-brand-sub {
        font-family: var(--foka-font) !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        line-height: 1.35 !important;
        white-space: nowrap !important;
        margin-top: 1px !important;
    }

    /* Left: Luxury Action Controls */
    .foka-mtop-actions {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        flex-shrink: 0 !important;
        flex-wrap: nowrap !important;
    }

    /* Modern Language Switcher Pill */
    .foka-lang-switcher {
        display: inline-flex !important;
        align-items: center !important;
        position: relative !important;
        flex-shrink: 0 !important;
    }

    .foka-lang-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        height: 32px !important;
        padding: 0 9px !important;
        border-radius: 999px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        color: #0f172a !important;
        text-decoration: none !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 0.3px !important;
        transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
        box-sizing: border-box !important;
    }

    .foka-lang-btn:active {
        background: #fff7ed !important;
        border-color: #fed7aa !important;
        color: #ea580c !important;
        transform: scale(0.94) !important;
    }

    .foka-lang-icon {
        display: flex !important;
        align-items: center !important;
        color: #ea580c !important;
    }

    .foka-lang-target {
        font-weight: 800 !important;
        font-size: 11px !important;
        line-height: 1 !important;
        color: #0f172a !important;
    }

    /* Luxury Contact Capsule */
    .foka-mtop-contact-pill {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        height: 32px !important;
        padding: 0 9px !important;
        border-radius: 999px !important;
        background: #fff7ed !important;
        border: 1px solid #fed7aa !important;
        color: #ea580c !important;
        font-family: var(--foka-font) !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    .foka-mtop-contact-pill svg {
        stroke: #ea580c !important;
        transition: transform 0.2s ease !important;
    }

    .foka-mtop-contact-pill:active {
        background: linear-gradient(135deg, #ff7a00 0%, #ea580c 100%) !important;
        color: #ffffff !important;
        border-color: #ff7a00 !important;
        transform: scale(0.94) !important;
        box-shadow: 0 3px 10px rgba(255, 122, 0, 0.35) !important;
    }

    .foka-mtop-contact-pill:active svg {
        stroke: #ffffff !important;
    }

    /* Luxury Search / Account / Cart Icon Buttons */
    .foka-mtop-search-btn,
    .foka-mtop-account-btn,
    .foka-mtop-cart-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 999px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        color: #1e293b !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        position: relative !important;
        text-decoration: none !important;
        padding: 0 !important;
        margin: 0 !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-sizing: border-box !important;
        outline: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    }

    @media screen and (max-width: 380px) {
        .foka-mtop-brand-main {
            font-size: 13px !important;
        }
        .foka-mtop-brand-sub {
            display: none !important;
        }
        .foka-mtop-contact-pill span {
            display: none !important;
        }
        .foka-mtop-contact-pill {
            width: 32px !important;
            height: 32px !important;
            min-width: 32px !important;
            padding: 0 !important;
            justify-content: center !important;
        }
    }

    @media screen and (max-width: 340px) {
        .foka-mtop-container {
            padding: 6px 8px !important;
        }
        .foka-mtop-inner {
            gap: 4px !important;
        }
        .foka-mtop-brand-main {
            font-size: 11.5px !important;
        }
        .foka-mtop-menu-btn,
        .foka-mtop-search-btn,
        .foka-mtop-account-btn {
            width: 34px !important;
            height: 34px !important;
            min-width: 34px !important;
        }
    }

    .foka-mtop-search-btn svg,
    .foka-mtop-account-btn svg,
    .foka-mtop-cart-btn svg {
        stroke: #1e293b !important;
        transition: stroke 0.2s ease !important;
    }

    .foka-mtop-search-btn:active,
    .foka-mtop-account-btn:active,
    .foka-mtop-cart-btn:active {
        background: #fff7ed !important;
        border-color: #fed7aa !important;
        color: #ea580c !important;
        transform: scale(0.93) !important;
    }

    .foka-mtop-search-btn:active svg,
    .foka-mtop-account-btn:active svg,
    .foka-mtop-cart-btn:active svg {
        stroke: #ea580c !important;
    }

    .foka-brand-name span {
        color: #ff7a00 !important;
        font-weight: 900 !important;
    }

    .foka-brand-tag {
        font-family: var(--foka-font) !important;
        font-size: 9.5px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        margin-top: 1px !important;
        letter-spacing: 0.1px !important;
    }

    /* Left Actions (Search, Account & Contact) */
    .foka-mtop-actions {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        flex-wrap: nowrap !important;
    }

    /* Cart Live Badge */
    .foka-mtop-cart-btn .foka-cart-badge {
        position: absolute !important;
        top: -4px !important;
        right: -4px !important;
        min-width: 18px !important;
        height: 18px !important;
        line-height: 18px !important;
        padding: 0 4px !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, #ff7a00 0%, #ea580c 100%) !important;
        color: #ffffff !important;
        font-family: var(--foka-font) !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 2px 6px rgba(234, 88, 12, 0.4) !important;
        box-sizing: border-box !important;
    }

    .foka-mtop-cart-btn .foka-cart-badge.show {
        display: inline-flex !important;
    }

    /* Bottom Row: Quick Live Search Bar */
    .foka-mtop-search-row {
        width: 100% !important;
    }

    .foka-mtop-search-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 40px !important;
        background: #f8fafc !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 0 12px !important;
        cursor: pointer !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-sizing: border-box !important;
    }

    .foka-mtop-search-bar:hover,
    .foka-mtop-search-bar:active {
        background: #ffffff !important;
        border-color: #ff7a00 !important;
        box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.12) !important;
    }

    .foka-mtop-s-icon {
        color: #ff7a00 !important;
        flex-shrink: 0 !important;
        margin-left: 8px !important;
    }

    .foka-mtop-s-placeholder {
        font-family: var(--foka-font) !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        color: #64748b !important;
        flex: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: right !important;
        direction: rtl !important;
    }

    .foka-mtop-s-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 6px !important;
        background: #fff7ed !important;
        color: #ea580c !important;
        border: 1px solid #fed7aa !important;
        flex-shrink: 0 !important;
    }
}

/* ==========================================================================
   2. Luxury Mobile Side Drawer Menu (.foka-mobile-drawer / #siteside)
   ========================================================================== */

/* Standalone Drawer Container & Overlay */
.foka-mobile-drawer,
.menu2-element .menu2-side-container,
.header-menu-side,
.siteside,
#siteside {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999999999 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.foka-mobile-drawer.active,
.menu2-element .menu2-side-container.menu2-side-show,
.header-menu-side.show-side,
.siteside.sitesideopen,
#siteside.sitesideopen {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Background Scroll Lock when Drawer is Active */
body.foka-drawer-open,
html.foka-drawer-open {
    overflow: hidden !important;
    touch-action: none !important;
}

/* Frosted Glass Backdrop Overlay */
.foka-mdrawer-backdrop,
.menu2-element .menu2-side-overlay,
.header-menu-overlay,
.ah-mmenu-overlay,
.mm-side-overlay {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.foka-mobile-drawer.active .foka-mdrawer-backdrop,
.menu2-element .menu2-side-container.menu2-side-show .menu2-side-overlay,
.header-menu-side.show-side .header-menu-overlay,
.ah-mmenu-overlay.is-show {
    opacity: 1 !important;
    display: block !important;
}

/* ==========================================================================
   Slide-in Drawer Sheet (Zero-Scroll 100vh Mobile Navigation Sheet)
   ========================================================================== */
.foka-mdrawer-panel,
.menu2-element .menu2-side-content,
.header-menu-side .header-menu-side-content,
.siteside.sitesideopen .topmenu-wrap,
#siteside.sitesideopen {
    position: absolute !important;
    top: 0 !important;
    right: -100% !important;
    width: min(88vw, 340px) !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    background: #ffffff !important;
    box-shadow: -14px 0 40px rgba(15, 23, 42, 0.22) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

.foka-mobile-drawer.active .foka-mdrawer-panel,
.menu2-element .menu2-side-container.menu2-side-show .menu2-side-content,
.header-menu-side.show-side .header-menu-side-content,
#siteside.sitesideopen {
    right: 0 !important;
}

/* 1. Drawer Header (Pinned Top Bar ~52px) */
.foka-mdrawer-head {
    padding: 0 14px !important;
    height: 52px !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    flex-shrink: 0 !important;
    z-index: 5 !important;
}

.foka-mdrawer-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    min-width: 0 !important;
}

.foka-mdrawer-logo-badge {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
    border: 1px solid #fed7aa !important;
    color: #ea580c !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 5px rgba(234, 88, 12, 0.1) !important;
}

.foka-mdrawer-brand .foka-mtop-brand-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    line-height: 1.35 !important;
    min-width: 0 !important;
    justify-content: center !important;
}

.foka-mdrawer-brand .foka-mtop-brand-main {
    font-size: 13.5px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
}

.foka-mdrawer-brand .foka-mtop-brand-sub {
    font-size: 9px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
}

.foka-mdrawer-close,
.foka-drawer-close,
.menu2-side-close,
#menu-close,
.close-menu {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    flex-shrink: 0 !important;
}

.foka-mdrawer-close svg,
.foka-drawer-close svg,
.menu2-side-close svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #475569 !important;
    transition: all 0.2s ease !important;
}

.foka-mdrawer-close:hover,
.foka-mdrawer-close:active,
.foka-drawer-close:hover,
.foka-drawer-close:active {
    background: #0f172a !important;
    border-color: #0f172a !important;
    color: #ffffff !important;
    transform: scale(0.96) !important;
}

.foka-mdrawer-close:hover svg,
.foka-mdrawer-close:active svg,
.foka-drawer-close:hover svg,
.foka-drawer-close:active svg {
    stroke: #ffffff !important;
}

/* 2. Zero-Scroll Drawer Body */
.foka-mdrawer-body {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
}

/* 2.1. Welcome & Account Action Single Row */
.foka-drawer-welcome-card {
    padding: 7px 10px !important;
    background: linear-gradient(135deg, #fffaf5 0%, #fff7ed 100%) !important;
    border: 1px solid #fed7aa !important;
    border-radius: 9px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    box-shadow: 0 1px 4px rgba(234, 88, 12, 0.04) !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.foka-dwelcome-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.foka-dwelcome-avatar {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 6px !important;
    background: #ffedd5 !important;
    color: #ea580c !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.foka-dwelcome-avatar svg {
    width: 13px !important;
    height: 13px !important;
}

.foka-dwelcome-text {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    line-height: 1.4 !important;
}

.foka-dwelcome-greeting {
    margin: 0 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #9a3412 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.foka-dqa-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 8px !important;
    background: #ffffff !important;
    border: 1px solid #fed7aa !important;
    border-radius: 6px !important;
    color: #ea580c !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 3px rgba(234, 88, 12, 0.04) !important;
    transition: all 0.18s ease !important;
    box-sizing: border-box !important;
}

.foka-dqa-pill svg {
    width: 10px !important;
    height: 10px !important;
}

.foka-dqa-pill:hover,
.foka-dqa-pill:active {
    background: #ff7a00 !important;
    color: #ffffff !important;
    border-color: #ff7a00 !important;
}

/* 2.2. Main Navigation Menu */
.foka-mdrawer-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

.foka-drawer-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.foka-drawer-menu li {
    margin: 0 !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.02) !important;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.foka-drawer-menu li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 40px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
    font-family: var(--foka-font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.18s ease !important;
    min-width: 0 !important;
}

.foka-drawer-menu li a:hover,
.foka-drawer-menu li a:active {
    background: #fff7ed !important;
    border-color: #fed7aa !important;
    color: #ea580c !important;
}

.foka-dmenu-item-main {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: inherit !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

.foka-dmenu-item-main span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.foka-dmenu-icon-wrap {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 7px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.18s ease !important;
}

.foka-dmenu-icon-wrap svg {
    width: 14px !important;
    height: 14px !important;
}

.foka-drawer-menu li a:hover .foka-dmenu-icon-wrap,
.foka-drawer-menu li a:active .foka-dmenu-icon-wrap {
    background: #ffedd5 !important;
    color: #ea580c !important;
}

/* 2.3. Shop Accordion Submenu (.foka-drawer-has-submenu) */
.foka-drawer-submenu-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 40px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    user-select: none !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    gap: 8px !important;
}

.foka-drawer-submenu-head .foka-dmenu-item-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 8px !important;
    overflow: visible !important;
}

.foka-drawer-submenu-head .foka-dmenu-text {
    white-space: nowrap !important;
    text-overflow: clip !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

.foka-drawer-submenu-head:hover,
.foka-drawer-submenu-head:active,
.foka-drawer-has-submenu.foka-submenu-open .foka-drawer-submenu-head {
    background: #fff7ed !important;
    color: #ea580c !important;
}

.foka-drawer-submenu-head:hover .foka-dmenu-icon-wrap,
.foka-drawer-has-submenu.foka-submenu-open .foka-dmenu-icon-wrap {
    background: #ffedd5 !important;
    color: #ea580c !important;
}

.foka-dhead-end {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
}

.foka-cat-pill {
    background: #fff7ed !important;
    border: 1px solid #fed7aa !important;
    color: #ea580c !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
}

.foka-drawer-chevron {
    width: 20px !important;
    height: 20px !important;
    border-radius: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94a3b8 !important;
    transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.18s ease !important;
    flex-shrink: 0 !important;
}

.foka-drawer-chevron svg {
    width: 13px !important;
    height: 13px !important;
}

.foka-drawer-has-submenu.foka-submenu-open .foka-drawer-chevron {
    transform: rotate(180deg) !important;
    color: #ea580c !important;
}

/* Submenu Accordion Container - Compact Zero-Scroll Layout */
.foka-drawer-submenu {
    display: none !important;
    list-style: none !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.foka-drawer-has-submenu.foka-submenu-open .foka-drawer-submenu {
    display: flex !important;
}

/* 1. Full Catalog Banner Row */
.foka-sub-full-row {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.foka-sub-full-row .foka-drawer-sublink.foka-sublink-all {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 10px !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.foka-dsub-left {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.foka-sub-all-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-radius: 6px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.foka-sub-full-row .foka-sublink-title {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    transition: color 0.18s ease !important;
}

.foka-sub-full-row .foka-sub-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94a3b8 !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.foka-sub-full-row .foka-drawer-sublink:hover,
.foka-sub-full-row .foka-drawer-sublink:active {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06) !important;
}

.foka-sub-full-row .foka-drawer-sublink:hover .foka-sublink-title,
.foka-sub-full-row .foka-drawer-sublink:active .foka-sublink-title {
    color: #0f172a !important;
}

.foka-sub-full-row .foka-drawer-sublink:hover .foka-sub-all-icon,
.foka-sub-full-row .foka-drawer-sublink:active .foka-sub-all-icon {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

.foka-sub-full-row .foka-drawer-sublink:hover .foka-sub-arrow,
.foka-sub-full-row .foka-drawer-sublink:active .foka-sub-arrow {
    color: #475569 !important;
    transform: translateX(-2px) !important;
}

/* 2. Three Category Grid Cards */
.foka-sub-grid-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.foka-dcat-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 8px 4px !important;
    border-radius: 9px !important;
    text-decoration: none !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    text-align: center !important;
    min-height: 52px !important;
}

.foka-dcat-icon-badge {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.foka-dcat-icon-badge svg {
    width: 13px !important;
    height: 13px !important;
}

.foka-dcat-name {
    font-family: var(--foka-font) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #334155 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    transition: color 0.18s ease !important;
}

/* 3. Distinct Color Themes per Category */
/* Raw MDF - Royal Blue Theme */
.foka-dcat-raw {
    border-color: #e0e7ff !important;
    background: #fafbff !important;
}
.foka-dcat-raw .foka-dcat-icon-badge {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #dbeafe !important;
}
.foka-dcat-raw:hover,
.foka-dcat-raw:active {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.12) !important;
}
.foka-dcat-raw:hover .foka-dcat-name,
.foka-dcat-raw:active .foka-dcat-name {
    color: #1d4ed8 !important;
}

/* Paper Faced MDF - Amber Warm Theme */
.foka-dcat-paper {
    border-color: #fef3c7 !important;
    background: #fffdf7 !important;
}
.foka-dcat-paper .foka-dcat-icon-badge {
    background: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid #fef3c7 !important;
}
.foka-dcat-paper:hover,
.foka-dcat-paper:active {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 3px 8px rgba(217, 119, 6, 0.12) !important;
}
.foka-dcat-paper:hover .foka-dcat-name,
.foka-dcat-paper:active .foka-dcat-name {
    color: #b45309 !important;
}

/* Melamine Faced MDF - Emerald Green Theme */
.foka-dcat-melamine {
    border-color: #d1fae5 !important;
    background: #f7fdfa !important;
}
.foka-dcat-melamine .foka-dcat-icon-badge {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #d1fae5 !important;
}
.foka-dcat-melamine:hover,
.foka-dcat-melamine:active {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 3px 8px rgba(5, 150, 105, 0.12) !important;
}
.foka-dcat-melamine:hover .foka-dcat-name,
.foka-dcat-melamine:active .foka-dcat-name {
    color: #047857 !important;
}

/* ==========================================================================
   3. Pinned Drawer Footer (Unified Status + Direct Call CTA)
   ========================================================================== */
.foka-drawer-footer {
    flex-shrink: 0 !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid #f1f5f9 !important;
    z-index: 10 !important;
    box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    box-sizing: border-box !important;
}

/* Unified Live Working Hours & Open/Closed Status Card */
.foka-drawer-hours-badge {
    padding: 7px 10px !important;
    border-radius: 9px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    box-sizing: border-box !important;
    transition: background-color 0.25s ease, border-color 0.25s ease !important;
}

.foka-dhours-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    line-height: 1 !important;
}

.foka-dhours-indicator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.foka-dhours-service-badge {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    background: rgba(255, 255, 255, 0.75) !important;
    padding: 1.5px 5px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    white-space: nowrap !important;
}

.foka-dhours-schedule-row {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.foka-dhours-schedule-row svg {
    flex-shrink: 0 !important;
    opacity: 0.8 !important;
}

.foka-drawer-schedule-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 🟢 Open State */
.foka-drawer-hours-badge.foka-status-open {
    background: rgba(240, 253, 244, 0.95) !important;
    border: 1px solid #bbf7d0 !important;
}

.foka-drawer-hours-badge.foka-status-open .foka-live-status-dot {
    width: 6.5px !important;
    height: 6.5px !important;
    min-width: 6.5px !important;
    border-radius: 50% !important;
    background: #16a34a !important;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25) !important;
    animation: foka-pulse-dot 2s infinite ease-in-out !important;
}

.foka-drawer-hours-badge.foka-status-open .foka-drawer-status-text {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #15803d !important;
}

.foka-drawer-hours-badge.foka-status-open .foka-dhours-schedule-row {
    color: #166534 !important;
}

/* 🔴 Closed State */
.foka-drawer-hours-badge.foka-status-closed {
    background: rgba(254, 242, 242, 0.92) !important;
    border: 1px solid #fecdd3 !important;
}

.foka-drawer-hours-badge.foka-status-closed .foka-live-status-dot {
    width: 6.5px !important;
    height: 6.5px !important;
    min-width: 6.5px !important;
    border-radius: 50% !important;
    background: #e11d48 !important;
    box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.2) !important;
    animation: none !important;
}

.foka-drawer-hours-badge.foka-status-closed .foka-drawer-status-text {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #be123c !important;
}

.foka-drawer-hours-badge.foka-status-closed .foka-dhours-schedule-row {
    color: #64748b !important;
}

/* Direct Call CTA Button */
.foka-drawer-call-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
    border: 1.5px solid #fdba74 !important;
    border-radius: 9px !important;
    color: #ea580c !important;
    text-decoration: none !important;
    font-family: var(--foka-font) !important;
    box-shadow: 0 1px 3px rgba(234, 88, 12, 0.08) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.foka-call-icon-wrap {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #ea580c !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.1) !important;
}

.foka-call-icon-wrap svg {
    width: 16px !important;
    height: 16px !important;
}

.foka-call-btn-details {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 1 1 auto !important;
    margin: 0 8px !important;
    line-height: 1.35 !important;
    text-align: right !important;
    min-width: 0 !important;
}

.foka-call-label {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #9a3412 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
}

.foka-phone-num-wrap {
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #ea580c !important;
    line-height: 1.35 !important;
    letter-spacing: 0.3px !important;
    direction: ltr !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

.foka-drawer-call-btn:hover,
.foka-drawer-call-btn:active,
.foka-drawer-call-btn:focus {
    background: linear-gradient(135deg, #ff7a00 0%, #ea580c 100%) !important;
    border-color: #ea580c !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 10px rgba(234, 88, 12, 0.2) !important;
}

.foka-drawer-call-btn:hover .foka-call-icon-wrap,
.foka-drawer-call-btn:active .foka-call-icon-wrap {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.foka-drawer-call-btn:hover .foka-call-label,
.foka-drawer-call-btn:hover .foka-phone-num-wrap,-wrap,
.foka-drawer-call-btn:hover .foka-call-arrow,
.foka-drawer-call-btn:active .foka-call-label,
.foka-drawer-call-btn:active .foka-phone-num-wrap,
.foka-drawer-call-btn:active .foka-call-arrow {
    color: #ffffff !important;
}

.foka-drawer-call-btn:hover .foka-call-arrow {
    transform: translateX(-3px) !important;
}

/* ==========================================================================
   4. Responsive Drawer Breakpoints & Small Phone Adaptation
   ========================================================================== */
@media (max-width: 375px) {
    .foka-mdrawer-panel {
        width: min(90vw, 320px) !important;
    }
}

/* Strict Ultra-Compact Adaptation for 320px screens */
@media (max-width: 340px) {
    .foka-mdrawer-panel {
        width: calc(100vw - 32px) !important;
    }
    .foka-mdrawer-head {
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 10px !important;
    }
    .foka-mdrawer-body {
        padding: 8px 10px !important;
        gap: 8px !important;
    }
    .foka-drawer-footer {
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .foka-cat-pill {
        display: none !important;
    }
    .foka-dmenu-item-main span {
        font-size: 12px !important;
    }
    .foka-dqa-btn {
        font-size: 10px !important;
        padding: 0 4px !important;
    }
}

@media (min-width: 431px) and (max-width: 768px) {
    .foka-mdrawer-panel {
        width: 360px !important;
    }
}

/* Drawer Header with Brand & Close Button */
.menu2-element .menu2-side-head,
.header-menu-side .header-menu-side-content .side-icons,
.siteside-close-wrap {
    padding: 16px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid var(--foka-border) !important;
    background: #fafafa !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
}

.menu2-element .menu2-side-head a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
}

.menu2-element .menu2-side-head img {
    max-height: 34px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Custom Drawer Brand Badge if no image */
.foka-drawer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--foka-font);
    font-size: 16px;
    font-weight: 800;
    color: var(--foka-dark);
}

.foka-drawer-brand span {
    color: var(--foka-primary);
}

/* Drawer Close Button */
.menu2-element .menu2-side-close,
.header-menu-side .close-menu,
#menu-close,
.siteside-close {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 11px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    font-size: 15px !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.menu2-element .menu2-side-close:hover,
.header-menu-side .close-menu:hover,
#menu-close:hover,
.siteside-close:hover {
    background: #0f172a !important;
    border-color: #0f172a !important;
    color: #ffffff !important;
    transform: rotate(90deg) scale(0.94) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2) !important;
}



/* Drawer Navigation List */
.menu2-element .menu2-side-content ul.menu,
.header-menu-side .header-menu-side-content ul.menu,
#siteside ul.topmenu {
    list-style: none !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
}

.menu2-element .menu2-side-content ul.menu > li,
.header-menu-side .header-menu-side-content ul.menu > li,
#siteside ul.topmenu > li {
    margin-bottom: 6px !important;
    border-radius: var(--foka-radius-sm) !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

/* Navigation Links */
.menu2-element .menu2-side-content ul.menu > li > a,
.header-menu-side .header-menu-side-content ul.menu > li > a,
#siteside ul.topmenu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    font-family: var(--foka-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--foka-slate) !important;
    text-decoration: none !important;
    border-radius: var(--foka-radius-sm) !important;
    background: transparent !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    border: none !important;
}

.menu2-element .menu2-side-content ul.menu > li:hover > a,
.menu2-element .menu2-side-content ul.menu > li.current-menu-item > a,
#siteside ul.topmenu > li.current-menu-item > a {
    background: var(--foka-primary-light) !important;
    color: var(--foka-primary-dark) !important;
    font-weight: 700 !important;
    transform: translateX(-4px) !important;
}

/* Submenu Accordion Indicator */
.menu2-element .menu2-side-content ul li #mega_menu_plus,
.open-mobile-submenu {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    font-size: 12px !important;
    transition: transform 0.25s ease, background-color 0.2s !important;
}

.menu2-element .menu2-side-content ul li.is-toggled > #mega_menu_plus,
.open-mobile-submenu.active {
    transform: rotate(180deg) !important;
    background: #ffedd5 !important;
    color: var(--foka-primary-dark) !important;
}

/* Submenu Dropdown Container */
.menu2-element .menu2-side-content ul ul.sub-menu,
#siteside ul.topmenu ul.sub-menu {
    background: #f8fafc !important;
    border-radius: var(--foka-radius-sm) !important;
    border: 1px solid var(--foka-border) !important;
    padding: 6px 8px !important;
    margin: 4px 6px 8px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
}

.menu2-element .menu2-side-content ul ul.sub-menu li a,
#siteside ul.topmenu ul.sub-menu li a {
    padding: 9px 12px !important;
    font-size: 13px !important;
    color: #475569 !important;
    border-radius: 8px !important;
    display: block !important;
    transition: all 0.2s ease !important;
    border-bottom: 1px dashed rgba(226, 232, 240, 0.8) !important;
}

.menu2-element .menu2-side-content ul ul.sub-menu li:last-child a,
#siteside ul.topmenu ul.sub-menu li:last-child a {
    border-bottom: none !important;
}

.menu2-element .menu2-side-content ul ul.sub-menu li a:hover {
    background: #ffffff !important;
    color: var(--foka-primary-dark) !important;
    font-weight: 700 !important;
    padding-right: 16px !important;
}



/* ==========================================================================
   3. Native App-Style Mobile Bottom Bar (.foka-mobile-bottom-bar)
   ========================================================================== */

.foka-mobile-bottom-bar {
    display: none; /* Hidden on desktop by default */
}

@media screen and (max-width: 991px) {
    .foka-mobile-bottom-bar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        height: calc(var(--foka-bottom-bar-height, 62px) + env(safe-area-inset-bottom, 0px)) !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-top: 1px solid #eef2f6 !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -4px 22px rgba(15, 23, 42, 0.07) !important;
        z-index: 999999 !important;
        box-sizing: border-box !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        pointer-events: auto !important;
    }

    .foka-mbar-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        height: var(--foka-bottom-bar-height, 62px) !important;
        padding: 4px 8px !important;
        max-width: 500px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .foka-mbar-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        flex: 1 !important;
        height: 100% !important;
        color: #64748b !important;
        text-decoration: none !important;
        background: transparent !important;
        border: none !important;
        border-radius: 14px !important;
        padding: 3px 2px !important;
        margin: 0 1px !important;
        cursor: pointer !important;
        position: relative !important;
        transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .foka-mbar-item:active {
        transform: scale(0.92) !important;
        background: #f8fafc !important;
    }

    .foka-mbar-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 26px !important;
        border-radius: 12px !important;
        position: relative !important;
        transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .foka-mbar-icon svg {
        width: 20px !important;
        height: 20px !important;
        transition: stroke 0.2s ease, transform 0.2s ease !important;
    }

    .foka-mbar-label {
        font-family: var(--foka-font) !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        transition: color 0.2s ease, font-weight 0.2s ease !important;
    }

    /* Active Tab - Soft Pill Indicator */
    .foka-mbar-item.active {
        color: var(--foka-primary) !important;
    }

    .foka-mbar-item.active .foka-mbar-icon {
        background: #fff7ed !important;
    }

    .foka-mbar-item.active .foka-mbar-icon svg {
        stroke: var(--foka-primary) !important;
        transform: translateY(-1px) !important;
    }

    .foka-mbar-item.active .foka-mbar-label {
        color: var(--foka-primary-dark) !important;
        font-weight: 800 !important;
    }

    /* Center Search Action Button - Soft Rounded Pill */
    .foka-mbar-search-trigger {
        position: relative !important;
        top: 0 !important;
    }

    .foka-mbar-search-circle {
        width: 38px !important;
        height: 26px !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #ff7a00 0%, #ea580c 100%) !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 3px 10px rgba(255, 122, 0, 0.35) !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .foka-mbar-search-trigger:active .foka-mbar-search-circle {
        transform: scale(0.92) !important;
    }

    .foka-mbar-search-circle svg {
        stroke: #ffffff !important;
        width: 17px !important;
        height: 17px !important;
    }

    .foka-mbar-search-trigger .foka-mbar-label {
        color: var(--foka-primary) !important;
        font-weight: 700 !important;
    }

    /* Live Cart Count Badge - Rounded Capsule */
    .foka-cart-badge {
        position: absolute !important;
        top: -3px !important;
        right: 2px !important;
        min-width: 16px !important;
        height: 16px !important;
        padding: 0 4px !important;
        border-radius: 999px !important;
        background: var(--foka-primary) !important;
        color: #ffffff !important;
        font-family: var(--foka-font) !important;
        font-size: 9.5px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 2px 5px rgba(255, 122, 0, 0.4) !important;
        box-sizing: border-box !important;
        animation: fokaBadgePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }

    .foka-cart-badge.show {
        display: inline-flex !important;
    }
}

@keyframes fokaBadgePop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   4. Mobile Search Modal Overlay (.foka-mobile-search-modal)
   ========================================================================== */

.foka-mobile-search-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999999999 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
}

.foka-mobile-search-modal.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.foka-msearch-backdrop {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
}

.foka-msearch-panel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    border-radius: 0 0 28px 28px !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16) !important;
    transform: translateY(-100%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 20px 18px 26px !important;
    box-sizing: border-box !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.foka-mobile-search-modal.active .foka-msearch-panel {
    transform: translateY(0) !important;
}

.foka-msearch-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

.foka-msearch-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14.5px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
}

.foka-msearch-title svg {
    color: #ff7a00 !important;
    stroke: #ff7a00 !important;
}

.foka-msearch-close {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.foka-msearch-close:hover {
    background: #fee2e2 !important;
    color: #ef4444 !important;
    border-color: #fca5a5 !important;
}

.foka-msearch-form-wrap {
    width: 100% !important;
    margin-bottom: 18px !important;
}

.foka-msearch-input-wrap {
    position: relative !important;
    width: 100% !important;
}

.foka-msearch-input {
    width: 100% !important;
    height: 50px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 0 16px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    outline: none !important;
    box-sizing: border-box !important;
    direction: rtl !important;
    text-align: right !important;
    transition: all 0.2s ease !important;
}

.foka-msearch-input::placeholder {
    color: #94a3b8 !important;
    font-size: 13px !important;
}

.foka-msearch-input:focus {
    background: #ffffff !important;
    border-color: #ff7a00 !important;
    box-shadow: 0 0 0 3.5px rgba(255, 122, 0, 0.15) !important;
}

.foka-msearch-submit {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 34px !important;
    border: none !important;
    background: transparent !important;
    color: #94a3b8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    transition: color 0.2s ease !important;
}

.foka-msearch-submit:hover {
    color: #ff7a00 !important;
}

/* Quick Suggestion Tags (Line 1: Title, Line 2: All Tags in 1 Row Without Scroll) */
.foka-msearch-quick-tags {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
}

.foka-mqt-title,
.foka-tag-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-align: right !important;
    margin: 0 !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}

.foka-mqt-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.foka-mqt-tag,
.foka-quick-tag {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 3px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 999px !important;
    font-size: clamp(10px, 2.7vw, 12px) !important;
    font-weight: 700 !important;
    color: #334155 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.foka-mqt-tag:hover,
.foka-mqt-tag:active,
.foka-quick-tag:hover,
.foka-quick-tag:active {
    background: #fff7ed !important;
    border-color: #fed7aa !important;
    color: #ea580c !important;
    transform: translateY(-1px) !important;
}



/* ==========================================================================
   5. Dark Mode Styles
   ========================================================================== */

html[data-theme="dark"] 
body.dark-theme 
.dark-theme .foka-mobile-bottom-bar,
html[data-theme="dark"] .foka-mobile-bottom-bar {
    background: rgba(20, 24, 33, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] #topbar .elementor-heading-title,
body.dark-theme #topbar .elementor-heading-title {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .menu2-element .menu2-side-button,
body.dark-theme .menu2-element .menu2-side-button,
html[data-theme="dark"] #topbar button[type="submit"] {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .menu2-element .menu2-side-content,
body.dark-theme .menu2-element .menu2-side-content {
    background: #1e293b !important;
}

html[data-theme="dark"] .menu2-element .menu2-side-head,
body.dark-theme .menu2-element .menu2-side-head {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .menu2-element .menu2-side-content ul.menu > li > a,
body.dark-theme .menu2-element .menu2-side-content ul.menu > li > a {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .foka-msearch-panel,
body.dark-theme .foka-msearch-panel {
    background: #1e293b !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .foka-msearch-input,
body.dark-theme .foka-msearch-input {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .foka-mobile-topbar,
html[data-theme="dark"] .foka-mobile-top-header,
body.dark-theme .foka-mobile-topbar,
body.dark-theme .foka-mobile-top-header {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border-color: #1e293b !important;
}

html[data-theme="dark"] .foka-mtop-icon-btn,
body.dark-theme .foka-mtop-icon-btn {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .foka-hamburger-icon span,
body.dark-theme .foka-hamburger-icon span {
    background: #f8fafc !important;
}

html[data-theme="dark"] .foka-brand-name,
body.dark-theme .foka-brand-name {
    color: #f8fafc !important;
}

html[data-theme="dark"] .foka-mtop-search-bar,
body.dark-theme .foka-mtop-search-bar {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .foka-mtop-s-placeholder,
body.dark-theme .foka-mtop-s-placeholder {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .foka-mdrawer-panel {
    background: #0f172a !important;
    color: #f8fafc !important;
    box-shadow: -12px 0 36px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .foka-mdrawer-head {
    background: rgba(15, 23, 42, 0.98) !important;
    border-color: #1e293b !important;
}

html[data-theme="dark"] .foka-mdrawer-logo-badge {
    background: rgba(234, 88, 12, 0.15) !important;
    border-color: rgba(251, 146, 60, 0.3) !important;
    color: #fb923c !important;
}

html[data-theme="dark"] .foka-mdrawer-brand .foka-mtop-brand-main {
    color: #f8fafc !important;
}

html[data-theme="dark"] .foka-mdrawer-brand .foka-mtop-brand-sub {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .foka-mdrawer-close {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .foka-mdrawer-close svg {
    stroke: #94a3b8 !important;
}

html[data-theme="dark"] .foka-drawer-welcome-card {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.12) 0%, rgba(255, 122, 0, 0.06) 100%) !important;
    border-color: rgba(251, 146, 60, 0.25) !important;
}

html[data-theme="dark"] .foka-dwelcome-avatar {
    background: rgba(234, 88, 12, 0.2) !important;
    color: #fb923c !important;
}

html[data-theme="dark"] .foka-drawer-welcome-card h4,
html[data-theme="dark"] .foka-dwelcome-greeting {
    color: #fdba74 !important;
}

html[data-theme="dark"] .foka-drawer-welcome-card p,
html[data-theme="dark"] .foka-dwelcome-sub {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .foka-dqa-btn {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #fb923c !important;
}

html[data-theme="dark"] .foka-dqa-btn:hover,
html[data-theme="dark"] .foka-dqa-btn:active {
    background: #ea580c !important;
    color: #ffffff !important;
    border-color: #ea580c !important;
}

html[data-theme="dark"] .foka-mdrawer-nav-title {
    color: #64748b !important;
}

html[data-theme="dark"] .foka-drawer-menu li {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .foka-drawer-menu li a {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .foka-drawer-menu li a:hover,
html[data-theme="dark"] .foka-drawer-menu li a:active {
    background: rgba(255, 122, 0, 0.12) !important;
    color: #fb923c !important;
    border-color: rgba(251, 146, 60, 0.3) !important;
}

html[data-theme="dark"] .foka-dmenu-icon-wrap {
    background: #0f172a !important;
    color: #94a3b8 !important;
}

html[data-theme="dark"] .foka-drawer-menu li a:hover .foka-dmenu-icon-wrap,
html[data-theme="dark"] .foka-drawer-menu li a:active .foka-dmenu-icon-wrap {
    background: rgba(234, 88, 12, 0.25) !important;
    color: #fb923c !important;
}

html[data-theme="dark"] .foka-dmenu-end-arrow {
    color: #475569 !important;
}

html[data-theme="dark"] .foka-drawer-submenu-head {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .foka-drawer-submenu-head:hover,
html[data-theme="dark"] .foka-drawer-has-submenu.foka-submenu-open .foka-drawer-submenu-head {
    background: rgba(255, 122, 0, 0.12) !important;
    color: #fb923c !important;
}

html[data-theme="dark"] .foka-drawer-submenu {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .foka-drawer-hero-cta {
    background: linear-gradient(135deg, #1e293b 0%, #291e1a 100%) !important;
    border-color: rgba(251, 146, 60, 0.32) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .foka-drawer-hero-cta:hover,
html[data-theme="dark"] .foka-drawer-hero-cta:active {
    background: rgba(255, 122, 0, 0.14) !important;
    border-color: #ff7a00 !important;
    box-shadow: 0 2px 6px rgba(255, 122, 0, 0.15) !important;
}

html[data-theme="dark"] .foka-sub-hero {
    background: rgba(234, 88, 12, 0.18) !important;
    border-color: rgba(251, 146, 60, 0.35) !important;
    color: #fb923c !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] .foka-drawer-hero-cta:hover .foka-sub-hero,
html[data-theme="dark"] .foka-drawer-hero-cta:active .foka-sub-hero {
    background: rgba(234, 88, 12, 0.28) !important;
    border-color: #fb923c !important;
}

html[data-theme="dark"] .foka-dh-title {
    color: #f8fafc !important;
}

html[data-theme="dark"] .foka-dh-pill {
    background: rgba(234, 88, 12, 0.2) !important;
    border-color: rgba(251, 146, 60, 0.4) !important;
    color: #fb923c !important;
}

html[data-theme="dark"] .foka-dh-sub {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .foka-dh-arrow {
    color: #fb923c !important;
}

html[data-theme="dark"] .foka-drawer-hero-cta:hover .foka-dh-arrow,
html[data-theme="dark"] .foka-drawer-hero-cta:active .foka-dh-arrow {
    color: #ff7a00 !important;
}

html[data-theme="dark"] .foka-drawer-submenu li:not(.foka-drawer-hero-cta-wrap) {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .foka-drawer-sublink:hover {
    background: rgba(255, 122, 0, 0.12) !important;
}

html[data-theme="dark"] .foka-sublink-title {
    color: #f8fafc !important;
}

html[data-theme="dark"] .foka-sublink-desc {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .foka-sublink-icon {
    background: #0f172a !important;
}

html[data-theme="dark"] .foka-sub-full-row .foka-drawer-sublink.foka-sublink-all {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] .foka-sub-full-row .foka-drawer-sublink.foka-sublink-all:hover,
html[data-theme="dark"] .foka-sub-full-row .foka-drawer-sublink.foka-sublink-all:active {
    background: #273549 !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] .foka-sub-full-row .foka-sub-all-icon {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

html[data-theme="dark"] .foka-sub-full-row .foka-drawer-sublink:hover .foka-sub-all-icon,
html[data-theme="dark"] .foka-sub-full-row .foka-drawer-sublink:active .foka-sub-all-icon {
    background: #1e293b !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .foka-sub-full-row .foka-sub-arrow {
    color: #64748b !important;
}

html[data-theme="dark"] .foka-sub-full-row .foka-drawer-sublink:hover .foka-sub-arrow,
html[data-theme="dark"] .foka-sub-full-row .foka-drawer-sublink:active .foka-sub-arrow {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .foka-drawer-lang-wrap {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .foka-dlang-label {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .foka-dlang-pill {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .foka-dlang-pill.active {
    background: rgba(255, 122, 0, 0.15) !important;
    border-color: #ea580c !important;
    color: #fb923c !important;
}

html[data-theme="dark"] .foka-drawer-footer {
    background: rgba(15, 23, 42, 0.98) !important;
    border-color: #1e293b !important;
}

html[data-theme="dark"] .foka-drawer-hours-badge {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .foka-dhours-service-badge {
    background: rgba(15, 23, 42, 0.8) !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .foka-drawer-hours-badge.foka-status-open {
    background: rgba(22, 163, 74, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

html[data-theme="dark"] .foka-drawer-hours-badge.foka-status-closed {
    background: rgba(225, 29, 72, 0.12) !important;
    border-color: rgba(244, 63, 94, 0.3) !important;
}

html[data-theme="dark"] .foka-drawer-call-btn {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.22) 0%, rgba(255, 122, 0, 0.12) 100%) !important;
    border-color: rgba(251, 146, 60, 0.35) !important;
}

html[data-theme="dark"] .foka-call-icon-wrap {
    background: #1e293b !important;
    color: #fb923c !important;
}

html[data-theme="dark"] .foka-mqt-title,
body.dark-theme .foka-mqt-title {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .foka-mqt-tag,
html[data-theme="dark"] .foka-quick-tag,
body.dark-theme .foka-mqt-tag,
body.dark-theme .foka-quick-tag {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .foka-mqt-tag:hover,
html[data-theme="dark"] .foka-mqt-tag:active,
body.dark-theme .foka-mqt-tag:hover,
body.dark-theme .foka-mqt-tag:active {
    background: rgba(255, 122, 0, 0.15) !important;
    border-color: #ff7a00 !important;
    color: #ff9800 !important;
}