/* =============================================================================
   Prime Electrics — Booking Form styles
   Framework-free. Scoped under #pbf-root so it can drop into any WordPress theme
   without leaking styles. Colour system converted from the source prototype
   (oklch) to sRGB hex for maximum browser/theme compatibility.
   ============================================================================= */

#pbf-root, #pbf-root * { box-sizing: border-box; }
#pbf-root button, #pbf-root .pbf-card, #pbf-root .pbf-opt-card, #pbf-root .pbf-cal-cell,
#pbf-root .pbf-time-slot, #pbf-root .pbf-ptype, #pbf-root .pbf-pay-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* Always leave room for the scrollbar. Without this, a step that grows past the
   fold makes the bar appear and shunts the whole page sideways by its width —
   which reads as the layout jumping every time something is clicked. */
html { scrollbar-gutter: stable; }
/* A class that sets `display` beats the UA rule for [hidden], so anything
   toggled with el.hidden (the billing fields) would otherwise stay visible. */
#pbf-root [hidden] { display: none !important; }

#pbf-root {
  --pbf-brand:        #2f7ad6;   /* primary blue  */
  --pbf-brand-dark:   #2064b8;
  --pbf-brand-tint:   #eef4fc;
  --pbf-ink:          #1e2733;   /* headings      */
  --pbf-ink-soft:     #4a5563;
  --pbf-muted:        #7a828e;
  --pbf-line:         #e4e7ec;
  --pbf-line-soft:    #eef0f3;
  --pbf-white:        #ffffff;
  --pbf-bg:           #f4f7fb;
  --pbf-green:        #2fa46a;
  --pbf-amber:        #d9822b;
  --pbf-red:          #d64545;
  --pbf-radius:       14px;
  --pbf-shadow:       0 24px 70px -20px rgba(30,39,51,.30);
  --pbf-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pbf-font-head:    'Manrope', var(--pbf-font);

  font-family: var(--pbf-font);
  color: var(--pbf-ink);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* ---- Shell -------------------------------------------------------------- */
/* Full-bleed: the form IS the page, so the shell spans the viewport rather than
   floating as a card. Content stays centred and readable via .pbf-step's
   max-width, so only the chrome (header bar, body background) goes edge to edge. */
#pbf-root .pbf-outer { width: 100%; display: flex; justify-content: center; padding: 0; flex: 1; }
#pbf-root .pbf-shell {
  width: 100%; background: transparent;
  display: flex; flex-direction: column; flex: 1;
  position: relative; z-index: 1;
}

/* ---- Header / stepper --------------------------------------------------- */
#pbf-root .pbf-header {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 18px 32px 0; background: transparent;
  border-bottom: none; position: relative;
}
#pbf-root .pbf-stepper { display: flex; align-items: center; gap: 8px; }
#pbf-root .pbf-step-label { font-size: 13.5px; font-weight: 600; color: var(--pbf-muted); white-space: nowrap; font-family: var(--pbf-font-head); }
#pbf-root .pbf-step-label.is-done { color: var(--pbf-ink-soft); }
#pbf-root .pbf-step-label.is-current { color: var(--pbf-brand); font-weight: 800; }
#pbf-root .pbf-step-line { width: 40px; height: 2px; background: var(--pbf-line); flex-shrink: 0; }
#pbf-root .pbf-step-line.is-done { background: var(--pbf-brand); }

/* ---- Body --------------------------------------------------------------- */
/* The step is centred in whatever height is left over, so a short step sits in
   the middle of the page rather than pinned under the header with dead space
   below it. The extra bottom padding biases that centring upward (optical
   centre), which keeps the heading high without pinning it to the top. "safe center" matters: on a step taller than the viewport (Finalise)
   it falls back to top-aligned, instead of overflowing past the top where the
   content could not be scrolled back to. */
#pbf-root .pbf-body {
  padding: 28px 4.5vw 96px; background: transparent; min-height: 420px; flex: 1;
  display: flex; flex-direction: column;
  justify-content: center;
  justify-content: safe center;
}
#pbf-root .pbf-step { width: 100%; max-width: 1080px; margin: 0 auto; }
#pbf-root .pbf-step.pbf-step-wide { max-width: min(1320px, 92vw); }
/* Step transitions. The incoming step slides in from the side it is arriving
   from; the outgoing clone slides the opposite way. See playStepTransition(). */
#pbf-root .pbf-step.pbf-anim-in        { animation: pbf-slide-in-right .38s cubic-bezier(.22,1,.36,1) both; }
#pbf-root .pbf-step.pbf-anim-in-back   { animation: pbf-slide-in-left  .38s cubic-bezier(.22,1,.36,1) both; }
#pbf-root .pbf-step.pbf-anim-out       { animation: pbf-slide-out-left  .38s cubic-bezier(.22,1,.36,1) both; }
#pbf-root .pbf-step.pbf-anim-out-back  { animation: pbf-slide-out-right .38s cubic-bezier(.22,1,.36,1) both; }
#pbf-root .pbf-step.pbf-anim-fade      { animation: pbf-soft-in  .22s ease both; }
#pbf-root .pbf-step.pbf-anim-fade-out  { animation: pbf-soft-out .22s ease both; }

/* The outgoing clone is absolutely placed, so the body is its containing block.
   overflow-x: clip keeps the slide from making a horizontal scrollbar without
   turning this into a scroll container, which would break the sticky summary. */
#pbf-root .pbf-body { position: relative; }
#pbf-root .pbf-body.is-sliding { overflow-x: clip; }
#pbf-root .pbf-center { text-align: center; }
#pbf-root .pbf-h1 { font-size: 30px; font-weight: 800; color: var(--pbf-ink); font-family: var(--pbf-font-head); margin: 0 0 8px; }
#pbf-root .pbf-sub { color: var(--pbf-ink-soft); font-size: 14.5px; margin-bottom: 28px; }
#pbf-root .pbf-section-title { font-size: 17px; font-weight: 800; color: var(--pbf-ink); font-family: var(--pbf-font-head); margin: 0 0 16px; }
#pbf-root .pbf-eyebrow { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pbf-brand); margin-bottom:12px; font-family: var(--pbf-font-head); }

/* ---- Property class cards (domestic / commercial) ----------------------- */
#pbf-root .pbf-class-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; max-width: 640px; margin: 0 auto 12px;
}
#pbf-root .pbf-class-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 10px 10px 24px; overflow: hidden; border: 1.5px solid var(--pbf-line); border-radius: var(--pbf-radius);
  background: var(--pbf-white); cursor: pointer; font-family: inherit;
  transition: border-color .18s ease, background .18s ease, transform .12s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#pbf-root .pbf-class-card:hover { border-color: #c7d2df; transform: translateY(-2px); }
#pbf-root .pbf-class-card.is-selected {
  border-color: var(--pbf-brand); background: var(--pbf-brand-tint);
  box-shadow: 0 6px 18px -8px rgba(47,122,214,.35);
}
#pbf-root .pbf-class-card:focus-visible { outline: 2px solid var(--pbf-brand); outline-offset: 2px; }
#pbf-root .pbf-class-icon { display: flex; align-items: center; justify-content: center; height: 48px; }
#pbf-root .pbf-class-label {
  font-family: var(--pbf-font-head); font-size: 17px; font-weight: 800;
  color: var(--pbf-ink); margin-top: 4px;
}
#pbf-root .pbf-class-card.is-selected .pbf-class-label { color: var(--pbf-brand-dark); }
#pbf-root .pbf-class-blurb { font-size: 13.5px; color: var(--pbf-ink-soft); margin-top: 6px; line-height: 1.5; }
#pbf-root .pbf-class-examples { font-size: 12px; color: var(--pbf-muted); margin-top: 10px; line-height: 1.45; }

/* ============================================================================
   REVAMPED SERVICES STEP
   Ported from the booking-revamp design: photo cards, numbered progress,
   trust strip and the split bottom action bar.
   ========================================================================== */

/* ---- Numbered progress -------------------------------------------------- */
#pbf-root .pbf-progress {
  position: relative; display: grid; gap: 18px;
  max-width: 760px; margin: 6px auto 0; width: 100%;
}
#pbf-root .pbf-progress-line {
  position: absolute; left: 10%; right: 10%; top: 16px; height: 2px;
  background: #dfe7f2; z-index: 0; border-radius: 2px; overflow: hidden;
}
#pbf-root .pbf-progress-fill {
  height: 100%; background: linear-gradient(90deg, #1e6df6, #8cbaff);
  transition: width .3s ease;
}
#pbf-root .pbf-progress-step {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 8px; color: #31415f;
}
#pbf-root .pbf-progress-num {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: #e6edf7; font-weight: 800; font-size: 14px; color: #31415f;
}
#pbf-root .pbf-progress-label { font-size: 14px; font-weight: 600; white-space: nowrap; }
#pbf-root .pbf-progress-step.is-current .pbf-progress-num,
#pbf-root .pbf-progress-step.is-done .pbf-progress-num {
  background: linear-gradient(145deg, #4b9cff, #1e6df6); color: #fff;
  box-shadow: 0 5px 16px rgba(30,109,246,.25);
}
#pbf-root .pbf-progress-step.is-current .pbf-progress-label { color: #0b1530; font-weight: 700; }

