/* 2026-05-22 — every selector wrapped with `.flow-modal-backdrop` parent
   AND key declarations marked `!important` to defeat page-level CSS that
   pages including this partial may already have. The storeLocator page,
   for example, sets a global black background on `<button>` elements
   which was bleeding into the calendar tiles and the modal-foot buttons.
   This partial owns the modal look — nothing the host page styles
   should be able to override it. */
:root {
    --brand-red:   #C00A27;
    --brand-red-2: #E31837;
}
/* 2026-06-02 — Google Places suggestions dropdown (.pac-container) is
   appended to <body> with a default z-index of ~1000, but the order modal
   sits at z-index 9000, so the suggestions rendered BEHIND the modal and
   looked like the autocomplete "wasn't working" (it WAS attached — the list
   was just hidden). Lift it above the modal. NOT scoped to the modal because
   Google injects .pac-container at the document-body level. */
.pac-container { z-index: 2147483647 !important; }
.pac-container, .pac-item, .pac-item-query { font-family: inherit; }
/* 2026-06-03 — readability: Google's default .pac-item is a single
   nowrap line that truncates long results with an ellipsis (e.g.
   "Five Towns Inn Rockaway Turnpike, Lawrence, NY, U…"). Let each row
   WRAP to a second line so the full business name + address are always
   readable, instead of widening the dropdown past the modal/screen edge.
   Comfortable padding also gives 44px-ish touch targets for mobile/PWA. */
