/* Entry point into the SPA cart's Shadow DOM. The bundle inlines
 * base + style.min.css + this file into the shadow root, so every rule here
 * must start with :host or :root — anything else leaks onto the order page.
 * Below: the --vl-* tokens mapped onto the theme palette, then the fixes the
 * bundle needs. Details: README, "Корзина".
 */
:host, :root {
    /* Primary colors */
    --vl-primary: var(--primary);
    --vl-primary-lifted: var(--primary-lifted);
    --vl-primary-accented: var(--primary-accented);

    /* Secondary colors */
    --vl-secondary: var(--secondary);
    --vl-secondary-lifted: var(--secondary-lifted);
    --vl-secondary-accented: var(--secondary-accented);

    /* Success colors */
    --vl-success: var(--success);
    --vl-success-lifted: var(--success-lifted);
    --vl-success-accented: var(--success-accented);

    /* Info colors */
    --vl-info: var(--info);
    --vl-info-lifted: var(--info-lifted);
    --vl-info-accented: var(--info-accented);

    /* Notice colors */
    --vl-notice: var(--notice);
    --vl-notice-lifted: var(--notice-lifted);
    --vl-notice-accented: var(--notice-accented);

    /* Warning colors */
    --vl-warning: var(--warning);
    --vl-warning-lifted: var(--warning-lifted);
    --vl-warning-accented: var(--warning-accented);

    /* Error colors */
    --vl-error: var(--error);
    --vl-error-lifted: var(--error-lifted);
    --vl-error-accented: var(--error-accented);

    /* Grayscale colors */
    --vl-grayscale: var(--grayscale);
    --vl-grayscale-lifted: var(--grayscale-lifted);
    --vl-grayscale-accented: var(--grayscale-accented);

    /* Neutral colors */
    --vl-neutral: var(--neutral);
    --vl-neutral-lifted: var(--neutral-lifted);
    --vl-neutral-accented: var(--neutral-accented);

    /* Text neutral colors */
    --vl-text-inverted: var(--text-inverted);
    --vl-text-muted: var(--text-muted);
    --vl-text-lifted: var(--text-lifted);
    --vl-text-accented: var(--text-accented);
    --vl-text: var(--text);

    /* Border neutral colors */
    --vl-border-muted: var(--border-muted);
    --vl-border: var(--border);
    --vl-border-lifted: var(--border-lifted);
    --vl-border-accented: var(--border-accented);

    /* Background neutral colors */
    --vl-bg: var(--bg);
    --vl-bg-muted: var(--bg-muted);
    --vl-bg-lifted: var(--bg-lifted);
    --vl-bg-accented: var(--bg-accented);
    --vl-bg-inverted: var(--bg-inverted);

    /* Additional custom properties */
    /* Font Sizes */
    --vl-text-xs: var(--text-xs);
    --vl-text-sm: var(--text-sm);
    --vl-text-md: var(--text-md);
    --vl-text-lg: var(--text-lg);

    /* Spacing */
    --vl-outline-sm: var(--outline-sm);
    --vl-outline-md: var(--outline-md);
    --vl-outline-lg: var(--outline-lg);

    /* Rounding */
    --vl-rounding-sm: var(--rounding-sm);
    --vl-rounding-md: var(--rounding-md);
    --vl-rounding-lg: var(--rounding-lg);

    /* Other */
    --vl-letter-spacing: var(--letter-spacing);
    --vl-disabled-opacity: var(--disabled-opacity);
}

/* Hide the "Estimate taxes" tab in the cart.
 *
 * Not a WHMCS setting: the tab renders while cart.totals.taxes.length > 0 and
 * the API always returns two zero-rate placeholders, so the condition is
 * always true. Checked via /index.php?rp=/api/v2/cart/<cartTag>.
 *
 * This file is the supported customisation point — the bundle fetches it and
 * injects it into the Shadow DOM. js/main.min.js must not be patched: a theme
 * update overwrites it.
 *
 * Structural selector because the classes are Tailwind utilities and the ids
 * (v-4, v-5) are generated by Vue. The triggers carry nothing semantic either:
 * no role="tab", no aria-selected, no data-value anywhere in main.min.js.
 *
 * :last-child is a deliberate guard, not decoration. The strip holds exactly
 * two tabs — promo code first, taxes second. Pinning that count makes a third
 * tab switch the rule off, so the tax tab reappears and someone notices;
 * without it the rule would silently hide whatever landed in second place.
 */