/* ---- Hero copy ---------------------------------------------------------- */
#pbf-root .pbf-hero { text-align: center; margin: 6px auto 24px; }
#pbf-root .pbf-eyebrow-step {
  letter-spacing: .09em; color: #5c7096; font-weight: 700; font-size: 12.5px; margin: 0 0 10px;
}
#pbf-root .pbf-hero-h1 {
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.08; margin: 0;
  font-weight: 850; letter-spacing: -.035em; color: #0d1834;
  font-family: var(--pbf-font-head);
}
#pbf-root .pbf-hero-em {
  background: linear-gradient(90deg, #4b92ff, #1767ef);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#pbf-root .pbf-hero-sub { color: #5a6b8a; font-size: 15px; margin: 8px 0 0; }

/* ---- Photo service cards ------------------------------------------------ */
#pbf-root .pbf-service-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
#pbf-root .pbf-svc-card {
  position: relative; min-height: 232px; padding: 8px 10px 16px;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.92); border: 1px solid #dfe8f4; border-radius: 18px;
  box-shadow: 0 10px 30px rgba(30,64,120,.09), 0 2px 8px rgba(30,64,120,.05);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#pbf-root .pbf-svc-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(30,64,120,.13); }
#pbf-root .pbf-svc-card:focus-visible { box-shadow: 0 0 0 4px rgba(31,111,246,.16), 0 10px 30px rgba(30,64,120,.09); }
#pbf-root .pbf-svc-card.is-selected { border-width: 2px; padding: 7px 9px 15px; }

#pbf-root .pbf-svc-media { position: relative; height: 105px; flex: 0 0 auto; }
#pbf-root .pbf-svc-image {
  position: absolute; inset: 0; border-radius: 13px; overflow: hidden; background: #e7edf5;
}
#pbf-root .pbf-svc-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

#pbf-root .pbf-svc-icon {
  position: absolute; left: 10px; bottom: -27px; width: 55px; height: 55px;
  border-radius: 15px; background: #fff; display: grid; place-items: center;
  box-shadow: 0 5px 15px rgba(39,74,124,.10); z-index: 2;
}
#pbf-root .pbf-svc-icon img { width: 27px; height: 27px; }
/* Line artwork painted in a colour we choose.
   Default: the file drawn as-is, so anything without mask support still shows
   the icon. With mask support the file becomes a stencil and --pbf-ink is
   painted through it, which is what lets one PNG be the service's colour on a
   white tile and white on a filled one. */
#pbf-root .pbf-ink-icon {
  display: block; flex-shrink: 0;
  background-image: var(--pbf-ink-src);
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
@supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
  #pbf-root .pbf-ink-icon {
    background-image: none;
    background-color: var(--pbf-ink, currentColor);
    -webkit-mask-image: var(--pbf-ink-src); mask-image: var(--pbf-ink-src);
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
}

#pbf-root .pbf-svc-content { padding: 36px 42px 0 6px; flex: 1 1 auto; min-height: 0; }
#pbf-root .pbf-svc-title {
  font-size: 18px; line-height: 1.12; margin: 0 0 8px; letter-spacing: -.02em;
  font-family: var(--pbf-font-head); font-weight: 800; color: #0d1834;
}
#pbf-root .pbf-svc-blurb { font-size: 14px; line-height: 1.28; color: #43577a; margin: 0; }

#pbf-root .pbf-svc-info {
  position: absolute; right: 18px; bottom: 20px; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid #ced9e8; background: #f9fbff;
  color: #1a2e54; cursor: pointer; padding: 0;
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-size: 20px; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
#pbf-root .pbf-svc-info:hover { background: #eef4fc; transform: scale(1.08); }
#pbf-root .pbf-svc-card.is-selected .pbf-svc-info { border-color: #abcaff; color: #1e6df6; }
#pbf-root .pbf-svc-tip { position: absolute; left: 10px; right: 10px; bottom: 66px; z-index: 4; }

/* ---- Trust strip -------------------------------------------------------- */
#pbf-root .pbf-trust {
  margin: 28px 0 22px; min-height: 84px;
  border: 1px solid #cee0f5; background: rgba(244,249,255,.72); border-radius: 18px;
  /* One column per item, set by trustStrip() — a fixed four left an empty
     slot whenever the list was shorter. The narrow layouts below override it. */
  display: grid; grid-template-columns: repeat(var(--pbf-trust-cols, 4), 1fr); align-items: center;
  box-shadow: inset 0 1px 0 #fff;
}
#pbf-root .pbf-trust-item { display: flex; gap: 12px; align-items: center; padding: 0 20px; min-width: 0; }
#pbf-root .pbf-trust-item:not(:last-child) { border-right: 1px solid #d4e2f3; }
#pbf-root .pbf-trust-icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: #fff; color: #1e6df6; font-size: 21px; font-weight: 800; flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(36,85,144,.08);
}
#pbf-root .pbf-trust-icon img { width: 22px; height: 22px; }
#pbf-root .pbf-trust-item div { min-width: 0; }
#pbf-root .pbf-trust-item strong { display: block; font-size: 14px; white-space: nowrap; color: #0d1834; }
#pbf-root .pbf-trust-item small { display: block; color: #6980a6; font-size: 12px; margin-top: 3px; white-space: nowrap; }

/* ---- Bottom action bar -------------------------------------------------- */
#pbf-root .pbf-bottom-actions {
  display: grid; grid-template-columns: 180px 1fr 290px; align-items: center;
  gap: 18px; margin: 8px 0 18px;
}
#pbf-root .pbf-btn2 {
  height: 55px; border-radius: 13px; font-weight: 700; font-size: 15px;
  font-family: var(--pbf-font-head); cursor: pointer;
}
#pbf-root .pbf-btn2-secondary { background: #fff; border: 1px solid #d4deec; color: #415478; }
#pbf-root .pbf-btn2-primary {
  border: 0; color: #fff; font-size: 16px;
  background: linear-gradient(90deg, #4a99ff, #1466f2);
  box-shadow: 0 9px 18px rgba(30,109,246,.22);
}
#pbf-root .pbf-btn2-primary[disabled] {
  background: #d5dbe2; color: #7a828e; box-shadow: none; cursor: not-allowed;
}
#pbf-root .pbf-selection-copy { text-align: center; color: #6b7d9a; font-size: 14px; }

@media (max-width: 1050px) {
  #pbf-root .pbf-service-grid { grid-template-columns: repeat(2, 1fr); }
  #pbf-root .pbf-trust { grid-template-columns: repeat(2, 1fr); }
  #pbf-root .pbf-trust-item { min-height: 70px; border-bottom: 1px solid #d4e2f3; }
  #pbf-root .pbf-trust-item:not(:last-child) { border-right: 0; }
  #pbf-root .pbf-bottom-actions { grid-template-columns: 160px 1fr 220px; }
}
@media (max-width: 700px) {
  #pbf-root .pbf-progress { gap: 2px; max-width: none; }
  #pbf-root .pbf-progress-label { font-size: 11px; }
  #pbf-root .pbf-progress-num { width: 29px; height: 29px; font-size: 12.5px; }
  #pbf-root .pbf-progress-line { top: 14px; }
  #pbf-root .pbf-hero { margin: 6px auto 24px; }
  #pbf-root .pbf-hero-sub { font-size: 15px; }
  #pbf-root .pbf-service-grid { grid-template-columns: 1fr; }
  #pbf-root .pbf-trust { grid-template-columns: 1fr; }
  #pbf-root .pbf-bottom-actions { grid-template-columns: 1fr 1fr; }
  #pbf-root .pbf-selection-copy { grid-column: 1 / -1; grid-row: 1; }
  #pbf-root .pbf-btn2 { width: 100%; }
}

/* ---- Service cards (step 0) -------------------------------------------- */
#pbf-root .pbf-services-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0 auto 30px; max-width: 856px; }
#pbf-root .pbf-service-wrap { position: relative; flex: 0 0 200px; max-width: 200px; }

