/* ==========================================================================
   Brastos Sodas — Orderday skin (plugins/orderday/docs/theming.md)
   --------------------------------------------------------------------------
   Orderday's default UI (orderday.css) stays on; this file only
   1. maps every documented `--od-*` property to our tokens (theming.md §1), and
   2. pins the few layout decisions of the prototype's selector that a variable cannot express
      (prototype/css/components/fulfilment.css + base.css .modes / .days / .day): 4 + 4 equal day cells,
      the 3-across time row, the segmented mode switch, the compact line's link face, the conflict chip.
   The prototype's own fulfilment.css is NOT shipped: every reservation surface is Orderday's markup, so its
   `fs-*` / `fulfil--*` rules would style nothing (and duplicate this file). Tokens only. Loaded after
   orderday.css (inc/assets.php: dependency `orderday`), so equal specificity wins.
   ========================================================================== */

/* ---------- 1 · variables ---------- */
:root {
  /* colour */
  --od-surface: var(--surface);
  --od-ground: var(--page);
  --od-ink: var(--ink);
  --od-ink-soft: var(--ink-soft);
  --od-ink-muted: var(--ink-muted);
  --od-line: var(--line);
  --od-line-strong: var(--line-strong);
  --od-hover: var(--ground-nest);
  --od-accent: var(--forest);
  --od-accent-hover: var(--forest-deep);
  --od-on-accent: var(--cream);
  --od-selected: var(--added);            /* the selected day = THE green fill, ink on it (8.9:1) */
  --od-on-selected: var(--added-ink);
  --od-chip: var(--chip-active);           /* selected time pill + active mode segment = ink, cream label */
  --od-on-chip: var(--on-chip-active);
  --od-segment: var(--chrome);
  --od-disabled: var(--chrome);
  --od-link: var(--link);
  --od-link-hover: var(--link-hover);
  --od-focus: var(--focus);
  --od-warn-bg: var(--warn-tint);
  --od-warn-ink: var(--warn-ink);
  --od-low: var(--honey-ink);
  --od-success: var(--success-ink);
  --od-error: var(--sale);
  --od-scrim: var(--scrim);
  --od-shadow: var(--shadow-sheet);
  /* type */
  --od-font: var(--ff-body);
  --od-font-display: var(--ff-display);
  --od-fz-tag: var(--fz-tag);
  --od-fz-meta: var(--fz-meta);
  --od-fz-ui: var(--fz-ui);
  --od-fz-body: var(--fz-body);
  --od-fz-num: var(--fz-price);
  --od-fz-title: var(--fz-h2);
  --od-lh-body: var(--lh-body);
  --od-lh-ui: var(--lh-ui);
  --od-lh-tight: var(--lh-tight);
  --od-ls-title: var(--ls-display);
  /* space, size, radius */
  --od-space-1: var(--sp-1);
  --od-space-2: var(--sp-2);
  --od-space-3: var(--sp-3);
  --od-space-4: var(--sp-4);
  --od-space-5: var(--sp-5);
  --od-space-6: var(--sp-6);
  --od-target: var(--target-min);
  --od-sheet-top: var(--header-h);
  --od-gutter: var(--gutter);
  --od-radius-s: var(--rad-s);
  --od-radius-m: var(--rad-m);
  --od-radius-l: var(--rad-l);
  --od-radius-btn: var(--rad-pill);       /* the prototype sheet's buttons (.fs-btn) are pills */
  --od-radius-pill: var(--rad-pill);
  --od-focus-width: var(--focus-ring-w);
  --od-focus-offset: var(--focus-ring-offset);
  /* motion + stacking */
  --od-dur-color: var(--t-colour);
  --od-dur-move: var(--t-fade);
  --od-dur-press: var(--t-press);
  --od-ease: var(--ease-out);
  --od-z-sheet: var(--z-sheet);
}
/* the dark band and the footer never host the UI; the summary card on --chrome gets a white track (QA2 design Y1) */
.cartpg__sum, .plp-fulfil { --od-segment: var(--surface); }
.c-band__when { --od-segment: var(--chrome); }