:host .bg-muted.mt-4 .flex.border-b.border-default.w-full > button:nth-child(2):last-child {
    display: none !important;
}

/* ---------------------------------------------------------------------------
 * Hostfly brand layer for the cart.
 *
 * This file is the supported customisation point and it is loaded last twice
 * over: the bundle concatenates it after style.min.css into the Shadow DOM,
 * and standard_cart/common.tpl links it after every theme stylesheet on the
 * order pages. So it reaches BOTH the shadow tree and the light DOM, and every
 * rule below is scoped on purpose — :host only matches inside the shadow tree,
 * #order-standard_cart only outside it. An unscoped rule here would repaint
 * the header and the footer of the order pages.
 *
 * Reference values: docs/ui-kit-spec.md.
 * ------------------------------------------------------------------------- */

:host {
    /* The bundle ships --font-sans as a system stack and never uses the
       --font-inter it also declares, so the cart rendered in the system face
       while the rest of the client area used Inter. */
    --font-sans: "Inter", "Open Sans", "Helvetica Neue", Arial, sans-serif;
    --default-font-family: var(--font-sans);

    /* Card radius: the kit draws 16 where the cart maps large to the shared
       --rounding-lg (12). The shared token has 50 consumers in the stock
       theme, so it is retuned here instead of globally. */
    --vl-rounding-lg: 1rem;
}

/* Filled buttons are black on the Buttons sheet; the brand blue belongs to the
   accent variant only. The cart paints its filled button with bg-primary, so
   the pair bg-primary + text-inverted is repainted rather than the token,
   which also feeds links and focus rings. */
:host .bg-primary.text-inverted {
    background-color: var(--neutral-950);
}
:host .bg-primary.text-inverted:hover {
    background-color: var(--neutral-600);
}
/* No pressed state, and 0.3s to match the cabinet and the marketing site
   (HOS-24). The bundle animates colours itself, only the duration is set. */
:host .bg-primary.text-inverted {
    transition-duration: 0.3s;
}

/* Control heights: the kit puts the button and the field it sits beside on the
   same 56px. The sticky cart bar's checkout CTA is a ghost button repainted
   white (.!bg-default) over the dark bar, so it misses the pair above and came
   out at 47px — pull it onto the same 56px so the funnel's final action matches
   the kit's M size. */
:host .bg-primary.text-inverted,
:host .bg-transparent.text-neutral,
:host button.\!bg-default {
    min-height: 3.5rem;
}

/* Pagination inside the SPA, per the Pagination sheet.
 *
 * The bundle draws the current page with the utilities
 * "!bg-primary !text-inverted !border-transparent", so it came out brand blue
 * where the sheet draws it black — visible under the TLD price table on
 * cart.php?a=add&domain=transfer.
 *
 * Class names come from the Tailwind build and are not a contract, so the
 * hooks are semantic instead: aria-current appears exactly once in the whole
 * shadow tree, and the strip is simply its parent. Numbers, arrows and the
 * ellipsis are told apart the same way — arrows are the buttons carrying an
 * svg, the ellipsis is the one with no aria-label.
 *
 * !important is unavoidable on the current page and on disabled: the bundle
 * writes those with Tailwind's ! prefix.
 */
:host div:has(> [aria-current]) {
    gap: 16px;
    align-items: center;
    /* Centre the pagination bar (bundle left it flex-end / right-aligned) and
       give it the same vertical breathing room as the cabinet pagination. The
       bundle pulls the bar up with a -mt-5 utility, so margin-top is explicit. */
    justify-content: center;
    margin-top: 24px;
    margin-bottom: 8px;
}
:host div:has(> [aria-current]) > button {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background-color: transparent;
    color: var(--neutral-950);
    font-size: var(--text-md);
    font-weight: 400;
}
:host div:has(> [aria-current]) > button:hover {
    background-color: var(--bg-lifted);
    border-color: var(--border);
    color: var(--neutral-950);
}

/* Prev/next arrows render a visible "previous"/"next" text label next to the
   chevron. Arrows are the buttons that contain an <svg>; inside each the layout
   is <button> > div.flex > (svg + div.label). Hide the label div, keep the SVG,
   so it is arrow-only — matching the cabinet pagination. Numbers/ellipsis have
   no svg and stay untouched. Also centre the lone chevron by dropping the
   icon+text asymmetric padding. */
