/**
 * BulCommerce — frontend.css
 *
 * Clean-room original stylesheet.  Written from the DOM structures rendered
 * by the PHP source files:
 *   - templates/cart/cart-shipping.php (classic shipping row)
 *   - templates/cart/cart-shipping-moved.php (tabs layout)
 *   - templates/cart/cart-shipping-modern.php (accordion layout)
 *   - templates/cart/cart-shipping-popup.php (popup trigger + modal)
 *   - app/Shipping/CartDrawer.php (fc-cart-drawer-* / fc-checkout-popup-*)
 *   - app/Shipping/CheckoutModal.php (fc-checkout-modal-*)
 *   - app/Shipping/MoveShippings.php (body classes, inline overrides)
 *
 * No preprocessor syntax.  No minification.  No !important except where
 * WooCommerce core must be overridden (marked with the "wc-override" comment).
 *
 * @package BulCommerce
 */

/* ===========================================================================
   DESIGN TOKENS

   This block was empty, while the rest of this file consumed seventeen
   custom properties it never declared. Two different failures came out of that:

   1. The colours and the radius happened to work because
      city-state-field.css declares them on :root — but that stylesheet is only
      enqueued when the "Alternative city/state field" setting is on. Switch
      that setting off and every var() here resolves to nothing: the locator
      tab strip loses its background (so it adopts the theme's page colour —
      recurring bug pattern #6 in CLAUDE.md), its corners go square, and the
      active tab loses its fill. A stylesheet must not depend on an unrelated
      feature toggle for its own colours.

   2. --fc-transition, --fc-modal-max-w and the three z-index tokens are
      declared NOWHERE in the codebase. Each of their 24 + 1 + 4 usages is
      invalid at computed-value time, so: nothing in the drawer / popup /
      locator UI ever animated, the shipping popup had no max width, and the
      drawer, popup and modal all fell back to `z-index: auto` — which is what
      puts an overlay underneath a theme's sticky header.

   This file is enqueued unconditionally (Kernel::enqueue_scripts), so it is
   the right owner. Colour values are byte-identical to city-state-field.css's
   set, so nothing shifts on sites where both load.
   =========================================================================== */

:root {
    --fc-blue:       #3b5ef5;
    --fc-blue-dark:  #2545d4;
    --fc-green:      #16a34a;
    --fc-red:        #dc2626;
    --fc-orange:     #d97706;
    --fc-gray-50:    #f8fafc;
    --fc-gray-100:   #f1f5f9;
    --fc-gray-200:   #e2e8f0;
    --fc-gray-400:   #94a3b8;
    --fc-gray-500:   #64748b;
    --fc-gray-700:   #334155;
    --fc-gray-900:   #0f172a;
    --fc-radius:     6px;
    --fc-shadow:     0 1px 3px rgba(0, 0, 0, .08);

    /* .15s ease is what the hand-written transitions in these stylesheets
       already use 33 times over; this just names it. */
    --fc-transition: .15s ease;

    /* Overlay stack. Deliberately high: these are checkout-blocking surfaces
       that must clear sticky headers, cookie bars and back-to-top buttons.
       The cart FAB sits at drawer − 1 (see button.fc-cart-fab). */
    --fc-z-drawer:   100000;
    --fc-z-popup:    100010;
    --fc-z-modal:    100020;

    /* Panel sizing. The mobile :root at the end of this file overrides
       --fc-drawer-width to 100vw; this is the desktop default it never had.

       --fc-modal-max-w is 620px because that is what the Popup editor's
       modal_max_width default already says, and popup_inline_css() emits it as
       a plain (non-!important) `max-width` on the same element. Pick anything
       larger here and the two disagree: the panel would compute
       `width: min(<token>, 100vw - 32px)` and then be clipped back by the
       620px max-width, so the token would decide nothing while looking like it
       did. Keep this in step with popup_defaults()['modal_max_width']. */
    --fc-drawer-width: 420px;
    --fc-modal-max-w:  620px;
}

/* ===========================================================================
   RESET / SHARED UTILITIES
   =========================================================================== */

.fc-cart-drawer,
.fc-cart-drawer *,
.fc-checkout-popup,
.fc-checkout-popup *,
.fc-checkout-modal,
.fc-checkout-modal *,
.fc-ship-popup,
.fc-ship-popup * {
    box-sizing: border-box;
}

/* ===========================================================================
   SECTION 1 — CART-PAGE SHIPPING ROW (classic / moved templates)
   Elements: tr.flowcheckout--shipping-title, tr.flowcheckout--shipping-methods,
   ul.woocommerce-shipping-methods, li, input.shipping_method, label,
   p.woocommerce-shipping-destination, p.woocommerce-shipping-contents
   =========================================================================== */

/* Hide the WooCommerce shipping column on the cart page when the plugin
   suppresses shipping display there. */
/* wc-override */
.woocommerce-cart .cart_totals tr.shipping,
.woocommerce-cart .cart_totals .shipping,
.woocommerce-cart .cart_totals .woocommerce-shipping-totals,
.woocommerce-cart .cart_totals .woocommerce-shipping-methods,
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator {
    display: none !important; /* wc-override: belt-and-braces cart hide */
}

.flowcheckout--shipping-title th {
    font-size: 14px;
    font-weight: 600;
    color: var(--fc-gray-900);
    padding-bottom: 6px;
}

.flowcheckout--shipping-methods td {
    padding: 0;
}

