/* feat/delivery-range-and-autofill (2026-10-15) — "Do you deliver to me?"
   ─────────────────────────────────────────────────────────────────────────
   Owner: "I had to check if delivery address was within range. Which made me
   think about making it easy for people to check their delivery address
   before they go through the whole process."

   ONE widget, three homes: /deliver (the shareable page), the homepage
   #delivery section, and a bottom sheet on /shop. Also lends its address
   typeahead to checkout.html, so there is a single implementation.

   Colours are SOLID on purpose (not alpha over an unknown page), so every
   pair below could actually be measured instead of eyeballed. Measured with
   tools/delivery-check-tests/contrast.test.mjs — all text ≥ 4.5:1 and every
   ::placeholder is in that test (that is the one that keeps getting missed).

   Mobile: the suggestion list is IN NORMAL FLOW under the field, never an
   absolutely-positioned dropdown — on a phone the on-screen keyboard covers
   the bottom half of the screen and a floating dropdown lands under it.
   In flow, the list pushes the page and the browser keeps the focused field
   and the list visible together. Every row is ≥ 48px tall.
   ───────────────────────────────────────────────────────────────────────── */

/* Tokens live on every top-level piece, because the typeahead list is ALSO used
   on its own inside checkout.html's delivery fields (no .dcheck wrapper there). */
.dcheck, .dcheck-sug, .dcheck-sheet, .dcheck-open {
  --dc-panel:   #15151c;   /* solid ground: this thing sits on top of other content */
  --dc-field:   #1f1f28;
  --dc-text:    #ffffff;
  --dc-muted:   rgba(245, 245, 250, 0.74);
  --dc-ph:      rgba(245, 245, 250, 0.68);
  --dc-line:    rgba(255, 255, 255, 0.22);
  --dc-yellow:  #ffe600;
  --dc-cyan:    #00c8ff;
  --dc-green:   #00e676;
  --dc-pinkish: #ffc2d6;
  --dc-ink:     #0e0e10;
}
.dcheck {
  display: block;
  box-sizing: border-box;
  max-width: 560px;
  padding: 18px 16px 16px;
  border: 1px solid var(--dc-line);
  border-radius: 20px;
  background: var(--dc-panel);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  color: var(--dc-text);
  font-family: var(--font-body, 'Nunito', system-ui, sans-serif);
  text-align: left;
}
.dcheck *, .dcheck *::before, .dcheck *::after { box-sizing: border-box; }

.dcheck-kicker {
  font-size: 0.72rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dc-cyan); margin: 0 0 6px;
}
.dcheck-head {
  font-family: var(--font-display, 'Fredoka One', system-ui, sans-serif);
  font-size: 1.3rem; line-height: 1.2; margin: 0 0 6px; color: var(--dc-text);
}
.dcheck-sub { font-size: 0.9rem; font-weight: 700; color: var(--dc-muted); line-height: 1.5; margin: 0 0 14px; }

.dcheck-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.dcheck-grid .dc-wide { grid-column: 1 / -1; }
@media (max-width: 420px) { .dcheck-grid { grid-template-columns: minmax(0, 1fr); } }

.dcheck label {
  display: block; font-weight: 900; font-size: 0.72rem; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 6px; color: var(--dc-muted);
}
.dcheck input[type="text"] {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--dc-line); border-radius: 14px;
  background: var(--dc-field); color: var(--dc-text);
  font-family: inherit; font-size: 16px; font-weight: 700;   /* 16px: iOS zooms anything smaller */
}
.dcheck input::placeholder { color: var(--dc-ph); opacity: 1; }
.dcheck input:focus { outline: none; border-color: var(--dc-cyan); box-shadow: 0 0 0 3px rgba(0, 200, 255, 0.22); }

