/* =========================================================================
   Changelog
   0.2.0  2026-09-24  Initial ship. Everything below this block is verbatim
                      from docs/delivery-checker-build-handoff.md section 11.
                      Do not edit here; change the handoff first.
   0.3.0  2026-09-24  Handoff §11 updated and re-copied: sticky bar excluded
                      from the reserve; --afz-dc-reserve 132px -> 140px;
                      unused --afz-dc-reserve-sm removed.
   0.4.0  2026-09-24  Handoff §11 updated and re-copied: the reserve is gone
                      (answer pushes content at every width); eyebrow,
                      supporting line, card title and invalid note pin
                      their own colour.
   0.7.1  2026-09-28  Handoff §11 updated and re-copied: .afz-dc--sticky[hidden]
                      {display:none}, so the sticky bar hides while the main
                      checker is on screen. Nothing else changed.
   0.7.2  2026-09-28  Handoff §11 updated and re-copied: the postcode input
                      neutralises theme form-field border, radius, shadow and
                      background, scoped under .afz-dc .afz-dc-field.
   ========================================================================= */

/* =========================================================================
   Afishionado delivery-area checker
   Plugin stylesheet. Self-contained: no theme variables, no utility
   classes, no !important. Every class is namespaced afz-dc-.

   Ground:  .afz-dc--on-light | .afz-dc--on-dark   (set by the shortcode)
   Layout:  .afz-dc--inline | --card | --collapsed | --sticky
   Answer:  .afz-dc--answer  (drawer at every width; no reserved space)
   ========================================================================= */

:root{
  /* Brand */
  --afz-dc-blue:#009CB6;
  --afz-dc-blue-dark:#006A80;
  --afz-dc-navy:#003F50;
  --afz-dc-action:#F47C57;
  --afz-dc-action-press:#DC6540;
  --afz-dc-action-soft:#F7A084;
  --afz-dc-white:#FFFFFF;
  --afz-dc-paper:#FBF8F3;
  --afz-dc-paper-2:#F4EFE6;
  --afz-dc-ink:#1B1F22;
  --afz-dc-ink-2:#3A4146;
  --afz-dc-ink-3:#63696E;

  /* Type */
  --afz-dc-font:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --afz-dc-font-head:"DM Sans","Century Gothic",Futura,system-ui,sans-serif;

  /* Shape and motion */
  --afz-dc-pill:999px;
  --afz-dc-panel-r:14px;
  --afz-dc-h:56px;
  --afz-dc-tap:46px;
  --afz-dc-dur:180ms;
  --afz-dc-dur-slow:320ms;
  --afz-dc-ease:cubic-bezier(.22,.7,.3,1);
}

/* ---- root --------------------------------------------------------------- */
.afz-dc{
  display:block; width:100%; max-width:560px;
  font-family:var(--afz-dc-font); font-size:16px; line-height:1.5;
  text-align:left; color:var(--afz-dc-fg);
}
.afz-dc,.afz-dc *,.afz-dc *::before,.afz-dc *::after{box-sizing:border-box;}
.afz-dc-body{display:block;}

/* ---- ground: light ------------------------------------------------------ */
.afz-dc--on-light{
  --afz-dc-fg:#1B1F22;
  --afz-dc-fg-2:#3A4146;
  --afz-dc-eyebrow:#006A80;
  --afz-dc-rule:rgba(27,31,34,.14);
  --afz-dc-field-bg:#FFFFFF;
  --afz-dc-field-fg:#1B1F22;
  --afz-dc-ph:#63696E;
  --afz-dc-field-edge:rgba(27,31,34,.20);
  --afz-dc-focus:#006A80;
  --afz-dc-btn-bg:#F47C57;
  --afz-dc-btn-fg:#22120C;
  --afz-dc-btn-bg-hover:#DC6540;
  --afz-dc-toggle-bg:#FFFFFF;
  --afz-dc-toggle-fg:#006A80;
  --afz-dc-toggle-edge:rgba(0,106,128,.38);
  --afz-dc-bar-bg:#FBF8F3;
  --afz-dc-bar-edge:rgba(27,31,34,.14);
  --afz-dc-yes-bg:#E1F0F2;   --afz-dc-yes-fg:#05404D;
  --afz-dc-yes-edge:rgba(0,106,128,.22);
  --afz-dc-chip-bg:#FFFFFF;  --afz-dc-chip-fg:#05404D;
  --afz-dc-chip-edge:rgba(0,106,128,.24);
  --afz-dc-cov-bg:#EFF4F5;   --afz-dc-cov-fg:#0A3E4A;
  --afz-dc-pick-bg:#F4EFE6;  --afz-dc-pick-fg:#2B2119;
  --afz-dc-pick-edge:rgba(27,31,34,.14);
  --afz-dc-exp-bg:#F4EFE6;   --afz-dc-exp-fg:#2B2119;
  --afz-dc-exp-edge:#F47C57; --afz-dc-exp-title:#A43F1B;
  --afz-dc-fail-bg:#F1ECE8;  --afz-dc-fail-fg:#463830;
  --afz-dc-err-fg:#9B3418;
  --afz-dc-skel:rgba(0,106,128,.16);
  --afz-dc-shadow:0 8px 24px rgba(0,63,80,.12);
}

