/*!
 * Golden Plumbing — Native Booking Widget (gp-book.css)
 * Namespaced .gpbk- everywhere. Resets inherited host styles on the overlay
 * root so WordPress/Elementor theme CSS can't bleed in.
 *
 * Isolation note: `background`, `border`/`border-color`/`border-radius`,
 * `box-shadow`, `color`, `outline`, `text-decoration`, `list-style`,
 * `appearance` and `cursor` are all marked `!important` throughout this
 * file — including in the reset. Real-world WP/Elementor themes commonly
 * style bare tag selectors (`button`, `input`, `a`) with `!important`
 * (e.g. a global "Button" style), which would otherwise beat our normal-
 * specificity component rules regardless of source order. Every other
 * property (layout, spacing, typography sizing, position, transforms,
 * transitions) relies on the plain (0,1,0)-specificity + source-order
 * trick and does not need `!important`.
 */

/* ===== Reset — neutralize inherited host-page styles on everything we own.
   Must be the FIRST rule in the file. */
.gpbk-overlay,
.gpbk-overlay *,
.gpbk-overlay *::before,
.gpbk-overlay *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 !important;
  outline: 0 !important;
  background: none !important;
  font: inherit;
  color: inherit !important;
  line-height: inherit;
  text-align: left;
  text-decoration: none !important;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  list-style: none !important;
  vertical-align: baseline;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  float: none;
  cursor: default !important;
  min-width: 0;
  max-width: none;
  width: auto;
  height: auto;
  content: normal;
}

html.gpbk-scroll-lock,
html.gpbk-scroll-lock body {
  overflow: hidden !important;
}

/* ===== Overlay + modal shell ===== */

.gpbk-overlay {
  --gpbk-plum: #2d1b3d;
  --gpbk-gold: #F5A623;
  --gpbk-gold-dark: #E8940F;
  --gpbk-cream: #FAF3E3;
  --gpbk-ink: #1e1428;
  --gpbk-red: #D64541;
  --gpbk-muted: #8a8391;
  --gpbk-hairline: #eeecf1;
  --gpbk-surface: #FAF8F2;
  --gpbk-border: rgba(45, 27, 61, .12);
  --gpbk-border-soft: rgba(45, 27, 61, .08);
  /* Display font (headlines, tile/button/chip labels) matches Ask Goldie's
     heading font exactly -- gp-booking.php enqueues the same Google Fonts
     weights (700/800/900) Ask Goldie loads. Body copy uses the system stack
     only: Montserrat only ships those heavy weights, so keeping it out of
     the BASE stack here stops the browser's font-matching from rendering
     regular-weight text (subtext, inputs, chip labels) artificially bold. */
  --gpbk-font-display: 'Montserrat', sans-serif;

  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(23, 17, 31, .55) !important;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--gpbk-ink) !important;
  -webkit-font-smoothing: antialiased;
  padding: 0;
}
.gpbk-overlay[hidden] { display: none !important; }

.gpbk-overlay *:focus-visible {
  outline: 3px solid var(--gpbk-gold) !important;
  outline-offset: 2px;
}

/* AC-1: root cause of the "orange box" -- focusHeading() calls .focus() on
   these tabindex="-1" headings after every render for a11y (screen readers
   need the move announced); the browser then paints a ring around a heading
   nobody tabbed to (some engines via :focus-visible, others via plain
   :focus -- both are covered here). Keep the programmatic focus (it's still
   `document.activeElement`, screen readers still announce it), suppress
   only the visible ring. Safe for a11y specifically because these three are
   tabindex="-1" -- never reachable by Tab -- so no keyboard user can ever
   land here and lose their ring. */
.gpbk-headline:focus,
.gpbk-headline:focus-visible,
.gpbk-success-title:focus,
.gpbk-success-title:focus-visible,
.gpbk-failure-title:focus,
.gpbk-failure-title:focus-visible {
  outline: none !important;
}