/* ── typeahead: in-flow list, phone-keyboard safe ───────────────────────── */
.dcheck-sug { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--dc-line); border-radius: 14px; overflow: hidden; background: var(--dc-field); }
.dcheck-sug[hidden] { display: none; }
.dcheck-sug button {
  display: block; width: 100%; min-height: 48px; padding: 11px 14px;
  border: 0; border-top: 1px solid rgba(255, 255, 255, 0.10);
  background: var(--dc-field); color: var(--dc-text);
  font-family: inherit; font-size: 0.94rem; font-weight: 800; line-height: 1.35;
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dcheck-sug li:first-child button { border-top: 0; }
.dcheck-sug button:hover, .dcheck-sug button:focus-visible { background: #2a2a36; outline: none; }
.dcheck-sug button:focus-visible { box-shadow: inset 0 0 0 3px var(--dc-cyan); }
.dcheck-sug .dc-sug-2 { display: block; font-weight: 700; color: var(--dc-muted); font-size: 0.85rem; margin-top: 2px; }
.dcheck-credit { margin: 8px 0 0; font-size: 0.72rem; font-weight: 700; color: var(--dc-muted); }

/* ── the brand button: neon fill, BLACK text ────────────────────────────── */
.dcheck-go {
  display: block; width: 100%; min-height: 50px; margin-top: 14px; padding: 13px 18px;
  border: 2px solid var(--dc-ink); border-radius: 999px;
  background: var(--dc-yellow); color: var(--dc-ink);
  box-shadow: 3px 3px 0 var(--dc-ink);
  font-family: var(--font-display, 'Fredoka One', system-ui, sans-serif);
  font-size: 1rem; letter-spacing: 0.3px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dcheck-go:disabled { opacity: 0.65; cursor: default; box-shadow: none; }
.dcheck-go:focus-visible { outline: 3px solid var(--dc-cyan); outline-offset: 3px; }

/* ── answers ────────────────────────────────────────────────────────────── */
.dcheck-out:empty { display: none; }
.dc-yes, .dc-no, .dc-fix {
  margin-top: 14px; padding: 14px 16px; border-radius: 16px; line-height: 1.5;
  font-weight: 800; font-size: 0.92rem;
}
.dc-yes { background: #16261d; border: 1px solid rgba(0, 230, 118, 0.55); color: var(--dc-text); }
.dc-yes .dc-yes-t { display: block; font-family: var(--font-display, 'Fredoka One', system-ui, sans-serif); font-size: 1.12rem; color: var(--dc-green); margin-bottom: 4px; }
.dc-yes .dc-fine, .dc-no .dc-fine { display: block; margin-top: 8px; font-size: 0.84rem; font-weight: 700; color: var(--dc-muted); }
.dc-no  { background: #26161d; border: 1px solid rgba(255, 45, 120, 0.55); color: var(--dc-text); }
.dc-no .dc-no-t { display: block; font-family: var(--font-display, 'Fredoka One', system-ui, sans-serif); font-size: 1.12rem; color: var(--dc-pinkish); margin-bottom: 4px; }
.dc-fix { background: #2a2512; border: 1px solid rgba(255, 230, 0, 0.55); color: var(--dc-text); }
.dc-fix .dc-fix-t { display: block; font-family: var(--font-display, 'Fredoka One', system-ui, sans-serif); font-size: 1.05rem; color: var(--dc-yellow); margin-bottom: 4px; }

/* Pickup, always offered — a dead end is a lost customer. Come-inside only. */
.dc-pickup { margin-top: 12px; padding: 13px 15px; border-radius: 16px; background: #15202a; border: 1px solid rgba(0, 200, 255, 0.45); }
.dc-pickup-k { font-size: 0.7rem; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; color: var(--dc-cyan); }
.dc-pickup-a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-family: var(--font-display, 'Fredoka One', system-ui, sans-serif); font-size: 1.02rem; line-height: 1.3; color: var(--dc-text); text-decoration: underline; text-decoration-color: var(--dc-cyan); text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.dc-pickup-h { font-size: 0.88rem; font-weight: 800; color: var(--dc-text); line-height: 1.45; }
.dc-pickup-i { margin-top: 6px; font-size: 0.92rem; font-weight: 800; color: var(--dc-green); line-height: 1.4; }
.dc-shop-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; font-weight: 900; font-size: 0.92rem; color: var(--dc-yellow); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ── bottom sheet (shop.html) ───────────────────────────────────────────── */
.dcheck-sheet {
  position: fixed; inset: 0; z-index: 100060;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(4, 4, 10, 0.76);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 0;
}
.dcheck-sheet[hidden] { display: none; }
.dcheck-sheet-inner {
  width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 max(16px, env(safe-area-inset-bottom));
}
.dcheck-sheet .dcheck { max-width: none; border-radius: 22px 22px 0 0; border-bottom: 0; }
.dcheck-sheet-x {
  display: block; width: 44px; height: 44px; margin: 0 0 8px auto;
  border: 1px solid var(--dc-line, rgba(255, 255, 255, 0.22)); border-radius: 999px;
  background: #15151c; color: #fff; font-size: 1.2rem; font-weight: 900; cursor: pointer;
}
.dcheck-sheet-x:focus-visible { outline: 3px solid #00c8ff; outline-offset: 2px; }

/* ── the "check my address" opener on /shop ─────────────────────────────── */
.dcheck-open {
  display: inline-flex; align-items: center; gap: 8px; vertical-align: top;
  margin: 12px 0 0 8px; min-height: 46px; padding: 0 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(0, 200, 255, 0.55);
  color: #ffffff; cursor: pointer; font-family: var(--font-body, 'Nunito', system-ui, sans-serif);
  font-weight: 900; font-size: 0.88rem; letter-spacing: 0.3px; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.dcheck-open[hidden] { display: none; }
.dcheck-open:focus-visible { outline: 3px solid #00c8ff; outline-offset: 2px; }