/* Delivery on the ordering pages (spec 2026-10-09, C1 to C3): the
   Abholen | Liefern switch, the delivery terms, the fee rows, the free
   delivery meter, and checkout's Zwischensumme / Lieferung / Gesamt rows.

   templates/restaurant/ordering.blade.php links this sheet only while the
   site offers delivery. It comes after every page's own sheet, so it wins
   ties over menu.css and checkout.css, and before a template's skin, so the
   skin wins over it. A pickup-only page links none of it. Content-hashed
   through App\Support\StaticAsset like the other ordering sheets. Plan
   Task 9 adds checkout's delivery rules to this file. */

/* ---------- the switch ----------
   One form per half (templates/restaurant/_fulfilment_switch.blade.php),
   laid side by side as one pill. The pressed half is filled AND carries
   aria-pressed, so colour never says it alone. Each half is a 44px
   target. */
.ord-fulfil{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.ord-fulfil-switch{display:grid;grid-template-columns:1fr 1fr;gap:.25rem;padding:.25rem;border:1px solid var(--ord-rule);border-radius:999px;background:var(--ord-canvas)}
.ord-fulfil-switch > form{display:flex;margin:0}
.ord-fulfil-option{flex:1 1 auto;min-height:2.75rem;padding:.35rem .9rem;border:0;border-radius:999px;background:transparent;color:var(--ord-ink);font:inherit;font-size:.9rem;font-weight:700;line-height:1.2;cursor:pointer}
.ord-fulfil-option[aria-pressed="true"]{background:var(--c-primary);color:var(--c-primary-ink)}
.ord-fulfil-option:focus-visible{outline:2px solid var(--ord-ink);outline-offset:2px}
/* Paused: the delivery half says so in words and cannot be pressed. */
.ord-fulfil-option:disabled{cursor:not-allowed;color:var(--ord-ink-muted);font-size:.8rem;font-weight:600}
.ord-fulfil-terms{margin:0;font-size:.8125rem;line-height:1.45;color:var(--ord-ink-muted)}

/* The menu pane: the switch sits under its title. As the phone sheet the
   pane has the bar's switch right under it, so its own steps aside, as its
   "to checkout" strip does; the sheet then shows one switch, the bar's. */
.ord-fulfil-pane{padding-bottom:1rem;border-bottom:1px solid var(--ord-rule)}
.ord-cart-pane.is-sheet .ord-fulfil-pane{display:none}

/* Above the menu, where the pane is not a column: the terms are on screen
   before anything is added. From 1400 the pane shows them instead. */
.ord-fulfil-strip{margin:0 0 1.25rem;padding:.9rem 1rem;border:1px solid var(--ord-rule);border-radius:12px;background:var(--ord-card)}
@media (min-width:1400px){
  .ord-fulfil-strip{display:none}
}

/* ---------- the fee ---------- */
.ord-fee{display:flex;flex-direction:column;gap:.4rem}
.ord-fee-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0;font-size:.9rem;color:var(--ord-ink)}
.ord-fee-row span:last-child{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ord-fee-missing{margin:0;font-size:.8125rem;font-weight:600;color:var(--ord-ink)}
/* Decoration under the sentence that says the same thing (aria-hidden). */
.ord-free-meter{display:block;height:4px;border-radius:999px;background:var(--ord-rule);overflow:hidden}
.ord-free-meter > span{display:block;height:100%;border-radius:inherit;background:var(--c-primary)}
.ord-checkout-summary .ord-fee{margin-top:.25rem;padding:.85rem 0;border-top:1px solid var(--ord-rule)}

/* ---------- the phone bar ----------
   A row above the total and "to checkout": the switch, with the fee or
   what is missing for free delivery beside it. The cap stays on
   .ord-checkout-inner, which wraps here. In the bar the switch is exactly
   2.75rem: an option of 2.5rem less 2px, .125rem of padding twice and a
   1px border twice. The bar is then .6rem + 2.75rem + .45rem + 2.75rem +
   .6rem = 7.15rem, where the shared bar is .85rem + 2.75rem + .85rem =
   4.45rem. The sheet that rises from behind it starts 7.15rem up (plus the
   bar's 1px rule, as in menu.css), and the toast sits 2.05rem above the
   bar, the gap it keeps above the shared bar (6.5rem less 4.45rem). */
.ord-checkout-inner{flex-wrap:wrap;row-gap:.45rem;padding-block:.6rem}
.ord-bar-delivery{flex:1 0 100%;display:flex;align-items:center;gap:.75rem;min-width:0;min-height:2.75rem}
/* The switch keeps its natural width, so the fee line beside it gets the
   rest of the row as before, but never more than the row: past that its
   halves share what there is and a longer word wraps inside its half (two
   lines of .8125rem at 1.1 fit the option's 2.5rem) rather than the switch
   running past the screen's edge. Measured 2026-10-11 with the paused
   sentence: 84 px off a 320 px screen, 60 at 344, 11 at 393. */
.ord-fulfil-bar{flex:none;max-width:100%;min-width:0}
.ord-fulfil-bar .ord-fulfil-switch{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:.125rem}
.ord-fulfil-bar .ord-fulfil-option{min-width:0;min-height:calc(2.5rem - 2px);padding:.3rem .8rem;font-size:.8125rem;line-height:1.1;overflow-wrap:anywhere}
/* Three lines at most: .75rem at line-height 1.2 is .9rem a line, so three
   are 2.7rem, inside the 2.75rem row. The pane and checkout carry the
   whole sentence. */
.ord-fee-status{flex:1 1 auto;min-width:0;max-height:3.6em;margin:0;overflow:hidden;font-size:.75rem;line-height:1.2;color:var(--ord-ink)}
.ord-fee-status span{display:block}
.ord-checkout-bar .ord-free-meter{position:absolute;left:0;right:0;top:-1px;height:3px;border-radius:0}
/* Below 360 px the bar is taller than its two planned rows (measured in
   Chrome on 2026-10-11: at 320 px the total and Zur Kasse take a row each,
   and with the fee line's own row below 360 px it is 201 px at 320 px and
   150 px at 344 px), so the sheet and the toast are placed from the bar's
   measured height (--ord-bar-h, js/ordering/delivery-bar.js; final review
   2026-10-11, M7), the planned two rows standing in until it is set. The sheet's top stays where the
   two-row plan puts it: a taller bar makes the sheet shorter, not higher. */
.ord-cart-pane.is-sheet{bottom:var(--ord-bar-h, calc(7.15rem + 1px + env(safe-area-inset-bottom)));max-height:calc(100vh - 11rem - var(--ord-top-extra, 0px) - (var(--ord-bar-h, calc(7.15rem + 1px + env(safe-area-inset-bottom))) - 7.15rem - 1px - env(safe-area-inset-bottom)));max-height:calc(100dvh - 11rem - var(--ord-top-extra, 0px) - (var(--ord-bar-h, calc(7.15rem + 1px + env(safe-area-inset-bottom))) - 7.15rem - 1px - env(safe-area-inset-bottom)))}
@media (max-width:1399.98px){
  .ord-body:has(.ord-checkout-bar) .ord-toast{bottom:calc(var(--ord-bar-h, calc(7.15rem + 1px + env(safe-area-inset-bottom))) + 2.05rem - 1px)}
}
/* Below 360 px the fee line takes its own row under the switch, whole:
   beside the switch it was cut off (measured 2026-10-11 in Chrome: 58 px of
   text in its 43 px box at 344 px, 86 px at 320 px). The bar grows, and the
   sheet and the toast follow it through --ord-bar-h. */
@media (max-width:359.98px){
  .ord-bar-delivery{flex-wrap:wrap;row-gap:.35rem}
  .ord-bar-delivery .ord-fee-status{flex:1 0 100%;max-height:none}
}

/* ---------- checkout's place block ---------- */
.ord-place-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0;font-size:.9375rem;color:var(--ord-ink)}
.ord-place-row span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.ord-place-vat{margin:0 0 .35rem;font-size:.8125rem;line-height:1.5;color:var(--ord-ink-muted)}