/* ---------- 2 · prototype layout of the `full` mount (fulfilment.css .fulfil--full) ---------- */
.od-mount--full { display: grid; gap: var(--sp-3); align-items: stretch; container-type: inline-size; }
.od-mount--full .od-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 3px; border-radius: var(--rad-pill); background: var(--od-segment); }
.od-mount--full .od-modes label { justify-content: center; min-height: calc(var(--target-min) - var(--sp-2)); }
.od-mount--full .od-days { display: flex; flex-wrap: wrap; gap: var(--sp-2); overflow: visible; }
.od-mount--full .od-day { width: calc((100% - 3 * var(--sp-2)) / 4); height: 52px; border-radius: var(--rad-pill); }   /* 4 + 4 equal cells: 7 days + Kita data (D-04) */
.od-mount--full .od-day--more { border-style: dashed; text-decoration: none; }
.od-mount--full .od-windows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.od-mount--full .od-win { border-radius: var(--rad-pill); font-variant-numeric: tabular-nums lining-nums; }
.od-mount__summary { font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.od-mount__note { font-size: var(--fz-meta); color: var(--ink-soft); }
@container (max-width: 360px) {
  .od-mount--full .od-day { height: auto; min-height: calc(var(--target-min) + var(--sp-2)); padding: var(--sp-1); }
  .od-mount--full .od-day__cap-prefix { display: none; }
  .od-mount--full .od-win { font-size: var(--fz-meta); padding: var(--sp-1); }
}
@container (max-width: 300px) {
  .od-mount--full .od-windows { grid-template-columns: 1fr; }
}
/* inside the hero card the card is the chrome — the mount itself has none */
.c-band__when .od-mount--full { background: transparent; padding: 0; }

/* ---------- 3 · `compact`: `Atsiėmimas · rytoj 10:00–13:00 · Keisti` (fulfilment.css .fulfil--compact) ---------- */
.od-mount--compact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--fz-ui); }
.od-compact__text { font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.od-compact__link { color: var(--link); text-underline-offset: .15em; min-height: var(--target-min); display: inline-flex; align-items: center; }
.od-compact__link:hover { color: var(--link-hover); }
.pdp__fulfil .od-compact__link { font-weight: 500; }
.pdp__fulfil .od-product-line, .plp-fulfil__line .od-product-line, .plp-compact .od-product-line, .c-band__compact .od-product-line { margin: 0; }   /* the host box carries the padding */

/* ---------- 4 · conflict chip on cards and rows: the prototype's honey chip. `.card__conflict` is the card's /
   cart row's empty [data-orderday-conflict] slot (Orderday fills it and toggles `hidden`; base.css [hidden] wins) */
.od-conflict, .card__conflict { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--sp-1); padding: 3px var(--sp-3); border-radius: var(--rad-pill); background: var(--warn-tint); color: var(--warn-ink); font-size: var(--fz-tag); font-weight: 500; line-height: var(--lh-tight); white-space: nowrap; }
.od-conflict, .card__conflict { transition: opacity var(--t-colour) var(--ease-out); }
.od-conflict.is-leaving, .card__conflict.is-leaving { opacity: 0; }
.od-has-conflict .card__media img, .cart-row.od-has-conflict .cart-row__img img { opacity: .55; }
/* a pickup-only card in delivery mode: the conflict chip (`Tik atsiėmimas`, honey) is the stronger form of the
   static info chip with the same words — one chip, never two (the prototype's pdp.js deduped the same way) */
.card.od-has-conflict .card__top .chip--info, .pdp__buy:has(.od-product-line.od-has-conflict) .pdp__chips .chip--info { display: none; }

/* ---------- 5 · the gate line + the CTA (cart.css .cart__gate; base.css disabled button face) ---------- */
/* each gate reason is a row with its own fix (Orderday 1.1 lays it out); the cart card is narrow, so the
   postcode check takes the full row */
[data-orderday-gate] .od-gate__pc { flex-basis: 100%; }
.btn[data-orderday-cta][aria-disabled="true"], .btn[data-orderday-cta]:disabled { background: var(--surface); color: var(--ink-muted); border-color: var(--line); cursor: not-allowed; }

/* ---------- 6 · the checkout block on the summary card ---------- */
.checkoutpg .od-mount, .checkoutpg .od-cart { margin-bottom: var(--sp-4); }
