/* =============================================================
   OneCut Child Theme — Main Stylesheet
   Mobile-first, RTL, Vazirmatn, WooCommerce + Elementor
   =============================================================
   TABLE OF CONTENTS
   1. Font & Base Reset
   2. Global Typography (Vazirmatn)
   3. Desktop Header (hide on mobile)
   4. Mobile Bottom Nav Bar
   5. Mobile Menu Drawer
   6. Mobile Search Overlay
   7. Mobile Homepage UX tweaks
   8. WooCommerce mobile
   9. Utilities
   ============================================================= */


/* ── 1. Font & Base Reset ─────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap&subset=arabic');

/* Override Hello Elementor reset.css body font */
html body,
body {
    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif !important;
}


/* ── 2. Global Typography — override ALL font-family refs ─── */

/* Elementor CSS variable overrides */
:root,
.elementor-kit-440 {
    --e-global-typography-primary-font-family:   'Vazirmatn' !important;
    --e-global-typography-secondary-font-family: 'Vazirmatn' !important;
    --e-global-typography-text-font-family:      'Vazirmatn' !important;
    --e-global-typography-accent-font-family:    'Vazirmatn' !important;
}

/* Body — override Hello Elementor reset.css */
html body,
body {
    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif !important;
}

/*
 * SAFE TEXT-ONLY TARGETS
 * We explicitly list only text-bearing elements.
 * We do NOT use li, span, or div — those are icon containers too.
 */
h1, h2, h3, h4, h5, h6,
p, a, td, th, dt, dd, blockquote, figcaption, caption,
label, input, textarea, select,
.elementor-heading-title,
.elementor-widget-text-editor p,
.elementor-widget-text-editor a,
.elementor-widget-text-editor li,
.elementor-button__text,
.elementor-nav-menu a.elementor-item,
.elementor-nav-menu a.elementor-sub-item,
.woocommerce p,
.woocommerce span.amount,
.woocommerce span.woocommerce-Price-amount,
.woocommerce-message,
.woocommerce-error,
.woocommerce label,
.woocommerce input,
.woocommerce button.button,
.woocommerce a.button {
    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif !important;
}

/*
 * ICON FONT PROTECTION
 * Explicitly set the correct icon font — do NOT use inherit,
 * because inherit resolves to Vazirmatn from the parent chain.
 */
/* Elementor eicons — font-family must be exactly "eicons" */
[class*="eicon-"],
[class*="eicon-"]::before,
[class*="eicon-"]::after,
.elementor-icon i,
.elementor-icon span[class*="eicon"],
.elementor-menu-toggle [class*="eicon-"],
.elementor-menu-toggle i,
.elementor-widget-icon .elementor-icon i,
.elementor-widget-icon .elementor-icon span,
.elementor-social-icon i,
.elementor-social-icon span[class*="eicon"],
.elementor-icon-list-icon i,
.elementor-icon-list-icon span[class*="eicon"] {
    font-family: eicons !important;
}

/* FontAwesome — must be "Font Awesome 5 Free" or Brands */
i.fas, i.far, i.fal, i.fab, i.fad,
[class*="fa-"],
[class*="fa-"]::before,
.fa::before,
span.fas, span.far, span.fal, span.fab,
.oc-nav-item i {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands' !important;
}

/* Dashicons */
[class*="dashicons"],
[class*="dashicons"]::before {
    font-family: dashicons !important;
}

/* sub-arrow: it's a flex container with an <i> child — no font needed on the span */
.sub-arrow {
    font-family: eicons !important;
}


/* ── 3. Desktop header — no changes ──────────────────────── */
/* The header is controlled by Elementor HF templates.
   We only touch it on mobile below. */


/* ── 4. Mobile Bottom Nav Bar ───────────────────────────── */

#oc-mobile-nav {
    display: none; /* hidden on desktop */
}