/* WooCommerce shipping-methods list */
.woocommerce-checkout .woocommerce-shipping-methods,
.flowcheckout--shipping-methods .woocommerce-shipping-methods {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-checkout .woocommerce-shipping-methods li,
.flowcheckout--shipping-methods .woocommerce-shipping-methods li {
    margin: 7px 0 11px;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* City-state search and address/office picker must each occupy a full row */
.woocommerce-checkout .woocommerce-shipping-methods li .flowcheckout--city-state,
.woocommerce-checkout .woocommerce-shipping-methods li .flowcheckout-additional-fields,
.flowcheckout--shipping-methods .woocommerce-shipping-methods li .flowcheckout--city-state,
.flowcheckout--shipping-methods .woocommerce-shipping-methods li .flowcheckout-additional-fields {
    flex: 0 0 100%;
}

/* Hide the WC radio / hidden shipping input visually — selection is driven by
   our own UI (accordion or popup). */
.woocommerce-checkout .shipping_method,
.flowcheckout--shipping-methods .shipping_method {
    /* wc-override: WC renders an unstyled radio we replace with custom UI */
    display: none !important;
}

.flowcheckout--moved-method-label {
    font-size: 14px;
    color: var(--fc-gray-700);
    cursor: pointer;
}

/* Shipping price spans emitted per method (always-visible / chosen) */
.shipping_method_price {
    display: none;
    font-size: 13px;
    color: var(--fc-gray-700);
}

.shipping_method_price.visible {
    display: inline;
}

.woocommerce-shipping-destination {
    font-size: 13px;
    color: var(--fc-gray-500);
    margin: 6px 0 0;
}

.woocommerce-shipping-contents {
    font-size: 12px;
    color: var(--fc-gray-500);
    margin: 4px 0 0;
}

/* ===========================================================================
   SECTION 2 — TABS LAYOUT (flowcheckout--shipping-methods-tabs)
   cart-shipping-moved.php renders .flowcheckout--shipping-methods-tabs--titles
   with per-courier labels that act as tabs above the hidden radio list.
   =========================================================================== */

.flowcheckout--shipping-methods-tabs--titles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.flowcheckout--shipping-methods-tabs--titles label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border: 1px solid var(--fc-gray-200);
    border-radius: var(--fc-radius);
    font-size: 13px;
    font-weight: 500;
    color: var(--fc-gray-700);
    cursor: pointer;
    background: #fff;
    transition: border-color var(--fc-transition), background var(--fc-transition), color var(--fc-transition);
}

.flowcheckout--shipping-methods-tabs--titles label:hover {
    border-color: var(--fc-blue);
    color: var(--fc-blue);
}

/* Center the courier name + logo as a group inside each button. The <label>
   holds one <span>Name <img></span>; center the flex item and center its inner
   name/logo row so "Econt"/"Speedy" + logo sit in the middle of the card. */
.flowcheckout--shipping-methods-tabs--titles label {
    justify-content: center;
    text-align: center;
}

.flowcheckout--shipping-methods-tabs--titles label > span {
    width: 100%;
    text-align: center;
    /* Keep the name and logo on one row instead of letting the wide logo wrap
       onto a second line; center the pair as a group. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
}

/* The label image carries an inline vertical-align style; inside the flex row it
   should just sit centered next to the name with no forced wrapping. */
.flowcheckout--shipping-methods-tabs--titles label > span img {
    flex: 0 0 auto;
}

/* Active tab — highlighted when its paired radio is :checked */
.woocommerce-shipping-methods input.shipping_method:checked + .flowcheckout--moved-method-label,
.flowcheckout--shipping-methods-tabs--titles label:has(+ input:checked),
.flowcheckout--shipping-methods-tabs--titles label.is-active {
    border-color: var(--fc-blue);
    background: var(--fc-gray-50);
    color: var(--fc-blue);
    font-weight: 600;
}

/* Image button mode — body class .flowcheckout--enabled-shipping-buttons */
body.flowcheckout--enabled-shipping-buttons .flowcheckout--moved-method-label {
    /* wc-override: hide text label when image buttons are active */
    display: none !important;
}

/* Only the SELECTED rate's pickers (city search + office/address mount) should
   show. Each rate's fields are siblings after its radio inside the same <li>, so
   hide the fields of any radio that isn't checked. Targets [type=radio] only —
   single-rate packages use a hidden input (always selected) and must stay shown. */
.woocommerce-shipping-methods input.shipping_method[type="radio"]:not(:checked) ~ .flowcheckout--city-state,
.woocommerce-shipping-methods input.shipping_method[type="radio"]:not(:checked) ~ .flowcheckout-additional-fields {
    display: none !important;
}

/* Courier image buttons */
body.flowcheckout--enabled-shipping-buttons .flowcheckout--shipping-methods-tabs--titles label {
    padding: 4px 8px;
}

body.flowcheckout--enabled-shipping-buttons .flowcheckout--shipping-methods-tabs--titles label img {
    display: block;
    height: 28px;
    width: auto;
    object-fit: contain;
}

/* ===========================================================================
   SECTION 3 — ACCORDION LAYOUT (.fc-ship-accordion)
   Rendered by templates/cart/cart-shipping-modern.php.
   Requires body.flowcheckout--shipping-modern to display (set by MoveShippings).
   =========================================================================== */

/* Hidden on non-modern templates */
body:not(.flowcheckout--shipping-modern) .fc-ship-accordion {
    display: none;
}

.fc-ship-accordion {
    list-style: none;
    /* !important: the theme (Divi) sets an asymmetric ul padding-inline-start on
       list elements, leaving a white strip down one side of the box — force the
       list flush so the rows span edge to edge. */
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--fc-gray-200);
    border-radius: var(--fc-radius);
    /* Explicit background — do NOT drop this. The accordion used to declare none,
       so it rendered transparent and picked up whatever the theme painted behind
       it; on a shop with a coloured page background the rows came out in the
       theme's colour instead of ours, and only the expanded row (which does set a
       background) looked right. The Classic layout's button already declares its
       own #fff for the same reason. A component we style must own every property
       a theme could otherwise fill in. Overridable via the Modern editor's
       "Background" setting (MoveShippings::modern_inline_css). */
    background: #fff;
    /* Clip children to the rounded corners while collapsed. Overridden below when
       a method is expanded so its picker dropdown can escape the box. */
    overflow: hidden;
}

/* When a method is expanded, its picker's absolutely-positioned dropdown (Econt/
   Speedy address & city suggestions) must overflow the accordion — otherwise the
   list gets clipped to the box and only the first couple of rows show. The end
   items carry their own corner radius (below) so the box stays visually rounded
   even without the ul clipping. Uses :has() (baseline in all evergreen browsers). */
.fc-ship-accordion:has(.fc-ship-accordion__item.is-open) {
    overflow: visible;
}
.fc-ship-accordion__item:first-child {
    border-top-left-radius: var(--fc-radius);
    border-top-right-radius: var(--fc-radius);
}
.fc-ship-accordion__item:last-child {
    border-bottom-left-radius: var(--fc-radius);
    border-bottom-right-radius: var(--fc-radius);
}

/* ---- Accordion item ---- */

.fc-ship-accordion__item {
    /* Kill the theme's <li> disc bullet that leaks out on the left; the ul's
       list-style:none doesn't win against a theme rule targeting li directly. */
    list-style: none !important;
    border-bottom: 1px solid var(--fc-gray-200);
    transition: background var(--fc-transition);
}
.fc-ship-accordion__item::marker {
    content: "";
}

.fc-ship-accordion__item:last-child {
    border-bottom: 0;
}

.fc-ship-accordion__item.is-open {
    background: var(--fc-gray-50);
    box-shadow: inset 3px 0 0 var(--fc-blue);
}

/* Item with no expandable body — still selectable via click on the header */
.fc-ship-accordion__item--no-body .fc-ship-accordion__header {
    cursor: pointer;
}

/* ---- Header row ---- */

.fc-ship-accordion__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
}

/* Custom radio indicator — hidden: the selected courier is already obvious from
   the highlighted/expanded row (blue left bar + open data-entry body), so the
   circle is redundant. Clicking the header still selects the method. */
.fc-ship-accordion__radio {
    display: none;
}

.fc-ship-accordion__item.is-open .fc-ship-accordion__radio {
    border-color: var(--fc-blue);
}

.fc-ship-accordion__radio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    transition: background var(--fc-transition);
}

.fc-ship-accordion__radio-dot.is-checked {
    background: var(--fc-blue);
}

/* Courier logo */
.fc-ship-accordion__logo {
    display: block;
    height: 28px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

/* Info block: name + delivery type */
.fc-ship-accordion__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fc-ship-accordion__name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--fc-gray-900);
    line-height: 1.3;
}

.fc-ship-accordion__type {
    display: block;
    font-size: 12px;
    color: var(--fc-gray-500);
    line-height: 1.3;
}

