/* ==========================================================================
   THEME "LIGHT" (default): "booking a stay at a really high-end hotel". Warm whites, pure-white card, 1px warm-gray hairlines,
   serif headings (the page's bundled Newsreader 500 via tokens.css, else a system serif), clean system sans for UI, sentence-case labels, ONE accent: --nb-green #2F5D45.
   Every colour/shape/type value reads the Landing Page's tokens.css (--nb-*) first and falls back to the same literal, so the form matches the page and also works standalone: see LIGHT-TOKENS.md.

   PHONE FIRST: all spacing is fluid (clamp() on viewport width/height), so the airy look shrinks on short screens (390x664, 360x600)
   instead of pushing Next/Pay off the fold. Tap targets >= 48px (Pay 52px), inputs 16px, body 15px, smallest text 12px.

   Load AFTER book-now.css. Applies to every mount that does NOT say data-nbpc-theme="green" or "dark":
       <link rel="stylesheet" href="book-now.css"><link rel="stylesheet" href="theme-light.css">
   Alternates:  data-nbpc-theme="green" = the original book-now.css look (nothing to load)  |  data-nbpc-theme="dark" = theme-example-dark.css
   Selectors have the specificity of plain .nbpc-bn (via :where), so a later rule or your own token overrides win.

   Contrast (from tokens.css): ink #22272B 14.4:1 . soft #4B5156 7.7:1 . muted #5F656A 5.7:1 . green #2F5D45 on white 7.6:1 . white on green 7.6:1 . error #B3261E 6.5:1
   ========================================================================== */
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) {
  /* brand: ONE accent = --nb-green (#2F5D45, alias --nb-accent) from tokens.css. Every value reads the page token first and
     falls back to the same literal, so the form looks identical standalone (no tokens.css) and on the NBPC page. */
  --nbpc-color-primary-dark: var(--nb-ink, #22272B);
  --nbpc-color-primary: var(--nb-green, #2F5D45);
  --nbpc-color-primary-light: var(--nb-green-hover, #244A36);
  --nbpc-color-accent: var(--nb-green, #2F5D45);
  --nbpc-color-highlight: var(--nb-green, #2F5D45);
  --nbpc-color-on-highlight: var(--nb-green-on, #FFFFFF);
  --nbpc-color-on-primary: var(--nb-green-on, #FFFFFF);
  --nbpc-color-selected: var(--nb-green, #2F5D45);
  --nbpc-color-on-selected: var(--nb-green-on, #FFFFFF);
  --nbpc-color-price: var(--nb-green, #2F5D45);
  --nbpc-color-feature-text: var(--nb-text-soft, #4B5156);
  --nbpc-color-total-rule: var(--nb-line, #E7E3D8);
  --nbpc-color-button-text: var(--nb-green-on, #FFFFFF);
  --nbpc-color-button-secondary-bg: var(--nb-surface, #FFFFFF);
  --nbpc-color-button-secondary-text: var(--nb-green, #2F5D45);
  --nbpc-color-slot-selected-text: var(--nb-green, #2F5D45);

  /* surfaces */
  --nbpc-color-page-bg: transparent;
  --nbpc-color-card-bg: var(--nb-surface, #FFFFFF);
  --nbpc-color-tint: var(--nb-surface-2, #F4F1EA);
  --nbpc-color-tint-2: var(--nb-surface-2, #F4F1EA);
  --nbpc-color-field-bg: var(--nb-surface, #FFFFFF);
  --nbpc-color-field-bg-focus: var(--nb-surface, #FFFFFF);
  --nbpc-color-progress-bg: var(--nb-surface, #FFFFFF);
  --nbpc-color-track: var(--nb-line, #E7E3D8);
  --nbpc-color-border: var(--nb-line, #E7E3D8);
  --nbpc-color-border-tint: var(--nb-field-line, #8F8A7C);        /* input / select edge (3.3:1, WCAG 1.4.11) */
  --nbpc-color-tile-border: var(--nb-line, #E7E3D8);       /* unselected option tiles: the same hairline as the cards */
  --nbpc-color-checkbox-border: var(--nb-field-line, #8F8A7C);
  --nbpc-color-divider: var(--nb-line, #E7E3D8);

  /* text */
  --nbpc-color-text: var(--nb-ink, #22272B);
  --nbpc-color-text-soft: var(--nb-text-soft, #4B5156);
  --nbpc-color-muted: var(--nb-muted, #5F656A);
  --nbpc-color-label: var(--nb-text-soft, #4B5156);
  --nbpc-color-check-text: var(--nbpc-color-text-soft);
  --nbpc-color-seg-label: var(--nb-muted, #5F656A);
  --nbpc-color-seg-label-active: var(--nb-ink, #22272B);
  --nbpc-color-date-disabled: #B9B6AC;

  /* header */
  --nbpc-color-header-text: var(--nb-ink, #22272B);
  --nbpc-color-header-muted: var(--nb-text-soft, #4B5156);
  --nbpc-color-header-muted-2: var(--nb-muted, #5F656A);
  --nbpc-color-star: var(--nb-gold, #8A6D1E);

  /* states */
  --nbpc-color-error: var(--nb-error, #B3261E);
  --nbpc-color-error-bg: var(--nb-error-bg, #FDF4F2);
  --nbpc-color-error-border: var(--nb-error-line, #F0D0CB);
  --nbpc-color-error-text: var(--nb-error-text, #8A1F17);
  --nbpc-color-focus: var(--nb-green, #2F5D45);
  --nbpc-color-focus-ring: rgba(47, 93, 69, 0.22);
  --nbpc-color-shadow: rgba(34, 39, 43, 0.07);
  --nbpc-color-cal-nav-bg: rgba(47, 93, 69, 0.08);

  /* flat fills: no gradients */
  --nbpc-gradient-header: linear-gradient(var(--nb-surface, #FFFFFF), var(--nb-surface, #FFFFFF));
  --nbpc-gradient-button: linear-gradient(var(--nb-green, #2F5D45), var(--nb-green, #2F5D45));
  --nbpc-gradient-progress: linear-gradient(90deg, var(--nb-green, #2F5D45), var(--nb-green, #2F5D45));
  --nbpc-gradient-rate: linear-gradient(var(--nb-surface-2, #F4F1EA), var(--nb-surface-2, #F4F1EA));
  --nbpc-gradient-promo: linear-gradient(var(--nb-green, #2F5D45), var(--nb-green, #2F5D45));
  --nbpc-gradient-calendar-head: linear-gradient(var(--nb-green, #2F5D45), var(--nb-green, #2F5D45));
  --nbpc-gradient-selected: linear-gradient(var(--nb-green-tint, #EEF3EE), var(--nb-green-tint, #EEF3EE));

  /* type: heading = the page's bundled Newsreader 500 when tokens.css is loaded (roman 500 only: never italic, never 600+ on headings),
     else the same system-serif stack. UI = system sans. */
  --nbpc-font-family: var(--nb-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --nbpc-font-family-heading: var(--nb-font-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif);
  /* ONE type scale: 12 caption . 14 small (labels, tiles, notes) . 16 body, inputs, buttons . 18 lead */
  --nbpc-type-xs: 12px;
  --nbpc-type-sm: 14px;
  --nbpc-type-md: 16px;
  --nbpc-type-lg: 18px;
  --nbpc-fs-xs: var(--nbpc-type-xs);
  --nbpc-fs-sm: var(--nbpc-type-sm);
  --nbpc-fs-base: var(--nbpc-type-md);
  --nbpc-fs-md: var(--nbpc-type-md);
  --nbpc-fs-lg: var(--nbpc-type-lg);
  --nbpc-fs-btn: var(--nbpc-type-md);
  --nbpc-fs-input: var(--nbpc-type-md);
  --nbpc-tile-gap: 10px;
  --nbpc-color-icon-tint: var(--nb-green-tint-strong, #D4E4D9);   /* soft fill of the pest icons (accent stays --nb-green) */
  --nbpc-fs-title: clamp(22px, 6vw, 26px);
  --nbpc-fs-conf-title: clamp(23px, 6.2vw, 27px);
  --nbpc-fs-header: clamp(26px, 7vw, 30px);
  --nbpc-fs-price: clamp(28px, 8vw, 34px);
  --nbpc-fw-medium: 500;
  --nbpc-fw-semibold: 500;
  --nbpc-fw-bold: 600;
  --nbpc-fw-heavy: 600;
  --nbpc-line-height: 1.5;
  --nbpc-label-transform: none;
  --nbpc-label-spacing: 0;
  --nbpc-heading-spacing: var(--nb-track-heading, -0.01em);

  /* radii: card 16, option tiles and fields 14, buttons pills (rule below) */
  --nbpc-radius-card: var(--nb-radius-card, 16px);
  --nbpc-radius-card-mobile: var(--nb-radius-card, 16px);
  --nbpc-radius-option: var(--nb-radius-option, 14px);
  --nbpc-radius-field: var(--nb-radius-field, 14px);
  --nbpc-radius-small: 10px;
  --nbpc-radius-checkbox: 6px;
  --nbpc-radius-pill: 99px;

  /* FLUID spacing: about 28/18/22px at 844px tall, about 14/10/12px at 600px tall */
  --nbpc-card-max-width: 560px;
  --nbpc-outer-pad: clamp(10px, 3vw, 20px);
  --nbpc-pad-x: clamp(24px, 4vw, 40px);
  --nbpc-pad-x-mobile: clamp(18px, 5vw, 24px);
  --nbpc-header-pad-top: clamp(16px, 3.4vh, 30px);
  --nbpc-header-pad-bottom: clamp(10px, 2.2vh, 22px);
  --nbpc-body-pad-top: clamp(12px, 3vh, 30px);
  --nbpc-body-pad-bottom: clamp(16px, 3vh, 30px);
  --nbpc-gap: clamp(8px, 1.6vh, 14px);
  --nbpc-gap-sm: 8px;
  --nbpc-field-gap: clamp(10px, 2.1vh, 20px);
  --nbpc-section-gap: clamp(10px, 2.3vh, 24px);
  --nbpc-border-width: 1px;
  --nbpc-input-pad-y: 12px;
  --nbpc-input-pad-x: 14px;
  --nbpc-button-pad-y: 14px;
  --nbpc-button-pad-x: 22px;
  --nbpc-tap-target: var(--nb-tap, 48px);

  /* subtle shadows only */
  --nbpc-shadow-card: var(--nb-shadow-card, 0 1px 2px rgba(34, 39, 43, 0.04), 0 18px 40px -26px rgba(34, 39, 43, 0.20));
  --nbpc-shadow-button: none;
  --nbpc-shadow-button-hover: none;
  --nbpc-shadow-option-hover: none;
  --nbpc-shadow-option-selected: 0 0 0 1px var(--nb-green, #2F5D45);
  --nbpc-shadow-slot-selected: 0 0 0 1px var(--nb-green, #2F5D45);
  --nbpc-shadow-focus: var(--nb-focus-ring, 0 0 0 3px rgba(47, 93, 69, 0.22));
}

/* ---- where tokens cannot reach (same scope; specificity 0,2,0 beats the base file's short-screen rules). Colors only via tokens. ---- */
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) { font-size: var(--nbpc-type-md); color: var(--nbpc-color-text); }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-card { border: 1px solid var(--nbpc-color-border); }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-header { border-bottom: 1px solid var(--nbpc-color-divider); text-align: left; }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-header-title, .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-step-title, .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-conf-title, .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-pb-val, .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-asap-val { font-weight: 500; font-style: normal; }   /* roman 500 only */
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-pb-val, .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-asap-val { font-family: var(--nbpc-font-family-heading); }
/* labels: sentence case, 14px / 500 (the page's voice); progress labels 12px / 500 */
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-label, .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-section-label, .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-pay-title { font-size: var(--nbpc-type-sm); font-weight: 500; text-transform: none; letter-spacing: 0; }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-hint { text-transform: none; letter-spacing: 0; }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-seg-label { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-check span { font-size: var(--nbpc-type-sm); line-height: 1.45; color: var(--nbpc-color-check-text, var(--nbpc-color-text-soft)); }
/* inputs: 48px, field-line edge, quiet focus */
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-input, .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-select { min-height: 48px; font-size: 16px; box-shadow: none; border: 1px solid var(--nbpc-color-border-tint); }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-input:focus, .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-select:focus { border-color: var(--nbpc-color-focus); box-shadow: var(--nbpc-shadow-focus); }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-has-error .nbpc-input, .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-has-error .nbpc-select { border-color: var(--nbpc-color-error); }
/* buttons: 52px pills (Next, Back, Pay, Call/Text link buttons) */
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-btn, .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-linkbtn { min-height: 52px; font-weight: 600; letter-spacing: 0.2px; border-radius: 999px; }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-btn-primary { border: 1px solid var(--nbpc-color-primary); }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-btn-primary:active:not([disabled]) { background: var(--nbpc-color-primary-light); border-color: var(--nbpc-color-primary-light); }
@media (hover: hover) { .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-btn-primary:hover:not([disabled]) { background: var(--nbpc-color-primary-light); border-color: var(--nbpc-color-primary-light); } }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-btn-secondary { border: 1px solid var(--nbpc-color-border-tint); }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-paybtn { min-height: 52px; font-size: 17px; }
/* progress: a thin line */
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-seg-track, .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-seg-fill { height: 2px; }
/* option tiles, chips, slots: 1px tile line; selected = tint + accent line (token driven) */
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-opt-body { border-width: 1px; border-color: var(--nbpc-color-tile-border, var(--nbpc-color-border)); }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-chip input:checked + .nbpc-opt-body { background: var(--nbpc-color-tint); border-color: var(--nbpc-color-selected); box-shadow: var(--nbpc-shadow-option-selected); }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-chip input:checked + .nbpc-opt-body .nbpc-opt-label, .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-chip input:checked + .nbpc-opt-body .nbpc-opt-sub { color: var(--nbpc-color-selected); }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-chip .nbpc-opt-label { font-size: 12px; letter-spacing: 0.4px; }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-plans .nbpc-opt-sub { font-size: 12px; }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-opt-badge { background: var(--nbpc-color-selected); color: var(--nbpc-color-on-selected); font-weight: 600; letter-spacing: 0.4px; }
/* tile labels wrap in balanced lines on phones ("Book your service", "Schedule your service") */
@media (max-width: 430px) { .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-choice .nbpc-opt-label { max-width: 7.5em; margin-left: auto; margin-right: auto; text-wrap: balance; } }
/* price box / summary / notices: neutral surface, hairline */
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-pricebox, .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-notice, .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-business { background: var(--nbpc-color-tint); border: 1px solid var(--nbpc-color-border); box-shadow: none; }
/* sticky Next bar */
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-btns.nbpc-sticky { border-top: 1px solid var(--nbpc-color-border); box-shadow: none; background: rgba(255, 255, 255, 0.97); }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-callline a { color: var(--nbpc-color-selected); }

/* ---- phone-first compaction (all fluid; nothing here changes copy, fields or flow) ---- */
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-row { grid-template-columns: 1fr 1fr; gap: 10px; }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-progress { padding: clamp(10px, 2vh, 18px) var(--nbpc-pad-x-mobile) clamp(8px, 1.6vh, 14px); }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-field { gap: 5px; margin-bottom: var(--nbpc-field-gap); }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-step-title { margin-bottom: clamp(6px, 1.4vh, 12px); }
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-check { margin-bottom: clamp(8px, 1.6vh, 14px); }
@media (min-width: 541px) {
  .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-progress { padding-left: var(--nbpc-pad-x); padding-right: var(--nbpc-pad-x); }
  .nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-row { gap: var(--nbpc-gap); }
}
/* "Business? Call or text us": a real 44px tap target without adding height (negative margins give the space back) */
.nbpc-bn:where(:not([data-nbpc-theme="green"], [data-nbpc-theme="dark"])) .nbpc-bizlink { min-height: 44px; display: inline-flex; align-items: center; margin: -8px 0; padding: 0 2px; }