/* ── Foodi360 Connector — Header widgets ──────────────────
 *  Loaded on every page. With Woodmart the account and cart icons use Woodmart's own
 *  element markup (.wd-tools-element, .wd-tools-icon from its icon font, .wd-tools-count,
 *  .wd-dropdown), so Woodmart's CSS styles them; this file only adds glue.
 *  With another theme the templates add .foodi360-header-el--fallback and inline SVG icons,
 *  styled below with the same metrics. Logical properties keep RTL correct.
 * ───────────────────────────────────────────────────────── */

.foodi360-header-el {
    --foodi360-badge-bg: var(--wd-primary-color, #83b735);
    --foodi360-badge-color: #fff;
    --foodi360-badge-size: 16px;
    --foodi360-dropdown-bg: var(--bgcolor-white, #fff);
    --foodi360-dropdown-color: var(--color-gray-800, #333);
    --foodi360-dropdown-muted: var(--color-gray-500, #777);
    --foodi360-dropdown-border: var(--brdcolor-gray-300, rgba(0, 0, 0, 0.105));
    /* Same shadow and radius as Woodmart's own header dropdowns */
    --foodi360-dropdown-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
    --foodi360-dropdown-radius: var(--wd-brd-radius, 0);
    --foodi360-dropdown-gap: 15px;
    --foodi360-icon-size: var(--wd-tools-icon-base-width, 20px);

    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/*
 * Dark header rows: Woodmart's ".whb-color-light .wd-tools-element" already switches
 * --wd-header-el-color to white, and the icons follow through currentColor.
 * Outside a Woodmart header (no .wd-tools-element variables) the fallbacks below apply.
 */

/*
 * Placed in a Header Builder "Text" or "HTML block" element, the widget sits in a wrapper
 * with its own 10px padding (plus a <p> from the editor). Drop both so spacing matches
 * the native elements, whose link already carries the 10px padding. Woodmart also lets a
 * Text element grow (flex: 1 1 auto), which put spare column space next to the icon (the
 * uneven cart/account spacing); like a native element, the wrapper keeps its content width.
 */
:is(.wd-header-text, .wd-header-html):has(.foodi360-header-el) {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding-inline: 0;
}
:is(.wd-header-text, .wd-header-html) :is(p, div.wd-entry-content):has(> .foodi360-header-el) {
    display: contents;
}

/* Fallback trigger link (other themes): same box as Woodmart's .wd-tools-element > a */
.foodi360-header-el--fallback > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding-inline: 10px;
    color: var(--wd-header-el-color, #333);
    line-height: 1;
    text-decoration: none !important;
    transition: color 0.25s ease;
}
.foodi360-header-el--fallback:hover > a,
.foodi360-header-el.foodi360-is-open > a,
.foodi360-header-el > a:focus-visible { color: var(--wd-header-el-color-hover, rgba(51, 51, 51, 0.6)); }

/* Fallback label: Woodmart's header element font settings */
.foodi360-header-el--fallback .wd-tools-text {
    white-space: nowrap;
    font-family: var(--wd-header-el-font, inherit);
    font-size: var(--wd-header-el-font-size, 13px);
    font-weight: var(--wd-header-el-font-weight, 600);
    font-style: var(--wd-header-el-font-style, normal);
    text-transform: var(--wd-header-el-transform, uppercase);
}

/* Fallback icons (inline SVG; with Woodmart the icon font glyph of .wd-tools-icon) */
.foodi360-header-el--fallback .foodi360-header-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.foodi360-header-svg {
    width: var(--foodi360-icon-size);
    height: var(--foodi360-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.foodi360-header-caret {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.25s ease;
}
.foodi360-is-open .foodi360-header-caret { transform: rotate(180deg); }

/* ── Cart badge: Woodmart's .wd-tools-count (design 2); the rules below are the fallback ── */
.foodi360-header-el--fallback.foodi360-header-cart .foodi360-cart-icon-wrap { margin-inline-end: 6px; }
.foodi360-header-el--fallback.foodi360-header-cart .foodi360-cart-icon-wrap .foodi360-cart-badge {
    position: absolute;
    top: -5px;
    inset-inline-end: -9px;
    z-index: 1;
    box-sizing: border-box;
    min-width: var(--foodi360-badge-size);
    height: var(--foodi360-badge-size);
    padding-inline: 4px;
    border-radius: 999px;
    background-color: var(--foodi360-badge-bg);
    color: var(--foodi360-badge-color);
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: var(--foodi360-badge-size);
    letter-spacing: 0;
    text-align: center;
}
.foodi360-header-el--fallback.foodi360-header-cart .foodi360-cart-icon-wrap .foodi360-cart-badge[data-count="0"] { display: none; }
.foodi360-header-cart .foodi360-cart-badge.foodi360-is-pulsing { animation: foodi360-badge-pulse 0.45s ease-out; }
@keyframes foodi360-badge-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ── Dropdowns (Woodmart-style: fade + slide up into place) ── */
.foodi360-header-dropdown {
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    z-index: 380;
    margin-top: var(--foodi360-dropdown-gap);
    box-sizing: border-box;
    background-color: var(--foodi360-dropdown-bg);
    color: var(--foodi360-dropdown-color);
    border-radius: var(--foodi360-dropdown-radius);
    box-shadow: var(--foodi360-dropdown-shadow);
    text-align: start;
    text-transform: none;
    font-size: 14px;
    line-height: 1.4;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(15px) translateZ(0);
    transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1),
                visibility 0.4s cubic-bezier(0.19, 1, 0.22, 1),
                transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
/* Invisible bridge over the gap so the pointer can reach the dropdown */
.foodi360-header-dropdown::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 100%;
    height: var(--foodi360-dropdown-gap);
}
.foodi360-is-open > .foodi360-header-dropdown {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
/* Elements in the left column open towards the page */
.whb-col-left .foodi360-header-dropdown,
.whb-mobile-left .foodi360-header-dropdown {
    inset-inline-start: 0;
    inset-inline-end: auto;
}

/* Cart dropdown: the plugin's mini cart (Woodmart's .wd-dropdown-cart is 330px / 20px too) */
.foodi360-header-cart__dropdown {
    width: 330px;
    padding: 20px;
}
.foodi360-header-cart__dropdown .foodi360-mini-cart { margin: 0; box-shadow: none; }
.foodi360-header-cart__dropdown .foodi360-mini-cart__title { display: none; } /* like Woodmart's header cart widget: no title */
.foodi360-header-cart__dropdown .foodi360-mini-cart__items {
    max-height: min(50vh, 360px);
    overflow-y: auto;
}

/* Account menu: Woodmart's .wd-dropdown-my-account / .wd-sub-menu; the rules below are the fallback */
.foodi360-header-dropdown.foodi360-header-account__dropdown { width: 200px; padding-block: 10px; }
.foodi360-header-menu { list-style: none; margin: 0; padding: 0; }
.foodi360-header-dropdown .foodi360-header-menu a {
    display: block;
    padding: 9px 20px;
    color: var(--foodi360-dropdown-color);
    text-decoration: none;
    transition: color 0.25s ease, background-color 0.25s ease;
}
.foodi360-header-dropdown .foodi360-header-menu a:hover,
.foodi360-header-dropdown .foodi360-header-menu a:focus-visible { color: var(--foodi360-dropdown-muted); }
.foodi360-header-dropdown .foodi360-header-account__logout {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--foodi360-dropdown-border);
}
.foodi360-header-menu .foodi360-is-loading { opacity: 0.5; pointer-events: none; }

/* Branch list */
.foodi360-header-branch > a:not([href]) { cursor: default; }
.foodi360-header-branch .foodi360-branch-label {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.foodi360-header-branch__dropdown { width: 280px; padding: 14px 0; }
.foodi360-header-branch__list { margin: 0; padding: 0; border: 0; min-width: 0; }
.foodi360-header-branch__title {
    padding: 0 20px 8px;
    color: var(--foodi360-dropdown-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}
.foodi360-header-branch__list { max-height: min(60vh, 380px); overflow-y: auto; }
.foodi360-header-branch__option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 9px 20px;
    cursor: pointer;
    font-weight: 400;
    transition: background-color 0.2s ease;
}
.foodi360-header-branch__option:hover { background-color: var(--bgcolor-gray-100, rgba(0, 0, 0, 0.04)); }
.foodi360-header-branch__option input {
    flex: none;
    margin: 3px 0 0;
    accent-color: var(--wd-primary-color, #83b735);
}
.foodi360-header-branch__text { display: grid; gap: 2px; min-width: 0; }
.foodi360-header-branch__name { font-weight: 600; }
.foodi360-header-branch__option.is-current .foodi360-header-branch__name { color: var(--wd-primary-color, inherit); }
.foodi360-header-branch__address { color: var(--foodi360-dropdown-muted); font-size: 12px; }

/* ── Mobile / tablet (Woodmart's header breakpoint) ──────── */
@media (max-width: 1024px) {
    /* Cart and account icons are plain links here */
    .foodi360-header-cart__dropdown,
    .foodi360-header-account__dropdown { display: none; }
    .foodi360-header-el .foodi360-cart-label,
    .foodi360-header-el .foodi360-account-label { display: none; }
    .foodi360-header-el.wd-style-text > a { gap: 0; } /* icon only here: no gap after it */
    .foodi360-header-branch .foodi360-branch-label { max-width: 110px; }
    .foodi360-header-branch__dropdown { width: min(280px, calc(100vw - 30px)); }
}

/* ── Legacy header shortcodes ────────────────────────────
 *  [foodi360_cart_count] and [foodi360_account_widget] also render in the header,
 *  so their styles live here (loaded in <head>), not in the cart/auth CSS that
 *  WordPress would print in the footer: no unstyled flash in the header.
 * ───────────────────────────────────────────────────────── */
.foodi360-cart-icon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
}
.foodi360-cart-icon .foodi360-cart-badge {
    box-sizing: border-box;
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    border-radius: 999px;
    background-color: var(--wd-primary-color, #83b735);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}
.foodi360-cart-icon .foodi360-cart-badge[data-count="0"] { display: none; }

.foodi360-account-widget { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 15px; }
.foodi360-account-widget__hello { color: var(--color-gray-500, #767676); }
.foodi360-account-widget__link { font-weight: 600; text-decoration: none; }

/* Desktop header row: one line (longer labels, e.g. Arabic, must not wrap under each other) */
.whb-visible-lg .foodi360-account-widget { flex-wrap: nowrap; white-space: nowrap; }

/* Compact form: only the first link ("Log in" / "My account") as a person icon; its text stays
   for screen readers. The other links are reachable from the account pages. Used in Woodmart's
   narrow mobile header columns (.whb-hidden-lg) and in the desktop header below 1200px, where the
   full links no longer fit next to the menu. */
.whb-hidden-lg .foodi360-account-widget__hello,
.whb-hidden-lg .foodi360-account-widget__link ~ .foodi360-account-widget__link { display: none; }
.whb-hidden-lg .foodi360-account-widget { display: flex; flex-wrap: nowrap; } /* inline-flex with only an icon sits on the text baseline, 8px low */
.whb-hidden-lg .foodi360-account-widget__link {
    position: relative; display: inline-block; width: 24px; height: 24px; overflow: hidden;
    color: inherit; font-size: 0; line-height: 0; vertical-align: middle;
}
.whb-hidden-lg .foodi360-account-widget__link::before {
    content: ""; position: absolute; inset: 0; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm0 2c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E") center / 22px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm0 2c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E") center / 22px no-repeat;
}
@media (max-width: 1199.98px) {
    .whb-visible-lg .foodi360-account-widget { display: flex; } /* inline-flex with only an icon sits on the text baseline, too low */
    .whb-visible-lg .foodi360-account-widget__hello,
    .whb-visible-lg .foodi360-account-widget__link ~ .foodi360-account-widget__link { display: none; }
    .whb-visible-lg .foodi360-account-widget__link {
        position: relative; display: inline-block; width: 24px; height: 24px; overflow: hidden;
        color: inherit; font-size: 0; line-height: 0; vertical-align: middle;
    }
    .whb-visible-lg .foodi360-account-widget__link::before {
        content: ""; position: absolute; inset: 0; background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm0 2c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E") center / 22px no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm0 2c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E") center / 22px no-repeat;
    }
}

@media (prefers-reduced-motion: reduce) {
    .foodi360-header-dropdown { transition: none; transform: none; }
    .foodi360-header-cart .foodi360-cart-badge.foodi360-is-pulsing { animation: none; }
}