/* Center the courier name/type text at the row's horizontal midpoint (logo
   stays on the left, price on the right) — on BOTH desktop and mobile. */
.fc-ship-accordion__header {
    position: relative;
}
.fc-ship-accordion__info {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex: 0 0 auto;
    align-items: center;
    text-align: center;
    max-width: 45%;
}
.fc-ship-accordion__right {
    margin-left: auto;
}

/* Right block: price + ETA */
.fc-ship-accordion__right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.fc-ship-accordion__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--fc-gray-900);
    white-space: nowrap;
}

.fc-ship-accordion__eta {
    font-size: 11px;
    color: var(--fc-green);
    white-space: nowrap;
}

/* Chevron arrow */
.fc-ship-accordion__chevron {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--fc-transition);
}

.fc-ship-accordion__item.is-open .fc-ship-accordion__chevron {
    transform: rotate(180deg);
}

/* ---- Expandable body (picker: office / automat / address) ---- */

.fc-ship-accordion__body {
    padding: 0 16px 14px 16px;
    border-top: 1px solid var(--fc-gray-200);
}

/* Additional fields rendered by courier Vue mounts */
.fc-ship-accordion__body .flowcheckout-additional-fields {
    margin-top: 10px;
}

/* ===========================================================================
   SECTION 3b — LOCATOR LAYOUT (.fc-ship-loc-*)
   Rendered by templates/cart/cart-shipping-locator.php.
   Requires body.flowcheckout--shipping-locator to display (set by Assets).

   Two levels: delivery-type tabs on top (office / automat / address, each with
   the cheapest price for that type), courier chips below them filtered to the
   active type, then the chosen courier's own picker.

   Note on the button selectors: every rule that paints one is written as
   `.fc-ship-loc button.fc-ship-loc__x` (0,2,1) rather than a bare class
   (0,1,0). Themes style controls with selectors like `button[type="button"]`
   and `.woocommerce button`, which are (0,1,1) and would otherwise repaint
   these with the theme's own button skin. Same reason every surface below
   states its own background instead of inheriting the page's.
   =========================================================================== */

body:not(.flowcheckout--shipping-locator) .fc-ship-loc {
    display: none;
}

.fc-ship-loc {
    margin: 0 0 4px;
}

/* ---- Level 1: delivery-type tabs ---- */

/* A segmented control: one recessed track, the chosen segment lifted out of it
   as a white card. The active tab used to be a near-black fill, which made it
   the heaviest element on the whole checkout and spoke a different "selected"
   language from the blue courier chips directly beneath it. White-card-plus-
   blue-icon says the same thing far more quietly and matches the chips. */
.fc-ship-loc__types {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 12px;
    background: var(--fc-gray-100);
    /* The track needs its own edge: on a white page background the fill alone
       is nearly invisible, so the segments read as floating text. */
    border: 1px solid var(--fc-gray-200);
    border-radius: 14px;
}

.fc-ship-loc button.fc-ship-loc__type {
    flex: 1 1 0;
    /* Row-wrap rather than a column: the icon and the label sit on one line and
       the price wraps onto its own beneath them. Stacking all three (the old
       column) made a short two-word tab three lines tall for no gain, and left
       the icon reading as decoration floating above the text rather than as
       part of the label. Wrapping means a long label on a narrow screen still
       breaks gracefully instead of overflowing. */
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    gap: 1px 7px;
    /* Themes give buttons a min-height/uppercase/letter-spacing treatment that
       makes these tabs look nothing like the rest of the picker. Flatsome also
       gives every <button> margin-right:13px AND margin-bottom:13px — the
       bottom one is what left a 13px dead band along the inside of the track
       (measured: 5px above the tabs, 18px below), so the strip looked like the
       segments had slipped upwards inside it. Reset the whole shorthand: a
       theme that sets any one side would reintroduce the same asymmetry. */
    margin: 0;
    min-height: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: var(--fc-gray-500);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: background var(--fc-transition), color var(--fc-transition), box-shadow var(--fc-transition);
}

.fc-ship-loc button.fc-ship-loc__type:hover {
    background: rgba(255, 255, 255, .65);
    color: var(--fc-gray-700);
}

.fc-ship-loc button.fc-ship-loc__type.is-active {
    background: #fff;
    color: var(--fc-gray-900);
    /* Two shadows: a tight one for the edge, a wider soft one for the lift.
       A single blurred shadow reads as a smudge at this size. */
    box-shadow: 0 1px 2px rgba(15, 23, 42, .07), 0 2px 8px rgba(15, 23, 42, .07);
}

/* Keyboard focus. These are role="tab" buttons with no visible focus state at
   all before now — the only way to see where you were was to guess. */
.fc-ship-loc button.fc-ship-loc__type:focus-visible {
    outline: 2px solid var(--fc-blue);
    outline-offset: -2px;
}

.fc-ship-loc__type-label {
    /* The icon is a SIBLING of this span, not a child — the flex row on the
       button is what puts them side by side. This element just carries the
       text; the gap it used to declare never applied to anything. */
    white-space: nowrap;
}

.fc-ship-loc__type-price {
    /* Own line, under the icon+label pair. */
    flex: 1 0 100%;
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fc-gray-500);
}

/* The price is the one thing worth colouring on the chosen tab — it is what
   the buyer is comparing between delivery types. */
.fc-ship-loc button.fc-ship-loc__type.is-active .fc-ship-loc__type-price {
    color: var(--fc-blue);
}

/* Icons are drawn as masked backgrounds so they follow the tab's own colour
   without shipping two copies of each glyph — muted with the label at rest,
   darker on hover, and promoted to brand blue on the chosen tab (below). */
.fc-ship-loc__type-icon {
    width: 16px;
    height: 16px;
    flex: none;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color var(--fc-transition);
}

.fc-ship-loc button.fc-ship-loc__type.is-active .fc-ship-loc__type-icon {
    background-color: var(--fc-blue);
}

.fc-ship-loc__type-icon--office {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14M9 9h.01M15 9h.01M9 13h.01M15 13h.01M10 21v-4h4v4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14M9 9h.01M15 9h.01M9 13h.01M15 13h.01M10 21v-4h4v4'/%3E%3C/svg%3E");
}

.fc-ship-loc__type-icon--automat {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9 7h2M9 12h2M9 17h2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9 7h2M9 12h2M9 17h2'/%3E%3C/svg%3E");
}