@media (max-width: 768px) {

    /* Add breathing room at the bottom of every page */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* ── Bar container ── */
    #oc-mobile-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 99999;
        height: 64px;
        background: #fff;
        border-top: 1px solid rgba(0, 0, 0, .07);
        box-shadow: 0 -2px 16px rgba(0, 0, 0, .08);
        align-items: stretch;
        justify-content: space-around;
        direction: rtl;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* ── Nav item ── */
    .oc-nav-item {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        gap: 3px;
        padding: 6px 2px;
        background: none !important;
        border: none !important;
        cursor: pointer;
        color: #aaa !important;
        text-decoration: none !important;
        font-size: 10px !important;
        font-weight: 400;
        transition: color .18s, transform .18s;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        outline: none;
    }

    .oc-nav-item i {
        font-size: 21px !important;
        line-height: 1.2;
        transition: transform .18s;
        /* keep icon font intact */
        font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands' !important;
    }

    .oc-nav-item span:not(.oc-cart-badge) {
        font-family: 'Vazirmatn', Tahoma, sans-serif !important;
        font-size: 10px !important;
        line-height: 1;
        letter-spacing: 0;
    }

    /* Active & hover state — brand olive */
    .oc-nav-item.oc-active,
    .oc-nav-item:active {
        color: #7E8427 !important;
    }

    .oc-nav-item.oc-active i {
        transform: translateY(-2px) scale(1.1);
    }

    /* Active dot indicator */
    .oc-nav-item.oc-active::after {
        content: '';
        position: absolute;
        bottom: 6px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #7E8427;
    }

    /* Cart badge */
    .oc-cart-badge {
        position: absolute !important;
        top: 5px;
        right: calc(50% - 20px);
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 9px;
        background: #C89374;
        color: #fff !important;
        font-family: 'Vazirmatn', Tahoma, sans-serif !important;
        font-size: 10px !important;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        box-shadow: 0 1px 4px rgba(200,147,116,.4);
    }

    /* ── Call button — light green icon only, label stays grey ── */
    .oc-nav-call-btn i {
        font-size: 26px !important;
        color: #4CAF50 !important;
        font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands' !important;
        filter: drop-shadow(0 1px 4px rgba(76,175,80,.25));
    }

    .oc-nav-call-btn:active i {
        color: #388E3C !important;
        transform: translateY(-2px) scale(1.1);
    }

    /* No active dot for call button */
    .oc-nav-call-btn::after {
        display: none !important;
    }


    /* ── 5. Mobile Menu Drawer ────────────────────────────── */

    /*
     * Strategy: let Elementor toggle display:none/block as usual.
     * Our JS watches that mutation and converts it to a slide-in drawer.
     * The drawer uses transform so the transition is GPU-accelerated.
     */

    /* Base state: off-screen to the right, always in DOM flow */
    .elementor-nav-menu--dropdown.elementor-nav-menu__container {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 64px !important;
        left: auto !important;
        width: min(300px, 88vw) !important;
        max-height: calc(100dvh - 64px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #fff !important;
        box-shadow: -6px 0 32px rgba(0, 0, 0, .12) !important;
        border-radius: 0 !important;
        padding: 72px 0 32px !important;
        z-index: 99998 !important;
        /* Always block so our JS can control it */
        display: block !important;
        /* Hidden off-screen */
        transform: translateX(110%) !important;
        transition: transform .28s cubic-bezier(.4, 0, .2, 1),
                    visibility .28s !important;
        visibility: hidden !important;
        pointer-events: none !important;
        /* Scrollbar styling */
        scrollbar-width: thin;
        scrollbar-color: #e0e0d0 transparent;
    }

    /* Open state — JS adds .oc-drawer-open */
    .elementor-nav-menu--dropdown.elementor-nav-menu__container.oc-drawer-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: all !important;
    }

    /* Menu close button inside drawer — added by JS */
    .oc-drawer-close {
        position: absolute;
        top: 16px;
        left: 16px;
        width: 36px;
        height: 36px;
        border: none;
        background: #f4f4f0;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #555;
        font-size: 16px;
        z-index: 1;
        -webkit-tap-highlight-color: transparent;
    }

    /* Menu items */
    .elementor-nav-menu--dropdown .elementor-item,
    .elementor-nav-menu--dropdown a.elementor-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-family: 'Vazirmatn', Tahoma, sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        padding: 15px 24px !important;
        border-bottom: 1px solid rgba(0, 0, 0, .055) !important;
        color: #2a2a2a !important;
        text-decoration: none !important;
        transition: background .15s, color .15s !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Selected / current / highlighted item — white text on dark background */
    .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
    .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
        color: #fff !important;
    }

    /* Highlighted = parent of open submenu — keep dark text, just highlight bg */
    .elementor-nav-menu--dropdown .elementor-item.highlighted,
    .elementor-nav-menu--dropdown a.elementor-item.highlighted {
        background: #f0f0e8 !important;
        color: #7E8427 !important;
    }

    .elementor-nav-menu--dropdown .elementor-item:hover,
    .elementor-nav-menu--dropdown .elementor-item:active {
        background: #f8f8f3 !important;
        color: #7E8427 !important;
    }

    /* Sub-arrow — inline with text, not block */
    .elementor-nav-menu--dropdown .elementor-item .sub-arrow,
    .elementor-nav-menu--dropdown .sub-arrow {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: auto !important;
        margin-left: 0 !important;
        padding: 0 4px !important;
        flex-shrink: 0 !important;
        font-family: eicons !important;
    }

    /* Sub-menu items — always dark text on light background */
    .elementor-nav-menu--dropdown .elementor-sub-item,
    .elementor-nav-menu--dropdown a.elementor-sub-item,
    .elementor-nav-menu--dropdown .elementor-sub-item.elementor-item-active,
    .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active,
    .elementor-nav-menu--dropdown .elementor-sub-item.highlighted,
    .elementor-nav-menu--dropdown li li a {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        font-family: 'Vazirmatn', Tahoma, sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        padding: 11px 40px !important;
        color: #444 !important;
        background: #fafaf7 !important;
        border-bottom: 1px solid rgba(0,0,0,.04) !important;
    }

    .elementor-nav-menu--dropdown .elementor-sub-item:hover,
    .elementor-nav-menu--dropdown a.elementor-sub-item:hover {
        color: #7E8427 !important;
        background: #f3f3ec !important;
    }

    /* Backdrop */
    .oc-menu-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        bottom: 64px;
        background: rgba(0, 0, 0, .42);
        z-index: 99997;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        transition: opacity .25s;
    }
    .oc-menu-backdrop.oc-visible {
        display: block;
    }

    /* Hide Elementor's hamburger toggle on mobile — we still need it
       in the DOM for JS, but it can be hidden visually if you prefer
       to trigger the drawer from a custom button. Keep it visible here. */
    .elementor-menu-toggle {
        background: none !important;
        border: none !important;
        color: #333 !important;
        padding: 6px !important;
    }


    /* ── 6. Mobile Search Overlay ─────────────────────────── */

    #oc-search-overlay {
        position: fixed;
        inset: 0;
        bottom: 64px;
        background: rgba(255, 255, 255, .97);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 100000;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 80px;
        direction: rtl;
    }

    #oc-search-overlay[hidden] {
        display: none;
    }

    .oc-search-inner {
        width: calc(100% - 32px);
        max-width: 480px;
    }

    .oc-search-inner form {
        display: flex;
        gap: 8px;
        align-items: center;
        background: #f4f4f0;
        border-radius: 16px;
        padding: 10px 16px;
        border: 1.5px solid #e4e4d8;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    }

    .oc-search-inner input[type="search"] {
        flex: 1;
        border: none !important;
        background: transparent !important;
        font-family: 'Vazirmatn', Tahoma, sans-serif !important;
        font-size: 16px !important;
        padding: 6px 0 !important;
        outline: none !important;
        color: #333 !important;
        direction: rtl;
        min-width: 0;
    }

    .oc-search-inner input[type="search"]::placeholder {
        color: #aaa;
    }

    .oc-search-inner button[type="submit"] {
        background: none !important;
        border: none !important;
        padding: 4px 8px !important;
        cursor: pointer;
        color: #7E8427 !important;
        font-size: 18px !important;
        font-family: 'Font Awesome 5 Free' !important;
    }

    .oc-search-close {
        color: #bbb !important;
        font-size: 16px !important;
    }

    .oc-search-hint {
        margin-top: 20px;
        font-family: 'Vazirmatn', Tahoma, sans-serif !important;
        font-size: 13px;
        color: #999;
        text-align: center;
        direction: rtl;
    }


    /* ── 7. Mobile Homepage UX Tweaks ─────────────────────── */

    /* Prevent horizontal overflow */
    html, body {
        overflow-x: hidden !important;
    }

    /* Tighter Elementor section padding on mobile */
    .elementor-section .elementor-container {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    /* Make hero text readable on small screens */
    .elementor-heading-title {
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Product card touch target — minimum 44px height on interactive items */
    .woocommerce ul.products li.product a,
    .woocommerce ul.products li.product .button {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Add to cart button — larger tap target */
    .woocommerce .single_add_to_cart_button,
    .woocommerce a.button,
    .woocommerce button.button {
        min-height: 48px !important;
        font-size: 15px !important;
        font-family: 'Vazirmatn', Tahoma, sans-serif !important;
        border-radius: 10px !important;
    }


    /* ── 8. WooCommerce Mobile ─────────────────────────────── */

    /* Cart page */
    .woocommerce-cart table.cart {
        font-size: 13px !important;
    }

    .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
        font-family: 'Vazirmatn', Tahoma, sans-serif !important;
        font-size: 16px !important;
        padding: 16px 24px !important;
        border-radius: 12px !important;
    }

    /* Order table */
    .woocommerce-order-details .woocommerce-table,
    .woocommerce-order-details .woocommerce-table td,
    .woocommerce-order-details .woocommerce-table th {
        font-size: 13px !important;
        font-family: 'Vazirmatn', Tahoma, sans-serif !important;
    }

} /* end @media (max-width: 768px) */


/* ── 9. Utilities ─────────────────────────────────────────── */

/* RTL helpers */
[dir="rtl"] .oc-nav-item {
    direction: rtl;
}

/* Smooth scroll for anchors */
html {
    scroll-behavior: smooth;
}

/* Focus-visible outline for keyboard navigation */
:focus-visible {
    outline: 2px solid #7E8427;
    outline-offset: 2px;
}