.gpbk-modal {
  background: #fff !important;
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.gpbk-modal--busy .gpbk-content,
.gpbk-modal--busy .gpbk-back {
  pointer-events: none;
}

@media (min-width: 768px) {
  .gpbk-overlay { padding: 24px; }
  .gpbk-modal {
    width: 480px;
    max-width: 100%;
    height: auto;
    max-height: min(760px, 90vh);
    border-radius: 28px !important;
    box-shadow: 0 45px 90px -25px rgba(23, 17, 31, .5), 0 18px 34px rgba(23, 17, 31, .28) !important;
  }
}

/* ===== Shared: pressed-state affordance on every tappable control ===== */

.gpbk-tile, .gpbk-chip, .gpbk-day-chip, .gpbk-subchip,
.gpbk-btn-gold, .gpbk-btn-outline-gold, .gpbk-btn-tel-giant,
.gpbk-close, .gpbk-back, .gpbk-video-frame {
  transition: transform 100ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
}
.gpbk-tile:active:not(:disabled),
.gpbk-chip:active:not(:disabled),
.gpbk-day-chip:active:not(:disabled),
.gpbk-subchip:active:not(:disabled),
.gpbk-btn-gold:active:not(:disabled),
.gpbk-btn-outline-gold:active,
.gpbk-btn-tel-giant:active,
.gpbk-close:active:not(:disabled),
.gpbk-back:active:not(:disabled),
.gpbk-video-frame:active {
  transform: scale(.97);
}

/* ===== Top bar + close ===== */

.gpbk-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--gpbk-plum) !important;
  padding: 18px 56px 16px;
  flex: 0 0 auto;
}
.gpbk-logo { display: block; height: 26px; width: auto; }

.gpbk-close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  color: #fff !important;
  font-size: 16px;
  cursor: pointer !important;
}
.gpbk-close:hover { background: rgba(255, 255, 255, .12) !important; }
.gpbk-close--onlight {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--gpbk-ink) !important;
  z-index: 20;
}
.gpbk-close--onlight:hover { background: rgba(30, 20, 40, .06) !important; }
.gpbk-close:disabled { opacity: .4; cursor: not-allowed !important; }

/* ===== Progress dots ===== */

.gpbk-progress {
  background: #fff !important;
  padding: 16px 24px 12px;
  border-bottom: 1px solid var(--gpbk-hairline) !important;
  flex: 0 0 auto;
}
.gpbk-dots { display: flex; align-items: center; justify-content: center; }
.gpbk-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50% !important;
  background: var(--gpbk-border-soft) !important;
  flex: 0 0 auto;
}
.gpbk-dot--done { background: var(--gpbk-plum) !important; }
.gpbk-dot--active {
  width: 13px;
  height: 13px;
  background: var(--gpbk-gold) !important;
  box-shadow: 0 0 0 4px rgba(245, 166, 35, .22) !important;
}
.gpbk-dot-line { display: block; flex: 1 1 auto; max-width: 64px; height: 2px; background: var(--gpbk-border-soft) !important; margin: 0 8px; }
.gpbk-dot-line--done { background: var(--gpbk-plum) !important; }
.gpbk-steplabels { display: flex; justify-content: center; margin-top: 8px; }
.gpbk-steplabel {
  display: block;
  width: 84px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #b0a9b8 !important;
  letter-spacing: .2px;
}
.gpbk-steplabel--on { color: var(--gpbk-plum) !important; }

/* ===== Back link ===== */

.gpbk-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  min-height: 44px;
  padding: 8px 24px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--gpbk-plum) !important;
  cursor: pointer !important;
  flex: 0 0 auto;
}
.gpbk-back-arrow { font-size: 15px; }
.gpbk-back:disabled { opacity: .4; cursor: not-allowed !important; }

/* ===== Content area ===== */

.gpbk-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.gpbk-content--noback { padding-top: 24px; }

