/*
  Delivery-price badge.

  Confirmed in inc/order-form/include/core/main.php: the order-summary row
  that holds #shipping-methods sits in one table cell, and the price for
  whichever method is currently selected is written into a *separate*
  cell next to it:

    <td id="codplugin_d_has_price">
        <span id="codplugin_d_price">...</span>
        <span class="codplugin_currency">...</span>
    </td>
    <td id="codplugin_d_free" style="display:none;"><span>FREE</span></td>

  (codplugin.js toggles which of these two cells is visible and fills in
  #codplugin_d_price whenever the visitor changes the selected method.)
  That is real theme markup, not something shipping-layout.js needs to
  build, so this file styles it directly rather than guessing at new
  markup.

  assets/js/shipping-price-position.js moves both <td>s (never clones them)
  to sit next to #shipping-methods instead of in their own table column.
  When more than one shipping method exists, assets/js/shipping-method-
  prices.js already prints each method's own price inline in its own card,
  so that script hides this pair entirely rather than positioning it - the
  rules below only end up visible for the single-method-zone fallback,
  where they're docked in normal flow next to the "Deliver Price" label.
  See the comments in shipping-price-position.js for exactly why moving
  (rather than leaving them in place, or cloning them) is safe against
  Hanout's own AJAX rebuild of #shipping-methods.

  --hfe-shipping-accent is set from the "Shipping Form" admin tab (see
  includes/frontend.php); the value below is just the fallback.
*/

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

#codplugin_d_has_price,
#codplugin_d_free {
    vertical-align: middle;
    text-align: end;
    padding-inline-start: 10px;
    white-space: nowrap;
}

/* --- positioning: attach the badge to the selected shipping method --- */

#codplugin_show_hide td.hfe-shipping-cell {
    /* containing block for the absolutely-positioned .hfe-price-slot
       below - this is the same <td> that already holds the "Deliver
       Price" label and #shipping-methods, so the badge never drifts
       outside that cell */
    position: relative;
    /* shipping-price-position.js measures the badge's own rendered width
       (it changes with the price text - "600" vs "7900" vs "FREE") and
       sets this every time it repositions. #shipping-methods and every
       .shipping-method-option card are width:100% of this cell's content
       box (see layout-*.css), so this padding shrinks them along with it,
       opening real blank space for the badge instead of it landing on top
       of the card's own text. Falls back to 0 before JS has run once. */
    padding-inline-end: var(--hfe-price-gutter, 0px);
    transition: padding-inline-end .18s ease;
}

.hfe-price-slot {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    z-index: 2;
    max-width: calc(100% - 12px);
    /* smooths the jump when shipping-price-position.js updates "top"
       after a selection change, instead of snapping instantly */
    transition: top .18s ease;
    /* the slot itself shouldn't intercept clicks meant for the shipping
       cards behind/beside it - only its actual content (the price text)
       needs to be interactive */
    pointer-events: none;
}

.hfe-price-slot > * {
    pointer-events: auto;
}

/* Single-shipping-method zones never render any radios (confirmed in
   ajax.php: get_shipping_methods() only outputs markup when a zone has
   more than one method) - shipping-price-position.js adds this class when
   there's no selected method to pin to, so the badge falls back to
   sitting in normal flow right after the label instead of floating at a
   meaningless position. */
.hfe-price-slot--docked {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: 8px;
}

/* Hanout's "thank you" popup clones #codplugin_show_hide verbatim
   (inc/order-form/codplugin.php:
   $('#codplugin_show_hide').clone().appendTo('#thanks-order-summary'))
   and separately hides that clone's #shipping-methods
   (codplugin.css: "#thanks-order-summary #shipping-methods{display:none}").
   The clone carries a duplicate .hfe-price-slot with whatever inline "top"
   shipping-price-position.js last set on the live form - that pixel
   offset was measured against the live form's layout and means nothing
   inside the narrower popup, so pin the clone's copy back to plain flow
   instead of reusing it. */
#codplugin-thanks-box .hfe-price-slot {
    position: static;
    inset-inline-end: auto;
    top: auto;
}

#codplugin_d_price,
#codplugin_d_free span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
}

#codplugin_d_price {
    background: rgba(37, 155, 234, .08);
    background: color-mix(in srgb, var(--hfe-shipping-accent) 8%, white);
    border: 1px solid rgba(37, 155, 234, .22);
    border-color: color-mix(in srgb, var(--hfe-shipping-accent) 22%, white);
    color: #185fa5;
    color: color-mix(in srgb, var(--hfe-shipping-accent) 65%, black);
}

.codplugin_currency {
    font-weight: 500;
    font-size: 12px;
    opacity: .85;
    margin-inline-start: 2px;
}

#codplugin_d_free span {
    background: rgba(26, 135, 84, .1);
    background: color-mix(in srgb, #1a8754 10%, white);
    border: 1px solid rgba(26, 135, 84, .25);
    border-color: color-mix(in srgb, #1a8754 25%, white);
    color: #157347;
}

.summary-select-state {
    font-size: 12.5px;
    font-weight: 500;
    opacity: .85;
}