.fc-ship-loc__type-icon--address {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

/* ---- Level 2: courier chips ---- */

.fc-ship-loc__couriers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.fc-ship-loc button.fc-ship-loc__courier {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Same theme-margin trap as the tabs above: an inherited margin-right/bottom
       adds itself to this row's own 8px gap, so the chips drift apart and the
       wrapped rows gain a phantom line of spacing. */
    margin: 0;
    min-height: 0;
    padding: 7px 12px;
    border: 1.5px solid var(--fc-gray-200);
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
    color: var(--fc-gray-700);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: border-color var(--fc-transition), background var(--fc-transition);
}

.fc-ship-loc button.fc-ship-loc__courier:hover {
    border-color: #cbd5e1;
}

.fc-ship-loc button.fc-ship-loc__courier.is-active {
    border-color: var(--fc-blue);
    background: #eff6ff;
    color: var(--fc-gray-900);
}

.fc-ship-loc__courier-logo {
    height: 16px;
    width: auto;
    object-fit: contain;
}

.fc-ship-loc__courier-price {
    font-weight: 700;
    color: var(--fc-blue);
}

.fc-ship-loc button.fc-ship-loc__courier.is-active .fc-ship-loc__courier-price {
    color: var(--fc-blue-dark);
}

/* ---- Picker panel ---- */

.fc-ship-loc__panel {
    padding: 0;
}

@media (max-width: 600px) {
    .fc-ship-loc button.fc-ship-loc__type {
        padding: 8px 4px;
        gap: 1px 5px;
        font-size: 12.5px;
    }

    /* Three tabs on a narrow screen: "До автомат" beside a 16px icon does not
       fit on one line, so let the label wrap under the icon rather than
       overflow the segment. flex-flow on the button already allows it — this
       just lifts the nowrap that keeps the desktop row on one line. */
    .fc-ship-loc__type-label {
        white-space: normal;
    }

    .fc-ship-loc__type-icon {
        width: 15px;
        height: 15px;
    }
}

/* ===========================================================================
   SECTION 4 — POPUP TRIGGER + POPUP MODAL (.fc-ship-popup-*)
   Rendered by templates/cart/cart-shipping-popup.php.
   Requires body.flowcheckout--shipping-popup to display (set by MoveShippings).
   =========================================================================== */

body:not(.flowcheckout--shipping-popup) .fc-ship-popup-trigger,
body:not(.flowcheckout--shipping-popup) .fc-ship-popup,
body:not(.flowcheckout--shipping-popup) .fc-ship-popup-fields {
    display: none;
}

/* ---- Trigger button ---- */

.fc-ship-popup-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--fc-gray-200);
    border-radius: var(--fc-radius);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--fc-transition), box-shadow var(--fc-transition);
}

.fc-ship-popup-trigger:hover {
    border-color: var(--fc-blue);
    box-shadow: 0 0 0 3px rgba(59, 94, 245, .1);
}

.fc-ship-popup-trigger__logo {
    display: block;
    height: 28px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.fc-ship-popup-trigger__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
}

.fc-ship-popup-trigger__name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--fc-gray-900);
    line-height: 1.35;
    white-space: normal;
    margin: 0;
    padding: 0;
}

.fc-ship-popup-trigger__type {
    display: block;
    font-size: 12px;
    color: var(--fc-gray-500);
    line-height: 1.35;
    white-space: normal;
    margin: 0;
    padding: 0;
}

.fc-ship-popup-trigger__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.fc-ship-popup-trigger__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--fc-gray-900);
    white-space: nowrap;
}

.fc-ship-popup-trigger__eta {
    font-size: 11px;
    color: var(--fc-green);
    white-space: nowrap;
}

.fc-ship-popup-trigger__edit {
    flex-shrink: 0;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fc-blue);
    background: #eef4ff;
    border-radius: 4px;
    white-space: nowrap;
}

.fc-ship-popup-trigger__placeholder {
    font-size: 14px;
    color: var(--fc-gray-500);
}

/* ---- Hidden per-method field wrappers (inside .fc-ship-popup-fields) ---- */

.fc-ship-popup-fields {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fc-ship-popup-field {
    margin: 0;
    padding: 0;
}

/* ---- The popup overlay + panel ---- */

.fc-ship-popup {
    position: fixed;
    inset: 0;
    z-index: var(--fc-z-popup);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    pointer-events: none;
}

.fc-ship-popup[aria-hidden="false"] {
    visibility: visible;
    pointer-events: auto;
}

.fc-ship-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    cursor: pointer;
    animation: fcFadeBackdrop .22s ease;
}

.fc-ship-popup__panel {
    position: relative;
    background: #fff;
    width: min(var(--fc-modal-max-w), calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fcSlideUp .22s ease;
}

.fc-ship-popup__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    flex-shrink: 0;
}

.fc-ship-popup__head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.fc-ship-popup__close {
    background: rgba(255, 255, 255, .18);
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    transition: background var(--fc-transition);
}

.fc-ship-popup__close:hover {
    background: rgba(255, 255, 255, .3);
}

.fc-ship-popup__body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.fc-ship-popup__foot {
    padding: 14px 16px;
    border-top: 1px solid var(--fc-gray-200);
    flex-shrink: 0;
}

.fc-ship-popup__confirm {
    display: block;
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: filter var(--fc-transition);
}

.fc-ship-popup__confirm:hover {
    filter: brightness(1.08);
}

/* ---- Courier list inside the popup ---- */

.fc-ship-popup-list {
    list-style: none;
    /* !important so the theme's asymmetric ul padding can't leave a white strip. */
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--fc-gray-200);
    border-radius: var(--fc-radius);
    overflow: hidden;
}

.fc-ship-popup-item {
    list-style: none !important;
    border-bottom: 1px solid var(--fc-gray-200);
    transition: background var(--fc-transition);
}
.fc-ship-popup-item::marker {
    content: "";
}

.fc-ship-popup-item:last-child {
    border-bottom: 0;
}

.fc-ship-popup-item.is-open {
    background: var(--fc-gray-50);
}

.fc-ship-popup-item__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
}

/* Radio circle hidden — matches the Modern accordion (selection is shown by the
   highlighted row). */
.fc-ship-popup-item__radio {
    display: none;
}

.fc-ship-popup-item__radio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    transition: background var(--fc-transition);
}

.fc-ship-popup-item__radio-dot.is-checked {
    background: var(--fc-blue);
}

.fc-ship-popup-item__logo {
    display: block;
    height: 28px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.fc-ship-popup-item__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
}

.fc-ship-popup-item__name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--fc-gray-900);
    line-height: 1.35;
    white-space: normal;
    margin: 0;
    padding: 0;
}

.fc-ship-popup-item__type {
    display: block;
    font-size: 12px;
    color: var(--fc-gray-500);
    line-height: 1.35;
    white-space: normal;
    margin: 0;
    padding: 0;
}

.fc-ship-popup-item__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.fc-ship-popup-item__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--fc-gray-900);
    white-space: nowrap;
}

.fc-ship-popup-item__eta {
    font-size: 11px;
    color: var(--fc-green);
    white-space: nowrap;
}

/* ===========================================================================
   SECTION 5 — CART DRAWER FLOATING ACTION BUTTON (#fc-cart-fab)
   =========================================================================== */

#fc-cart-fab,
button.fc-cart-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: calc(var(--fc-z-drawer) - 1);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--fc-gray-900);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    transition: transform var(--fc-transition), box-shadow var(--fc-transition), background var(--fc-transition);
}

#fc-cart-fab:hover,
button.fc-cart-fab:hover {
    background: var(--fc-gray-700);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}

/* Badge count */
.fc-cart-fab__count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--fc-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    display: none;
}

#fc-cart-fab.has-items .fc-cart-fab__count {
    display: block;
}

/* Hide FAB while drawer or checkout popup is open */
html.fc-cart-drawer-open #fc-cart-fab,
html.fc-checkout-popup-open #fc-cart-fab {
    display: none !important; /* wc-override: keeps FAB hidden over WC payment overlay */
}