.pac-item {
    white-space: normal !important;
    line-height: 1.35 !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    border-color: rgba(0,0,0,0.06) !important;
}
.pac-item-query { font-size: 14px !important; }
.pac-item:hover, .pac-item-selected { background: #f5f5f7 !important; }
/* 2026-06-03 — lock background scroll while any flow modal is open, so
   the page behind the modal can't scroll (and neither can it scroll while
   the address-suggestions dropdown is open). The modal backdrop itself
   scrolls if its content is taller than the viewport. JS toggles
   .ofm-scroll-lock on <html>/<body> based on backdrop .open state. */
html.ofm-scroll-lock, body.ofm-scroll-lock { overflow: hidden !important; }
.flow-modal-backdrop { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,0.60) !important; backdrop-filter: blur(4px); z-index: 9000 !important; display: none; align-items: center !important; justify-content: center !important; padding: 20px !important; animation: ofm-fade-in 0.2s ease; overflow-y: auto !important; }
.flow-modal-backdrop.open { display: flex !important; }
@keyframes ofm-fade-in { from { opacity: 0; } to { opacity: 1; } }
.flow-modal-backdrop .flow-modal { background: #1B1B1F !important; color: rgba(255,255,255,0.92) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 18px !important; max-width: 480px !important; width: 100% !important; box-shadow: 0 24px 60px rgba(0,0,0,0.55) !important; overflow: hidden !important; animation: ofm-pop-in 0.25s ease; max-height: 90vh !important; display: flex !important; flex-direction: column !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
@keyframes ofm-pop-in { from { transform: translateY(20px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.flow-modal-backdrop .flow-modal .modal-head { padding: 22px 26px 14px !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; background: transparent !important; }
.flow-modal-backdrop .flow-modal .modal-head .step { color: rgba(255,255,255,0.50) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; display: inline-block !important; }
.flow-modal-backdrop .flow-modal .modal-head h3 { font-family: 'Inter', sans-serif !important; font-size: 20px !important; font-weight: 700 !important; margin: 4px 0 4px !important; letter-spacing: -0.015em !important; color: #fff !important; }
.flow-modal .modal-recap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.flow-modal-backdrop .flow-modal .modal-recap { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 10px !important; }
.flow-modal-backdrop .flow-modal .vendor-pill { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 4px 12px !important; border-radius: 100px !important; font-size: 12px !important; font-weight: 700 !important; background: rgba(227,24,55,0.18) !important; color: #FF6B7B !important; border: 1px solid rgba(227,24,55,0.30) !important; text-shadow: none !important; box-shadow: none !important; }
.flow-modal-backdrop .flow-modal .vendor-pill::before { content: "" !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: currentColor !important; }
.flow-modal-backdrop .flow-modal .recap-pill { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 4px 12px !important; border-radius: 100px !important; font-size: 12px !important; font-weight: 700 !important; background: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.78) !important; border: 1px solid rgba(255,255,255,0.10) !important; }
.flow-modal-backdrop .flow-modal .recap-pill .recap-icon { width: 13px !important; height: 13px !important; stroke: currentColor !important; fill: none !important; stroke-width: 2 !important; }
.flow-modal-backdrop .flow-modal .modal-body { padding: 20px 26px 8px !important; overflow-y: auto !important; flex: 1 !important; background: transparent !important; }
.flow-modal-backdrop .flow-modal .modal-foot { padding: 14px 26px 20px !important; display: flex !important; gap: 8px !important; justify-content: flex-end !important; border-top: 1px solid rgba(255,255,255,0.08) !important; background: transparent !important; }
/* 2026-06-01 — Compact "Switch" link sits inline next to the vendor
   pill in the modal head. Quiet pill style — neutral grey background,
   small font, switch icon — so it reads as a secondary control next
   to the louder red vendor chip. Hidden via .hidden when there's no
   real vendor to switch from (find-near-me mode, first-time visitor). */
.flow-modal-backdrop .flow-modal .modal-switch-link { display: inline-flex !important; align-items: center !important; gap: 5px !important; margin-left: auto !important; padding: 5px 12px !important; border-radius: 100px !important; font-size: 12px !important; font-weight: 700 !important; background: rgba(227,24,55,0.16) !important; color: #FF6B7B !important; border: 1px solid rgba(227,24,55,0.50) !important; cursor: pointer !important; line-height: 1.2 !important; font-family: inherit !important; transition: background 0.15s, color 0.15s, border-color 0.15s !important; text-shadow: none !important; box-shadow: none !important; white-space: nowrap !important; }
.flow-modal-backdrop .flow-modal .modal-switch-link:hover { background: rgba(227,24,55,0.30) !important; color: #fff !important; border-color: rgba(227,24,55,0.75) !important; }
.flow-modal-backdrop .flow-modal .modal-switch-link.hidden { display: none !important; }
.flow-modal-backdrop .flow-modal .modal-switch-link svg { stroke: currentColor !important; }
.flow-modal-backdrop .flow-modal .btn-back, .flow-modal-backdrop .flow-modal .btn-cancel { background: transparent !important; color: rgba(255,255,255,0.78) !important; border: 1px solid rgba(255,255,255,0.16) !important; padding: 10px 16px !important; border-radius: 9px !important; font-weight: 600 !important; font-size: 13px !important; cursor: pointer !important; font-family: inherit !important; transition: 0.15s !important; box-shadow: none !important; text-shadow: none !important; }
.flow-modal-backdrop .flow-modal .btn-back:hover, .flow-modal-backdrop .flow-modal .btn-cancel:hover { border-color: rgba(255,255,255,0.36) !important; color: #fff !important; background: rgba(255,255,255,0.04) !important; }
.flow-modal-backdrop .flow-modal .btn-primary { background: linear-gradient(135deg, var(--brand-red), var(--brand-red-2)) !important; color: #fff !important; border: none !important; padding: 10px 20px !important; border-radius: 9px !important; font-weight: 700 !important; font-size: 13.5px !important; cursor: pointer !important; box-shadow: 0 4px 14px rgba(227,24,55,0.40) !important; font-family: inherit !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; transition: 0.15s !important; text-shadow: none !important; }
.flow-modal-backdrop .flow-modal .btn-primary:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(227,24,55,0.55) !important; }
.flow-modal-backdrop .flow-choices { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 6px !important; }
.flow-modal-backdrop .flow-choices input[type="radio"] { display: none !important; }
.flow-modal-backdrop .flow-choices label { border: 1.5px solid rgba(255,255,255,0.10) !important; background: rgba(255,255,255,0.04) !important; border-radius: 12px !important; padding: 16px 14px !important; cursor: pointer !important; text-align: center !important; transition: 0.18s !important; display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; }
.flow-modal-backdrop .flow-choices label svg { width: 26px !important; height: 26px !important; stroke: rgba(255,255,255,0.55) !important; fill: none !important; stroke-width: 2 !important; transition: 0.18s !important; }
.flow-modal-backdrop .flow-choices label .name { font-weight: 700 !important; font-size: 14px !important; color: rgba(255,255,255,0.92) !important; }
.flow-modal-backdrop .flow-choices label .desc { font-size: 11.5px !important; color: rgba(255,255,255,0.50) !important; line-height: 1.4 !important; }
.flow-modal-backdrop .flow-choices label:hover { border-color: rgba(255,255,255,0.20) !important; background: rgba(255,255,255,0.06) !important; }
.flow-modal-backdrop .flow-choices input[type="radio"]:checked + label { border-color: var(--brand-red-2) !important; background: rgba(227,24,55,0.10) !important; transform: translateY(-1px) !important; }
.flow-modal-backdrop .flow-choices input[type="radio"]:checked + label svg { stroke: var(--brand-red-2) !important; }
.flow-modal-backdrop .flow-choices input[type="radio"]:checked + label .name { color: #fff !important; }
.flow-modal-backdrop .flow-choices input[type="radio"]:checked + label .desc { color: rgba(255,255,255,0.72) !important; }
.flow-modal-backdrop .flow-choices label.disabled,
.flow-modal-backdrop .flow-choices input:disabled + label { opacity: 0.45 !important; cursor: not-allowed !important; pointer-events: none !important; }
@media (max-width: 540px) {
    .flow-choices { gap: 8px; }
    .flow-choices label { padding: 12px 10px; min-height: 100px; }
}
.flow-conditional { margin-top: 14px; }
.flow-conditional.hidden { display: none; }
.flow-field-label { display: block; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
/* 2026-06-03 — Address field redesign: ONE full-width input with the Locate
   / Change controls merged INSIDE it (absolute, right edge). Making the input
   span the full modal width means Google's suggestion dropdown (.pac-container
   is sized to the input) is full-width too. Bigger padding/height = a more
   prominent field; 16px font also stops iOS Safari's auto-zoom on focus. */
.flow-address-row { position: relative; display: block; }
/* Full-width input with a location pin tucked in on the LEFT and the Locate
   control merged in on the RIGHT. Generous left/right padding leaves room for
   both so typed text never collides with either icon. */
/* !important on padding so a global page input rule can't override the
   left/right room reserved for the pin + locate icon (was letting the
   placeholder slide under the left pin). */
.flow-address-row input { width: 100%; padding: 18px 58px 18px 48px !important; border: 1.5px solid rgba(255,255,255,0.16); border-radius: 12px; font-family: inherit; font-size: 16px; background: rgba(255,255,255,0.05); color: #fff; color-scheme: dark; }
.flow-address-row input:focus { outline: none; border-color: var(--brand-red-2); background: rgba(255,255,255,0.07); box-shadow: 0 0 0 3px rgba(227,24,55,0.18); }
/* Left address pin — decorative; tints red when the field is focused. Placed
   AFTER the input in the DOM so the `input:focus ~ .ft-addr-pin` sibling
   selector can recolor it. */
.flow-address-row .ft-addr-pin { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: inline-flex; color: rgba(255,255,255,0.40); pointer-events: none; transition: color .15s; }
.flow-address-row input:focus ~ .ft-addr-pin { color: var(--brand-red-2); }
.flow-address-row .ft-locate-label { display: none !important; }
/* Locate = ghost icon button inside the field's right edge. Subtle vertical
   divider (::before) separates it from the typed text; soft hover highlight.
   ID + !important beats storeLocator's global black-button rule. */
#ft-locate-me { position: absolute !important; top: 50% !important; right: 7px !important; transform: translateY(-50%) !important; width: 40px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; color: rgba(255,255,255,0.78) !important; cursor: pointer !important; z-index: 2 !important; box-shadow: none !important; text-shadow: none !important; transition: color .15s, background .15s !important; }
#ft-locate-me::before { content: ""; position: absolute; left: -9px; top: 9px; bottom: 9px; width: 1px; background: rgba(255,255,255,0.14); }
#ft-locate-me:hover { color: #fff !important; background: rgba(255,255,255,0.09) !important; }
#ft-locate-me svg { width: 20px !important; height: 20px !important; }
.flow-locate-btn { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.85); border: 1.5px solid rgba(255,255,255,0.12); padding: 0 14px; border-radius: 10px; font-weight: 600; font-size: 12.5px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: 0.15s; }
.flow-locate-btn:hover { border-color: rgba(255,255,255,0.30); background: rgba(255,255,255,0.08); }
.flow-locate-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.flow-hint { margin: 8px 0 0; font-size: 11.5px; color: rgba(255,255,255,0.50); line-height: 1.4; }
.flow-hint.error { color: #FF8A95; }
.flow-hint.success { color: #6FD681; }
.flow-pickup-box { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; }
.flow-pickup-box .pin { width: 18px; height: 18px; stroke: var(--brand-red-2); fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 2px; }
.flow-pickup-box .pickup-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.50); font-weight: 700; margin-bottom: 2px; }
.flow-pickup-box .pickup-store { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; }
.flow-pickup-box .pickup-addr { font-size: 12.5px; color: rgba(255,255,255,0.65); margin-top: 3px; line-height: 1.4; }
.flow-asap-note { margin: 10px 0 0; font-size: 12px; background: rgba(37,168,69,0.10); border: 1px solid rgba(37,168,69,0.25); padding: 9px 12px; border-radius: 9px; color: #6FD681; line-height: 1.45; }
.flow-asap-note.hidden { display: none; }
.flow-closed-notice { margin: 0 0 12px; padding: 10px 12px; border-radius: 9px; background: rgba(255,184,51,0.12); border: 1px solid rgba(255,184,51,0.35); color: #FFC15A; font-size: 12.5px; line-height: 1.5; }
.flow-closed-notice.hidden { display: none; }
.schedule-fields { margin-top: 14px; padding: 14px; background: rgba(0,0,0,0.25); border-radius: 10px; border: 1px solid rgba(255,255,255,0.06); }
.schedule-fields.hidden { display: none; }
.schedule-fields .label-row { display: block; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.schedule-fields .label-row:not(:first-child) { margin-top: 14px; }
.cal-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 10px; }
.cal-header .month-label { font-size: 14px; font-weight: 700; color: #fff; }
.cal-header button { width: 32px; height: 32px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); border-radius: 8px; cursor: pointer; display: grid; place-items: center; transition: 0.15s; font-family: inherit; }
.cal-header button:hover:not(:disabled) { border-color: rgba(255,255,255,0.30); background: rgba(255,255,255,0.08); }
.cal-header button:disabled { opacity: 0.35; cursor: not-allowed; }
.cal-header button svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.cal-weekdays div { text-align: center; font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 0; }
.flow-modal-backdrop .cal-grid { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 2px !important; }
.flow-modal-backdrop .cal-grid button { height: 34px !important; background: transparent !important; border: 1.5px solid transparent !important; color: rgba(255,255,255,0.85) !important; border-radius: 7px !important; cursor: pointer !important; font-family: inherit !important; font-size: 12.5px !important; font-weight: 500 !important; transition: 0.15s !important; display: grid !important; place-items: center !important; padding: 0 !important; box-shadow: none !important; text-shadow: none !important; }
.flow-modal-backdrop .cal-grid button:hover:not(:disabled):not(.empty) { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.18) !important; }
.flow-modal-backdrop .cal-grid button.empty { visibility: hidden !important; cursor: default !important; }
.flow-modal-backdrop .cal-grid button:disabled { opacity: 0.25 !important; cursor: not-allowed !important; }
.flow-modal-backdrop .cal-grid button.today { color: var(--brand-red-2) !important; font-weight: 700 !important; }
.flow-modal-backdrop .cal-grid button.active { background: linear-gradient(135deg, var(--brand-red), var(--brand-red-2)) !important; color: #fff !important; border-color: var(--brand-red-2) !important; font-weight: 700 !important; box-shadow: 0 4px 14px rgba(227,24,55,0.35) !important; }
.flow-modal-backdrop .cal-header button { width: 32px !important; height: 32px !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.85) !important; border-radius: 8px !important; cursor: pointer !important; display: grid !important; place-items: center !important; transition: 0.15s !important; font-family: inherit !important; padding: 0 !important; }
.flow-modal-backdrop .cal-header button:hover:not(:disabled) { border-color: rgba(255,255,255,0.30) !important; background: rgba(255,255,255,0.08) !important; }
.flow-modal-backdrop .cal-header button:disabled { opacity: 0.35 !important; cursor: not-allowed !important; }
.time-picker { display: flex; align-items: flex-end; justify-content: center; gap: 8px; flex-wrap: wrap; }
.time-picker .time-stepper-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.time-picker .time-stepper-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.time-picker .time-stepper { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.12); border-radius: 9px; padding: 2px; }
.time-picker .time-stepper input { width: 48px; background: transparent; border: none; color: #fff; font-family: inherit; font-size: 18px; font-weight: 700; text-align: center; padding: 8px 0; -moz-appearance: textfield; }
.time-picker .time-stepper input::-webkit-outer-spin-button,
.time-picker .time-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.time-picker .time-stepper input:focus { outline: none; }
.time-picker .time-stepper:focus-within { border-color: var(--brand-red-2); box-shadow: 0 0 0 3px rgba(227,24,55,0.18); }
.time-picker .stepper-btn { width: 22px; height: 36px; background: transparent; border: none; color: rgba(255,255,255,0.55); cursor: pointer; font-family: inherit; font-size: 14px; border-radius: 6px; display: grid; place-items: center; transition: 0.15s; }
.time-picker .stepper-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.time-picker .time-colon { font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.55); margin: 0 -4px; }
.time-picker .ampm-toggle { display: flex; background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.12); border-radius: 9px; padding: 2px; }
.time-picker .ampm-toggle button { background: transparent; border: none; color: rgba(255,255,255,0.65); padding: 6px 12px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border-radius: 7px; transition: 0.15s; letter-spacing: 0.04em; }
.time-picker .ampm-toggle button.active { background: linear-gradient(135deg, var(--brand-red), var(--brand-red-2)); color: #fff; }
.time-picker .time-error { font-size: 11.5px; color: #FF8A95; margin-top: 4px; width: 100%; display: none; }
.time-picker .time-error.show { display: block; }

/* 2026-05-31 v2 — Date button + calendar popup + free hour/min dropdowns.
   Designed so the calendar feels secondary (only when needed) and the
   time picker gives full hour + minute freedom inside the open window. */
.flow-modal-backdrop .date-button-wrap { position: relative !important; margin-bottom: 12px !important; }
.flow-modal-backdrop .date-button {
    display: inline-flex !important; align-items: center !important; gap: 10px !important;
    padding: 11px 14px !important;
    background: rgba(255,255,255,0.04) !important;
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,0.14) !important;
    border-radius: 12px !important;
    font-family: inherit !important; font-size: 14.5px !important; font-weight: 600 !important;
    cursor: pointer !important;
    width: 100% !important;
    text-align: left !important;
    transition: 0.15s !important;
    box-shadow: none !important; text-shadow: none !important;
    line-height: 1.3 !important;
}
.flow-modal-backdrop .date-button:hover { border-color: rgba(255,255,255,0.32) !important; background: rgba(255,255,255,0.08) !important; }
.flow-modal-backdrop .date-button[aria-expanded="true"] { border-color: var(--brand-red-2) !important; background: rgba(227,24,55,0.08) !important; }
.flow-modal-backdrop .date-button svg { stroke: currentColor !important; fill: none !important; flex-shrink: 0 !important; }
.flow-modal-backdrop .date-button .date-button-label { flex: 1 !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.flow-modal-backdrop .date-button .caret { transition: transform 0.18s ease !important; opacity: 0.7 !important; }
.flow-modal-backdrop .date-button[aria-expanded="true"] .caret { transform: rotate(180deg) !important; }

/* 2026-05-31 v3 — Calendar popup expands INLINE (relative-positioned)
   instead of absolute. Previous absolute version got clipped by the
   modal-body's overflow:auto and hid the time row beneath it. Inline
   layout makes the modal-body scrollHeight include the calendar so
   the customer can scroll naturally + the time row stays accessible
   below. */
.flow-modal-backdrop .calendar-popup {
    position: relative !important;
    margin: 6px 0 14px !important;
    background: #16161a !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.40) !important;
}
.flow-modal-backdrop .calendar-popup.hidden { display: none !important; }

/* Time row — three siblings: HOUR <select>, ":", MINUTE <select>. */
.flow-modal-backdrop .time-row { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 6px !important; }
.flow-modal-backdrop .time-select {
    flex: 1 !important; min-width: 0 !important;
    -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
    background: rgba(255,255,255,0.04) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center !important;
    background-size: 12px 12px !important;
    border: 1.5px solid rgba(255,255,255,0.14) !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-family: inherit !important; font-size: 15px !important; font-weight: 600 !important;
    padding: 11px 32px 11px 14px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    height: auto !important; min-height: 0 !important;
    box-shadow: none !important; text-shadow: none !important;
    line-height: 1.3 !important;
}
.flow-modal-backdrop .time-select:focus { outline: none !important; border-color: var(--brand-red-2) !important; box-shadow: 0 0 0 3px rgba(227,24,55,0.18) !important; }
.flow-modal-backdrop .time-select:disabled { opacity: 0.45 !important; cursor: not-allowed !important; }
.flow-modal-backdrop .time-select option { background: #1B1B1F !important; color: #fff !important; }
.flow-modal-backdrop .time-select option:disabled { color: rgba(255,255,255,0.35) !important; }
.flow-modal-backdrop .time-row .time-colon { color: rgba(255,255,255,0.55) !important; font-weight: 800 !important; font-size: 18px !important; }

.flow-modal-backdrop .time-hint { font-size: 12px !important; color: rgba(255,255,255,0.55) !important; line-height: 1.4 !important; margin-bottom: 6px !important; }
.flow-modal-backdrop .time-hint.error { color: #FF8A95 !important; }
.flow-modal-backdrop #timeError { font-size: 11.5px !important; color: #FF8A95 !important; margin-top: 4px !important; display: none !important; }
.flow-modal-backdrop #timeError.show { display: block !important; }

@media (max-width: 540px) {
    .flow-modal-backdrop .date-button { font-size: 14px !important; padding: 11px 12px !important; }
    .flow-modal-backdrop .time-select { font-size: 14px !important; padding: 11px 28px 11px 12px !important; }
    .flow-modal-backdrop .calendar-popup { padding: 12px !important; }
}

/* 2026-06-06 — In-modal store picker: uses the SAME .store-picker-grid / .spx
   markup + styling as the homepage's main picker so the modal is identical on
   every page (footer Order, nav, homepage). These rules are duplicated from
   home_v2 verbatim so off-homepage pages (which don't load home_v2) get the
   exact same look. */
.store-picker-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    /* default stretch → row-mates share a height, columns line up (no stagger) */
    /* 2026-08-08 — belt-and-braces: this grid is a FLEX ITEM inside .modal-body
       (flex column, min-height:0) so a short viewport can shrink it below its
       content height, compressing auto rows until the status line paints outside
       the tile. min-content rows can't be squeezed; the list scrolls instead. */
    grid-auto-rows: min-content;
    max-height: 360px; overflow-y: auto; padding-right: 6px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.store-picker-grid::-webkit-scrollbar { width: 6px; }
.store-picker-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 100px; }
.store-picker-grid input[type="radio"] { display: none; }
/* 2026-08-08 — BOXED TILE (mirrors home_v2). Fixed 3-zone grid
   (name · distance · status) so every card has the same internal shape.
   `overflow:hidden` removed — it was slicing status text at the card edge. */
/* 2026-08-08b — FLEX, not grid: a `1fr` row doesn't contribute its content
   height when the card's intrinsic height is measured, so the tile came out too
   short and the status line spilled past the border. */
.store-picker-grid label.spx {
    display: flex; flex-direction: column; gap: 5px; padding: 11px 12px;
    border: 1.5px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04);
    border-radius: 13px; cursor: pointer; transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
    min-height: 110px;
}
.store-picker-grid label.spx:hover { border-color: rgba(255,255,255,0.24); background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.store-picker-grid input[type="radio"]:checked + label.spx { border-color: var(--brand-red-2); background: rgba(227,24,55,0.12); box-shadow: 0 0 0 2px rgba(227,24,55,0.22), 0 6px 16px rgba(227,24,55,0.18); }
.store-picker-grid label.spx.out-of-range { opacity: 0.55; cursor: not-allowed; }
.store-picker-grid label.spx.out-of-range:hover { border-color: rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); }
.spx .spx-status.soon { background: rgba(245,158,11,0.16); color: #FCD34D; border: 1px solid rgba(245,158,11,0.35); }
.store-picker-grid label.spx.coming-soon { opacity: 0.72; cursor: not-allowed; }
/* Name zone reserves 2 lines so short and wrapping store names occupy the same
   height — that's what keeps distance + status aligned across every card. */
.spx .spx-top { display: flex; align-items: flex-start; gap: 8px; min-height: 2.5em; }
.spx .spx-top img { height: 24px; width: 24px; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; box-sizing: border-box; box-shadow: 0 1px 2px rgba(0,0,0,0.35); flex-shrink: 0; }
.spx .spx-top .store-name {
    font-size: 13.5px; font-weight: 700; color: #fff; line-height: 1.25; flex: 1; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.spx .spx-addr { font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,0.5); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Distance is the tile's key number — dropped the 📍 emoji (visual noise at this
   size; "0.4 mi away" is self-explanatory). */
.spx .spx-distance { font-size: 12.5px; font-weight: 800; color: #fff; display: flex; align-items: baseline; gap: 4px; letter-spacing: -0.01em; }
.spx .spx-distance .small { font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,0.45); }
/* margin-top:auto pushes the status block to the bottom of the tile → every
   card's pill sits on the same baseline regardless of what's above it. */
.spx .spx-statuses { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; margin-top: auto; padding-top: 6px; }
/* 2026-07-21 — inline-block (not inline-flex) so a long custom off-reason
   wraps INSIDE the card and the card auto-grows to fit it; inline-flex kept the
   text on one line, so it spilled past the card edge and got clipped. */
/* Rounded-rect (not a full pill) at 11px so "Delivery unavailable today" fits
   one line in the ~207px-wide tile instead of wrapping and inflating the card. */
.spx .spx-status { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.3; padding: 4px 8px; border-radius: 8px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.spx .spx-status.ok   { background: rgba(37,168,69,0.14); color: #6FD681; border: 1px solid rgba(37,168,69,0.30); }
.spx .spx-status.warn { background: rgba(192,10,39,0.14); color: #FFB7BD; border: 1px solid rgba(192,10,39,0.30); }
.spx .spx-status.info { background: transparent; color: #FFC15A; border: none; padding: 0; font-size: 11px; font-weight: 600; }
.spx .spx-status.info::before { content: "⏰"; width: auto; height: auto; margin-right: 4px; background: transparent; border-radius: 0; font-size: 10px; }
.spx .spx-status::before { content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.flow-no-stores { padding: 18px; background: rgba(192,10,39,0.10); border: 1px solid rgba(192,10,39,0.30); border-radius: 11px; color: #FFB7BD; font-size: 13px; line-height: 1.55; text-align: center; margin-top: 12px; }
.flow-no-stores.hidden { display: none; }
/* 2026-06-17 — When the store list is visible, ONLY the list scrolls (a single
   scrollbar). The modal body becomes a fixed flex column so it doesn't add a
   second, outer scrollbar. Scoped via :has() so it applies only on the picker
   step; every other step keeps its normal scrolling. Browsers without :has()
   gracefully fall back to the previous (two-scroll) behaviour. */
.flow-modal-backdrop .flow-modal:has(#panelStorePicker:not(.hidden)) .modal-body {
    overflow: hidden !important; display: flex !important; flex-direction: column !important; min-height: 0 !important;
}
.flow-modal-backdrop .flow-modal:has(#panelStorePicker:not(.hidden)) #panelStorePicker {
    flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important;
}
.flow-modal-backdrop .flow-modal:has(#panelStorePicker:not(.hidden)) #storePickerGrid {
    flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important;
}
.ofm-picker-back { background: transparent; border: 0; color: rgba(255,255,255,0.7); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; padding: 0 0 10px; display: inline-flex; align-items: center; gap: 6px; }
.ofm-picker-back:hover { color: #fff; }
@media (max-width: 540px) {
    .store-picker-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
    .store-picker-grid label.spx { padding: 10px; gap: 4px; min-height: 102px; }
    .spx .spx-top { gap: 6px; }
    .spx .spx-top img { height: 21px; width: 21px; }
    .spx .spx-top .store-name { font-size: 12.5px; }
    .spx .spx-addr { font-size: 11px; }
    .spx .spx-status { font-size: 10.5px; padding: 3px 7px; }
}
/* 2026-06-17 — Mobile: give the modal more of the screen, tighten paddings so
   the store list has room, and keep tap targets comfortable. */
@media (max-width: 540px) {
    .flow-modal-backdrop { padding: 12px !important; align-items: center !important; }
    .flow-modal-backdrop .flow-modal { max-height: 92vh !important; border-radius: 16px !important; }
    .flow-modal-backdrop .flow-modal .modal-head { padding: 16px 18px 12px !important; }
    .flow-modal-backdrop .flow-modal .modal-head h3 { font-size: 18px !important; }
    .flow-modal-backdrop .flow-modal .modal-body { padding: 16px 18px 8px !important; }
    .flow-modal-backdrop .flow-modal .modal-foot { padding: 12px 18px 16px !important; }
    .flow-modal-backdrop .flow-choices label { padding: 13px 10px !important; }
    .flow-modal-backdrop .flow-modal .btn-primary,
    .flow-modal-backdrop .flow-modal .btn-cancel { padding: 12px 18px !important; }
}
@media (max-width: 380px) {
    .store-picker-grid { grid-template-columns: 1fr !important; }
}