/* Animated "lightning" ring around popular cards (conic gradient revealed through a 3px gap) */
#pbf-root .pbf-ring-wrap { position: relative; width: 100%; height: 162px; border-radius: 14px; padding: 3px; overflow: hidden; }
#pbf-root .pbf-ring-spin { position: absolute; inset: -45%; animation: pbf-spin 3.5s linear infinite; }
#pbf-root .pbf-ring-spin.ring-blue { background: conic-gradient(from 0deg, #1e5bb8, #7fb0ec, #3f7fe0, #a9cef5, #1a4fb0, #2f6ad6, #7fb0ec, #3f7fe0, #a9cef5, #1a4fb0, #1e5bb8); }
#pbf-root .pbf-ring-spin.ring-green { background: conic-gradient(from 0deg, #1f7d4a, #7fd0a0, #2fa46a, #9fe0b8, #1a6f40, #3f9f6a, #7fd0a0, #2fa46a, #9fe0b8, #1a6f40, #1f7d4a); }
#pbf-root .pbf-card.is-popular { position: relative; z-index: 1; width: 100%; height: 100%; border: none !important; border-radius: 11px; }
#pbf-root .pbf-card.is-popular:hover { transform: none; }
#pbf-root .pbf-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 20px 12px 16px; border-radius: var(--pbf-radius);
  border: 1.5px solid var(--pbf-line); background: var(--pbf-white); cursor: pointer;
  width: 100%; height: 162px; box-shadow: 0 1px 3px rgba(30,39,51,.06);
  transition: all .25s cubic-bezier(.22,1,.36,1); text-align: center;
}
#pbf-root .pbf-card:hover { border-color: #c7d2df; transform: translateY(-2px); }
#pbf-root .pbf-card.is-selected { border-color: var(--pbf-brand); background: var(--pbf-brand-tint); box-shadow: 0 6px 18px -8px rgba(47,122,214,.35); }
#pbf-root .pbf-card .pbf-card-name { font-size: 13px; font-weight: 700; color: var(--pbf-ink); font-family: var(--pbf-font-head); line-height: 1.25; white-space: pre-line; }
#pbf-root .pbf-card .pbf-card-abbr { font-size: 10.5px; color: var(--pbf-muted); }
#pbf-root .pbf-price-badge {
  position: absolute; top: 10px; right: 10px;
  background: linear-gradient(135deg, rgba(84,150,224,.9), rgba(120,110,220,.9));
  border: 1px solid rgba(255,255,255,.5); color: #fff; font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
/* ---- Enquiry step (commercial jobs we quote rather than price) ---------- */
#pbf-root .pbf-enquiry-card { max-width: 720px; margin: 0 auto; }
#pbf-root .pbf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#pbf-root .pbf-optional { font-size: 11.5px; font-weight: 500; color: var(--pbf-muted); }
#pbf-root .pbf-hint { font-size: 12.5px; color: var(--pbf-muted); line-height: 1.5; margin: -2px 0 10px; }

/* Floors counter sits inline under its label rather than filling the row. */
#pbf-root .pbf-stepper-inline { align-self: start; gap: 10px; padding: 4px; }
#pbf-root .pbf-stepper-inline .pbf-stepper-btn { width: 40px; height: 40px; font-size: 17px; }

#pbf-root .pbf-file-pick {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px;
  border: 1.5px dashed #cfe0f5; border-radius: 10px; background: var(--pbf-brand-tint);
  color: var(--pbf-brand-dark); font-size: 13.5px; font-weight: 700; cursor: pointer;
  font-family: var(--pbf-font-head);
}
#pbf-root .pbf-file-pick:hover { border-color: var(--pbf-brand); }
#pbf-root .pbf-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#pbf-root .pbf-file-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
#pbf-root .pbf-file-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1.5px solid var(--pbf-line); border-radius: 10px; background: #fff;
}
#pbf-root .pbf-file-name { flex: 1; font-size: 13px; color: var(--pbf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pbf-root .pbf-file-size { font-size: 12px; color: var(--pbf-muted); flex-shrink: 0; }
#pbf-root .pbf-file-remove {
  border: none; background: none; color: var(--pbf-red); font-size: 12.5px; font-weight: 700;
  cursor: pointer; padding: 4px 6px; flex-shrink: 0;
}
#pbf-root .pbf-file-error { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--pbf-red); }

#pbf-root .pbf-band-badge {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
#pbf-root .pbf-info-btn {
  position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; border-radius: 999px;
  border: none; background: var(--pbf-line); color: var(--pbf-muted); display: flex; align-items: center;
  justify-content: center; cursor: pointer; z-index: 3; padding: 0;
}
#pbf-root .pbf-card.is-selected .pbf-info-btn { background: var(--pbf-brand); color: #fff; }
#pbf-root .pbf-popular-badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); z-index: 3;
  background: linear-gradient(135deg, #e07a2b, #c85a1a); color: #fff; font-size: 9.5px; font-weight: 800;
  letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
#pbf-root .pbf-tip {
  position: absolute; top: 34px; left: 8px; z-index: 20; width: 220px; background: #fff; color: var(--pbf-ink-soft);
  font-size: 11.5px; font-weight: 500; line-height: 1.55; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--pbf-line); box-shadow: 0 12px 28px -10px rgba(30,39,51,.25); text-align: left;
  animation: pbf-tip-pop .18s cubic-bezier(.22,1,.36,1) both;
}
#pbf-root .pbf-tip div { margin-bottom: 4px; }

/* ---- Option grids (step 1) -------------------------------------------- */
#pbf-root .pbf-opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; }
#pbf-root .pbf-opt-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 500px; }
#pbf-root .pbf-opt-grid.cols-eic { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
#pbf-root .pbf-opt-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  padding: 16px; border-radius: 16px; border: 1.5px solid var(--pbf-line);
  background: var(--pbf-white); cursor: pointer; width: 100%; min-height: 150px;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
  text-align: left; box-shadow: 0 1px 3px rgba(30,39,51,.06);
}
#pbf-root .pbf-opt-card:hover { border-color: #c7d2df; transform: translateY(-2px); }
#pbf-root .pbf-opt-card.is-selected { border-color: var(--pbf-brand); background: var(--pbf-brand-tint); box-shadow: 0 6px 18px -8px rgba(47,122,214,.35); }
#pbf-root .pbf-opt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
#pbf-root .pbf-opt-tile {
  width: 58px; height: 58px; border-radius: 13px; flex-shrink: 0;
  background: var(--pbf-opt-tint, var(--pbf-brand-tint));
  display: flex; align-items: center; justify-content: center;
}
/* Service Options artwork, in place of the built-in line icon. */
#pbf-root .pbf-opt-card .pbf-opt-icon { margin: 0; flex-shrink: 0; }
#pbf-root .pbf-opt-dial {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid #b6c2d2; background: #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, border-color .2s ease;
}
#pbf-root .pbf-opt-dial svg { width: 13px; height: 13px; opacity: 0; transition: opacity .18s ease; }
#pbf-root .pbf-opt-card.is-selected .pbf-opt-dial {
  background: var(--pbf-opt-accent, var(--pbf-brand)); border-color: var(--pbf-opt-accent, var(--pbf-brand));
}
#pbf-root .pbf-opt-card.is-selected .pbf-opt-dial svg { opacity: 1; }
#pbf-root .pbf-opt-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
#pbf-root .pbf-opt-text { min-width: 0; }
#pbf-root .pbf-opt-price {
  font-size: 22px; font-weight: 800; color: var(--pbf-ink); font-family: var(--pbf-font-head);
  line-height: 1; white-space: nowrap; flex-shrink: 0;
}
#pbf-root .pbf-opt-price .pbf-was { font-size: 13px; font-weight: 600; }
#pbf-root .pbf-opt-label { font-size: 15px; font-weight: 750; color: var(--pbf-ink); font-family: var(--pbf-font-head); line-height: 1.25; }
#pbf-root .pbf-opt-sublabel { font-size: 12px; color: var(--pbf-muted); margin-top: 3px; line-height: 1.35; }
#pbf-root .pbf-strike { text-decoration: line-through; opacity: .6; margin-right: 5px; }
#pbf-root .pbf-was { text-decoration: line-through; opacity: .65; margin-right: 5px; font-weight: 600; }
#pbf-root .pbf-total-row.coupon { color: var(--pbf-green); }
#pbf-root .pbf-coupon-msg { font-size: 11.5px; margin-top: 2px; }
#pbf-root .pbf-coupon-msg.ok { color: var(--pbf-green); }
#pbf-root .pbf-coupon-msg.err { color: var(--pbf-red); }
#pbf-root .pbf-coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 1.5px solid #bfe6cf; background: #eefaf1; border-radius: 10px; font-size: 12.5px; color: #1f7d4a; font-weight: 600; }
#pbf-root .pbf-coupon-remove { border: none; background: none; color: var(--pbf-muted); font-size: 12px; font-weight: 600; cursor: pointer; }

