/* ═══════════════════════════════════════════════════════════════════════════
   The delivery area control, the progress line, and the message that stands in
   for a price when there is not one.

   It inherits the theme's custom properties rather than bringing a palette of
   its own — `--cream`, `--plum`, `--gold`, `--ink`, `--muted`, `--radius`,
   `--ease` — with a fallback beside each, so on a default WordPress theme the
   control is plain and legible instead of invisible.

   No `letter-spacing` and no `text-transform`: letter-spacing breaks Arabic
   glyph joining and Arabic has no uppercase, and every word on this control is
   Arabic on this shop.

   Nothing here animates. This is a transactional surface: the number a person
   is about to be charged should not move while they read it. The only motion
   allowed is the search panel appearing, and that is instant.

   Layout shift is zero by construction: the delivery line and the progress line
   both have their space reserved before their text arrives.
   ═══════════════════════════════════════════════════════════════════════════ */

.hfs-region,
.hfs-cart-region {
  --hfs-paper: var(--cream, #fff);
  --hfs-ink: var(--ink, #1d2327);
  --hfs-muted: var(--muted, #646970);
  --hfs-edge: color-mix(in srgb, var(--hfs-ink) 18%, transparent);
  --hfs-focus: var(--gold, #2271b1);
  --hfs-radius: var(--radius, 0.6rem);

  display: block;
  position: relative;
}

/* ── the select itself ───────────────────────────────────────────────────── */

.hfs-region__select {
  inline-size: 100%;
  min-block-size: 2.9rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--hfs-edge);
  border-radius: var(--hfs-radius);
  background: var(--hfs-paper);
  color: var(--hfs-ink);
  font: inherit;
  line-height: 1.4;
}

.hfs-region__select:focus-visible {
  outline: 3px solid var(--hfs-focus);
  outline-offset: 2px;
}

/* The enhanced control replaces the select visually but never removes it from
   the form: everything hanging off the real field keeps working. */
.hfs-region.is-enhanced .hfs-region__select {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── the searchable control ──────────────────────────────────────────────── */

.hfs-combo {
  position: relative;
}

.hfs-combo__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  inline-size: 100%;
  min-block-size: 2.9rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--hfs-edge);
  border-radius: var(--hfs-radius);
  background: var(--hfs-paper);
  color: var(--hfs-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.hfs-combo__button[aria-expanded="true"] {
  border-color: var(--hfs-focus);
}

.hfs-combo__button:focus-visible {
  outline: 3px solid var(--hfs-focus);
  outline-offset: 2px;
}

.hfs-combo__value--empty {
  color: var(--hfs-muted);
}

.hfs-combo__caret {
  flex: none;
  font-size: 0.7em;
  opacity: 0.6;
}

.hfs-combo__panel {
  position: absolute;
  z-index: 40;
  inset-inline: 0;
  inset-block-start: calc(100% + 0.3rem);
  max-block-size: 17rem;
  overflow-y: auto;
  padding: 0.4rem;
  border: 1px solid var(--hfs-edge);
  border-radius: var(--hfs-radius);
  background: var(--hfs-paper);
  box-shadow: 0 12px 30px rgb(0 0 0 / 14%);
}

.hfs-combo__panel[hidden] {
  display: none;
}

.hfs-combo__search {
  inline-size: 100%;
  margin-block-end: 0.35rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--hfs-edge);
  border-radius: calc(var(--hfs-radius) / 1.5);
  background: transparent;
  color: inherit;
  font: inherit;
}

.hfs-combo__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hfs-combo__option {
  padding: 0.5rem 0.6rem;
  border-radius: calc(var(--hfs-radius) / 1.5);
  cursor: pointer;
}

.hfs-combo__option[aria-selected="true"] {
  font-weight: 700;
}

.hfs-combo__option.is-active {
  background: color-mix(in srgb, var(--hfs-focus) 18%, transparent);
}

.hfs-combo__empty {
  padding: 0.6rem;
  color: var(--hfs-muted);
}

/* ── the cart drawer's copy of it ────────────────────────────────────────── */

.hfs-cart-region {
  margin-block: 0.8rem;
}

.hfs-cart-region__label {
  display: block;
  margin-block-end: 0.3rem;
  color: var(--hfs-muted);
  font-size: 0.85em;
}

/* ── the progress line ───────────────────────────────────────────────────── */

.hfs-progress {
  color: var(--hfs-muted, #646970);
  font-size: 0.88em;
}

tr.hfs-progress td {
  /* Reserved so crossing a bracket does not shift the total underneath it. */
  min-block-size: 2.4rem;
  padding-block: 0.5rem;
}

.hfs-progress--plain {
  margin-block: 0.5rem;
  min-block-size: 2.4rem;
}

.hfs-no-rate {
  display: block;
  min-block-size: 2.4rem;
}

.hfs-no-rate a {
  text-decoration: underline;
}

/* The delivery amount is written into a fixed-height line so that its arrival
   over AJAX cannot move the total below it. */
.woocommerce-shipping-totals td,
.hfs-region-row {
  min-block-size: 2.9rem;
}

@media (prefers-reduced-motion: reduce) {
  .hfs-combo__panel {
    box-shadow: none;
  }
}

/* ── special delivery ────────────────────────────────────────────────────── */

/* Staff only, and it looks it: an inset panel rather than two more fields in
   the run of the form, because what is typed here goes into the accounts and
   not into anything the customer is shown. */

.hfs-special {
  display: grid;
  gap: 0.9rem;
  margin-block-start: 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 1px dashed var(--hfs-edge);
  border-radius: var(--hfs-radius);
  background: color-mix(in srgb, var(--hfs-ink) 3%, transparent);
}

.hfs-special[hidden] {
  display: none;
}

.hfs-special__field {
  display: block;
}

.hfs-special__label {
  display: block;
  margin-block-end: 0.3rem;
  color: var(--hfs-ink);
  font-size: 0.88em;
  font-weight: 600;
}

.hfs-special__input {
  inline-size: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--hfs-edge);
  border-radius: var(--hfs-radius);
  background: var(--hfs-paper);
  color: var(--hfs-ink);
  font: inherit;
}

.hfs-special__input:focus-visible {
  outline: 3px solid var(--hfs-focus);
  outline-offset: 1px;
}

.hfs-special__note {
  display: block;
  margin-block-start: 0.3rem;
  color: var(--hfs-muted);
  font-size: 0.82em;
  line-height: 1.5;
}

/* The number is money and reads left to right whatever the page direction. */
.hfs-special__input[type="number"] {
  direction: ltr;
  text-align: start;
}