/* Raised specificity + !important on typography (Fable grading round 2): the
   theme's Elementor kit ships its own h2/h3 typography rules that out-specify
   a bare single-class selector -- confirmed live (computed style fell back to
   the theme's Open Sans 400). Same hardening this file already applies
   everywhere else (every color/background/border rule in the reset carries
   !important for exactly this reason) -- font-family/weight/size/line-height
   just hadn't needed it here until now. */
.gpbk-overlay .gpbk-headline {
  display: block;
  font-family: var(--gpbk-font-display) !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  line-height: 1.18 !important;
  color: var(--gpbk-ink) !important;
  margin: 0 0 8px;
}
.gpbk-subtext {
  display: block;
  font-size: 13.5px;
  color: var(--gpbk-muted) !important;
  line-height: 1.45;
  margin: 0 0 24px;
  max-width: 320px;
}
.gpbk-spacer { flex: 1 1 auto; }
.gpbk-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===== Step 1: issue tiles ===== */

.gpbk-tiles-wrap { position: relative; }
.gpbk-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.gpbk-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  min-height: 148px;
  padding: 16px 8px;
  background: #fff !important;
  border: 1px solid var(--gpbk-border-soft) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 18px rgba(30, 20, 40, .06) !important;
  cursor: pointer !important;
  position: relative;
}
.gpbk-tile:hover { box-shadow: 0 10px 22px rgba(30, 20, 40, .1) !important; }
.gpbk-tile--emergency { border: 2px solid var(--gpbk-red) !important; }
.gpbk-tile--emergency .gpbk-tile-title { color: var(--gpbk-red) !important; }
.gpbk-tile--emergency .gpbk-tile-icon { color: var(--gpbk-red) !important; }
.gpbk-tile--selected {
  border: 2.5px solid var(--gpbk-gold) !important;
  background: linear-gradient(180deg, #fff, var(--gpbk-cream)) !important;
  box-shadow: 0 18px 36px rgba(45, 27, 61, .16), 0 4px 10px rgba(45, 27, 61, .08) !important;
}
.gpbk-tile--selected.gpbk-tile--emergency { border-color: var(--gpbk-red) !important; }
.gpbk-tile-icon { display: flex; align-items: center; justify-content: center; color: var(--gpbk-plum) !important; }
.gpbk-tile-title { display: block; font-family: var(--gpbk-font-display); font-weight: 700; font-size: 15px; color: var(--gpbk-ink) !important; }
.gpbk-tile-desc { display: block; font-size: 11px; color: var(--gpbk-muted) !important; line-height: 1.3; padding: 0 4px; }

.gpbk-goldie-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.gpbk-goldie-peek {
  display: block;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  pointer-events: none;
}
.gpbk-goldie-peek img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .22)); }
.gpbk-speech {
  display: block;
  flex: 0 1 auto;
  background: var(--gpbk-cream) !important;
  color: var(--gpbk-ink) !important;
  font-size: 10px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 13px 13px 3px 13px !important;
  box-shadow: 0 6px 14px rgba(30, 20, 40, .12) !important;
  white-space: nowrap;
  pointer-events: none;
}

/* ===== Issue detail panel (expands after a tile is tapped) ===== */

.gpbk-detail-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 16px;
  transition: grid-template-rows 260ms ease, opacity 220ms ease;
}
.gpbk-detail-panel--open { grid-template-rows: 1fr; opacity: 1; }
.gpbk-detail-inner { overflow: hidden; min-height: 0; }

.gpbk-detail-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gpbk-muted) !important;
  margin: 0 0 8px;
}
.gpbk-subchips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.gpbk-subchip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 10px 12px;
  text-align: left;
  border-radius: 14px !important;
  border: 1.5px solid var(--gpbk-border) !important;
  background: var(--gpbk-surface) !important;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gpbk-ink) !important;
  cursor: pointer !important;
}
.gpbk-subchip--full { grid-column: 1 / -1; }
.gpbk-subchip-icon { color: var(--gpbk-gold-dark) !important; flex: none; }
.gpbk-subchip-label { min-width: 0; overflow-wrap: break-word; }
.gpbk-subchip--selected { background: var(--gpbk-plum) !important; color: #fff !important; border-color: var(--gpbk-plum) !important; box-shadow: 0 0 0 2px var(--gpbk-gold) !important; }
.gpbk-subchip--selected .gpbk-subchip-icon { color: #fff !important; }

.gpbk-gas-strip-slot:empty { display: none; }
.gpbk-gas-strip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(214, 69, 65, .08) !important;
  border-left: 3px solid var(--gpbk-red) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gpbk-ink) !important;
  line-height: 1.45;
  margin-bottom: 16px;
}
.gpbk-gas-icon { color: var(--gpbk-red) !important; flex: none; margin-top: 1px; }
.gpbk-gas-strip a { color: var(--gpbk-red) !important; font-weight: 800; text-decoration: underline !important; }