:host div:has(> [aria-current]) > button:has(svg) > div > div {
    display: none;
}
:host div:has(> [aria-current]) > button:has(svg) {
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
}
/* Everything that has to beat one of the bundle's own !important lives in
 * @layer utilities — the same layer Tailwind puts its utilities in.
 *
 * Cascade layers invert for important declarations: an unlayered !important
 * ranks BELOW a layered one, so the obvious "just add !important" loses here.
 * Naming the existing layer puts the two declarations on equal footing, and
 * then specificity decides — ours is (0,3,2) against the utility's (0,1,0).
 * The normal-weight rules above stay unlayered on purpose: there the ordering
 * is the usual way round and unlayered already wins.
 */
@layer utilities {
    :host div:has(> [aria-current]) > button[aria-current] {
        background-color: var(--neutral-950) !important;
        border-color: transparent !important;
        color: var(--white) !important;
        font-weight: 500 !important;
    }
    :host div:has(> [aria-current]) > button:disabled {
        border-color: var(--bg-lifted) !important;
        background-color: transparent !important;
        color: var(--border) !important;
    }
    :host div:has(> [aria-current]) > button:disabled svg {
        color: var(--border) !important;
    }
    /* Ellipsis is the only button without a label; it is disabled too, but the
       sheet keeps it readable rather than greyed out. */
    :host div:has(> [aria-current]) > button:not([aria-label]) {
        border-color: transparent !important;
        background-color: transparent !important;
        color: var(--text-accented) !important;
    }
}

/* Toggle chips — the TLD category filters on the domain pages. They are the
 * kit's standalone-pill tabs, so the selected one is black with no ring.
 * The bundle instead gives it "border-primary/75 outline-primary/75" over a
 * --bg-inverted fill: a blue ring around a near-black chip, and #1a1a1a where
 * the sheet has #000000.
 *
 * The hooks are the vendor's own config classes, not build artefacts:
 * toggleButtonActive is declared as "!bg-inverted hover:bg-lifted
 * !outline-none" and toggleButtonInactive as "bg-transparent text-default
 * border-lifted" inside the bundle's UToggle config. Layer as above: the fill
 * is written with Tailwind's ! prefix, so ours has to sit in @layer utilities
 * to outrank it.
 */
@layer utilities {
    :host .\!bg-inverted {
        background-color: var(--neutral-950) !important;
        border-color: var(--neutral-950) !important;
        outline-color: transparent !important;
    }
}
:host .bg-transparent.text-default.border-lifted {
    border-color: var(--border);
    color: var(--neutral-950);
}
:host .bg-transparent.text-default.border-lifted:hover {
    background-color: var(--bg-lifted);
    border-color: var(--border);
}

/* Line tabs — the promo-code strip above the cart totals. The kit's line-tab
 * variant marks the active tab with black text and a black 2px underline;
 * the bundle uses the brand blue for both. Hook is the utility pair that
 * defines the variant, and both utilities are normal-weight, so no layer is
 * needed here.
 */
:host .border-b-2.border-primary {
    border-bottom-color: var(--neutral-950);
    color: var(--text);
    font-weight: 700;
}
:host .border-b-2.border-transparent {
    color: var(--text-muted);
}
:host .border-b-2.border-transparent:hover {
    color: var(--text-accented);
}

/*
 * Belarusian ruble sign inside the shadow tree (HOS-9). hf-kit.js wraps the
 * currency into .hf-byn here as well and flags the host with .hf-nbrb once the
 * nbrb icon font has loaded. The @font-face lives in hf-theme.css: fonts are
 * document-wide, so the shadow tree can use it, only the rule has to be here.
 * Mirrors `.hf-nbrb .hf-byn` in hf-theme.scss.
 */
:host(.hf-nbrb) .hf-byn {
    font-family: "nbrb", var(--hf-font-text);
    font-size: 1.27em;
    font-weight: normal;
    font-style: normal;
    font-variant-ligatures: common-ligatures;
    font-feature-settings: "liga" 1;
    letter-spacing: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
/* Mirrors `select.hf-byn-select` in hf-theme.scss for native selects inside
   the shadow tree (hf-kit.js flags them the same way). */
:host(.hf-nbrb) select.hf-byn-select,
:host(.hf-nbrb) select.hf-byn-select option {
    font-family: "nbrb", var(--hf-font-text);
    font-variant-ligatures: common-ligatures;
    font-feature-settings: "liga" 1;
}