/* ---- ground: dark ------------------------------------------------------- */
.afz-dc--on-dark{
  --afz-dc-fg:#FBF8F3;
  --afz-dc-fg-2:rgba(251,248,243,.82);
  --afz-dc-eyebrow:#F7A084;
  --afz-dc-rule:rgba(255,255,255,.18);
  --afz-dc-field-bg:#FFFFFF;
  --afz-dc-field-fg:#1B1F22;
  --afz-dc-ph:#63696E;
  --afz-dc-field-edge:rgba(255,255,255,.30);
  --afz-dc-focus:#F7A084;
  --afz-dc-btn-bg:#F47C57;
  --afz-dc-btn-fg:#22120C;
  --afz-dc-btn-bg-hover:#F7A084;
  --afz-dc-toggle-bg:#0A4150;
  --afz-dc-toggle-fg:#FBF8F3;
  --afz-dc-toggle-edge:rgba(255,255,255,.30);
  --afz-dc-bar-bg:#003F50;
  --afz-dc-bar-edge:rgba(255,255,255,.18);
  --afz-dc-yes-bg:#00505F;   --afz-dc-yes-fg:#FBF8F3;
  --afz-dc-yes-edge:rgba(255,255,255,.20);
  --afz-dc-chip-bg:#FBF8F3;  --afz-dc-chip-fg:#05404D;
  --afz-dc-chip-edge:rgba(0,106,128,.18);
  --afz-dc-cov-bg:#0A4150;   --afz-dc-cov-fg:#FBF8F3;
  --afz-dc-pick-bg:#153C48;  --afz-dc-pick-fg:#FBF8F3;
  --afz-dc-pick-edge:rgba(255,255,255,.16);
  --afz-dc-exp-bg:#123642;   --afz-dc-exp-fg:#FBF8F3;
  --afz-dc-exp-edge:#F7A084; --afz-dc-exp-title:#F7A084;
  --afz-dc-fail-bg:#332A26;  --afz-dc-fail-fg:#F6EDE8;
  --afz-dc-err-fg:#F7A084;
  --afz-dc-skel:rgba(251,248,243,.24);
  --afz-dc-shadow:0 12px 32px rgba(0,20,26,.42);
}

/* ---- optional label and supporting line (both off by default) ----------- */
/* 2026-09-24: the eyebrow, supporting line, card title and invalid note are
   scoped under .afz-dc so each declares its own colour at (0,2,0) and a
   site-wide on-dark rule such as ".band p" or ".band span" cannot repaint
   them. Same guarantee the result panels already had (rule 2). */
.afz-dc-head{display:none; margin:0 0 12px;}
.afz-dc--has-head .afz-dc-head{display:block;}
.afz-dc .afz-dc-label{
  display:block; font-size:13px; font-weight:500; line-height:1.2;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--afz-dc-eyebrow); background-color:transparent;
}
.afz-dc .afz-dc-support{
  margin:7px 0 0; font-size:14px; line-height:1.45;
  color:var(--afz-dc-fg-2); background-color:transparent;
}