.gpbk-continue-btn { margin-top: 8px; }

/* ===== Step 2: premium fields (floating labels) ===== */

.gpbk-field {
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
  background: var(--gpbk-surface) !important;
  border: 1px solid var(--gpbk-border) !important;
  border-radius: 14px !important;
  padding: 24px 16px 8px 44px;
  margin-bottom: 16px;
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
.gpbk-field:focus-within {
  border-color: var(--gpbk-gold) !important;
  box-shadow: 0 0 0 2px var(--gpbk-gold), 0 4px 14px rgba(45, 27, 61, .10) !important;
}
.gpbk-field--error { border-color: var(--gpbk-red) !important; box-shadow: 0 0 0 1.5px var(--gpbk-red) !important; }
.gpbk-field--error:focus-within { box-shadow: 0 0 0 2px var(--gpbk-red), 0 4px 14px rgba(45, 27, 61, .10) !important; }

.gpbk-field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: rgba(45, 27, 61, .55) !important;
  pointer-events: none;
}

.gpbk-field-input {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: 500;
  color: var(--gpbk-ink) !important;
  background: transparent !important;
}
.gpbk-field-input:disabled { opacity: .6; }
.gpbk-field-input:focus-visible { outline: none !important; }

.gpbk-field-label {
  position: absolute;
  left: 44px;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
  font-size: 16px;
  font-weight: 400;
  color: rgba(45, 27, 61, .5) !important;
  white-space: nowrap;
  pointer-events: none;
  transition: top 150ms ease, transform 150ms ease, font-size 150ms ease, color 150ms ease, font-weight 150ms ease;
}
.gpbk-field-input:focus ~ .gpbk-field-label,
.gpbk-field-input:not(:placeholder-shown) ~ .gpbk-field-label {
  top: 8px;
  transform: translateY(0);
  font-size: 11.5px;
  color: var(--gpbk-plum) !important;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.gpbk-field-error-text {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gpbk-red) !important;
  margin: -8px 0 16px 4px;
}
.gpbk-privacy { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--gpbk-muted) !important; text-align: center; margin: 8px 0 0; }
.gpbk-privacy-icon { flex: none; color: var(--gpbk-muted) !important; }

.gpbk-hp-wrap {
  position: absolute !important;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===== Address autocomplete ===== */

.gpbk-address-wrap { position: relative; }
.gpbk-address-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  background: #fff !important;
  border: 1px solid var(--gpbk-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 28px rgba(30, 20, 40, .16) !important;
  overflow: hidden;
  max-height: 240px;
  overflow-y: auto;
}
.gpbk-address-option {
  display: block;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gpbk-ink) !important;
  cursor: pointer !important;
  border-bottom: 1px solid var(--gpbk-hairline) !important;
}
.gpbk-address-option:last-child { border-bottom: 0 !important; }
.gpbk-address-option--active,
.gpbk-address-option:hover { background: var(--gpbk-surface) !important; }
.gpbk-address-attribution {
  display: block;
  padding: 6px 16px;
  font-size: 10px;
  color: var(--gpbk-muted) !important;
  background: var(--gpbk-surface) !important;
}

/* ===== Note textarea (issue detail panel) ===== */