/* ---------- checkout: pickup or delivery (plan Task 9) ----------
   The two cards at the top of the order form and the Lieferadresse section
   under them (templates/restaurant/checkout.blade.php, spec 2026-10-09 C4).
   Each card is a label around a real radio: the radio carries the state for
   every way of using the page, and the card's border repeats it (a browser
   without :has() shows the radio alone). */
/* Two cards side by side where two 15rem cards fit, one above the other
   where they do not, and never a third track: each track is at least half
   the row. With a plain 15rem minimum, a refusal note (which spans the row)
   kept a third empty track alive on a wide desktop form and squeezed both
   cards to two thirds of it (measured 2026-10-11 at 1440: 413 px cards
   became 271 px). */
.checkout-fulfil{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(15rem,calc((100% - .75rem) / 2))),1fr));gap:.75rem;min-width:0;margin:0;padding:0;border:0}
.checkout-fulfil > .form-error{grid-column:1 / -1;margin:0}
/* Why a card was refused meanwhile (cart-swap.js refuseCard). Empty, it is
   taken out of the grid but kept in the page, so the live region is there
   before it speaks. */
.checkout-fulfil-note{grid-column:1 / -1;margin:0;font-size:.875rem;font-weight:600;line-height:1.4;color:#991b1b}
.checkout-fulfil-note:empty{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.checkout-fulfil-card{display:flex;align-items:flex-start;gap:.75rem;min-height:4.5rem;padding:.9rem 1rem;border:1.5px solid var(--ord-rule-strong);border-radius:var(--ord-radius);background:var(--ord-card);color:var(--ord-ink);cursor:pointer}
.checkout-fulfil-card:has(.checkout-fulfil-input:checked){border-color:var(--ord-ink);box-shadow:inset 0 0 0 1px var(--ord-ink)}
.checkout-fulfil-card:has(.checkout-fulfil-input:focus-visible){outline:2px solid var(--ord-ink);outline-offset:2px}
.checkout-fulfil-card:has(.checkout-fulfil-input:disabled){cursor:not-allowed;background:var(--ord-canvas)}
.checkout-fulfil-input{flex:none;width:1.15rem;height:1.15rem;margin:.2rem 0 0;accent-color:var(--ord-ink)}
.checkout-fulfil-icon{flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--ord-canvas);color:var(--ord-ink)}
/* The header's filled scooter (icons/scooter, 2026-10-12) on the delivery
   card. The drawing is wider than it is tall, so it takes most of the
   circle's width to read as the header's at this size. */
.checkout-fulfil-scooter{display:block;width:1.65rem;height:1.65rem}
.checkout-fulfil-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.checkout-fulfil-title{font-size:1rem;font-weight:700;line-height:1.25}
.checkout-fulfil-meta{font-size:.8125rem;line-height:1.4;color:var(--ord-ink-muted)}

/* The Lieferadresse section (spec 2026-10-12): the search with the locate
   button inside the field, "oder" and "Auf der Karte wählen"; the chosen
   address as a card with the preview under it; or the plain fields. The
   script shows one of them at a time; without it only the plain fields are
   drawn. */
.checkout-delivery-finder,.checkout-delivery-fields{display:flex;flex-direction:column;gap:.35rem}
.checkout-delivery-fields{gap:.75rem}
.checkout-delivery-row{display:grid;grid-template-columns:minmax(6.5rem,8rem) minmax(0,1fr);gap:.75rem}
.checkout-delivery-combo{position:relative}
/* Room on the right for the locate button inside the field, and a margin
   under the sticky header when a phone scrolls the field to the top. */
.checkout-form .checkout-delivery-combo input[type="text"]{padding-right:3.25rem;scroll-margin-top:6rem}
.checkout-delivery-locate{position:absolute;top:50%;right:.25rem;display:grid;place-items:center;width:2.75rem;height:2.75rem;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--ord-ink);cursor:pointer;transform:translateY(-50%)}
.checkout-delivery-locate:hover{background:var(--ord-canvas)}
.checkout-delivery-locate:focus-visible{outline:2px solid var(--ord-ink);outline-offset:-2px}
.checkout-delivery-locate:disabled{cursor:progress;opacity:.6}
.checkout-delivery-list{position:absolute;z-index:20;top:calc(100% + .25rem);left:0;right:0;max-height:22rem;margin:0;padding:.25rem;overflow-y:auto;list-style:none;background:var(--ord-card);border:1px solid var(--ord-rule-strong);border-radius:var(--ord-btn-radius);box-shadow:0 10px 28px rgba(15,23,42,.14)}
.checkout-delivery-list li{display:flex;align-items:center;gap:.75rem;min-height:3.25rem;padding:.5rem .75rem;border-radius:calc(var(--ord-btn-radius) - 2px);color:var(--ord-ink);cursor:pointer}
.checkout-delivery-list li[aria-selected="true"],.checkout-delivery-list li:hover{background:color-mix(in srgb,var(--c-primary) 14%,var(--ord-card))}
/* The map row closes the list, set off by a rule above it. */
.checkout-delivery-list li.is-map{margin-top:.25rem;border-top:1px solid var(--ord-rule);border-radius:0 0 calc(var(--ord-btn-radius) - 2px) calc(var(--ord-btn-radius) - 2px)}
.checkout-delivery-option-icon{flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--ord-canvas);color:var(--ord-ink)}
.checkout-delivery-option-icon svg{display:block}
.checkout-delivery-option-text{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.checkout-delivery-option-label{font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.checkout-delivery-option-meta{font-size:.8125rem;line-height:1.35;color:var(--ord-ink-muted)}
.checkout-delivery-or{display:flex;align-items:center;gap:.75rem;margin:.5rem 0 .25rem;font-size:.8125rem;color:var(--ord-ink-muted)}
.checkout-delivery-or::before,.checkout-delivery-or::after{content:"";flex:1 1 auto;height:1px;background:var(--ord-rule)}
.checkout-form .checkout-delivery-pick{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:3rem;padding:.6rem 1rem;border:1.5px solid var(--ord-rule-strong);border-radius:var(--ord-btn-radius);background:var(--ord-card);color:var(--ord-ink);font:inherit;font-weight:700;cursor:pointer}
.checkout-form .checkout-delivery-pick:hover{border-color:var(--ord-ink)}
.checkout-form .checkout-delivery-pick:focus-visible{outline:2px solid var(--ord-ink);outline-offset:2px}
.checkout-form .checkout-delivery-link{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:0 .25rem;border:0;background:none;color:var(--ord-ink);font:inherit;font-size:.875rem;font-weight:600;text-decoration:underline;text-underline-offset:.15em;cursor:pointer}
.checkout-form .checkout-delivery-link:focus-visible{outline:2px solid var(--ord-ink);outline-offset:1px;border-radius:4px}
.checkout-form .checkout-delivery-link:disabled{cursor:progress;opacity:.6}
.checkout-delivery-card{display:flex;align-items:center;gap:.6rem;padding:.5rem .5rem .5rem 1rem;border:1px solid var(--ord-rule-strong);border-radius:var(--ord-radius);background:var(--ord-card);color:var(--ord-ink)}
/* A focus destination once an address is chosen, never a control. */
.checkout-delivery-card:focus{outline:none}
.checkout-delivery-card > svg{flex:none}
.checkout-delivery-card-label{flex:1 1 auto;min-width:0;margin:0;font-weight:700;line-height:1.3;overflow-wrap:anywhere}

/* The preview (spec 6.1): 170 px, the pin over its centre, "Eingang
   festlegen" over its lower edge and the credit in the top corner, where
   the button never covers it. isolation keeps Leaflet's panes (z-index 400
   to 1000) inside the map's own stacking context, under the page's sticky
   header and under the pin. Leaflet's sheet is linked before this one, so
   the rules here win. */
.checkout-delivery-preview{position:relative;margin-top:.5rem;border:1px solid var(--ord-rule);border-radius:var(--ord-radius);overflow:hidden}
.checkout-delivery-preview-map{height:170px;isolation:isolate;cursor:pointer}
.checkout-delivery-preview-map.leaflet-container,.checkout-delivery-sheet-map.leaflet-container{background:#ece8e1;font:inherit}
.checkout-delivery-pin{position:absolute;z-index:1;top:50%;left:50%;display:block;width:34px;height:44px;transform:translate(-50%,-100%);pointer-events:none;color:var(--ord-ink);filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.checkout-delivery-pin svg{display:block}
.checkout-delivery-entrance{position:absolute;z-index:2;left:50%;bottom:.6rem;display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:.45rem 1rem;border:0;border-radius:999px;background:#fff;color:var(--ord-ink);font:inherit;font-size:.875rem;font-weight:700;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.18);transform:translateX(-50%);cursor:pointer}
.checkout-delivery-entrance:focus-visible{outline:2px solid var(--ord-ink);outline-offset:2px}
.checkout-delivery-preview-credit{position:absolute;z-index:2;top:0;right:0;padding:.1rem .4rem;border-bottom-left-radius:4px;background:rgba(255,255,255,.85);color:#333;font-size:.6875rem;line-height:1.4;text-decoration:none}
.checkout-delivery-entrance-done{display:flex;align-items:center;gap:.35rem;margin:.4rem 0 0;font-size:.875rem;font-weight:700;color:#166534}

/* The full-screen map (spec 6.2): a dialog over everything, full screen on
   a phone or a tablet and below 640 px, a centred box on a desktop. The
   page under it does not scroll. Without showModal() the dialog is shown by
   its open attribute and fixed over the page the same way. */
html.checkout-delivery-sheet-open,html.checkout-delivery-sheet-open body{overflow:hidden}
.checkout-delivery-sheet{position:fixed;inset:0;z-index:90;box-sizing:border-box;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--ord-card);color:var(--ord-ink)}
.checkout-delivery-sheet[open]{display:flex;flex-direction:column}
.checkout-delivery-sheet::backdrop{background:rgba(15,23,42,.55)}
@media (min-width:640px) and (pointer:fine){
  .checkout-delivery-sheet{width:min(720px,calc(100vw - 2rem));height:min(640px,calc(100vh - 2rem));margin:auto;border-radius:var(--ord-radius);box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
}
.checkout-delivery-sheet-head{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;padding-top:calc(.6rem + env(safe-area-inset-top));border-bottom:1px solid var(--ord-rule)}
.checkout-delivery-sheet-back{flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;margin:0;padding:0;border:0;border-radius:50%;background:var(--ord-canvas);color:var(--ord-ink);cursor:pointer}
.checkout-delivery-sheet-back:focus-visible{outline:2px solid var(--ord-ink);outline-offset:2px}
.checkout-delivery-sheet-titles{display:flex;flex-direction:column;min-width:0;margin:0}
.checkout-delivery-sheet-heading{font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.checkout-delivery-sheet-sub{font-size:.875rem;line-height:1.3;color:var(--ord-ink-muted)}
.checkout-delivery-sheet-mapbox{position:relative;flex:1 1 auto;min-height:12rem}
.checkout-delivery-sheet-map{position:absolute;inset:0;isolation:isolate}
.checkout-delivery-sheet-map:focus-visible{outline:3px solid var(--ord-ink);outline-offset:-3px}
/* The pin lifts while the map moves and drops when it stops; its shadow
   stays on the point. Under reduced motion it does not move. */
.checkout-delivery-pin-shadow{position:absolute;z-index:1;top:50%;left:50%;width:12px;height:5px;border-radius:50%;background:rgba(0,0,0,.35);transform:translate(-50%,-50%);pointer-events:none}
.checkout-delivery-sheet-mapbox .checkout-delivery-pin{transition:transform .15s ease-out}
.checkout-delivery-sheet-mapbox.is-moving .checkout-delivery-pin{transform:translate(-50%,calc(-100% - 10px))}
@media (prefers-reduced-motion:reduce){
  .checkout-delivery-sheet-mapbox .checkout-delivery-pin{transition:none}
  .checkout-delivery-sheet-mapbox.is-moving .checkout-delivery-pin{transform:translate(-50%,-100%)}
}
/* The bubble above the pin names the building under it, greyed while it
   searches or knows none. */
.checkout-delivery-bubble{position:absolute;z-index:2;top:calc(50% - 54px);left:50%;max-width:min(18rem,calc(100% - 2rem));padding:.45rem .85rem;border-radius:999px;background:#1f1d1a;color:#fff;font-size:.875rem;font-weight:700;line-height:1.3;text-align:center;transform:translate(-50%,-100%);pointer-events:none}
.checkout-delivery-bubble::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:inherit;transform:translateX(-50%) rotate(45deg)}
.checkout-delivery-bubble:empty{display:none}
.checkout-delivery-sheet-mapbox.is-moving .checkout-delivery-bubble,.checkout-delivery-sheet-mapbox.is-unknown .checkout-delivery-bubble{background:#57534e}
.checkout-delivery-sheet-reset{position:absolute;z-index:2;top:.75rem;right:.75rem;display:grid;place-items:center;width:2.75rem;height:2.75rem;margin:0;padding:0;border:0;border-radius:50%;background:#fff;color:var(--ord-ink);box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer}
.checkout-delivery-sheet-reset:focus-visible{outline:2px solid var(--ord-ink);outline-offset:2px}
.checkout-delivery-sheet .leaflet-control-zoom a{width:2.75rem;height:2.75rem;line-height:2.75rem;font-size:1.25rem}
.checkout-delivery-sheet-card{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;padding:.85rem 1rem .5rem;border-top:1px solid var(--ord-rule)}
.checkout-delivery-sheet-card > *{margin:0}
.checkout-delivery-sheet-title{font-weight:800;line-height:1.3}
.checkout-delivery-sheet-text{font-size:.9375rem;line-height:1.45}
.checkout-delivery-sheet-notice{font-size:.875rem;font-weight:700;line-height:1.4}
.checkout-delivery-sheet-notice:empty{display:none}
.checkout-delivery-sheet-confirm{margin:.25rem 1rem calc(.85rem + env(safe-area-inset-bottom))}
.checkout-delivery-sheet-confirm:disabled{opacity:.5;cursor:not-allowed}
.checkout-delivery-credit{margin:.35rem 0 0;font-size:.75rem;line-height:1.4;color:var(--ord-ink-muted)}
.checkout-delivery-credit a{color:inherit}
/* The faint edge of the area and the restaurant: Leaflet's own circle path
   and div icon, painted here. */
.checkout-delivery-ring{stroke:var(--ord-ink);stroke-width:1.5;stroke-opacity:.45;stroke-dasharray:6 6;fill:var(--c-primary);fill-opacity:.05}
.checkout-delivery-shop{border-radius:50%;background:var(--ord-ink);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}

/* In or out of the area, in words first; the colour repeats them (#166534
   and #991b1b clear 7:1 on white). Empty live regions take no room. */
.checkout-delivery-notes{display:flex;flex-direction:column;align-items:flex-start}
.checkout-delivery-notes > *{margin:0}
.checkout-delivery-notes > * + :not(:empty){margin-top:.5rem}
.checkout-delivery-area{font-size:.9375rem;font-weight:700;line-height:1.4}
.checkout-delivery-area.is-in{color:#166534}
.checkout-delivery-area.is-out{color:#991b1b}
/* Why the button cannot be pressed yet, directly above it. */
.checkout-delivery-hold{margin:0}