/* ---- field row ---------------------------------------------------------- */
.afz-dc-row{
  display:flex; align-items:center; gap:6px; padding:5px;
  min-height:var(--afz-dc-h);
  background-color:var(--afz-dc-field-bg);
  border:1px solid var(--afz-dc-field-edge);
  border-radius:var(--afz-dc-pill);
  transition:border-color var(--afz-dc-dur) var(--afz-dc-ease);
}
.afz-dc-field{display:flex; align-items:center; flex:1 1 auto; min-width:0; padding-left:16px;}
.afz-dc-input{
  flex:1 1 auto; min-width:0; height:var(--afz-dc-tap);
  margin:0; padding:0; border:0; border-radius:0;
  background-color:transparent; color:var(--afz-dc-field-fg);
  font-family:var(--afz-dc-font); font-size:16px; font-weight:400;
  line-height:var(--afz-dc-tap); letter-spacing:.01em; box-shadow:none;
}
.afz-dc-input::placeholder{color:var(--afz-dc-ph); opacity:1;}
.afz-dc-input:focus{outline:none;}
/* 2026-09-28: the text sits directly on the pill. A theme's site-wide form
   field styles (Blocksy's Form Fields: input[type="text"], :focus, :hover)
   gave our input its own box inside the pill. Scoped under the plugin's own
   classes at (0,3,0), above such rules, so no other form on the site changes.
   The pill's focus ring (.afz-dc-row:focus-within, card field) is unchanged. */
.afz-dc .afz-dc-field .afz-dc-input,
.afz-dc .afz-dc-field .afz-dc-input:hover,
.afz-dc .afz-dc-field .afz-dc-input:focus{
  border:0; border-radius:0; box-shadow:none; background-color:transparent;
}
.afz-dc-row:focus-within{border-color:var(--afz-dc-focus); box-shadow:0 0 0 2px var(--afz-dc-focus);}