.gpbk-textarea-wrap {
  position: relative;
  background: var(--gpbk-surface) !important;
  border: 1px solid var(--gpbk-border) !important;
  border-radius: 14px !important;
  /* 44px top (was 30px) — clearance for the floating label's COLLAPSED state
     to wrap to 2 lines (see .gpbk-field-label--textarea below) without the
     label's second line colliding with the textarea's own first line of
     typed content, which starts right after this padding. Longest label in
     production is the Details-step access-note field ("Anything else we
     should know? (gate code, dog, parking, best door)") -- verified via a
     local Playwright harness at 390px/375px (2026-07-27 overflow fix). */
  padding: 44px 16px 20px;
  margin-bottom: 16px;
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
.gpbk-textarea-wrap:focus-within {
  border-color: var(--gpbk-gold) !important;
  box-shadow: 0 0 0 2px var(--gpbk-gold), 0 4px 14px rgba(45, 27, 61, .10) !important;
}
.gpbk-textarea {
  display: block;
  width: 100%;
  min-height: 64px;
  resize: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--gpbk-ink) !important;
  background: transparent !important;
  font-family: 'Open Sans', sans-serif;
}
.gpbk-textarea:focus-visible { outline: none !important; }
/* 2026-07-27 fix (Spencer's live iPhone review, IMG_5298): the Details-step
   access-note label ("Anything else we should know? (gate code, dog,
   parking, best door)") ran off the right edge of the screen on a 390px
   iPhone -- root cause is .gpbk-field-label's base `white-space: nowrap`
   (it's the FLOATING LABEL standing in for a placeholder, not the
   textarea's actual `placeholder` attribute, which is always just " ") --
   nowrap plus the reset's `width: auto; max-width: none;` (line ~47) lets
   the label grow past the box with nothing to clip it until .gpbk-modal's
   own `overflow: hidden` cuts it off at the screen edge, not the box edge.
   Fixed at the PATTERN level (every textarea using this label variant),
   not just the access-note instance: a textarea has vertical room a
   single-line .gpbk-field input doesn't, so wrapping is the correct fix
   here specifically (the shorter Issue-step "Anything else we should
   know?" label already fit on one line and is unaffected -- confirmed via
   a local harness rendering both fields side by side). */
.gpbk-field-label--textarea {
  left: 16px;
  right: 16px;
  top: 24px;
  transform: none;
  white-space: normal;
  line-height: 1.3;
}
.gpbk-textarea:focus ~ .gpbk-field-label--textarea,
.gpbk-textarea:not(:placeholder-shown) ~ .gpbk-field-label--textarea {
  top: 8px;
  transform: none;
  font-size: 11.5px;
  color: var(--gpbk-plum) !important;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.gpbk-char-count {
  position: absolute;
  right: 14px;
  bottom: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--gpbk-muted) !important;
}

/* ===== Prompt fields — "Something else" required box (Issue step) +
   guided follow-up screen (repair/install/emergency-continue), 2026-07-25.
   Reuses .gpbk-field's box chrome (border/radius/focus ring) but with a
   STATIC caption label above instead of the floating-inside-the-input
   label .gpbk-field-label uses elsewhere: these fields need a real example
   placeholder ("It leaks when the washer runs"), which would visually
   collide with a floating label sharing the same vertical center when the
   field is empty. ===== */

.gpbk-prompt-field { margin-bottom: 16px; }
.gpbk-prompt-label {
  display: block;
  font-family: var(--gpbk-font-display);
  font-weight: 800;
  font-size: 13.5px;
  color: var(--gpbk-ink) !important;
  margin: 0 0 8px;
}
.gpbk-prompt-label--optional { font-weight: 700; color: var(--gpbk-muted) !important; }

/* No left-icon reserve, no floating label -- content sits centered like a
   normal single-line input, full field height/border/focus-ring kept. */
.gpbk-field--plain { padding: 0 16px; }

/* ===== Buttons ===== */