/* ===========================================================================
   SECTION 6 — CART DRAWER (fc-cart-drawer)
   Slide-in panel — full source from app/Shipping/CartDrawer.php.
   =========================================================================== */

#fc-cart-drawer,
.fc-cart-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--fc-z-drawer);
    visibility: hidden;
    pointer-events: none;
}

#fc-cart-drawer.is-open,
.fc-cart-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

/* Semi-transparent backdrop */
.fc-cart-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    transition: opacity var(--fc-transition);
    cursor: pointer;
}

.fc-cart-drawer.is-open .fc-cart-drawer__backdrop {
    opacity: 1;
}

/* The actual panel */
.fc-cart-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(var(--fc-drawer-width), 100vw);
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, .12);
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
}

.fc-cart-drawer.is-open .fc-cart-drawer__panel {
    transform: translateX(0);
}

/* ---- Header ---- */

.fc-cart-drawer__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--fc-gray-200);
    flex-shrink: 0;
    background: #fff;
}

.fc-cart-drawer__back {
    background: none;
    border: 0;
    font-size: 20px;
    color: var(--fc-gray-700);
    cursor: pointer;
    padding: 0 6px 0 0;
    line-height: 1;
    flex-shrink: 0;
}

.fc-cart-drawer__title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--fc-gray-900);
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.fc-cart-drawer__title-text {
    line-height: 1;
}

.fc-cart-drawer__count {
    font-size: 12px;
    font-weight: 400;
    color: var(--fc-gray-500);
}

.fc-cart-drawer__close {
    background: none;
    border: 0;
    font-size: 24px;
    color: var(--fc-gray-500);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: color var(--fc-transition);
}

.fc-cart-drawer__close:hover {
    color: var(--fc-gray-900);
}

/* ---- Step indicator (cart_checkout layout) ---- */

.fc-cart-drawer__steps {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    border-bottom: 1px solid var(--fc-gray-200);
    flex-shrink: 0;
    gap: 8px;
}

.fc-cart-drawer__step {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--fc-gray-500);
    cursor: pointer;
    transition: color var(--fc-transition);
}

.fc-cart-drawer__step.is-active {
    color: var(--fc-blue);
    font-weight: 600;
}

.fc-cart-drawer__step.is-done {
    color: var(--fc-green);
}

.fc-cart-drawer__step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.fc-cart-drawer__step.is-done .fc-cart-drawer__step-num {
    background: var(--fc-green);
    border-color: var(--fc-green);
    color: #fff;
}

.fc-cart-drawer__step-label {
    white-space: nowrap;
}

.fc-cart-drawer__step-line {
    flex: 1 1 auto;
    height: 1px;
    background: var(--fc-gray-200);
}

/* ---- Main content (scrollable body) ---- */

.fc-cart-drawer__main {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
}

/* Step content sections */
.fc-cart-drawer__cart,
.fc-cart-drawer__checkout {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
}

/* Multi-step display logic driven by data-fc-step on the drawer root */
.fc-cart-drawer--cart_checkout[data-fc-step="1"] .fc-cart-drawer__checkout {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.fc-cart-drawer--cart_checkout[data-fc-step="2"] .fc-cart-drawer__cart {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

.fc-cart-drawer--cart_checkout[data-fc-step="2"] .fc-cart-drawer__checkout {
    transform: translateX(0);
    opacity: 1;
}

/* Checkout loading spinner inside the drawer */
.fc-cart-drawer__checkout-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--fc-gray-500);
    gap: 14px;
    font-size: 14px;
}

/* ---- Body: items list ---- */

.fc-cart-drawer__body {
    padding: 10px 0;
}

.fc-cart-drawer__items {
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
}

.fc-cart-drawer__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    position: relative;
}

.fc-cart-drawer__item:not(:last-child) {
    border-bottom: 1px solid var(--fc-gray-100);
}

/* Remove × button */
.fc-cart-drawer__item-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--fc-gray-500);
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background var(--fc-transition), color var(--fc-transition);
}

.fc-cart-drawer__item-remove:hover {
    background: #fee2e2;
    color: var(--fc-red);
}

/* Product thumbnail */
.fc-cart-drawer__item-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--fc-radius);
    flex-shrink: 0;
    border: 1px solid var(--fc-gray-200);
}

/* Item metadata */
.fc-cart-drawer__item-info {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 24px;
}

.fc-cart-drawer__item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--fc-gray-900);
    line-height: 1.35;
    margin-bottom: 3px;
    /* Truncate very long names at 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fc-cart-drawer__item-attr {
    font-size: 11px;
    color: var(--fc-gray-500);
    margin-bottom: 2px;
}

/* Quantity stepper */
.fc-cart-drawer__qty {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    border: 1px solid var(--fc-gray-200);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.fc-cart-drawer__qty button {
    width: 28px;
    height: 28px;
    background: var(--fc-gray-100);
    border: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--fc-gray-700);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--fc-transition);
    flex-shrink: 0;
}

.fc-cart-drawer__qty button:hover {
    background: var(--fc-gray-200);
}

.fc-cart-drawer__qty input[type="number"] {
    width: 36px;
    height: 28px;
    border: 0;
    border-left: 1px solid var(--fc-gray-200);
    border-right: 1px solid var(--fc-gray-200);
    text-align: center;
    font-size: 13px;
    color: var(--fc-gray-900);
    background: #fff;
    -moz-appearance: textfield;
    appearance: textfield;
    padding: 0;
}

.fc-cart-drawer__qty input[type="number"]::-webkit-outer-spin-button,
.fc-cart-drawer__qty input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Item price column */
.fc-cart-drawer__item-price {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    font-size: 13px;
    font-weight: 700;
    color: var(--fc-gray-900);
}

.fc-cart-drawer__item-was {
    font-size: 12px;
    font-weight: 400;
    color: var(--fc-gray-500);
    text-decoration: line-through;
}

.fc-cart-drawer__item-save {
    font-size: 11px;
    font-weight: 600;
    color: var(--fc-green);
}

/* Empty state */
.fc-cart-drawer__empty {
    padding: 32px 20px;
    text-align: center;
    font-size: 14px;
    color: var(--fc-gray-500);
}

.fc-cart-drawer__empty-cta {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 14px auto 0;
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--fc-gray-900);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
}

.fc-cart-drawer__empty-cta:hover {
    background: var(--fc-gray-700);
    color: #fff;
}

/* ---- Footer: coupon + totals + CTA ---- */

.fc-cart-drawer__foot {
    border-top: 1px solid var(--fc-gray-200);
    padding: 14px 16px;
    flex-shrink: 0;
    background: #fff;
}

/* Coupon accordion */
.fc-cart-drawer__coupon {
    margin-bottom: 10px;
}

.fc-cart-drawer__coupon summary {
    font-size: 13px;
    color: var(--fc-blue);
    cursor: pointer;
    list-style: none;
    font-weight: 500;
    margin-bottom: 0;
}

.fc-cart-drawer__coupon summary::-webkit-details-marker {
    display: none;
}

.fc-cart-drawer__coupon[open] summary {
    margin-bottom: 8px;
}

.fc-cart-drawer__coupon-row {
    display: flex;
    gap: 6px;
}