/* ---- Fuseboard stepper -------------------------------------------------- */
#pbf-root .pbf-fuseboard {
  margin-top: 28px; background: linear-gradient(135deg, #eef4fc, #f7f9fc);
  border: 1.5px solid #cfe0f5; border-radius: 18px; padding: 20px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
#pbf-root .pbf-fuseboard-info { display: flex; align-items: center; gap: 16px; min-width: 0; text-align: left; }
#pbf-root .pbf-fuseboard-icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, #4f8fe0, #3a6fd0); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#pbf-root .pbf-fuseboard-q { font-size: 15px; font-weight: 800; color: var(--pbf-ink); font-family: var(--pbf-font-head); }
#pbf-root .pbf-fuseboard-note { font-size: 12px; color: var(--pbf-muted); margin-top: 6px; }
#pbf-root .pbf-stepper-ctrl { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 999px; padding: 6px; border: 1.5px solid #dbe4ee; flex-shrink: 0; }
#pbf-root .pbf-stepper-btn { width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid #cfe0f5; background: #fff; font-size: 19px; font-weight: 700; color: var(--pbf-brand); cursor: pointer; }
#pbf-root .pbf-stepper-val { min-width: 34px; text-align: center; font-size: 20px; font-weight: 800; color: var(--pbf-brand); font-family: var(--pbf-font-head); }

/* ---- Upsell ------------------------------------------------------------- */
#pbf-root .pbf-upsell {
  position: relative; background: #fff; border: 2px solid transparent; border-radius: 18px;
  padding: 26px 24px; margin-bottom: 28px; text-align: center; overflow: hidden;
  background-image: linear-gradient(#fff,#fff), linear-gradient(135deg, #4fbf8f, #3f9fbf);
  background-origin: border-box; background-clip: padding-box, border-box;
  transition: opacity .3s ease, transform .3s ease;
}
#pbf-root .pbf-upsell-icon { width: 46px; height: 46px; border-radius: 999px; background: linear-gradient(135deg, #4fbf8f, #3f9fbf); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
#pbf-root .pbf-upsell-title { font-size: 18px; font-weight: 800; color: var(--pbf-ink); font-family: var(--pbf-font-head); margin-bottom: 6px; }
#pbf-root .pbf-upsell-blurb { font-size: 13.5px; color: var(--pbf-ink-soft); max-width: 460px; margin: 0 auto 18px; line-height: 1.5; }
#pbf-root .pbf-upsell-actions { display: flex; gap: 10px; justify-content: center; }

/* ---- Buttons ------------------------------------------------------------ */
#pbf-root .pbf-btn {
  font-family: var(--pbf-font-head); font-weight: 700; cursor: pointer; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; min-height: 48px; padding: 0 30px; border: 1.5px solid transparent;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
#pbf-root .pbf-btn:active { transform: scale(.98); }
#pbf-root .pbf-btn-primary { padding: 0 40px; min-width: 168px; background: linear-gradient(135deg, var(--pbf-brand), var(--pbf-brand-dark)); color: #fff; font-size: 15px; }
#pbf-root .pbf-btn-primary[disabled] { background: #d5dbe2; color: var(--pbf-muted); cursor: not-allowed; }
#pbf-root .pbf-btn-secondary { padding: 0 30px; min-width: 120px; border-color: var(--pbf-line); background: #fff; color: var(--pbf-ink-soft); font-size: 15px; }
#pbf-root .pbf-btn-pill-yes { padding: 12px 24px; border-radius: 10px; border: none; background: linear-gradient(135deg, #3fb07f, #3f9fbf); color: #fff; font-weight: 700; font-size: 13.5px; cursor: pointer; }
#pbf-root .pbf-btn-pill-no { padding: 12px 24px; border-radius: 10px; border: 1.5px solid var(--pbf-line); background: #fff; color: var(--pbf-ink-soft); font-weight: 700; font-size: 13.5px; cursor: pointer; }
#pbf-root .pbf-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 36px; }

/* ---- Calendar (step 2) -------------------------------------------------- */
#pbf-root .pbf-appt-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; text-align: left; align-items: start; }
/* Two cards side by side need more of the row than a single form column does,
   so this step gives the summary a little less. Only while there are columns to
   share — below the breakpoint everything stacks, and this would outrank that. */
@media (min-width: 761px) {
  #pbf-root .pbf-step-appt .pbf-finalise-grid { grid-template-columns: 1.85fr 1fr; }
}
#pbf-root .pbf-panel { background: #fff; border: 1px solid var(--pbf-line); border-radius: 18px; padding: 22px; box-shadow: 0 8px 30px rgba(30,74,122,.045); }
#pbf-root .pbf-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
#pbf-root .pbf-cal-nav { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--pbf-line); background: #fafbfc; cursor: pointer; font-size: 16px; }
#pbf-root .pbf-cal-month { display: flex; align-items: baseline; gap: 7px; font-size: 15.5px; font-family: var(--pbf-font-head); }
#pbf-root .pbf-cal-month b { font-weight: 700; color: var(--pbf-ink); }
#pbf-root .pbf-cal-month span { color: var(--pbf-muted); font-weight: 600; }
#pbf-root .pbf-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
#pbf-root .pbf-cal-wd { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--pbf-muted); padding: 4px 0; }
#pbf-root .pbf-cal-grid { gap: 5px; }
#pbf-root .pbf-cal-cell { aspect-ratio: 1; border: none; border-radius: 11px; background: transparent; color: var(--pbf-brand); font-size: 13px; font-weight: 650; cursor: pointer; }
#pbf-root .pbf-cal-cell:hover:not([disabled]) { background: var(--pbf-brand-tint); }
#pbf-root .pbf-cal-cell[disabled] { color: #c3c9d1; cursor: not-allowed; font-weight: 600; }
#pbf-root .pbf-cal-cell.is-selected { background: var(--pbf-brand); color: #fff; box-shadow: 0 7px 14px rgba(47,122,214,.22); }
/* Under the calendar: says what the blue numbers mean. */
#pbf-root .pbf-cal-legend { display: flex; align-items: center; gap: 7px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pbf-line-soft); font-size: 11.5px; color: var(--pbf-muted); }
#pbf-root .pbf-cal-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--pbf-brand); flex-shrink: 0; }
#pbf-root .pbf-time-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
#pbf-root .pbf-time-head b { display: block; font-size: 14px; color: var(--pbf-ink); }
#pbf-root .pbf-time-head small { display: block; margin-top: 3px; font-size: 12px; color: var(--pbf-muted); }
#pbf-root .pbf-time-head .pbf-num-badge { width: 29px; height: 29px; border-radius: 9px; background: var(--pbf-brand-tint); color: var(--pbf-brand); font-size: 12px; flex-shrink: 0; }
#pbf-root .pbf-time-list { display: flex; flex-direction: column; gap: 9px; }
#pbf-root .pbf-time-slot {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; border-radius: 11px; border: 1.5px solid var(--pbf-line);
  background: #fff; color: var(--pbf-ink); font-size: 13.5px; font-weight: 650; cursor: pointer; text-align: left;
}
#pbf-root .pbf-slot-time { flex: 1; }
/* "Morning" / "Afternoon" / "All day", set back from the tick. */
#pbf-root .pbf-slot-tag { font-size: 11px; font-weight: 500; color: var(--pbf-muted); }
#pbf-root .pbf-slot-mark { width: 21px; height: 21px; object-fit: contain; display: block; flex-shrink: 0; }
#pbf-root .pbf-time-slot:not(.is-selected) { padding-right: 15px; }
#pbf-root .pbf-time-slot.is-selected { border-color: var(--pbf-brand); background: #eef6ff; color: var(--pbf-brand-dark); }
#pbf-root .pbf-time-slot.is-selected .pbf-slot-tag { color: var(--pbf-brand); }
#pbf-root .pbf-time-slot:hover:not([disabled]):not(.is-selected) { border-color: #bcd5f0; }
#pbf-root .pbf-time-slot[disabled] { background: #f6f7f9; color: #b8bec6; cursor: not-allowed; }
/* Gone on the chosen day, rather than simply not pickable yet: struck through
   and crossed, so it reads as unavailable rather than as not-yet-reached. */
