/**
 * Hanout Form Enhancer - shipping method position
 *
 * Only loaded when "Shipping method location" is set to "Above the confirm
 * button".
 *
 * Correction (1.8.2): earlier versions of this file assumed
 * #shipping-methods becomes a child of #codplugin_woo_single_form's 2-column
 * grid once relocated, and tried to fix mobile overflow by forcing it to
 * span that grid's full row. Re-checked directly against
 * inc/order-form/include/core/main.php: that <form> actually closes right
 * after the input fields - .form-footer and #shipping-methods are plain
 * block-level siblings *after* it, inside #codplugin-checkout (which is
 * just position:relative with padding, not a grid at all). That earlier
 * grid-column rule below was therefore inert; it never touched the real
 * bug and is kept only because it's harmless.
 *
 * The real bug (fixed in 1.8.2): assets/js/shipping-price-position.js
 * assumed #shipping-methods' parent was always the small "Deliver Price"
 * <td> and attached an absolutely-positioned price badge to it. Once this
 * relocation script moves #shipping-methods to sit next to .form-footer,
 * its parent becomes #codplugin-checkout - the entire order-form box - so
 * that badge could end up anchored (and measured) against the whole form
 * instead of a small cell, landing far outside any card. Fixed at the
 * source in shipping-price-position.js (it now anchors to the price cell's
 * own stable parent, which never moves, instead of #shipping-methods'
 * current one).
 *
 * Defensive backstop added here regardless: #codplugin-checkout gets
 * marked .hfe-checkout-clipped by shipping-method-position.js the moment
 * it relocates #shipping-methods. Clipping horizontal overflow at that
 * level means any element - from this plugin or a future theme update -
 * that still ends up positioned or sized wrong gets cut off at the form's
 * own visible border instead of bleeding into the page and forcing
 * horizontal scroll. Only overflow-x is clipped (never overflow-y), so
 * dropdowns (state/city selects) still expand downward normally.
 */

#codplugin-checkout.hfe-checkout-clipped {
    overflow-x: hidden;
}

#shipping-methods.hfe-shipping-above-button {
    grid-column: 1 / -1;   /* inert on this theme (see note above) - kept,
                               harmless, in case a future Hanout update
                               does wrap this in a real grid */
    margin: 0 0 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;    /* defensive: if any inner card layout still
                               miscalculates on an odd viewport, clip it
                               here instead of letting it bleed into the
                               page */
}

/* Hanout renders #shipping-methods empty until its own AJAX call resolves;
   avoid a bare empty strip (with its border-top) flashing above the button
   before that happens. */
#shipping-methods.hfe-shipping-above-button:empty {
    margin: 0;
    padding-top: 0;
    border-top: 0;
}

/* Belt-and-suspenders for the card grids/rows themselves: whichever card
   layout is active (Large/Compact-grid/iOS/etc.), none of them should be
   able to force their own width past the now-full-width container. */
#shipping-methods.hfe-shipping-above-button * {
    max-width: 100%;
    box-sizing: border-box;
}

/*
  New header (1.13.1): the theme's own "Deliver Price" label (e.g. "سعر
  التوصيل") used to sit right next to #shipping-methods inside Hanout's
  order-summary table - once assets/js/shipping-method-position.js
  relocates #shipping-methods to sit above .form-footer, that label would
  otherwise be left behind on its own, describing nothing. That script now
  removes the whole cell it lived in outright (1.26.0; an earlier version
  only hid the label with a CSS class, which still left an empty cell in
  the order summary row) and builds a small header - a "please choose"
  notice plus the same "Deliver Price" wording restyled as a badge - right
  above the relocated list instead.

  --hfe-shipping-accent is set from the "Shipping Form" admin tab (see
  includes/frontend.php); the value below is just the fallback, matching
  every other file in this plugin that uses that variable.
*/

:root {
    --hfe-shipping-accent: #259bea;
}


.hfe-shipping-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
}

.hfe-shipping-header__notice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    font-size: 12.5px;
    font-weight: 600;
    color: #6b7785;
}

.hfe-shipping-header__notice svg {
    flex: 0 0 auto;
    color: var(--hfe-shipping-accent);
}

.hfe-shipping-header__price-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(37, 155, 234, .1);
    background: color-mix(in srgb, var(--hfe-shipping-accent) 10%, white);
    border: 1px solid rgba(37, 155, 234, .25);
    border-color: color-mix(in srgb, var(--hfe-shipping-accent) 25%, white);
    color: #185fa5;
    color: color-mix(in srgb, var(--hfe-shipping-accent) 70%, black);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* Hanout renders #shipping-methods empty until its own AJAX call resolves
   (see the ":empty" rule above) - the header sits right before it in the
   DOM, so without this it would appear on its own above a blank strip
   during that brief window. Degrades harmlessly (header just shows a
   little early) on a browser old enough not to support :has(). */
.hfe-shipping-header:has(+ #shipping-methods.hfe-shipping-above-button:empty) {
    display: none;
}

@media (max-width: 480px) {
    .hfe-shipping-header {
        gap: 6px;
    }

    .hfe-shipping-header__notice {
        font-size: 11.5px;
    }

    .hfe-shipping-header__price-badge {
        font-size: 11.5px;
        padding: 3px 10px;
    }
}

/*
  1.30.0: "office resolved" state - only ever applied by assets/js/
  office-availability.js's updateShippingHeader(), and only when "Show
  pickup office address" (office_show_address_details) is on. Absent
  entirely (this class never added) is the untouched, unstyled-beyond-
  what's-above default - existing installs with the toggle left off
  (its default) see zero visual change from this block.

  The notice becomes a full-width, multi-line block instead of competing
  for space with the price badge next to it: office addresses in the
  bundled data run up to 147 characters, and truncating one is actively
  unsafe (a cut-off street address cannot be found), so this must be
  free to wrap 2-4 lines cleanly rather than staying on one clipped line.
  flex-wrap on the notice itself (not just the header) lets the icon,
  label and address reflow independently rather than only breaking
  between them and the price badge.
*/
.hfe-shipping-header--resolved .hfe-shipping-header__notice {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 5px;
    max-width: 100%;
    white-space: normal;
    line-height: 1.55;
}

.hfe-shipping-header__office-icon {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--hfe-shipping-accent);
}

.hfe-shipping-header__office-icon svg {
    width: 14px;
    height: 14px;
}

.hfe-shipping-header__office-label {
    flex: 0 0 auto;
    font-weight: 700;
    color: #344054;
    white-space: nowrap;
}

.hfe-shipping-header__office-address {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    color: #475467;
    word-break: break-word;
}

@media (max-width: 480px) {
    .hfe-shipping-header--resolved .hfe-shipping-header__notice {
        font-size: 11.5px;
        line-height: 1.5;
    }

    .hfe-shipping-header__office-icon svg {
        width: 13px;
        height: 13px;
    }
}