.fc-cart-drawer__coupon-row input[type="text"] {
    flex: 1 1 auto;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--fc-gray-200);
    border-radius: var(--fc-radius);
    background: #fff;
    color: var(--fc-gray-900);
    outline: none;
    transition: border-color var(--fc-transition);
}

.fc-cart-drawer__coupon-row input[type="text"]:focus {
    border-color: var(--fc-blue);
}

#fc-cart-coupon-apply {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--fc-blue);
    border: 0;
    border-radius: var(--fc-radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--fc-transition);
}

#fc-cart-coupon-apply:hover {
    background: var(--fc-blue-dark);
}

/* Totals block */
.fc-cart-drawer__totals {
    margin-bottom: 12px;
}

.fc-cart-drawer__total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding: 4px 0;
}

.fc-cart-drawer__total-row span {
    color: var(--fc-gray-700);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.fc-cart-drawer__total-row strong {
    font-weight: 700;
    color: var(--fc-gray-900);
}

/* Coupon discount row */
.fc-cart-drawer__total-row--coupon strong.fc-cart-drawer__total-discount {
    color: var(--fc-green);
}

/* Coupon chip */
.fc-cart-drawer__coupon-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    background: var(--fc-gray-100);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--fc-gray-700);
}

.fc-cart-drawer__coupon-chip button {
    background: none;
    border: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    color: var(--fc-gray-500);
    transition: color var(--fc-transition);
}

.fc-cart-drawer__coupon-chip button:hover {
    color: var(--fc-red);
}

/* Shipping/tax note */
.fc-cart-drawer__total-note {
    font-size: 11px;
    color: var(--fc-gray-500);
    padding-top: 4px;
}

/* CTA button */
.fc-cart-drawer__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    background: var(--fc-gray-900);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--fc-transition), transform var(--fc-transition);
}

.fc-cart-drawer__cta:hover {
    background: var(--fc-gray-700);
}

/* ---- Upsell block ---- */

.fc-cart-drawer__upsell {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--fc-gray-100);
}

.fc-cart-drawer__upsell-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--fc-gray-900);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fc-cart-drawer__upsell-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
}

.fc-cart-drawer__upsell-thumb {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--fc-gray-200);
}

.fc-cart-drawer__upsell-info {
    flex: 1 1 auto;
    min-width: 0;
}

.fc-cart-drawer__upsell-name {
    font-size: 12px;
    color: var(--fc-gray-900);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-cart-drawer__upsell-price {
    font-size: 11px;
    color: var(--fc-gray-500);
    margin-top: 2px;
}

.fc-cart-drawer__upsell-add {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #2563eb;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: filter var(--fc-transition);
}

.fc-cart-drawer__upsell-add:hover {
    filter: brightness(1.1);
}

/* ---- Dark mode variant ---- */

.fc-cart-drawer--mode-dark .fc-cart-drawer__panel {
    background: #1e293b;
    color: #f1f5f9;
}

.fc-cart-drawer--mode-dark .fc-cart-drawer__head,
.fc-cart-drawer--mode-dark .fc-cart-drawer__foot {
    background: #1e293b;
    border-color: #334155;
}

.fc-cart-drawer--mode-dark .fc-cart-drawer__item {
    border-color: #334155;
}

.fc-cart-drawer--mode-dark .fc-cart-drawer__item-name {
    color: #f1f5f9;
}

.fc-cart-drawer--mode-dark .fc-cart-drawer__title {
    color: #f1f5f9;
}

/* ---- Glass mode variant ---- */

.fc-cart-drawer--mode-glass .fc-cart-drawer__panel {
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ---- Gradient mode variant ---- */

.fc-cart-drawer--mode-gradient .fc-cart-drawer__panel {
    background: linear-gradient(160deg, #f8fafc 0%, #eff6ff 100%);
}

/* ---- Spinner (shared by drawer and checkout modal) ---- */

.fc-cart-drawer__spinner,
.fc-checkout-modal__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--fc-gray-200);
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: fcSpin .8s linear infinite;
    flex-shrink: 0;
}

/* ---- Body scroll lock while drawer is open ---- */

body.fc-cart-drawer-open {
    overflow: hidden;
}

/* ===========================================================================
   SECTION 7 — CENTRED CHECKOUT POPUP (fc-checkout-popup)
   Opened by the cart-drawer CTA in "cart" layout (not cart_checkout).
   Source: CartDrawer::render_drawer() — layout === 'cart'.
   =========================================================================== */

.fc-checkout-popup {
    position: fixed;
    inset: 0;
    z-index: var(--fc-z-popup);
    display: none;
    align-items: stretch;
    justify-content: center;
}

.fc-checkout-popup.is-open {
    display: flex;
}

.fc-checkout-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    cursor: pointer;
    animation: fcFadeBackdrop .22s ease;
}

.fc-checkout-popup__panel {
    position: relative;
    background: #fff;
    width: min(1100px, 100vw);
    margin: auto;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
    border-radius: 16px;
    animation: fcSlideUp .25s ease;
}

.fc-checkout-popup__close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: var(--fc-gray-100);
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: var(--fc-gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background var(--fc-transition);
}

.fc-checkout-popup__close:hover {
    background: var(--fc-gray-200);
}

.fc-checkout-popup__body {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
}

/* Cart summary injected into the popup's right column */
.fc-checkout-popup__cart {
    padding: 0 0 10px;
}

.fc-checkout-popup__totals {
    border-top: 1px solid var(--fc-gray-200);
    padding-top: 10px;
}

/* Popup grid — set on the WC form by layoutPopup() in the JS */
.fc-checkout-popup .fc-cp-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: start;
}

.fc-checkout-popup .fc-cp-left {
    min-width: 0;
}

.fc-checkout-popup .fc-cp-right {
    background: var(--fc-gray-50);
    border-radius: 12px;
    padding: 20px;
    position: sticky;
    top: 0;
}

body.fc-checkout-popup-open {
    overflow: hidden;
}

/* ===========================================================================
   SECTION 8 — CHECKOUT MODAL (fc-checkout-modal)
   Rendered by app/Shipping/CheckoutModal::render_modal().
   =========================================================================== */

.fc-checkout-modal {
    position: fixed;
    inset: 0;
    z-index: var(--fc-z-modal);
    display: none;
    align-items: stretch;
    justify-content: center;
}

.fc-checkout-modal.is-open {
    display: flex;
}

body.fc-checkout-open .fc-checkout-modal {
    display: flex !important; /* wc-override: keeps modal visible on WC-repaint */
}

.fc-checkout-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    cursor: pointer;
}

.fc-checkout-modal__panel {
    position: relative;
    background: #fff;
    width: min(1100px, 100vw);
    max-height: 100vh;
    margin: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: fcCheckoutIn .25s ease;
}

.fc-checkout-modal__close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: var(--fc-gray-100);
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: var(--fc-gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background var(--fc-transition);
}

.fc-checkout-modal__close:hover {
    background: var(--fc-gray-200);
}

.fc-checkout-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
}

.fc-checkout-modal__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--fc-gray-500);
    gap: 16px;
    font-size: 14px;
}

/* Re-layout WC checkout inside the modal */
.fc-checkout-modal .woocommerce-checkout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