#pbf-root .pbf-time-slot.is-unavailable { background: #f7f8fa; border-color: #e6e8ec; }
#pbf-root .pbf-time-slot.is-unavailable .pbf-slot-time { text-decoration: line-through; text-decoration-thickness: 1px; }
#pbf-root .pbf-time-slot.is-unavailable .pbf-slot-tag { color: #c2c8d0; }
#pbf-root .pbf-appt-note {
  display: flex; gap: 12px; margin-top: 18px; align-items: flex-start; text-align: left;
  background: var(--pbf-brand-tint); border: 1px solid #d9e9fb; border-radius: 13px; padding: 15px;
}
#pbf-root .pbf-appt-note .pbf-note-icon {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: #dfeeff;
  display: grid; place-items: center; color: var(--pbf-brand);
}
#pbf-root .pbf-appt-note b { font-size: 12.5px; color: var(--pbf-ink); }
#pbf-root .pbf-appt-note p { margin: 5px 0 0; font-size: 12px; line-height: 1.55; color: var(--pbf-ink-soft); }

/* ---- Finalise (step 3) -------------------------------------------------- */
#pbf-root .pbf-finalise-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; text-align: left; }
#pbf-root .pbf-form-card { background: #fff; border: 1px solid var(--pbf-line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 24px; }
#pbf-root .pbf-fieldset-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
#pbf-root .pbf-num-badge { width: 20px; height: 20px; border-radius: 999px; background: var(--pbf-brand); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
#pbf-root .pbf-fieldset-title { font-size: 13px; font-weight: 700; color: var(--pbf-ink); }
#pbf-root .pbf-divider { height: 1px; background: var(--pbf-line-soft); }
#pbf-root .pbf-field { display: flex; flex-direction: column; }
#pbf-root .pbf-fields { display: flex; flex-direction: column; gap: 14px; }
#pbf-root .pbf-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
#pbf-root label.pbf-label { display: block; font-size: 13px; font-weight: 600; color: var(--pbf-ink-soft); margin-bottom: 7px; }
#pbf-root .pbf-req { color: var(--pbf-red); }
#pbf-root .pbf-input, #pbf-root .pbf-textarea {
  width: 100%; padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--pbf-line);
  font-size: 14px; color: var(--pbf-ink); outline: none; font-family: var(--pbf-font); background: #fff;
}
#pbf-root .pbf-input:focus, #pbf-root .pbf-textarea:focus { border-color: var(--pbf-brand); box-shadow: 0 0 0 3px rgba(47,122,214,.12); }
#pbf-root .pbf-input.pbf-invalid, #pbf-root .pbf-textarea.pbf-invalid { border-color: var(--pbf-red); }
#pbf-root .pbf-textarea { resize: vertical; }
#pbf-root .pbf-ptype-list { display: flex; flex-wrap: wrap; gap: 8px; }
#pbf-root .pbf-ptype { padding: 8px 14px; border-radius: 999px; border: 1.5px solid #cfe0f5; background: var(--pbf-brand-tint); color: var(--pbf-brand); font-size: 12.5px; font-weight: 600; cursor: pointer; }
#pbf-root .pbf-ptype.is-selected { border-color: var(--pbf-brand); background: var(--pbf-brand); color: #fff; }
#pbf-root .pbf-phone-wrap { display: flex; align-items: center; border: 1.5px solid var(--pbf-line); border-radius: 10px; }
#pbf-root .pbf-phone-wrap:focus-within { border-color: var(--pbf-brand); }
#pbf-root .pbf-phone-select { display: flex; align-items: center; gap: 6px; padding: 0 10px; height: 44px; border: none; border-right: 1.5px solid var(--pbf-line); background: #fafbfc; font-size: 14px; color: var(--pbf-ink-soft); cursor: pointer; border-radius: 10px 0 0 10px; }
#pbf-root .pbf-flag { width: 20px; height: 15px; border-radius: 2px; display: inline-block; background-size: cover; background-position: center; flex-shrink: 0; background-color: #e4e7ec; }
#pbf-root .pbf-phone-input { flex: 1; border: none; padding: 12px 14px; font-size: 14.5px; outline: none; background: transparent; }
#pbf-root .pbf-dropdown { position: relative; }
#pbf-root .pbf-dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 150px; background: #fff; border-radius: 12px; border: 1px solid var(--pbf-line); box-shadow: 0 16px 36px -10px rgba(30,39,51,.28); padding: 6px; z-index: 25; }
#pbf-root .pbf-dropdown-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--pbf-ink-soft); text-align: left; }
#pbf-root .pbf-dropdown-opt:hover { background: var(--pbf-bg); }
#pbf-root .pbf-add-contact { display: flex; align-items: center; gap: 6px; align-self: flex-start; padding: 9px 14px; border-radius: 10px; border: 1.5px dashed #a8c4e8; background: none; color: var(--pbf-brand); font-size: 13px; font-weight: 600; cursor: pointer; }
#pbf-root .pbf-remove-contact { border: none; background: none; color: var(--pbf-red); font-size: 12px; font-weight: 600; cursor: pointer; }

/* ---- Detail steps: main column + sticky aside --------------------------- */
#pbf-root .pbf-main-col { display: flex; flex-direction: column; min-width: 0; }
/* Back on the left, Continue on the right, as in the design pack. */
#pbf-root .pbf-main-col .pbf-nav { justify-content: space-between; margin-top: 24px; }
#pbf-root .pbf-nav-hint { margin-top: 10px; text-align: right; font-size: 12.5px; color: var(--pbf-muted); min-height: 16px; }
#pbf-root .pbf-fieldset-head .pbf-req { font-size: 13px; line-height: 1; }
/* On Payment the primary action is the full-width Pay button, so let it take
   the room and keep Back to its own label width. */
#pbf-root .pbf-form-card .pbf-nav { margin-top: 8px; }
#pbf-root .pbf-form-card .pbf-nav .pbf-btn-secondary { flex: 0 0 auto; white-space: nowrap; }
#pbf-root .pbf-form-card .pbf-nav .pbf-book-btn { flex: 1; }
#pbf-root .pbf-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
#pbf-root .pbf-aside .pbf-summary { position: static; }
#pbf-root .pbf-aside-card { background: #fff; border: 1px solid var(--pbf-line); border-radius: 16px; padding: 20px; text-align: left; }
#pbf-root .pbf-aside-title { font-size: 13.5px; font-weight: 800; color: var(--pbf-ink); font-family: var(--pbf-font-head); margin-bottom: 10px; }
#pbf-root .pbf-aside-list { display: flex; flex-direction: column; gap: 8px; }
#pbf-root .pbf-aside-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--pbf-ink-soft); line-height: 1.45; }
#pbf-root .pbf-aside-item svg { flex-shrink: 0; margin-top: 2px; }
#pbf-root .pbf-aside-link { font-size: 12.5px; font-weight: 600; color: var(--pbf-brand); text-decoration: none; }
#pbf-root .pbf-aside-link:hover { text-decoration: underline; }
#pbf-root .pbf-summary-head { display: flex; align-items: center; justify-content: space-between; }

/* What has been chosen so far, at the top of Review. */
#pbf-root .pbf-recap { display: flex; flex-direction: column; gap: 2px; }
#pbf-root .pbf-recap-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--pbf-line-soft); font-size: 13px; }
#pbf-root .pbf-recap-row:last-child { border-bottom: none; }
#pbf-root .pbf-recap-label { color: var(--pbf-muted); font-size: 12.5px; }
#pbf-root .pbf-recap-value { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; color: var(--pbf-ink); font-weight: 600; }
#pbf-root .pbf-recap-edit { border: none; background: none; padding: 0; color: var(--pbf-brand); font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
#pbf-root .pbf-recap-edit:hover { text-decoration: underline; }

/* Small explanatory lines and notes inside the form cards. */
#pbf-root .pbf-help-line { font-size: 12.5px; color: var(--pbf-muted); margin-top: -4px; }
#pbf-root .pbf-note-sub { font-size: 12px; color: var(--pbf-muted); line-height: 1.45; font-weight: 400; }
#pbf-root .pbf-note-card { background: var(--pbf-brand-tint); border: 1px solid #cfe0f5; border-radius: 12px; padding: 14px 16px; font-size: 13px; color: var(--pbf-ink); text-align: left; }
#pbf-root .pbf-secure-card { display: flex; align-items: center; gap: 12px; background: #f7f9fc; border: 1px solid var(--pbf-line); border-radius: 12px; padding: 14px 16px; font-size: 13px; text-align: left; }

