/* ============================================
   Skeleton-shimmer — site-wide loading-state pattern for the Zhik trade
   theme. Loaded from default_head_blocks.xml so every frontend page
   gets the same loading visuals without each module needing its own
   `<css>` include.

   --------------------------------------------------------------------

   Two ways to apply a skeleton:

   1. Dedicated placeholder elements (dashboard / payment / invoice /
      history shells): build the element with the `.skeleton-block
      .skeleton-block--shimmer` class pair, plus a modifier
      (`--pill`, `--button`, `--input`, `--summary`, `--amount-due`).
      Pages add their own widths via page-scoped CSS.

   2. In-place loading state on existing semantic elements (dealer grid
      under Create Order / Create Forward Order): Category.php server-
      renders `.price`, `.priceexcl`, `.inventory`, the image cell and
      the dispatch-window placeholders. The matching selectors below
      paint the same wave overlay on each so every loading state on the
      page reads as one pattern.

   Base colour: `#d8dadf` — tuned to read against BOTH white cells and
   the `#f1f2f6` alternate-row background on the dealer grid.
   Wave highlight: `rgba(255, 255, 255, 0.85)` — translucent so it
   reads on any base colour.
   ============================================ */

/* Base — solid grey background and positioning context for the wave.
   In-place dealer-grid elements bring their own width / height / display
   from their own module CSS (dealers.css / forward-order.css /
   ordering-period.css); this rule only takes care of the shimmer base. */
.skeleton-block,
.price.price-skel,
.priceexcl.price-skel,
.quick-list .item .inventory:not(.inventory-out):not(.inventory-low):not(.inventory-in),
.period-skel-badge,
.period-skel-name,
.period-skel-season,
.period-skel-radio,
.quick-products tr .image:not(.is-image-loaded),
body.is-cart-updating .minicart-wrapper .items-total .count,
body.is-cart-updating .minicart-wrapper .price-wrapper.price-including-tax .price,
body.is-cart-updating .minicart-wrapper .price-wrapper.price-excluding-tax .price {
    position: relative;
    overflow: hidden;
    background-color: #d8dadf;
}

/* `.skeleton-block` is the dedicated-placeholder family — keep its
   default block layout + border-radius separate so in-place elements
   don't inherit. */
.skeleton-block {
    display: block;
    /* Match the theme's rounded surfaces rather than near-square placeholders. */
    border-radius: 8px;
}

/* Wave overlay — same translucent-white slide-across on every skeleton.
   Animates via translateX so layout doesn't recompute on each frame. */
.skeleton-block--shimmer::after,
.price.price-skel::after,
.priceexcl.price-skel::after,
.quick-list .item .inventory:not(.inventory-out):not(.inventory-low):not(.inventory-in)::after,
.period-skel-badge::after,
.period-skel-name::after,
.period-skel-season::after,
.period-skel-radio::after,
.quick-products tr .image:not(.is-image-loaded)::after,
body.is-cart-updating .minicart-wrapper .items-total .count::after,
body.is-cart-updating .minicart-wrapper .price-wrapper.price-including-tax .price::after,
body.is-cart-updating .minicart-wrapper .price-wrapper.price-excluding-tax .price::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.85) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: skeleton-shimmer 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes skeleton-shimmer {
    100% { transform: translateX(100%); }
}

/* Qty-input loading state on the dealer grid. Inputs can't host a
   ::after pseudo-element reliably, so we use the older
   background-position animation here instead of the wave overlay.
   Server-rendered with `readonly` + .qty-skel; the price handler
   removes both once the AJAX price list lands. Keeping the input
   non-editable while loading prevents users from typing a qty
   before .price has a real value (which would otherwise compute
   subtotal as 0 in calculateRow → parseFloat('') → NaN → || 0). */
input.qty.qty-skel {
    background: linear-gradient(90deg, #d8dadf 0%, #ebedf1 50%, #d8dadf 100%);
    background-size: 200% 100%;
    animation: dealer-qty-shimmer 1.2s ease-in-out infinite;
    color: transparent;
    cursor: not-allowed;
}

/* Minicart counter + subtotal in-place loading state. When any cart-
   mutating AJAX is in flight (delete, qty change, clear-all), the
   minicart-mixin toggles body.is-cart-updating; the selectors join
   the .skeleton-block family above so they pick up the solid grey
   base + translateX wave overlay (same visual as the rest of the
   loading-theme).

   inline-block + explicit height pins each pill to the wrapper's
   visual bbox. Without this, the .price <span> inherits its line-box
   from the parent (~24.5 px for the 18 px subtotal font) and paints
   below the wrapper, eating into the 4 px gap to .price-excluding-tax. */
body.is-cart-updating .minicart-wrapper .items-total .count {
    color: transparent !important;
    display: inline-block;
    min-width: 2.5em;
    height: 16px;
    border-radius: 3px;
    text-align: center;
    vertical-align: middle;
}

body.is-cart-updating .minicart-wrapper .price-wrapper.price-including-tax .price {
    color: transparent !important;
    display: inline-block;
    height: 18px;
    border-radius: 3px;
    vertical-align: middle;
}

body.is-cart-updating .minicart-wrapper .price-wrapper.price-excluding-tax .price {
    color: transparent !important;
    display: inline-block;
    height: 11px;
    border-radius: 3px;
    vertical-align: middle;
}

@keyframes dealer-qty-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* Generic modifiers for `.skeleton-block` placeholders.
   Page-scoped CSS adds widths where needed. */
.skeleton-block--pill {
    height: 18px;
    border-radius: 999px;        /* text-line placeholders read as true pills */
    display: inline-block;       /* flow inline so right-alignment in tds works */
    vertical-align: middle;      /* keep pill centered when next to text */
}
.skeleton-block--button     { height: 43px; border-radius: 999px; }   /* theme buttons are pills */
.skeleton-block--input      { height: 43px; border-radius: 8px; }     /* theme fields are 8px */
.skeleton-block--summary    { height: 18px; border-radius: 999px; display: inline-block; vertical-align: middle; }
.skeleton-block--amount-due {
    height: 22px;
    width: 140px;
    border-radius: 999px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}

/* Layout helpers used by skeleton-row tables (e.g. orders / invoices
   history skeleton). */
.skeleton-cell       { display: flex; align-items: center; min-height: 45px; padding: 0; }
.skeleton-cell--tall { min-height: 65px; }
.skeleton-row td     { vertical-align: middle; }

/* Fade-in transition applied when AJAX content replaces a skeleton. */
.fade-in {
    animation: fadeIn 0.4s ease-in;
}

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

/* Respect reduced-motion: stop the shimmer sweep but keep the
   placeholder visible. */
@media (prefers-reduced-motion: reduce) {
    .skeleton-block--shimmer::after,
    .price.price-skel::after,
    .priceexcl.price-skel::after,
    .quick-list .item .inventory:not(.inventory-out):not(.inventory-low):not(.inventory-in)::after,
    .period-skel-badge::after,
    .period-skel-name::after,
    .period-skel-season::after,
    .period-skel-radio::after,
    .quick-products tr .image:not(.is-image-loaded)::after,
    body.is-cart-updating .minicart-wrapper .items-total .count::after,
    body.is-cart-updating .minicart-wrapper .price-wrapper.price-including-tax .price::after,
    body.is-cart-updating .minicart-wrapper .price-wrapper.price-excluding-tax .price::after {
        animation: none;
        background: rgba(255, 255, 255, 0.4);
        transform: none;
    }
    input.qty.qty-skel {
        animation: none;
        background: #d8dadf;
    }
}