.fc-checkout-modal .woocommerce-checkout-review-order {
    background: var(--fc-gray-50);
    border-radius: 14px;
    padding: 22px;
    position: sticky;
    top: 0;
}

body.fc-checkout-open {
    overflow: hidden;
}

/* ===========================================================================
   SECTION 9 — ORDER REVIEW ENHANCEMENTS
   Rendered by app/Front_End/Checkout/OrderReview::review_item_controls().
   Selectors mirror app/assets/css/checkout.css exactly.
   =========================================================================== */

/* Nothing in this cell is absolutely positioned any more, so it needs neither a
   left gutter nor a positioned ancestor — the whole width goes to the product
   title. Top-aligned so a wrapping title keeps its row tidy. */

/* Controls row: stepper + remove */

/* Quantity stepper wrapper */

/* +/− step buttons */

/* Quantity value input */

/* Fixed quantity (sold individually) */

/* Remove button — pinned far left */

/* Busy state during AJAX qty update */

/* Woodmart compatibility — Woodmart renders the mini-cart product inside
   td.wd-checkout-prod (not the standard td.product-name) and nests our markup in
   .wd-checkout-prod-title. Our default layout absolutely-positions the remove ×
   inside the td.product-name left gutter — but that gutter rule never matches
   Woodmart's cell, so the abs-positioned × piles on top of the content. Scoped to
   .wd-checkout-prod only (invisible to every other theme). */

/* Right total cell aligned */
.woocommerce-checkout-review-order-table td.product-total {
    vertical-align: middle;
    text-align: right;
    white-space: nowrap;
}

/* ===========================================================================
   SECTION 10 — ADDITIONAL FIELDS (courier address / office picker mount)
   .flowcheckout-additional-fields is the Vue mount point for city/office pickers.
   =========================================================================== */

.flowcheckout-additional-fields {
    margin-top: 10px;
}

/* WooCommerce floats .form-row-first/.form-row-last (see its own
   woocommerce-layout.css) but never clears the field-wrapper that contains
   them. A wrapper whose last children are a floated pair — e.g. the
   company-invoice fields toggled on inside
   .woocommerce-billing-fields__field-wrapper — then reports a height that
   excludes them. Already fixed for the popup/drawer checkout in
   cart-drawer.css; added here too so the regular checkout page's own ancestor
   chain doesn't have to happen to re-clear it a level up. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::after,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper::after,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* Hide the WC order-notes h3 + textarea when the plugin suppresses them */
.woocommerce-additional-fields > h3,
.woocommerce-additional-fields__field-wrapper,
#order_comments_field,
p#order_comments_field {
    /* wc-override: hide order notes when plugin option is on — set via inline CSS,
       listed here as a reference definition with lower weight */
}

/* The extra-fields section injected BEFORE order notes must remain visible */
.flowcheckout--shipping-ext-fields {
    display: block;
}

/* ===========================================================================
   SECTION 11 — KEYFRAME ANIMATIONS
   =========================================================================== */