/* Payment method rows. */
#pbf-root .pbf-paymethods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#pbf-root .pbf-paymethod { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 12px; border: 1.5px solid var(--pbf-line); background: #fff; cursor: pointer; text-align: left; font-family: var(--pbf-font); }
#pbf-root .pbf-paymethod.is-selected { border-color: var(--pbf-brand); background: var(--pbf-brand-tint); }
#pbf-root .pbf-paymethod-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* The wallet marks ship at their brand's full width — cap them so three
   methods fit the row instead of pushing each other off it. */
#pbf-root .pbf-paymethod .pbf-pay-img { height: 18px; width: auto; max-width: 46px; object-fit: contain; flex-shrink: 0; }
#pbf-root .pbf-paymethod .pbf-pay-mark { display: inline-flex; flex-shrink: 0; }
#pbf-root .pbf-paymethod .pbf-pay-mark svg { height: 18px; width: auto; }
#pbf-root .pbf-paymethod-text strong { font-size: 13px; color: var(--pbf-ink); }
#pbf-root .pbf-radio { width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--pbf-line); flex-shrink: 0; display: inline-block; }
#pbf-root .pbf-radio.is-on { border: 5px solid var(--pbf-brand); }
#pbf-root .pbf-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%237a828e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }

/* ---- Enquiry ------------------------------------------------------------ */
#pbf-root .pbf-enquiry-card { text-align: left; gap: 18px; }
/* The service that sent them here: shown, not asked for. */
#pbf-root .pbf-static-field {
  padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--pbf-line);
  background: #f7f9fc; font-size: 14px; font-weight: 600; color: var(--pbf-ink);
}
#pbf-root .pbf-dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 34px 20px; text-align: center; cursor: pointer;
  border: 1.5px dashed #a8c4e8; border-radius: 14px; background: #fbfdff;
}
#pbf-root .pbf-dropzone.is-over { border-color: var(--pbf-brand); background: var(--pbf-brand-tint); }
#pbf-root .pbf-dropzone b { font-size: 14px; color: var(--pbf-ink); }
#pbf-root .pbf-dropzone small { font-size: 11.5px; font-weight: 600; color: var(--pbf-muted); }
#pbf-root .pbf-dropzone-icon { color: var(--pbf-brand); display: block; margin-bottom: 4px; }
#pbf-root .pbf-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

#pbf-root .pbf-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
#pbf-root .pbf-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--pbf-line); background: #f4f6f9; }
#pbf-root .pbf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#pbf-root .pbf-thumb-remove {
  position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 999px;
  border: none; background: rgba(23,32,51,.72); color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
}
#pbf-root .pbf-file-error { font-size: 12.5px; color: var(--pbf-red); }
#pbf-root .pbf-optional { font-weight: 500; color: var(--pbf-muted); }

/* The confirmation page. */
#pbf-root .pbf-enquiry-done { align-items: center; text-align: left; max-width: 620px; margin: 0 auto; }
#pbf-root .pbf-enquiry-done .pbf-h1, #pbf-root .pbf-enquiry-done .pbf-sub { text-align: center; }
#pbf-root .pbf-next-card { width: 100%; border: 1px solid var(--pbf-line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
#pbf-root .pbf-next-row { display: flex; gap: 12px; align-items: flex-start; }
#pbf-root .pbf-next-row .pbf-num-badge { width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0; }
#pbf-root .pbf-next-row b { font-size: 13.5px; color: var(--pbf-ink); }
#pbf-root .pbf-next-row p { margin: 3px 0 0; font-size: 12.5px; color: var(--pbf-ink-soft); line-height: 1.5; }

/* ---- Summary ------------------------------------------------------------ */
#pbf-root .pbf-summary { position: sticky; top: 16px; background: #f7f9fc; border: 1px solid var(--pbf-line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
#pbf-root .pbf-summary-title { font-size: 14px; font-weight: 800; color: var(--pbf-ink); font-family: var(--pbf-font-head); }
#pbf-root .pbf-summary-lines { display: flex; flex-direction: column; gap: 10px; }
#pbf-root .pbf-line { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
#pbf-root .pbf-line-name { font-size: 13.5px; font-weight: 600; color: var(--pbf-ink); }
#pbf-root .pbf-line-sub { font-size: 11.5px; color: var(--pbf-muted); }
#pbf-root .pbf-line-price { font-size: 13.5px; font-weight: 700; color: var(--pbf-ink); white-space: nowrap; }
#pbf-root .pbf-coupon { display: flex; gap: 8px; }
#pbf-root .pbf-coupon .pbf-input { flex: 1; }
#pbf-root .pbf-coupon-apply { padding: 0 16px; border-radius: 10px; border: none; background: #2b3a52; color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; }
#pbf-root .pbf-totals { display: flex; flex-direction: column; gap: 7px; }
#pbf-root .pbf-total-row { display: grid; grid-template-columns: 1fr auto; font-size: 12.5px; color: var(--pbf-ink-soft); }
#pbf-root .pbf-total-row.discount { color: var(--pbf-green); }
#pbf-root .pbf-total-row.grand { padding-top: 8px; border-top: 1px solid var(--pbf-line); }
#pbf-root .pbf-total-row.grand .lbl { font-size: 13.5px; font-weight: 700; color: var(--pbf-ink); }
#pbf-root .pbf-total-row.grand .val { font-size: 19px; font-weight: 800; color: var(--pbf-brand); text-align: right; font-family: var(--pbf-font-head); }
/* One box across the panel. It used to be two columns, from when the date and
   the time sat in separate boxes — left behind, that halved the width and broke
   the line mid-time. */
#pbf-root .pbf-appt-mini { display: block; }
#pbf-root .pbf-appt-mini div {
  border: 1px solid var(--pbf-line); border-radius: 8px; padding: 7px 10px;
  font-size: 12px; color: var(--pbf-ink-soft); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
#pbf-root .pbf-pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
#pbf-root .pbf-pay-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; padding: 8px; border-radius: 10px; cursor: pointer; font-size: 12.5px; font-weight: 700; font-family: var(--pbf-font-head); border: 1.5px solid var(--pbf-line); background: #fff; color: var(--pbf-ink-soft); }
#pbf-root .pbf-pay-btn.is-selected { border-color: var(--pbf-brand); background: var(--pbf-brand-tint); color: var(--pbf-brand); }
#pbf-root .pbf-pay-btn .pbf-pay-img { height: 20px; max-width: 100%; object-fit: contain; display: block; }
#pbf-root .pbf-pay-btn .pbf-pay-mark { display: flex; align-items: center; }
#pbf-root .pbf-pay-btn .pbf-pay-mark svg { display: block; }

#pbf-root .pbf-eyebrow-sm { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pbf-muted); }
#pbf-root .pbf-card-fields { display: flex; flex-direction: column; gap: 8px; }
#pbf-root .pbf-wallet-notice { padding: 14px; border-radius: 10px; border: 1.5px solid var(--pbf-line); background: #fafbfc; font-size: 12.5px; color: var(--pbf-ink-soft); text-align: center; }
#pbf-root .pbf-terms { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--pbf-ink-soft); cursor: pointer; }
#pbf-root .pbf-terms input { width: 17px; height: 17px; margin: 0; accent-color: var(--pbf-brand); flex-shrink: 0; }
#pbf-root .pbf-book-btn { width: 100%; padding: 15px; border-radius: 12px; border: none; background: linear-gradient(135deg, var(--pbf-brand), var(--pbf-brand-dark)); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--pbf-font-head); }
#pbf-root .pbf-book-btn[disabled] { background: #d5dbe2; color: var(--pbf-muted); cursor: not-allowed; }
#pbf-root .pbf-secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--pbf-muted); }
#pbf-root .pbf-back-inline { position: absolute; left: 0; top: 4px; padding: 9px 16px; border-radius: 10px; border: 1.5px solid var(--pbf-line); background: #fff; color: var(--pbf-ink-soft); font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--pbf-font-head); }