/* geolocate: [hidden] removes it with no layout consequence */
.afz-dc-geo{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:var(--afz-dc-tap); height:var(--afz-dc-tap); margin:0; padding:0;
  border:0; border-radius:50%;
  background-color:transparent; color:#006A80; cursor:pointer;
  transition:background-color var(--afz-dc-dur) var(--afz-dc-ease);
}
.afz-dc-geo:hover{background-color:rgba(0,106,128,.10);}
.afz-dc-geo:focus-visible{outline:2px solid #F47C57; outline-offset:2px;}
.afz-dc-geo[hidden]{display:none;}
.afz-dc-geo svg{width:21px; height:21px;}

.afz-dc-submit{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  gap:9px; min-height:var(--afz-dc-tap); padding:0 26px; margin:0;
  border:0; border-radius:var(--afz-dc-pill);
  background-color:var(--afz-dc-btn-bg); color:var(--afz-dc-btn-fg);
  font-family:var(--afz-dc-font-head); font-size:15px; font-weight:700;
  letter-spacing:.02em; line-height:1; cursor:pointer; white-space:nowrap;
  transition:background-color var(--afz-dc-dur) var(--afz-dc-ease),
             transform var(--afz-dc-dur) var(--afz-dc-ease);
}
.afz-dc-submit:hover{background-color:var(--afz-dc-btn-bg-hover);}
.afz-dc-submit:active{transform:scale(.98);}
.afz-dc-submit:focus-visible{outline:2px solid var(--afz-dc-focus); outline-offset:2px;}
.afz-dc-submit[aria-busy="true"]{cursor:progress;}
.afz-dc-spin{
  width:15px; height:15px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:afz-dc-spin .7s linear infinite;
}
@keyframes afz-dc-spin{to{transform:rotate(360deg);}}

/* ---- state 7: invalid format ------------------------------------------- */
.afz-dc .afz-dc-note{
  display:none; align-items:flex-start; gap:7px; margin:9px 4px 0;
  font-size:13.5px; font-weight:500; line-height:1.4;
  color:var(--afz-dc-err-fg); background-color:transparent;
}
.afz-dc[data-invalid="true"] .afz-dc-note{display:flex;}
.afz-dc[data-invalid="true"] .afz-dc-row{border-color:var(--afz-dc-err-fg);}
.afz-dc .afz-dc-note span{color:inherit; background-color:transparent;}
.afz-dc-note svg{flex:0 0 auto; width:16px; height:16px; margin-top:1px;}

/* ---- result region ------------------------------------------------------ */
.afz-dc-region{display:block;}
.afz-dc-result{
  display:flex; align-items:flex-start; gap:13px;
  margin-top:12px; padding:16px 18px;
  border:1px solid transparent; border-radius:var(--afz-dc-panel-r);
}
/* Foreground and background always ship as a pair, and every child is
   pinned to inherit, so a site-wide on-dark text rule cannot repaint
   the message. */
.afz-dc-result--yes{background-color:var(--afz-dc-yes-bg); color:var(--afz-dc-yes-fg); border-color:var(--afz-dc-yes-edge);}
.afz-dc-result--covered{background-color:var(--afz-dc-cov-bg); color:var(--afz-dc-cov-fg);}
.afz-dc-result--pickup{background-color:var(--afz-dc-pick-bg); color:var(--afz-dc-pick-fg); border-color:var(--afz-dc-pick-edge);}
.afz-dc-result--expanding{background-color:var(--afz-dc-exp-bg); color:var(--afz-dc-exp-fg); border-color:var(--afz-dc-exp-edge);}
.afz-dc-result--down{background-color:var(--afz-dc-fail-bg); color:var(--afz-dc-fail-fg);}
.afz-dc-result--loading{background-color:var(--afz-dc-cov-bg); color:var(--afz-dc-cov-fg);}
.afz-dc-result h3,.afz-dc-result p,.afz-dc-result span,.afz-dc-result strong,
.afz-dc-result a,.afz-dc-result button{color:inherit;}
.afz-dc-result svg{flex:0 0 auto; color:inherit;}
.afz-dc-result-i{width:22px; height:22px; margin-top:2px;}
.afz-dc-result-c{min-width:0;}
.afz-dc-result--expanding .afz-dc-t,
.afz-dc-result--expanding .afz-dc-result-i{color:var(--afz-dc-exp-title);}
.afz-dc-t{
  margin:0; font-family:var(--afz-dc-font-head); font-size:17px; font-weight:700;
  line-height:1.25; letter-spacing:-.005em; text-wrap:pretty;
}
.afz-dc-p{margin:5px 0 0; font-size:14.5px; line-height:1.45; text-wrap:pretty;}

/* dates: the payoff */
.afz-dc-dates-label{
  margin:14px 0 8px; font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; opacity:.78;
}
.afz-dc-dates{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none;}
.afz-dc-date{
  display:flex; align-items:baseline; gap:9px; padding:9px 14px;
  background-color:var(--afz-dc-chip-bg); color:var(--afz-dc-chip-fg);
  border:1px solid var(--afz-dc-chip-edge); border-radius:10px;
}
.afz-dc-dow{font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;}
.afz-dc-day{font-family:var(--afz-dc-font-head); font-size:21px; font-weight:700; line-height:1;}
.afz-dc-mon{font-size:13px; font-weight:500;}

/* links and retry inherit the panel ink, so contrast is guaranteed */
.afz-dc-link{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:12px; min-height:32px;
  font-size:14px; font-weight:500; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
  background-color:transparent;
}
.afz-dc-link:hover{text-decoration-thickness:2px;}
.afz-dc-link svg{width:15px; height:15px;}
.afz-dc-retry{
  display:inline-flex; align-items:center; min-height:36px; margin-top:12px;
  padding:0 16px; border:1px solid currentColor; border-radius:var(--afz-dc-pill);
  background-color:transparent; font-family:var(--afz-dc-font);
  font-size:13.5px; font-weight:500; cursor:pointer;
}
.afz-dc-bars{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
.afz-dc-bar{height:11px; border-radius:6px; background-color:var(--afz-dc-skel);}
.afz-dc-bar:nth-child(2){width:62%;}

/* ---- answer placement: drawer at every width ---------------------------- */
/* 2026-09-24: the 640px-and-up reserve is removed. It held empty space under
   every form before anyone typed, which read as something failing to load
   and, on the hero band, as a layout fault. The answer now pushes content
   down once, at every width. See handoff section 5 before reintroducing. */
.afz-dc--answer .afz-dc-region{
  display:grid; grid-template-rows:0fr; overflow:hidden;
  transition:grid-template-rows var(--afz-dc-dur-slow) var(--afz-dc-ease);
}
.afz-dc--answer[data-answered="true"] .afz-dc-region{grid-template-rows:1fr;}
.afz-dc--answer .afz-dc-result{animation:afz-dc-fade var(--afz-dc-dur) var(--afz-dc-ease);}
@keyframes afz-dc-fade{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}

/* ---- layout 1: compact inline ------------------------------------------ */
.afz-dc--inline{max-width:520px;}

/* ---- layout 2: card (structure only, supplies no backdrop) ------------- */
.afz-dc--card{max-width:460px;}
.afz-dc--card .afz-dc-head{display:block; padding-top:16px; border-top:1px solid var(--afz-dc-rule);}
.afz-dc .afz-dc-title{
  margin:8px 0 6px; font-family:var(--afz-dc-font-head);
  font-size:23px; font-weight:700; line-height:1.15; letter-spacing:-.01em;
  color:var(--afz-dc-fg); background-color:transparent; text-wrap:balance;
}
.afz-dc--card .afz-dc-row{
  flex-direction:column; align-items:stretch; gap:10px;
  padding:0; min-height:0; background-color:transparent; border:0; border-radius:0;
}
.afz-dc--card .afz-dc-row:focus-within{box-shadow:none;}
.afz-dc--card .afz-dc-field{
  padding:5px 5px 5px 20px; min-height:var(--afz-dc-h);
  background-color:var(--afz-dc-field-bg);
  border:1px solid var(--afz-dc-field-edge); border-radius:var(--afz-dc-pill);
}
.afz-dc--card .afz-dc-field:focus-within{border-color:var(--afz-dc-focus); box-shadow:0 0 0 2px var(--afz-dc-focus);}
.afz-dc--card[data-invalid="true"] .afz-dc-field{border-color:var(--afz-dc-err-fg);}
.afz-dc--card .afz-dc-submit{width:100%; min-height:52px;}

/* ---- layout 3: collapsed ----------------------------------------------- */
.afz-dc--collapsed{max-width:420px;}
.afz-dc-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; min-height:48px; padding:0 20px; margin:0;
  background-color:var(--afz-dc-toggle-bg); color:var(--afz-dc-toggle-fg);
  border:1px solid var(--afz-dc-toggle-edge); border-radius:var(--afz-dc-pill);
  font-family:var(--afz-dc-font-head); font-size:15px; font-weight:500;
  letter-spacing:.01em; text-align:left; cursor:pointer;
  transition:border-color var(--afz-dc-dur) var(--afz-dc-ease);
}
.afz-dc-toggle:hover{border-color:var(--afz-dc-focus);}
.afz-dc-toggle:focus-visible{outline:2px solid var(--afz-dc-focus); outline-offset:2px;}
.afz-dc-toggle svg{width:17px; height:17px; transition:transform var(--afz-dc-dur) var(--afz-dc-ease);}
.afz-dc--collapsed .afz-dc-body{display:none; margin-top:12px;}
.afz-dc--collapsed[data-open="true"] .afz-dc-body{display:block;}
.afz-dc--collapsed[data-open="true"] .afz-dc-toggle svg{transform:rotate(180deg);}

/* ---- layout 4: sticky mobile bar --------------------------------------- */
.afz-dc--sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:60; max-width:none;
  padding:10px 14px; padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  background-color:var(--afz-dc-bar-bg);
  border-top:1px solid var(--afz-dc-bar-edge);
  box-shadow:var(--afz-dc-shadow);
}
/* 2026-09-28: [hidden] must actually hide the bar. The browser's own
   [hidden]{display:none} loses to any author rule, and .afz-dc sets
   display:block, so the attribute the script toggles had no effect and the
   bar showed at all times. Same fix the geolocate button already has. */
.afz-dc--sticky[hidden]{display:none;}
.afz-dc--sticky .afz-dc-row{min-height:48px;}
.afz-dc--sticky .afz-dc-submit{padding:0 20px;}
.afz-dc--sticky .afz-dc-result{margin:0 0 10px; padding:13px 15px;}
.afz-dc--sticky .afz-dc-note{margin-top:7px;}
@media (min-width:781px){.afz-dc--sticky{display:none;}}

/* ---- narrow columns and phones ----------------------------------------- */
@media (max-width:420px){
  .afz-dc-field{padding-left:14px;}
  .afz-dc-submit{padding:0 20px;}
  .afz-dc-result{padding:15px 16px; gap:11px;}
  .afz-dc-t{font-size:16.5px;}
}
@media (prefers-reduced-motion:reduce){
  .afz-dc-row,.afz-dc-submit,.afz-dc-toggle,.afz-dc-toggle svg,.afz-dc-geo,
  .afz-dc--answer .afz-dc-region{transition:none;}
  .afz-dc-spin{animation:none;}
  .afz-dc--answer .afz-dc-result{animation:none;}
}