.gpbk-btn-gold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  border-radius: 16px !important;
  background: linear-gradient(180deg, var(--gpbk-gold), var(--gpbk-gold-dark)) !important;
  color: #fff !important;
  font-family: var(--gpbk-font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .3px;
  box-shadow: 0 12px 22px rgba(232, 148, 15, .32) !important;
  cursor: pointer !important;
  text-align: center;
}
.gpbk-btn-gold:disabled { opacity: .55; cursor: not-allowed !important; box-shadow: none !important; }
.gpbk-btn-gold:hover:not(:disabled) { filter: brightness(1.03); }
.gpbk-btn-tel { text-decoration: none !important; }

.gpbk-btn-outline-gold {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border-radius: 14px !important;
  border: 2px solid var(--gpbk-gold) !important;
  background: transparent !important;
  color: var(--gpbk-gold) !important;
  font-family: var(--gpbk-font-display);
  font-weight: 800;
  font-size: 14.5px;
  cursor: pointer !important;
  margin-top: 16px;
}
.gpbk-btn-outline-gold:hover { background: rgba(245, 166, 35, .08) !important; }

.gpbk-btn-tel-giant {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  border-radius: 18px !important;
  background: linear-gradient(180deg, var(--gpbk-gold), var(--gpbk-gold-dark)) !important;
  color: #fff !important;
  font-family: var(--gpbk-font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: .3px;
  box-shadow: 0 14px 26px rgba(232, 148, 15, .38) !important;
  cursor: pointer !important;
  margin: 16px 0 8px;
}

.gpbk-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, .45) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: gpbk-spin .7s linear infinite;
}
@keyframes gpbk-spin { to { transform: rotate(360deg); } }

/* ===== Step 3: day strip + time picker ===== */

.gpbk-day-strip-wrap { position: relative; margin: 0 0 16px; }
.gpbk-day-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 30px 10px 2px;
}
.gpbk-day-strip::-webkit-scrollbar { display: none; height: 0; }
.gpbk-day-strip-wrap::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 10px;
  width: 30px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 78%) !important;
  pointer-events: none;
}

.gpbk-day-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 0 0 auto;
  width: 62px;
  min-height: 58px;
  border-radius: 14px !important;
  border: 1.5px solid var(--gpbk-border) !important;
  background: var(--gpbk-surface) !important;
  cursor: pointer !important;
}
.gpbk-day-chip-top {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gpbk-muted) !important;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.gpbk-day-chip-num { display: block; font-family: var(--gpbk-font-display); font-weight: 800; font-size: 17px; color: var(--gpbk-ink) !important; }
.gpbk-day-chip--selected { background: var(--gpbk-plum) !important; border-color: var(--gpbk-plum) !important; box-shadow: 0 0 0 2px var(--gpbk-gold) !important; }
.gpbk-day-chip--selected .gpbk-day-chip-top,
.gpbk-day-chip--selected .gpbk-day-chip-num { color: #fff !important; }
.gpbk-day-chip:disabled { opacity: .5; cursor: not-allowed !important; }

.gpbk-selected-day-label {
  display: block;
  font-family: var(--gpbk-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--gpbk-ink) !important;
  margin: 0 0 8px;
}

.gpbk-chips { display: flex; gap: 8px; }
.gpbk-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  border-radius: 22px !important;
  border: 1.5px solid var(--gpbk-border) !important;
  background: var(--gpbk-surface) !important;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gpbk-ink) !important;
  cursor: pointer !important;
}
.gpbk-chip--selected { background: var(--gpbk-plum) !important; color: #fff !important; border-color: var(--gpbk-plum) !important; box-shadow: 0 0 0 2px var(--gpbk-gold) !important; }
.gpbk-chip:disabled { opacity: .45; cursor: not-allowed !important; }

.gpbk-time-hint { display: block; font-size: 12px; font-weight: 700; color: var(--gpbk-red) !important; margin: 8px 0 0; }
.gpbk-time-hint--hidden { display: none; }

.gpbk-info-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--gpbk-cream) !important;
  border-radius: 14px !important;
  padding: 12px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gpbk-ink) !important;
  margin: 16px 0;
}
.gpbk-info-ico { display: flex; color: var(--gpbk-gold-dark) !important; flex: none; }
.gpbk-call-link {
  display: block;
  text-align: center;
  min-height: 44px;
  line-height: 44px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gpbk-plum) !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