/* ---- Overlays (processing / result) ------------------------------------ */
#pbf-root .pbf-overlay { position: fixed; inset: 0; background: rgba(252,253,254,.98); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; z-index: 40; overflow-y: auto; }
#pbf-root .pbf-spinner { width: 84px; height: 84px; border-radius: 999px; background: linear-gradient(135deg, #4f8fe0, #3a6fd0); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; position: relative; }
#pbf-root .pbf-spinner::before { content: ''; position: absolute; inset: -7px; border-radius: 999px; border: 2.5px solid var(--pbf-brand); border-top-color: transparent; animation: pbf-spin 1s linear infinite; }
#pbf-root .pbf-proc-title { font-size: 20px; font-weight: 800; color: var(--pbf-ink); font-family: var(--pbf-font-head); margin-bottom: 10px; text-align: center; }
#pbf-root .pbf-proc-sub { font-size: 13px; color: var(--pbf-muted); margin-bottom: 20px; }
#pbf-root .pbf-proc-bar { width: 100%; max-width: 400px; height: 6px; border-radius: 999px; background: var(--pbf-line); overflow: hidden; margin-bottom: 22px; }
#pbf-root .pbf-proc-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pbf-brand), var(--pbf-green)); width: 0%; transition: width .6s ease; }
#pbf-root .pbf-proc-steps { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 400px; }
#pbf-root .pbf-proc-step { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 12px; border: 1.5px solid transparent; transition: all .3s ease; }
#pbf-root .pbf-proc-step.is-active { background: var(--pbf-brand-tint); border-color: #a8c4e8; }
#pbf-root .pbf-proc-step-icon { width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--pbf-line); color: #fff; }
#pbf-root .pbf-proc-step.is-done .pbf-proc-step-icon { background: linear-gradient(135deg, #3fb07f, #3f9fbf); }
#pbf-root .pbf-proc-step.is-active .pbf-proc-step-icon { background: linear-gradient(135deg, #4f8fe0, #3a6fd0); }
#pbf-root .pbf-proc-step-label { font-size: 13.5px; color: var(--pbf-muted); }
#pbf-root .pbf-proc-step.is-active .pbf-proc-step-label { color: var(--pbf-ink); font-weight: 700; }
#pbf-root .pbf-proc-step.is-done .pbf-proc-step-label { color: var(--pbf-green); font-weight: 600; }
#pbf-root .pbf-result { position: fixed; inset: 0; background: rgba(30,39,51,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
#pbf-root .pbf-result-card { background: #fff; border-radius: 20px; box-shadow: 0 30px 70px -20px rgba(30,39,51,.4); width: 100%; max-width: 420px; padding: 40px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; }
#pbf-root .pbf-result-icon { width: 80px; height: 80px; border-radius: 999px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
#pbf-root .pbf-result-icon.success { background: linear-gradient(135deg, #3fb07f, #3f9fbf); }
#pbf-root .pbf-result-icon.error { background: linear-gradient(135deg, #d96a4a, #c8442a); }
#pbf-root .pbf-result-title { font-size: 24px; font-weight: 800; color: var(--pbf-ink); font-family: var(--pbf-font-head); margin-bottom: 12px; }
#pbf-root .pbf-result-text { font-size: 14px; color: var(--pbf-ink-soft); line-height: 1.6; margin-bottom: 8px; }
#pbf-root .pbf-result-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 20px; }

/* ---- Animations --------------------------------------------------------- */
@keyframes pbf-slide-in-right  { from { opacity: 0; transform: translateX(42px);  } to { opacity: 1; transform: translateX(0); } }
@keyframes pbf-slide-in-left   { from { opacity: 0; transform: translateX(-42px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pbf-slide-out-left  { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-42px); } }
@keyframes pbf-slide-out-right { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(42px);  } }
@keyframes pbf-soft-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pbf-soft-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes pbf-tip-pop { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pbf-spin { to { transform: rotate(360deg); } }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
  #pbf-root .pbf-body { padding: 24px 16px 40px; }
  #pbf-root .pbf-h1 { font-size: 22px; }
  #pbf-root .pbf-header { padding: 12px 14px; flex-wrap: wrap; }
  /* Shrink the stepper so all four steps fit without clipping. */
  #pbf-root .pbf-stepper { gap: 3px; max-width: 100%; }
  #pbf-root .pbf-step-label { font-size: 10.5px; }
  #pbf-root .pbf-step-line { width: 10px; }
  #pbf-root .pbf-class-grid { grid-template-columns: 1fr; gap: 12px; max-width: 420px; }
  #pbf-root .pbf-class-card { padding: 22px 18px; }
  /* Two per row: each card is half the width minus half the 14px grid gap. */
  #pbf-root .pbf-service-wrap { flex: 0 0 calc(50% - 7px); max-width: calc(50% - 7px); }
  #pbf-root .pbf-card:not(.is-popular) { width: 100%; }
  #pbf-root .pbf-appt-grid, #pbf-root .pbf-finalise-grid { grid-template-columns: 1fr; }
  #pbf-root .pbf-grid-3, #pbf-root .pbf-grid-2 { grid-template-columns: 1fr; }
  /* Stop the inline Back button overlapping the heading on narrow screens. */
  #pbf-root .pbf-back-inline { position: static; display: inline-block; margin: 0 0 14px; }
  /* 16px inputs prevent iOS Safari from auto-zooming on focus. */
  #pbf-root .pbf-input, #pbf-root .pbf-textarea, #pbf-root .pbf-phone-input,
  #pbf-root .pbf-time-slot, #pbf-root .pbf-cal-cell { font-size: 16px; }
  #pbf-root .pbf-summary, #pbf-root .pbf-aside { position: static; }
  #pbf-root .pbf-paymethods { grid-template-columns: 1fr; }
  #pbf-root .pbf-recap-row { grid-template-columns: 1fr; gap: 2px; }
  #pbf-root .pbf-main-col .pbf-nav { flex-wrap: wrap; }
}

/* ============================================================================
   FIT TO VIEWPORT — the Services step
   The step is laid out at its designed size (a 1320px canvas) and the whole
   thing is scaled down uniformly to fit the window, exactly like zooming the
   browser out. Nothing is hidden or reflowed, so it always looks like the
   design — just smaller on smaller screens. fitServicesStep() measures the
   natural size and sets the zoom; only that step is fitted, every other step
   scrolls normally.
   ========================================================================== */
html[data-pbf-fit="1"] #pbf-root { justify-content: center; min-height: 0; }
html[data-pbf-fit="1"] #pbf-root .pbf-outer { flex: 0 0 auto; min-height: 0; align-items: flex-start; }
html[data-pbf-fit="1"] #pbf-root .pbf-shell {
  flex: 0 0 auto; width: auto;
  zoom: var(--pbf-zoom, 1);
}
html[data-pbf-fit="1"] #pbf-root .pbf-body {
  flex: 0 0 auto; min-height: 0; overflow: visible;
  padding: 14px 24px 8px; justify-content: flex-start;
}
html[data-pbf-fit="1"] #pbf-root .pbf-header { padding: 10px 24px 0; }
html[data-pbf-fit="1"] #pbf-root .pbf-progress { margin-top: 0; }
html[data-pbf-fit="1"] #pbf-root .pbf-step.pbf-step-wide { width: 1320px; max-width: none; }
html[data-pbf-fit="1"] #pbf-root .pbf-hero { margin: 10px auto 24px; }
html[data-pbf-fit="1"] #pbf-root .pbf-trust { margin: 22px 0 16px; }
html[data-pbf-fit="1"] #pbf-root .pbf-bottom-actions { margin: 0; }

/* Inside the fitted canvas the viewport-width breakpoints don't apply: the
   canvas is always 1320px wide and is scaled as a whole, so it must keep the
   desktop layout regardless of the window size. Specificity beats the
   @media rules above. */
/* Five across, but flex rather than grid: with nine cards the last row holds
   four, and grid leaves the gap at the end while flex centres the row under
   the one above. */
html[data-pbf-fit="1"] #pbf-root .pbf-service-grid {
  display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;
  gap: 14px;
}
html[data-pbf-fit="1"] #pbf-root .pbf-svc-card {
  flex: 0 0 calc((100% - 4 * 14px) / 5);
  max-width: calc((100% - 4 * 14px) / 5);
}
html[data-pbf-fit="1"] #pbf-root .pbf-trust { grid-template-columns: repeat(var(--pbf-trust-cols, 4), 1fr); }
html[data-pbf-fit="1"] #pbf-root .pbf-trust-item { min-height: 0; border-bottom: 0; padding: 0 20px; }
html[data-pbf-fit="1"] #pbf-root .pbf-trust-item:not(:last-child) { border-right: 1px solid #d4e2f3; }
html[data-pbf-fit="1"] #pbf-root .pbf-bottom-actions { grid-template-columns: 180px 1fr 290px; }
html[data-pbf-fit="1"] #pbf-root .pbf-selection-copy { grid-column: auto; grid-row: auto; }
html[data-pbf-fit="1"] #pbf-root .pbf-btn2 { width: auto; }
html[data-pbf-fit="1"] #pbf-root .pbf-progress { max-width: 760px; gap: 18px; }
html[data-pbf-fit="1"] #pbf-root .pbf-progress-label { font-size: 14px; }
html[data-pbf-fit="1"] #pbf-root .pbf-progress-num { width: 34px; height: 34px; }
html[data-pbf-fit="1"] #pbf-root .pbf-hero-h1 { font-size: 34px; }
html[data-pbf-fit="1"] #pbf-root .pbf-hero-sub { font-size: 15px; }