@keyframes fcFadeBackdrop {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fcSlideUp {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fcCheckoutIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fcSpin {
    to { transform: rotate(360deg); }
}

/* ===========================================================================
   SECTION 12 — DIVI 5 / PAGE-BUILDER COMPATIBILITY
   Divi styles every input, button, td globally. Re-assert critical dimensions
   under Divi body classes.
   =========================================================================== */

/* Popup trigger + accordion info layout under Divi */
body[class*="et_"] .woocommerce-checkout .fc-ship-popup-trigger__info,
.et-db .woocommerce-checkout .fc-ship-popup-trigger__info,
body[class*="et_"] .woocommerce-checkout .fc-ship-popup-item__info,
.et-db .woocommerce-checkout .fc-ship-popup-item__info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 2px !important;
}

body[class*="et_"] .woocommerce-checkout .fc-ship-popup-trigger__name,
body[class*="et_"] .woocommerce-checkout .fc-ship-popup-trigger__type,
.et-db .woocommerce-checkout .fc-ship-popup-trigger__name,
.et-db .woocommerce-checkout .fc-ship-popup-trigger__type,
body[class*="et_"] .woocommerce-checkout .fc-ship-popup-item__name,
body[class*="et_"] .woocommerce-checkout .fc-ship-popup-item__type,
.et-db .woocommerce-checkout .fc-ship-popup-item__name,
.et-db .woocommerce-checkout .fc-ship-popup-item__type {
    display: block !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}

/* ===========================================================================
   SECTION 13 — RESPONSIVE
   =========================================================================== */

/* Tablet: single-column checkout inside modal / popup */
@media (max-width: 900px) {
    .fc-checkout-modal .woocommerce-checkout,
    .fc-checkout-popup .fc-cp-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .fc-checkout-modal .woocommerce-checkout-review-order,
    .fc-checkout-popup .fc-cp-right {
        position: static;
    }

    .fc-checkout-modal__panel,
    .fc-checkout-popup__panel {
        width: 100%;
        max-height: 100%;
        border-radius: 0;
        height: 100%;
    }

    .fc-checkout-modal__body,
    .fc-checkout-popup__body {
        padding: 20px 16px;
    }
}

/* Mobile: narrow drawer + smaller thumbnail */
@media (max-width: 600px) {
    :root {
        --fc-drawer-width: 100vw;
    }

    .fc-cart-drawer__panel {
        width: 100vw;
    }

    .fc-ship-popup__panel {
        width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    /* Mobile: give the shipping-method label and its price their own centered
       line each, so a long label ("До адрес") can't slide under the price
       ("Не е калкулирано") and become unreadable on a narrow screen. Scoped to
       the label + price; the city search and office picker keep their full width. */
    .woocommerce-checkout .woocommerce-shipping-methods li,
    .flowcheckout--shipping-methods .woocommerce-shipping-methods li {
        justify-content: center;
        text-align: center;
    }
    .woocommerce-checkout .woocommerce-shipping-methods li .flowcheckout--moved-method-label,
    .woocommerce-checkout .woocommerce-shipping-methods li .shipping_method_price,
    .flowcheckout--shipping-methods .woocommerce-shipping-methods li .flowcheckout--moved-method-label,
    .flowcheckout--shipping-methods .woocommerce-shipping-methods li .shipping_method_price {
        flex: 0 0 100%;
    }

    /* --- Shipping accordion: mobile polish (roomier rows, cleaner type) --- */
    .fc-ship-accordion__header {
        padding: 14px;
        gap: 12px;
    }
    /* Cap the logo so a wide wordmark (ECONT) doesn't dominate the narrow row. */
    .fc-ship-accordion__logo {
        height: 22px;
        max-width: 66px;
        object-fit: contain;
    }
    .fc-ship-accordion__name {
        font-size: 14px;
    }
    .fc-ship-accordion__type {
        font-size: 12px;
    }
    .fc-ship-accordion__price {
        font-size: 14px;
    }
    .fc-ship-accordion__eta {
        font-size: 11px;
    }
    .fc-ship-accordion__right {
        gap: 3px;
    }
    /* On phones the horizontal "name in the centre, price on the right" layout
       collides: a long price ("Не е калкулирано") runs straight into the courier
       name. Switch to a stacked grid — logo (+radio) on the left, name/type ABOVE
       price/eta (both centred) in the middle, chevron on the right. Nothing can
       overlap and it stays readable on the narrowest screens. */
    .fc-ship-accordion__header {
        display: grid;
        grid-template-columns: auto auto 1fr auto;
        grid-template-areas:
            "radio logo info chevron"
            "radio logo right chevron";
        align-items: center;
        column-gap: 10px;
        row-gap: 2px;
    }
    .fc-ship-accordion__radio { grid-area: radio; }
    .fc-ship-accordion__logo { grid-area: logo; }
    .fc-ship-accordion__info {
        grid-area: info;
        position: static;
        transform: none;
        left: auto;
        top: auto;
        max-width: none;
        align-items: center;
        text-align: center;
    }
    .fc-ship-accordion__right {
        grid-area: right;
        margin: 0;            /* reset the desktop margin-left:auto so it centres */
        align-items: center;
        text-align: center;
    }
    .fc-ship-accordion__chevron { grid-area: chevron; }
    /* Roomier expanded body (office/address pickers). */
    .fc-ship-accordion__body {
        padding: 0 14px 14px;
    }

    /* FAB moved slightly on small screens */
    #fc-cart-fab,
    button.fc-cart-fab {
        bottom: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
    }
}

/* ---------------------------------------------------------------------------
   Two-column checkout layout on desktop — our own float-based grid, as a
   FALLBACK for themes that don't lay the checkout out in two columns
   themselves (Divi and other page builders, minimal themes).

   Everything here is gated behind `body.flowcheckout--grid-fallback`. That
   class is NOT a theme name and is never hard-coded per theme: the server
   renders it on by default (so the fallback still works with JS disabled) and
   the layout probe in frontend.js measures the *real* rendered geometry of the
   checkout form and removes it again whenever the theme already produces a
   working two-column layout on its own.

   Why the gate exists: this block wins every cascade fight it enters (`float`
   + `width` + `!important`). Applied unconditionally it therefore *replaced*
   perfectly good theme layouts with our own 57/39 split — e.g. Woodmart lays
   these two out as a 50/50 (or wider) flex pair, and our 48% turned the order
   review into a permanently narrow column ("дясната колона се стеснява",
   reported on several shops). The probe makes that impossible in general
   rather than one theme at a time: if the theme can do it, we don't touch it.

   Keep MIN_VW in frontend.js in sync with the 769px breakpoint below.
   --------------------------------------------------------------------------- */
@media (min-width: 769px) {
    body.flowcheckout--grid-fallback .woocommerce-checkout form.checkout {
        display: block;
    }

    body.flowcheckout--grid-fallback .woocommerce-checkout form.checkout::after {
        content: "";
        display: block;
        clear: both;
    }

    /* Left column — match #customer_details regardless of the class the theme
       puts on it. WC core adds .col2-set, but Woodmart uses .customer-details (and
       others differ too), so keying on .col2-set left those themes un-floated and
       the two columns collapsed into one. #customer_details is always the billing
       column, so the id alone is safe and theme-agnostic. */
    body.flowcheckout--grid-fallback .woocommerce-checkout form.checkout > #customer_details {
        float: left !important; /* wc-override */
        width: 48% !important;  /* wc-override */
        max-width: 48% !important; /* wc-override */
        clear: left;
        margin: 0 !important;   /* wc-override */
    }

    body.flowcheckout--grid-fallback .woocommerce-checkout form.checkout #customer_details > .col-1,
    body.flowcheckout--grid-fallback .woocommerce-checkout form.checkout #customer_details > .col-2 {
        float: none !important;  /* wc-override */
        width: 100% !important;  /* wc-override */
        max-width: none !important; /* wc-override */
        margin: 0 0 8px !important; /* wc-override */
        padding: 0 !important;      /* wc-override */
    }

    body.flowcheckout--grid-fallback .woocommerce-checkout form.checkout > #order_review_heading {
        float: right !important;    /* wc-override */
        width: 48% !important;      /* wc-override */
        max-width: 48% !important;  /* wc-override */
        clear: right;
        margin: 0 0 14px !important; /* wc-override */
    }

    body.flowcheckout--grid-fallback .woocommerce-checkout form.checkout > #order_review {
        float: right !important;    /* wc-override */
        width: 48% !important;      /* wc-override */
        max-width: 48% !important;  /* wc-override */
        clear: right;
        position: sticky;
        top: 24px;
    }

    /* Some themes wrap the review in .checkout-order-review, so that wrapper —
       not #order_review — is the real direct child of form.checkout and the
       `> #order_review` rules above never match, dropping the review BELOW the
       form and leaving the right half blank. Float the wrapper itself right to
       restore the two columns. Harmless on themes that have no such wrapper.
       (The JS probe resolves the same wrapper generically, by walking up from
       #order_review to whichever element is the form's direct child.) */
    body.flowcheckout--grid-fallback .woocommerce-checkout form.checkout > .checkout-order-review {
        float: right !important;    /* wc-override */
        width: 48% !important;      /* wc-override */
        max-width: 48% !important;  /* wc-override */
        clear: right;
        margin: 0 !important;       /* wc-override */
        position: sticky;
        top: 24px;
    }

    /* Divi reinforcement — Divi's own #customer_details.col2-set rules outrank the
       generic selectors above, so they need matching specificity. Gated behind the
       same probe-controlled class: if Divi (or a Divi child theme) ever ships a
       working two-column checkout, the probe simply drops the class and this stops
       applying too — no separate exception needed. */
    body.flowcheckout--grid-fallback[class*="et_"] .woocommerce-checkout form.checkout > #customer_details.col2-set,
    body.flowcheckout--grid-fallback .et-db .woocommerce-checkout form.checkout > #customer_details.col2-set {
        float: left !important;
        width: 48% !important;
        max-width: 48% !important;
    }

    body.flowcheckout--grid-fallback[class*="et_"] .woocommerce-checkout form.checkout #customer_details > .col-1,
    body.flowcheckout--grid-fallback[class*="et_"] .woocommerce-checkout form.checkout #customer_details > .col-2,
    body.flowcheckout--grid-fallback .et-db .woocommerce-checkout form.checkout #customer_details > .col-1,
    body.flowcheckout--grid-fallback .et-db .woocommerce-checkout form.checkout #customer_details > .col-2 {
        float: none !important;
        width: 100% !important;
        max-width: none !important;
    }

    body.flowcheckout--grid-fallback[class*="et_"] .woocommerce-checkout form.checkout > #order_review,
    body.flowcheckout--grid-fallback[class*="et_"] .woocommerce-checkout form.checkout > #order_review_heading,
    body.flowcheckout--grid-fallback .et-db .woocommerce-checkout form.checkout > #order_review,
    body.flowcheckout--grid-fallback .et-db .woocommerce-checkout form.checkout > #order_review_heading {
        float: right !important;
        width: 48% !important;
        max-width: 48% !important;
        clear: right;
    }
}

/* Order review card */
.woocommerce-checkout #order_review {
    background: #fff;
    border: 1px solid #e9edf2;
    border-radius: 12px;
    padding: 6px 20px 18px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}