/* ===== Success screen ===== */

.gpbk-success {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow-y: auto;
}
.gpbk-success-top {
  flex: 1 1 auto;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  overflow: hidden;
  padding: 28px 30px 14px;
  text-align: center;
  background: #fff !important;
}
.gpbk-confetti { display: block; position: absolute; }
.gpbk-success-mascot {
  display: block;
  width: 108px;
  height: 108px;
  object-fit: contain;
  z-index: 5;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .18));
  margin-bottom: 6px;
}
.gpbk-overlay .gpbk-success-title {
  display: block;
  font-family: var(--gpbk-font-display) !important;
  font-weight: 900 !important;
  font-size: 27px !important;
  line-height: 1.2 !important;
  color: var(--gpbk-plum) !important;
  margin: 0 0 6px;
  z-index: 5;
  max-width: 320px;
}
/* Must match/exceed the base rule's new specificity+!important above, or this
   size override silently loses to the 27px base again. */
.gpbk-overlay .gpbk-success-title.gpbk-success-title--emergency { color: var(--gpbk-red) !important; font-size: 24px !important; }
.gpbk-success-sub { display: block; font-size: 14px; font-weight: 600; color: var(--gpbk-muted) !important; z-index: 5; max-width: 300px; }
.gpbk-success-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--gpbk-red) !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  z-index: 5;
  margin-bottom: 4px;
}
.gpbk-eyebrow-icon { flex: none; }
.gpbk-success-top--emergency { padding-top: 32px; }

.gpbk-success-bottom {
  flex: 0 0 auto;
  background: var(--gpbk-plum) !important;
  border-radius: 28px 28px 0 0 !important;
  margin-top: -14px;
  position: relative;
  z-index: 6;
  padding: 20px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gpbk-summary-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff !important;
  border-radius: 18px !important;
  padding: 16px 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18) !important;
}
.gpbk-summary-row { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--gpbk-ink) !important; }
.gpbk-summary-icon { color: var(--gpbk-plum) !important; flex: none; }

/* ===== Success screen: "what to expect" video ===== */

.gpbk-video-card { display: flex; flex-direction: column; gap: 10px; }
.gpbk-video-title {
  font-family: var(--gpbk-font-display);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82) !important;
  margin: 0;
}
.gpbk-video-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px !important;
  overflow: hidden;
  padding: 0;
  cursor: pointer !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .28) !important;
}
.gpbk-video-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.gpbk-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50% !important;
  background: linear-gradient(180deg, var(--gpbk-gold), var(--gpbk-gold-dark)) !important;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .32) !important;
}
.gpbk-video-embed { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px !important; overflow: hidden; }
.gpbk-video-embed iframe { display: block; width: 100%; height: 100%; border: 0 !important; }

/* ===== Failure screen ===== */

.gpbk-failure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  padding: 40px 30px;
  text-align: center;
  position: relative;
}
.gpbk-failure-icon { display: flex; justify-content: center; color: var(--gpbk-red) !important; margin-bottom: 8px; }
.gpbk-overlay .gpbk-failure-title { display: block; font-family: var(--gpbk-font-display) !important; font-weight: 800 !important; font-size: 21px !important; color: var(--gpbk-ink) !important; max-width: 300px; }
.gpbk-failure-sub { display: block; font-size: 13.5px; color: var(--gpbk-muted) !important; max-width: 280px; margin-bottom: 8px; }

/* ===== Emergency call-first screen ===== */

.gpbk-btn-tel-giant span { min-width: 0; }
.gpbk-text-link {
  display: block;
  width: 100%;
  text-align: center;
  min-height: 44px;
  line-height: 44px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gpbk-muted) !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}
.gpbk-text-link:hover { color: var(--gpbk-plum) !important; }