/* ---- Coming-soon preview card ------------------------------------------ */
#pbf-root .pbf-svc-card.is-coming-soon { cursor: default; }
#pbf-root .pbf-svc-card.is-coming-soon:hover { transform: none; box-shadow: 0 10px 30px rgba(30,64,120,.09), 0 2px 8px rgba(30,64,120,.05); }
#pbf-root .pbf-svc-card.is-coming-soon .pbf-svc-image img { filter: grayscale(.55) opacity(.75); }
#pbf-root .pbf-svc-card.is-coming-soon .pbf-svc-title,
#pbf-root .pbf-svc-card.is-coming-soon .pbf-svc-blurb { color: #7a8aa3; }
#pbf-root .pbf-svc-soon {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  padding: 5px 11px; border-radius: 999px;
  background: linear-gradient(135deg, #6b7686, #4d5768); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  font-family: var(--pbf-font-head); white-space: nowrap;
  box-shadow: 0 3px 9px rgba(30,45,70,.22);
}

/* Five narrower columns need slightly tighter card text. */
html[data-pbf-fit="1"] #pbf-root .pbf-svc-content { padding: 34px 16px 0 6px; }
html[data-pbf-fit="1"] #pbf-root .pbf-svc-title { font-size: 15.5px; }
html[data-pbf-fit="1"] #pbf-root .pbf-svc-blurb { font-size: 12.5px; }
html[data-pbf-fit="1"] #pbf-root .pbf-svc-info { right: 12px; bottom: 12px; width: 32px; height: 32px; font-size: 16px; }
html[data-pbf-fit="1"] #pbf-root .pbf-svc-icon { left: 10px; }

/* Selected: the icon tile fills with the service colour and the icon reverses
   out. The icons are <img> SVGs, so the filter is how they go white. */
#pbf-root .pbf-svc-icon.is-on img { filter: brightness(0) invert(1); }
#pbf-root .pbf-svc-icon .pbf-ink-icon, #pbf-root .pbf-modal-icon .pbf-ink-icon { filter: none; }
#pbf-root .pbf-svc-card.is-selected .pbf-svc-title { color: #0d1834; }

/* ---- Service information popup ----------------------------------------- */
#pbf-root .pbf-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(13,24,52,.55); backdrop-filter: blur(3px);
  animation: pbf-modal-in .18s ease both;
}
#pbf-root .pbf-modal-panel {
  position: relative; width: min(460px, 100%); max-height: calc(100vh - 48px);
  overflow: auto; background: #fff; border-radius: 20px;
  box-shadow: 0 30px 70px -20px rgba(13,24,52,.5);
  animation: pbf-modal-rise .22s cubic-bezier(.22,1,.36,1) both;
}
#pbf-root .pbf-modal-media { position: relative; height: 190px; background: #e7edf5; }
#pbf-root .pbf-modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
#pbf-root .pbf-modal-icon {
  position: absolute; left: 24px; bottom: -26px; width: 56px; height: 56px;
  border-radius: 16px; display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(13,24,52,.22);
}
#pbf-root .pbf-modal-icon img { width: 27px; height: 27px; filter: brightness(0) invert(1); }
#pbf-root .pbf-modal-close {
  position: absolute; right: 14px; top: 14px; width: 34px; height: 34px;
  border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: #1a2e54; font-size: 22px; line-height: 1;
  display: grid; place-items: center; box-shadow: 0 3px 10px rgba(13,24,52,.2);
  transition: background .15s ease, transform .12s ease;
}
#pbf-root .pbf-modal-close:hover { background: #fff; transform: scale(1.08); }
#pbf-root .pbf-modal-body { padding: 38px 26px 26px; }
#pbf-root .pbf-modal-title {
  margin: 0 0 6px; font-size: 21px; font-weight: 800; letter-spacing: -.02em;
  color: #0d1834; font-family: var(--pbf-font-head);
}
#pbf-root .pbf-modal-soon {
  display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px;
  background: #eef1f6; color: #5b6a87; font-size: 10.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
#pbf-root .pbf-modal-lead { margin: 0 0 14px; color: #43577a; font-size: 14.5px; line-height: 1.5; }
#pbf-root .pbf-modal-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
#pbf-root .pbf-modal-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: #3b4b66; }
#pbf-root .pbf-modal-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; flex: 0 0 auto; }
#pbf-root .pbf-modal-price { margin: 0 0 16px; font-weight: 800; color: #0d1834; font-family: var(--pbf-font-head); }
/* The popup sits outside the scaled shell, so it must not inherit the fitted
   button sizing — hence the extra specificity. */
#pbf-root .pbf-modal-done,
html[data-pbf-fit="1"] #pbf-root .pbf-modal-done {
  width: 100%; height: 48px; border: 0; color: #fff; font-size: 15px;
}

@keyframes pbf-modal-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes pbf-modal-rise { from { opacity: 0; transform: translateY(14px) scale(.97) } to { opacity: 1; transform: none } }

@media (max-width: 560px) {
  #pbf-root .pbf-modal { padding: 14px; }
  #pbf-root .pbf-modal-media { height: 150px; }
}

/* ---- Stripe payment ------------------------------------------------------ */
#pbf-root .pbf-payment-element { margin-top: 4px; min-height: 40px; }
/* Each Stripe card field sits in a box styled like our own inputs; Stripe
   renders the input itself inside an iframe that fills it. */
#pbf-root .pbf-card-fields { display: flex; flex-direction: column; gap: 14px; text-align: left; }
#pbf-root .pbf-card-box {
  padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--pbf-line);
  background: #fff; min-height: 46px;
}
#pbf-root .pbf-card-box.StripeElement--focus { border-color: var(--pbf-brand); box-shadow: 0 0 0 3px rgba(47,122,214,.12); }
#pbf-root .pbf-card-box.StripeElement--invalid { border-color: var(--pbf-red); }
#pbf-root .pbf-card-fields .pbf-pay-error:empty { display: none; }
/* A wallet we cannot complete yet reads as unavailable, not as a dead button. */
#pbf-root .pbf-paymethod.is-soon { opacity: .55; cursor: default; }
#pbf-root .pbf-paymethod.is-soon .pbf-radio { visibility: hidden; }
#pbf-root .pbf-test-badge {
  margin-bottom: 10px; padding: 9px 12px; border-radius: 9px;
  background: #fff7e6; border: 1px solid #f0d9a8; color: #7a5a12;
  font-size: 12px; line-height: 1.45; font-weight: 600;
}
#pbf-root .pbf-pay-error { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--pbf-red); }
#pbf-root .pbf-result-ref {
  margin-top: 10px; font-family: var(--pbf-font-head); font-weight: 800;
  font-size: 14px; color: var(--pbf-ink);
}
#pbf-root .pbf-result-reason {
  margin-top: 10px; padding: 10px 12px; border-radius: 9px;
  background: #fdeeec; border: 1px solid #f4c9c3; color: #9b2f22;
  font-size: 12.5px; line-height: 1.45;
}

/* ---- Property type photos ------------------------------------------------ */
#pbf-root .pbf-class-media {
  position: relative; width: 100%; height: 150px;
  border-radius: 12px; overflow: visible; margin-bottom: 34px;
}
#pbf-root .pbf-class-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 12px;
}
#pbf-root .pbf-class-tile {
  position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%);
  width: 52px; height: 52px; border-radius: 15px; background: #fff;
  display: grid; place-items: center; box-shadow: 0 5px 15px rgba(39,74,124,.14);
  transition: background .18s ease;
}
#pbf-root .pbf-class-tile.is-on { background: var(--pbf-brand); }
/* Supplied as a black stroke on transparent, so it reverses out on the filled
   tile the same way the drawn icons did. Qualified with the tile and the
   element, or `.pbf-class-media img` above wins and stretches it to fill. */
#pbf-root .pbf-class-tile img.pbf-class-tile-img {
  width: 34px; height: 34px; object-fit: contain; display: block; border-radius: 0;
}
#pbf-root .pbf-class-tile.is-on img.pbf-class-tile-img { filter: brightness(0) invert(1); }
#pbf-root .pbf-class-tile .pbf-ink-icon { filter: none; }
@media (max-width: 760px) {
  #pbf-root .pbf-class-media { height: 120px; margin-bottom: 30px; }
}