/* ═══════════════════════════════════════════════════════════════
   WAI Booking Form — White Apple Institute

   Palette and type follow the WAI design system, which is derived from
   Wounded Warrior Project's stylesheet:

     #003161  navy      headings, focus rings
     #005da5  blue      interactive / selected states
     #b5121b  red       primary action, errors
     #232323  ink       body copy (their body colour)
     #f0f0f0  grey      section bands
     Montserrat, Arial, Helvetica, sans-serif

   Everything is driven from the custom properties below. Changing brand
   should mean editing that block and nothing else — the previous version
   hardcoded #005da5 in ~33 places alongside the tokens, so the two drifted.
   ═══════════════════════════════════════════════════════════════ */

.wbm-booking-form-wrap {
  --wbm-navy:          #003161;
  --wbm-accent:        #005da5;
  --wbm-accent-2:      #003161;
  --wbm-success:       #005da5;
  --wbm-danger:        #b5121b;
  --wbm-text:          #232323;
  --wbm-text-soft:     #3c4550;
  --wbm-text-muted:    #5a6472;
  --wbm-border:        #d6dee8;
  --wbm-border-strong: #b9c5d4;
  --wbm-input-bg:        #fbfcfe;
  --wbm-input-bg-focus:  #ffffff;
  --wbm-glow-accent:   0 0 0 3px rgba(0, 93, 165, .18);
  --wbm-glow-success:  0 0 0 3px rgba(0, 93, 165, .22);
  --wbm-shadow-accent: 0 8px 20px -6px rgba(0, 49, 97, .35);
  --wbm-shadow-mag:    0 8px 20px -6px rgba(181, 18, 27, .30);
  --wbm-shadow-cyan:   0 8px 18px -6px rgba(0, 93, 165, .35);
  --wbm-font: Montserrat, Arial, Helvetica, sans-serif;
  --wbm-ease: cubic-bezier(.4,.0,.2,1);
  --wbm-dur:  .22s;

  position: relative;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  
  padding: 2.5rem 2.25rem 2.25rem;
  box-shadow: none;
  max-width: 1400px;
  margin: 0 auto;
  font-family: var(--wbm-font);
  color: var(--wbm-text);
  line-height: 1.45;
  scroll-margin-top: 110px;
}

/* Solid orange top border */
.wbm-booking-form-wrap::before {
  display: none;
}

/* ═══ STEP INDICATOR — numbered circles + progress line ═══════ */
.wbm-bf-steps {
  display: flex;
  position: relative;
  margin: 0 0 2.25rem;
  padding: .25rem 0;
}

/* ═══ "Prefer to talk?" — call alternative above the step indicator ═══════ */
.wbm-bf-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  margin: -4px 0 22px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  transition: color var(--wbm-dur) var(--wbm-ease);
}
.wbm-bf-call svg {
  width: 12px;
  height: 12px;
  fill: #005da5;
  flex-shrink: 0;
}
.wbm-bf-call-label  { color: #6b7280; }
.wbm-bf-call-number { color: #232323; font-weight: 700; letter-spacing: .005em; }
.wbm-bf-call:hover .wbm-bf-call-number { color: #005da5; }
.wbm-bf-call:hover svg { fill: #005da5; }
.wbm-bf-step {
  flex: 1;
  position: relative;
  text-align: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wbm-text-muted);
  background: transparent;
  border: none;
  padding: 0 .25rem;
  cursor: default;
  transition: color var(--wbm-dur) var(--wbm-ease);
}

/* numbered circle above label */
.wbm-bf-step::before {
  content: attr(data-step);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  width: 38px;
  height: 38px;
  background: #f3f4f6;
  border: 2px solid #e5e7eb;
  border-radius: 50%;
  color: #9ca3af;
  font-size: .85rem;
  font-weight: 800;
  position: relative;
  z-index: 2;
  transition:
    background var(--wbm-dur) var(--wbm-ease),
    border-color var(--wbm-dur) var(--wbm-ease),
    color var(--wbm-dur) var(--wbm-ease),
    box-shadow .35s var(--wbm-ease),
    transform var(--wbm-dur) var(--wbm-ease);
}

/* line connecting this step to the next */
.wbm-bf-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 2px;
  background: #e5e7eb;
  z-index: 0;
  transition: background .35s var(--wbm-ease);
}

/* active step */
.wbm-bf-step--active {
  color: #232323;
  font-weight: 800;
}
.wbm-bf-step--active::before {
  background: #b5121b;
  border-color: #b5121b;
  color: #fff;
  box-shadow: 0 0 0 5px rgba(255, 105, 0, .18);
}

/* completed step */
.wbm-bf-step--done {
  color: var(--wbm-accent);
}
.wbm-bf-step--done::before {
  background: var(--wbm-accent);
  border-color: var(--wbm-accent);
  color: #fff;
  content: "\2713";
  box-shadow: 0 4px 12px -4px rgba(0, 93, 165, .55);
}
.wbm-bf-step--done::after { background: var(--wbm-accent); }

/* ═══ PANELS ═══════════════════════════════════════════════════ */
.wbm-bf-panel { display: none; }
.wbm-bf-panel--active {
  display: block;
  animation: espFadeIn .35s ease;
}
@keyframes espFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ SECTION HEADING ═════════════════════════════════════════ */
.wbm-bf-panel h3,
.wbm-booking-form-wrap h3 {
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  padding-bottom: .75rem;
  color: #232323;
  position: relative;
}
.wbm-bf-panel h3::after,
.wbm-booking-form-wrap h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 56px;
  background: #005da5;
}

/* ═══ FIELD GRID ═══════════════════════════════════════════════ */
.wbm-bf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 14px;
}
.wbm-bf-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: transform .15s ease;
}
.wbm-bf-field.wbm-bf-full { grid-column: span 2; }
.wbm-bf-field label {
  font-size: .68rem;
  font-weight: 800;
  color: #374151;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s ease;
}
.wbm-bf-field:focus-within label { color: var(--wbm-accent); }
.wbm-bf-field label .wbm-required,
.wbm-bf-field label span { color: var(--wbm-accent) !important; }

/* ═══ INPUTS — refined with icons ══════════════════════════════ */

/* AUTHORITATIVE FIELD COLORS.
 * These replaced per-element inline styles, so they must win against theme /
 * Elementor rules. Specificity is raised by chaining the wrap class, and the
 * text color is declared three ways so the value can never be partially
 * applied (which is how white-on-white text shipped previously):
 *   color                   → the text
 *   -webkit-text-fill-color → Safari/iOS, which ignores `color` in some cases
 *   caret-color             → the blinking cursor
 * If you restyle inputs, change them HERE — not in the template. */
.wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field input,
.wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field select,
.wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field textarea {
  color: #232323 !important;
  -webkit-text-fill-color: #232323 !important;
  caret-color: #232323 !important;
  background-color: #f9fafb !important;
  opacity: 1 !important;
}

.wbm-booking-form-wrap .wbm-bf-field input,
.wbm-booking-form-wrap .wbm-bf-field select,
.wbm-booking-form-wrap .wbm-bf-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px 13px 44px !important;
  font-size: .94rem;
  font-weight: 500;
  font-family: inherit;
  color: #232323 !important;
  -webkit-text-fill-color: #232323 !important;
  caret-color: #232323 !important;
  background-color: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition:
    border-color var(--wbm-dur) var(--wbm-ease),
    background-color var(--wbm-dur) var(--wbm-ease),
    box-shadow var(--wbm-dur) var(--wbm-ease);
  -webkit-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 18px 18px;
}
.wbm-booking-form-wrap .wbm-bf-field input::placeholder,
.wbm-booking-form-wrap .wbm-bf-field textarea::placeholder {
  color: #9ca3af !important;
  font-weight: 400;
  opacity: 1;
}
.wbm-booking-form-wrap .wbm-bf-field select option,
.wbm-booking-form-wrap .wbm-bf-field select optgroup {
  background-color: #ffffff !important;
  color: #232323 !important;
  font-weight: 500;
}
.wbm-booking-form-wrap .wbm-bf-field select option:checked,
.wbm-booking-form-wrap .wbm-bf-field select option:hover {
  background-color: #f3f4f6 !important;
  color: #232323 !important;
}
.wbm-booking-form-wrap .wbm-bf-field input:hover,
.wbm-booking-form-wrap .wbm-bf-field select:hover,
.wbm-booking-form-wrap .wbm-bf-field textarea:hover {
  border-color: #d1d5db !important;
  background-color: #ffffff !important;
}
.wbm-booking-form-wrap .wbm-bf-field input:focus,
.wbm-booking-form-wrap .wbm-bf-field select:focus,
.wbm-booking-form-wrap .wbm-bf-field textarea:focus {
  outline: none !important;
  border-color: var(--wbm-accent) !important;
  background-color: #ffffff !important;
  box-shadow: var(--wbm-glow-accent) !important;
}
/* Kill browser autofill background */
.wbm-booking-form-wrap .wbm-bf-field input:-webkit-autofill,
.wbm-booking-form-wrap .wbm-bf-field input:-webkit-autofill:hover,
.wbm-booking-form-wrap .wbm-bf-field input:-webkit-autofill:focus,
.wbm-booking-form-wrap .wbm-bf-field input:-webkit-autofill:active {
  -webkit-text-fill-color: #232323 !important;
  caret-color: #232323 !important;
  transition: background-color 9999s ease-in-out 0s;
}
.wbm-booking-form-wrap .wbm-bf-field textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.55;
  background-position: left 14px top 16px;
  padding-top: 16px !important;
}

/* ── Icon backgrounds — slate stroke, 18×18 ────────────────── */
.wbm-bf-field input#wbm-first-name,
.wbm-bf-field input#wbm-last-name {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a8b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.wbm-bf-field input#wbm-phone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a8b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.wbm-bf-field input#wbm-email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a8b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}
.wbm-bf-field input#wbm-address {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a8b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.wbm-bf-field input#wbm-city {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a8b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2' ry='2'/%3E%3Cline x1='9' y1='6' x2='9.01' y2='6'/%3E%3Cline x1='15' y1='6' x2='15.01' y2='6'/%3E%3Cline x1='9' y1='10' x2='9.01' y2='10'/%3E%3Cline x1='15' y1='10' x2='15.01' y2='10'/%3E%3Cline x1='9' y1='14' x2='9.01' y2='14'/%3E%3Cline x1='15' y1='14' x2='15.01' y2='14'/%3E%3C/svg%3E");
}
.wbm-bf-field input#wbm-zip {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a8b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='4' y1='15' x2='20' y2='15'/%3E%3Cline x1='10' y1='3' x2='8' y2='21'/%3E%3Cline x1='16' y1='3' x2='14' y2='21'/%3E%3C/svg%3E");
}
.wbm-bf-field select#wbm-service {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a8b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%2300C8FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 5.5 7 9.5 11 5.5'/%3E%3C/svg%3E");
  background-position: left 14px center, right 14px center;
  background-size: 18px 18px, 14px 14px;
  padding-right: 38px !important;
  cursor: pointer;
}
.wbm-bf-field textarea#wbm-notes {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a8b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* focus state — icons turn accent orange */
.wbm-bf-field:focus-within input#wbm-first-name,
.wbm-bf-field:focus-within input#wbm-last-name {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300C8FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.wbm-bf-field:focus-within input#wbm-phone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300C8FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.wbm-bf-field:focus-within input#wbm-email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300C8FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}
.wbm-bf-field:focus-within input#wbm-address {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300C8FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* checkbox row */
.wbm-booking-form-wrap input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--wbm-accent);
  cursor: pointer;
}

/* ═══ NAV BUTTONS ══════════════════════════════════════════════ */
.wbm-bf-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  gap: 12px;
}
.wbm-bf-nav > span:first-child { flex: 1; }

.wbm-bf-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--wbm-accent);
  color: #fff;
  border: none;
  padding: 1rem 1.9rem;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--wbm-dur) var(--wbm-ease),
    color var(--wbm-dur) var(--wbm-ease),
    box-shadow var(--wbm-dur) var(--wbm-ease),
    transform .15s var(--wbm-ease);
  border-radius: 0;
  font-family: inherit;
}
.wbm-bf-btn:hover {
  background: var(--wbm-accent-2);
  color: #fff;
  box-shadow: var(--wbm-shadow-mag);
}
.wbm-bf-btn:active {
  background: var(--wbm-accent-2);
  transform: translateY(1px);
  box-shadow: 0 4px 10px -4px rgba(0, 49, 97, .35);
}
.wbm-bf-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Animated arrow spans — used in Next / Back / Submit buttons.
   The HTML wraps the arrow in <span class="wbm-bf-btn-arrow wbm-bf-btn-arrow--r"> (or --l).
   Plain "→" or "←" in raw button text still works; only animates if wrapped. */
.wbm-bf-btn-arrow {
  display: inline-block;
  transition: transform var(--wbm-dur) var(--wbm-ease);
  will-change: transform;
}
.wbm-bf-btn:hover:not(:disabled) .wbm-bf-btn-arrow--r { transform: translateX(4px); }
.wbm-bf-btn:hover:not(:disabled) .wbm-bf-btn-arrow--l { transform: translateX(-4px); }

.wbm-bf-btn--outline {
  background: transparent;
  color: var(--wbm-text-soft);
  border: 1px solid var(--wbm-border-strong);
  padding: calc(1rem - 1px) calc(1.9rem - 1px);
  box-shadow: none;
}
.wbm-bf-btn--outline:hover {
  background: var(--wbm-accent);
  color: #fff;
  border-color: var(--wbm-accent);
  box-shadow: 0 8px 20px -8px rgba(13, 13, 13, .45);
}
.wbm-bf-btn--outline:active {
  background: var(--wbm-accent);
  box-shadow: 0 3px 8px -3px rgba(13, 13, 13, .35);
}

/* Primary final-action button — gradient + stronger ambient shadow */
#wbm-bf-submit {
  background: linear-gradient(135deg, var(--wbm-accent) 0%, #ff8a35 100%);
  box-shadow: 0 6px 20px -6px rgba(0, 93, 165, .45);
}
#wbm-bf-submit:hover:not(:disabled) {
  background: #005da5;
  box-shadow: 0 14px 32px -10px rgba(0, 49, 97, .55);
}
#wbm-bf-submit:active:not(:disabled) {
  background: #005da5;
  box-shadow: 0 4px 12px -4px rgba(0, 49, 97, .4);
}

/* ═══ ERROR ════════════════════════════════════════════════════ */
.wbm-bf-error-msg {
  background: rgba(255, 0, 77, .14);
  border-left: 3px solid #005da5;
  color: #d4ffb0;
  padding: .85rem 1rem;
  margin-bottom: 1.1rem;
  font-size: .85rem;
  font-weight: 600;
  animation: espErrIn .28s var(--wbm-ease);
}
@keyframes espErrIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ CALENDAR ═════════════════════════════════════════════════ */
.wbm-bf-month-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.wbm-bf-month-nav h3 {
  font-size: 1rem;
  font-weight: 900;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-bottom: 0;
}
.wbm-bf-month-nav h3::after { display: none; }
.wbm-bf-month-nav button {
  background: #f3f4f6;
  color: var(--wbm-text);
  border: 1px solid var(--wbm-border);
  padding: .55rem 1.1rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 6px;
  transition: background .2s, transform .15s, border-color .2s;
}
.wbm-bf-month-nav button:hover { background: var(--wbm-accent); color: #fff; border-color: var(--wbm-accent); }
.wbm-bf-month-nav button:focus-visible { outline: 3px solid var(--wbm-navy); outline-offset: 2px; }
.wbm-bf-month-nav h3 {
  font-family: var(--wbm-font);
  font-weight: 700;
  color: var(--wbm-navy);
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Loading / empty / error states inside the scheduler. These were inline
   styles in booking-form.js and so were unthemeable. */
.wbm-bf-cal-msg {
  text-align: center;
  font-family: var(--wbm-font);
  color: var(--wbm-text-muted);
  padding: 2rem 1rem;
  margin: 0;
}
.wbm-bf-cal-msg--error {
  color: var(--wbm-danger);
  font-weight: 600;
}
.wbm-bf-slots-label {
  font-family: var(--wbm-font);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wbm-navy);
  margin: 0 0 .6rem;
}

.wbm-bf-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: .5rem 0 1.25rem;
}

/* Weekday header row. These were carrying an inline style from the JS, so
   they couldn't be themed at all — now a class the stylesheet owns. */
.wbm-bf-cal-dow {
  text-align: center;
  font-family: var(--wbm-font);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wbm-text-muted);
  padding: .4rem .2rem .55rem;
}

.wbm-bf-cal-day {
  position: relative;
  padding: .75rem .25rem;
  text-align: center;
  font-family: var(--wbm-font);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--wbm-navy);
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--wbm-border);
  border-radius: 4px;
  transition:
    background var(--wbm-dur) var(--wbm-ease),
    border-color var(--wbm-dur) var(--wbm-ease),
    color var(--wbm-dur) var(--wbm-ease);
}

.wbm-bf-cal-day:hover {
  border-color: var(--wbm-accent);
  background: rgba(0, 93, 165, .08);
  color: var(--wbm-accent);
}

/* Selected day. Solid navy-blue with white numerals rather than the old
   cyan fill with black text, which failed contrast at this size. */
.wbm-bf-cal-day--active,
.wbm-bf-cal-day--active:hover {
  background: var(--wbm-accent);
  border-color: var(--wbm-accent);
  color: #fff;
  font-weight: 700;
}

/* Today, when it isn't the selected day — a navy ring rather than a fill,
   so it reads as a marker and not as a second selection. */
.wbm-bf-cal-day--today:not(.wbm-bf-cal-day--active) {
  border-color: var(--wbm-navy);
  box-shadow: inset 0 0 0 1px var(--wbm-navy);
}

/* Unavailable. Kept visible rather than faded to 25%, so the month still
   reads as a month; the muted fill and struck-through weight say "not this
   one" without making the grid look broken when only a few days are open. */
.wbm-bf-cal-day--disabled {
  background: #f4f6f8;
  border-color: #e8ecf1;
  color: #a7b2c0;
  font-weight: 400;
  pointer-events: none;
  cursor: default;
}

.wbm-bf-cal-day:focus-visible {
  outline: 3px solid var(--wbm-navy);
  outline-offset: 2px;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .wbm-bf-cal-day { transition: none; }
}

/* ═══ TIME SLOTS ═══════════════════════════════════════════════ */
.wbm-bf-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  margin: 1rem 0;
}
.wbm-bf-slot {
  padding: .7rem;
  text-align: center;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background var(--wbm-dur) var(--wbm-ease),
    border-color var(--wbm-dur) var(--wbm-ease),
    color var(--wbm-dur) var(--wbm-ease),
    box-shadow var(--wbm-dur) var(--wbm-ease);
  background: #f9fafb;
  border: 1px solid var(--wbm-border);
}
.wbm-bf-slot:hover {
  border-color: var(--wbm-accent);
  background: rgba(0, 93, 165, .08);
}
.wbm-bf-slot--active {
  background: var(--wbm-accent);
  border-color: var(--wbm-accent);
  color: #fff;
  box-shadow: var(--wbm-shadow-accent);
}

/* ═══ SUCCESS STATE ════════════════════════════════════════════ */
.wbm-bf-success { text-align: center; padding: 2.75rem 1rem; }
.wbm-bf-success h2 {
  font-size: 1.75rem;
  font-weight: 900;
  margin-bottom: .85rem;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--wbm-accent);
}
.wbm-bf-success p { color: var(--wbm-text-muted); font-size: .95rem; }

/* ═══ PRE-SELECT BANNER ════════════════════════════════════════ */
.wbm-bf-preselect {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f9fafb;
  border-left: 3px solid var(--wbm-accent);
  padding: .9rem 1.1rem;
  margin-bottom: 1.4rem;
  animation: espSlideDown .35s var(--wbm-ease);
}
.wbm-bf-preselect-icon {
  width: 28px;
  height: 28px;
  background: var(--wbm-accent);
  color: #fff;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
}
.wbm-bf-preselect-text {
  flex: 1;
  font-size: .88rem;
  color: var(--wbm-text-soft);
  font-weight: 500;
}
.wbm-bf-preselect-text strong {
  color: var(--wbm-text);
  font-weight: 800;
  letter-spacing: .01em;
}

/* category pill — matches solar-services card badges */
.wbm-bf-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  margin-left: 10px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.wbm-bf-cat-pill--repair       { background: #7FFF00; color: #000; }
.wbm-bf-cat-pill--service      { background: #005da5; color: #000; }
.wbm-bf-cat-pill--installation { background: #005da5; color: #fff; }

.wbm-bf-preselect-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--wbm-text-muted);
  padding: 0 .35rem;
  line-height: 1;
  transition: color .2s;
  font-family: inherit;
}
.wbm-bf-preselect-close:hover {
  color: var(--wbm-text);
}
@keyframes espSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════ */
@media (max-width: 540px) {
  .wbm-booking-form-wrap { padding: 1.6rem 1.25rem 1.4rem; }
  .wbm-bf-grid { grid-template-columns: 1fr; gap: 14px; }
  .wbm-bf-field.wbm-bf-full { grid-column: span 1; }
  .wbm-bf-step { font-size: .6rem; padding: 0 .15rem; }
  .wbm-bf-step::before { width: 32px; height: 32px; font-size: .75rem; margin-bottom: 8px; }
  .wbm-bf-step:not(:last-child)::after { top: 17px; left: calc(50% + 19px); right: calc(-50% + 19px); }
  .wbm-bf-btn { padding: .95rem 1.4rem; font-size: .72rem; }
  .wbm-bf-btn--outline { padding: calc(.95rem - 1px) calc(1.4rem - 1px); }
  .wbm-bf-calendar { gap: 4px; }
  .wbm-bf-cal-day { padding: .7rem .2rem; font-size: .82rem; }
  .wbm-bf-slot { padding: .8rem .4rem; }
  .wbm-bf-nav { gap: 8px; }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .wbm-booking-form-wrap *,
  .wbm-booking-form-wrap *::before,
  .wbm-booking-form-wrap *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ═══ CONSENT / SMS OPT-IN ROWS ════════════════════════════════ */
.wbm-bf-consent { margin-top: .9rem; }
.wbm-bf-consent + .wbm-bf-consent { margin-top: .55rem; }
.wbm-bf-checkline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--wbm-text-soft);
  cursor: pointer;
  line-height: 1.4;
}
.wbm-bf-checkline input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--wbm-input-bg);
  border: 1.5px solid var(--wbm-border-strong);
  cursor: pointer;
  position: relative;
  transition: background var(--wbm-dur) var(--wbm-ease), border-color var(--wbm-dur) var(--wbm-ease);
}
.wbm-bf-checkline input[type="checkbox"]:hover {
  border-color: var(--wbm-accent);
}
.wbm-bf-checkline input[type="checkbox"]:checked {
  background: var(--wbm-accent);
  border-color: var(--wbm-accent);
}
.wbm-bf-checkline input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.wbm-bf-checkline input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--wbm-glow-accent);
}

/* Required asterisk — shared style for inline-label markers */
.wbm-required {
  color: var(--wbm-accent-2);
  font-weight: 800;
  margin-left: 2px;
}

/* ═══ STEP 3 SUMMARY PANEL ═════════════════════════════════════ */
.wbm-bf-summary {
  background: rgba(255, 255, 255, .04);
  border-left: 3px solid var(--wbm-accent);
  padding: 1.1rem 1.25rem;
  font-size: .9rem;
  color: var(--wbm-text-soft);
  display: grid;
  gap: .55rem;
}
.wbm-bf-summary p { margin: 0; display: flex; gap: 10px; align-items: baseline; }
.wbm-bf-summary p strong {
  color: var(--wbm-text-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  min-width: 78px;
  flex-shrink: 0;
}
.wbm-bf-summary p span {
  color: var(--wbm-text);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   Solar Hero plugin compatibility — when the booking form shortcode
   is rendered inside the hero plugin's .sh-form-card wrapper, force
   that wrapper to the site header colour (#1a1d26) and neutralize
   its glass effect. This lives in the booking form plugin so the
   fix ships with the form regardless of hero plugin version.
   ═══════════════════════════════════════════════════════════════ */
.sh-form-card {
  background: #1a1d26 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 4px 24px -8px rgba(0,0,0,.12) !important;
}
.sh-form-card .sh-form-card-header { border-bottom-color: #e5e7eb !important; }
.sh-form-card .sh-form-title       { color: #eaecf0 !important; }
.sh-form-card .sh-form-sub         { color: #a1a6b5 !important; }

/* Don't double-stack panels when the form is nested inside .sh-form-card */
.sh-form-card .wbm-booking-form-wrap {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
.sh-form-card .wbm-booking-form-wrap::before { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   OPTIONAL LIGHT-THEME OVERRIDE
   Add `wbm-booking-form-wrap--light` to the wrap div (or via the
   wbm_booking_form_class filter) to revert to a clean white card.
   Useful if the form is embedded on a light-background page where
   the dark glass treatment doesn't fit.
   ═══════════════════════════════════════════════════════════════ */
.wbm-booking-form-wrap--light {
  --wbm-text:          #232323;
  --wbm-text-soft:     #374151;
  --wbm-text-muted:    #6b7280;
  --wbm-border:        rgba(15,23,42,.10);
  --wbm-border-strong: rgba(15,23,42,.22);
  --wbm-input-bg:        rgba(255,255,255,.72);
  --wbm-input-bg-focus:  #fff;
  --wbm-glow-accent:   0 0 0 3px rgba(0, 93, 165, .18);
  --wbm-glow-success:  0 0 0 3px rgba(0, 93, 165, .22);
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 25px 60px -20px rgba(0,0,0,.18);
}
.wbm-booking-form-wrap--light .wbm-bf-step::before { background: #fff; }
.wbm-booking-form-wrap--light .wbm-bf-step--active::before { background: #232323; color: #fff; }
.wbm-booking-form-wrap--light .wbm-bf-cal-day,
.wbm-booking-form-wrap--light .wbm-bf-slot { background: rgba(255,255,255,.72); }
.wbm-booking-form-wrap--light .wbm-bf-error-msg { background: rgba(255,0,77,.08); color: #a8002e; }
.wbm-booking-form-wrap--light .wbm-bf-summary {
  background: #fffbeb;
  border-color: var(--wbm-accent);
  color: #374151;
}

/* ═══ COLLAPSIBLE OPTIONAL DETAILS ══════════════════════════════ */
.wbm-bf-collapse-wrap { margin-top: -.25rem; }
.wbm-bf-collapse-toggle {
  appearance: none;
  background: transparent;
  border: 1.5px dashed #e5e7eb;
  color: #374151;
  width: 100%;
  padding: .75rem 1rem;
  border-radius: 0;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .65rem;
  transition: background var(--wbm-dur) var(--wbm-ease), border-color var(--wbm-dur) var(--wbm-ease);
}
.wbm-bf-collapse-toggle:hover {
  background: #f9fafb;
  border-color: #005da5;
}
.wbm-bf-collapse-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #b5121b;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  transition: transform var(--wbm-dur) var(--wbm-ease);
}
.wbm-bf-collapse-toggle[aria-expanded="true"] .wbm-bf-collapse-icon { transform: rotate(45deg); } /* + becomes × */
.wbm-bf-collapsible {
  grid-column: 1 / -1;
  animation: espCollapseIn .25s var(--wbm-ease);
}
.wbm-bf-collapsible[hidden] { display: none; }
.wbm-bf-grid--inner { margin-top: .85rem; }
@keyframes espCollapseIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ STEP NUMBER OVERRIDE WHEN SCHEDULING IS DISABLED ══════════ */
/* The Confirm step keeps data-step="3" internally so the JS routing
   still works, but visually it's now step "2" (since Schedule is gone). */
.wbm-booking-form-wrap[data-scheduling="0"] .wbm-bf-step[data-step="3"]::before {
  content: "2";
}

/* ── DESIGN IMPROVEMENTS ── */

/* Tighter, cleaner card padding */
.wbm-booking-form-wrap {
  padding: 2rem 2.5rem 2.5rem !important;
}

/* Bolder "Prefer to talk" line */
.wbm-bf-call {
  font-size: 14px !important;
  font-weight: 600 !important;
  gap: 10px !important;
  margin-bottom: 28px !important;
}
.wbm-bf-call-number {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #005da5 !important;
  letter-spacing: .01em !important;
}
.wbm-bf-call svg { fill: #005da5 !important; width: 14px !important; height: 14px !important; }

/* Step labels bolder */
.wbm-bf-step {
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  color: #9ca3af !important;
}
.wbm-bf-step--active { color: #232323 !important; }

/* Slightly taller inputs */
.wbm-booking-form-wrap .wbm-bf-field input,
.wbm-booking-form-wrap .wbm-bf-field select,
.wbm-booking-form-wrap .wbm-bf-field textarea {
  padding: 15px 14px 15px 44px !important;
  font-size: .96rem !important;
  border-radius: 2px !important;
}

/* Field gap */
.wbm-bf-grid { gap: 20px 16px !important; }

/* Heading size bump */
.wbm-bf-panel h3,
.wbm-booking-form-wrap h3 {
  font-size: 1rem !important;
  margin-bottom: 1.5rem !important;
}

/* Next button — bigger, bolder */
.wbm-bf-btn-next,
.wbm-bf-submit {
  padding: 16px 36px !important;
  font-size: .88rem !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
}

/* ── FINAL POLISH ── */

/* Fix cut-off asterisk - add breathing room on left */
.wbm-booking-form-wrap { padding-left: 2.5rem !important; }

/* Make labels slightly larger so * doesn't get cut */
.wbm-bf-field label {
  font-size: .72rem !important;
  padding-left: 0 !important;
  overflow: visible !important;
}

/* Required asterisk color */
.wbm-bf-field label .wbm-required { color: #005da5 !important; }

/* Cleaner field borders - very subtle */
.wbm-booking-form-wrap .wbm-bf-field input,
.wbm-booking-form-wrap .wbm-bf-field select,
.wbm-booking-form-wrap .wbm-bf-field textarea {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 3px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.wbm-booking-form-wrap .wbm-bf-field input:focus,
.wbm-booking-form-wrap .wbm-bf-field select:focus,
.wbm-booking-form-wrap .wbm-bf-field textarea:focus {
  border-color: #005da5 !important;
  box-shadow: 0 0 0 3px rgba(0, 93, 165,.12) !important;
}

/* Step connector line thinner and lighter */
.wbm-bf-step:not(:last-child)::after {
  height: 1px !important;
  background: #e5e7eb !important;
  top: 19px !important;
}

/* "Prefer to talk" row centered and spaced */
.wbm-bf-call { 
  padding: 10px 0 !important; 
  border-bottom: 1px solid #f3f4f6 !important;
  margin-bottom: 24px !important;
  width: 100% !important;
  justify-content: center !important;
}

/* Expand button */
.wbm-bf-expand-toggle {
  border: 1.5px dashed #e5e7eb !important;
  border-radius: 3px !important;
  padding: 12px 16px !important;
  font-size: .85rem !important;
  color: #374151 !important;
  transition: border-color .2s, color .2s !important;
}
.wbm-bf-expand-toggle:hover { 
  border-color: #005da5 !important; 
  color: #005da5 !important; 
}

/* Next button - squared sharp */
.wbm-bf-btn-next,
.wbm-bf-submit {
  background: #005da5 !important;
  color: #000 !important;
  border: none !important;
  border-radius: 2px !important;
  letter-spacing: .12em !important;
  transition: background .2s ease, transform .1s ease !important;
}
.wbm-bf-btn-next:hover,
.wbm-bf-submit:hover {
  background: #00b4e6 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── HEADER ROW: phone + privacy ── */
.wbm-bf-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  gap: 16px;
  flex-wrap: wrap;
}
.wbm-bf-privacy {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
}
.wbm-bf-privacy svg {
  width: 13px;
  height: 13px;
  stroke: #9ca3af;
  flex-shrink: 0;
}

/* ── SOCIAL PROOF BAR ── */
.wbm-bf-proof-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0fdff;
  border-left: 3px solid #005da5;
  padding: 10px 14px;
  margin-bottom: 1.5rem;
  font-size: 13px;
  font-weight: 600;
  color: #0e7490;
}
.wbm-bf-proof-bar svg {
  width: 15px;
  height: 15px;
  stroke: #005da5;
  flex-shrink: 0;
}

/* ── STAR RATING ABOVE SUBMIT ── */
.wbm-bf-submit-row {
  margin-top: 1.5rem;
}
.wbm-bf-stars {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 0;
  padding: 10px 0;
  border-top: 1px solid #f3f4f6;
}
.wbm-bf-stars svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.wbm-bf-stars-label {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-left: 6px;
}

/* ── LAYOUT FIXES ── */

/* Phone + privacy on same line, centered */
.wbm-bf-header-row {
  justify-content: center !important;
  gap: 24px !important;
  padding-bottom: .75rem !important;
  margin-bottom: .75rem !important;
}

/* Proof bar — less padding, inline not block */
.wbm-bf-proof-bar {
  padding: 7px 14px !important;
  margin-bottom: 1.25rem !important;
  font-size: 12px !important;
  justify-content: center !important;
}

/* Fix + expand button centering */
.wbm-bf-expand-toggle,
.wbm-bf-expand-btn,
[class*="wbm-bf-expand"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.wbm-bf-expand-toggle > *:first-child,
.wbm-bf-expand-btn > *:first-child {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Kill header row excess space */
.wbm-bf-header-row {
  padding: 0 0 .5rem !important;
  margin-bottom: .5rem !important;
  border-bottom: none !important;
}
.wbm-bf-call {
  margin-bottom: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
}

/* Fix + icon centering */
.wbm-bf-collapse-icon {
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  font-size: 18px !important;
  padding-bottom: 1px !important;
}

/* Contact Us section heading */
.wbm-bf-section-heading {
  font-size: 1.6rem;
  font-weight: 800;
  color: #111;
  margin: 0 0 24px;
  padding: 0;
  letter-spacing: -.02em;
}

/* ═══ REQUIRED-CONSENT ERROR STATE ════════════════════════════════
 * Applied by booking-form.js when submit is blocked because the
 * "agree to be contacted" box wasn't ticked. Without this the only
 * feedback was a text message the user could easily miss. */
.wbm-bf-consent--error {
  background: #fef2f2;
  border: 1px solid #b5121b;
  border-left: 4px solid #b5121b;
  padding: 10px 12px;
  margin-left: -12px;
  margin-right: -12px;
  animation: espConsentShake .4s ease;
}
.wbm-bf-consent--error .wbm-bf-checkline {
  color: #991b1b;
  font-weight: 700;
}
.wbm-bf-consent--error input[type="checkbox"] {
  outline: 2px solid #b5121b;
  outline-offset: 2px;
  accent-color: #b5121b;
}
@keyframes espConsentShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* Make the inline error message unmissable wherever it's injected. */
.wbm-booking-form-wrap .wbm-bf-error-msg {
  display: block;
  background: #fef2f2;
  border-left: 4px solid #b5121b;
  color: #991b1b;
  font-weight: 700;
  font-size: .9rem;
  padding: 12px 14px;
  margin: 0 0 1rem;
}

/* ══════════════════════════════════════════════════════════════════
   POLISH PASS (v2.7.1) — same layout, tighter execution.
   Appended last so it wins on source order. No structural changes:
   the step row, panels, field grid and button positions are unchanged.
   ══════════════════════════════════════════════════════════════════ */

.wbm-booking-form-wrap {
  --pf-ink:    #0f1c26;
  --pf-mute:   #64798a;
  --pf-line:   #e3e9ee;
  --pf-cyan:   #005da5;
  --pf-navy:   #0e2233;
  --pf-field:  #fbfcfd;
  padding: 2.75rem 2.5rem 2.5rem !important;
}

/* The box is up to 1400px wide; full-bleed fields made the form feel
   stretched and empty. Hold the content to a comfortable measure and
   centre it — the single biggest improvement here. */
.wbm-booking-form-wrap .wbm-bf-panel,
.wbm-booking-form-wrap .wbm-bf-steps,
.wbm-booking-form-wrap .wbm-bf-header-row {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* ── "Prefer to talk" ─────────────────────────────────────────── */
.wbm-booking-form-wrap .wbm-bf-header-row { margin-bottom: 1.75rem; }
.wbm-booking-form-wrap .wbm-bf-call {
  gap: 8px; font-size: .9rem; color: var(--pf-mute);
}
.wbm-booking-form-wrap .wbm-bf-call-number {
  color: var(--pf-cyan); font-weight: 800; letter-spacing: -.01em;
}
.wbm-booking-form-wrap .wbm-bf-call:hover .wbm-bf-call-number { color: var(--pf-navy); }

/* ── Step indicator: unify on cyan (was orange, clashing with the
      cyan primary button), smaller dots, calmer connector ─────── */
.wbm-booking-form-wrap .wbm-bf-steps { margin-bottom: 2.25rem; }
.wbm-booking-form-wrap .wbm-bf-step {
  font-size: 10px; letter-spacing: .13em; font-weight: 700;
  color: #9fb0bd;
}
.wbm-booking-form-wrap .wbm-bf-step::before {
  width: 30px; height: 30px; line-height: 30px;
  font-size: 12px; font-weight: 800;
  background: #eef2f5; color: #9fb0bd;
  border: 0; box-shadow: none;
}
.wbm-booking-form-wrap .wbm-bf-step:not(:last-child)::after {
  top: 15px; height: 1px; background: var(--pf-line);
}
.wbm-booking-form-wrap .wbm-bf-step--active { color: var(--pf-ink); }
.wbm-booking-form-wrap .wbm-bf-step--active::before {
  background: var(--pf-cyan); color: var(--pf-navy);
  box-shadow: 0 0 0 4px rgba(0, 93, 165,.16);
}
.wbm-booking-form-wrap .wbm-bf-step--done { color: var(--pf-mute); }
.wbm-booking-form-wrap .wbm-bf-step--done::before {
  background: var(--pf-navy); color: #fff;
}
.wbm-booking-form-wrap .wbm-bf-step--done::after { background: var(--pf-navy); }

/* ── Panel heading ────────────────────────────────────────────── */
.wbm-booking-form-wrap .wbm-bf-panel h3 {
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: var(--pf-ink);
  margin: 0 0 1.5rem; padding-bottom: .7rem;
}
.wbm-booking-form-wrap .wbm-bf-panel h3::after {
  height: 2px; width: 44px; background: var(--pf-cyan);
}

/* ── Fields: calmer labels, crisper focus ─────────────────────── */
.wbm-booking-form-wrap .wbm-bf-grid { gap: 1.15rem 1.25rem; }
.wbm-booking-form-wrap .wbm-bf-field label {
  font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  font-weight: 700; color: var(--pf-mute); margin-bottom: .45rem;
}
.wbm-booking-form-wrap .wbm-required { color: var(--pf-cyan); }
.wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field input,
.wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field select,
.wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field textarea {
  background-color: var(--pf-field) !important;
  border: 1px solid var(--pf-line) !important;
  padding-top: 14px !important; padding-bottom: 14px !important;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field input:hover,
.wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field select:hover,
.wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field textarea:hover {
  border-color: #cfd9e1 !important;
}
.wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field input:focus,
.wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field select:focus,
.wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field textarea:focus {
  background-color: #fff !important;
  border-color: var(--pf-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 93, 165,.15) !important;
}

/* ── Optional-details toggle: quieter, less "dashed box" ──────── */
.wbm-booking-form-wrap .wbm-bf-collapse-toggle {
  border: 1px solid var(--pf-line) !important;
  border-style: solid !important;
  background: var(--pf-field) !important;
  padding: 13px 15px !important;
  transition: background .16s ease, border-color .16s ease;
}
.wbm-booking-form-wrap .wbm-bf-collapse-toggle:hover {
  background: #f4f8fa !important; border-color: #cfd9e1 !important;
}
.wbm-booking-form-wrap .wbm-bf-collapse-icon {
  background: var(--pf-cyan) !important; color: var(--pf-navy) !important;
}

/* ── Actions ─────────────────────────────────────────────────── */
.wbm-booking-form-wrap .wbm-bf-nav { margin-top: 1.75rem; }
.wbm-booking-form-wrap .wbm-bf-btn {
  padding: 14px 28px !important; font-size: .88rem !important;
  letter-spacing: .06em; font-weight: 800;
  border-radius: 0 !important;
  background: var(--pf-cyan) !important; color: var(--pf-navy) !important;
  border: 1px solid var(--pf-cyan) !important;
  transition: background .16s ease, border-color .16s ease, transform .12s ease;
}
.wbm-booking-form-wrap .wbm-bf-btn:hover:not(:disabled) {
  background: var(--pf-navy) !important; border-color: var(--pf-navy) !important;
  color: #fff !important; transform: translateY(-1px);
}
.wbm-booking-form-wrap .wbm-bf-btn--outline {
  background: transparent !important; color: var(--pf-mute) !important;
  border-color: var(--pf-line) !important;
}
.wbm-booking-form-wrap .wbm-bf-btn--outline:hover:not(:disabled) {
  background: #f2f6f9 !important; color: var(--pf-ink) !important;
  border-color: #cfd9e1 !important; transform: none;
}
.wbm-booking-form-wrap .wbm-bf-btn:focus-visible {
  outline: 3px solid var(--pf-navy); outline-offset: 2px;
}

/* ── Consent ─────────────────────────────────────────────────── */
.wbm-booking-form-wrap .wbm-bf-consent {
  background: var(--pf-field); border: 1px solid var(--pf-line);
  padding: 12px 14px;
}
.wbm-booking-form-wrap .wbm-bf-consent input[type="checkbox"] {
  width: 17px; height: 17px; accent-color: var(--pf-cyan); flex: 0 0 auto;
}

/* The reviews plugin renders its own ratings section directly below this
   form — drop the duplicate star strip so the social proof isn't doubled. */
.wbm-booking-form-wrap .wbm-bf-stars { display: none !important; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .wbm-booking-form-wrap { padding: 1.75rem 1.15rem 1.6rem !important; }
  .wbm-booking-form-wrap .wbm-bf-step { font-size: 9px; letter-spacing: .08em; }
  .wbm-booking-form-wrap .wbm-bf-nav .wbm-bf-btn {
    width: 100% !important; justify-content: center !important;
  }
  .wbm-booking-form-wrap .wbm-bf-nav { flex-direction: column-reverse; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .wbm-booking-form-wrap *,
  .wbm-booking-form-wrap *::before,
  .wbm-booking-form-wrap *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
  .wbm-booking-form-wrap .wbm-bf-btn:hover:not(:disabled) { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   FULL-BLEED BACKGROUND + GLASS FORM (v2.8.0)
   Active only when a background image is set in Booking Manager Settings; with no
   image the section stays on plain white and every rule below is inert.
   ══════════════════════════════════════════════════════════════════ */

/* Full-bleed breakout: escape the Elementor container to 100vw.
   100vw includes the scrollbar, so the negative margin uses 50% of the
   parent (not 50vw) to stay centred without causing horizontal scroll. */
.wbm-bf-section--bg {
  /* content-box + 100vw would add the padding ON TOP of the viewport width
     and trigger a horizontal scrollbar — themes don't always set this. */
  box-sizing: border-box;
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  padding: clamp(48px, 6vw, 88px) 20px;
  background-image: var(--wbm-bf-bg);
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Readability scrim — depth is controlled by the Darkness setting. */
.wbm-bf-section--bg::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,16,24,.55) 0%, rgba(8,16,24,.25) 35%, rgba(8,16,24,.65) 100%),
    rgba(8,16,24, var(--wbm-bf-dim, .62));
  pointer-events: none;
}
.wbm-bf-section--bg .wbm-bf-section-inner {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
}
.wbm-bf-section--bg .wbm-bf-section-heading {
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
  margin-bottom: 1.5rem;
}

/* ── The glass card ──────────────────────────────────────────── */
.wbm-bf-section--bg .wbm-booking-form-wrap {
  background: rgba(255,255,255,.07) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.55) !important;
  color: #fff;
}

/* Type on glass */
.wbm-bf-section--bg .wbm-bf-panel h3 { color: #fff !important; }
.wbm-bf-section--bg .wbm-bf-call { color: rgba(255,255,255,.75) !important; }
.wbm-bf-section--bg .wbm-bf-call svg { fill: #005da5; }
.wbm-bf-section--bg .wbm-bf-call-number { color: #005da5 !important; }
.wbm-bf-section--bg .wbm-bf-call:hover .wbm-bf-call-number { color: #b5121b !important; }
.wbm-bf-section--bg .wbm-bf-field label { color: rgba(255,255,255,.72) !important; }
.wbm-bf-section--bg .wbm-bf-step { color: rgba(255,255,255,.5) !important; }
.wbm-bf-section--bg .wbm-bf-step--active { color: #fff !important; }
.wbm-bf-section--bg .wbm-bf-step--done   { color: rgba(255,255,255,.8) !important; }
.wbm-bf-section--bg .wbm-bf-step::before { background: rgba(255,255,255,.14); color: rgba(255,255,255,.7); }
.wbm-bf-section--bg .wbm-bf-step--done::before { background: #fff; color: #0e2233; }
.wbm-bf-section--bg .wbm-bf-step:not(:last-child)::after { background: rgba(255,255,255,.22); }
.wbm-bf-section--bg .wbm-bf-step--done::after { background: rgba(255,255,255,.6); }

/* ── Inputs on glass ─────────────────────────────────────────────
   Text colour is declared three ways on purpose: `color` alone left the
   caret and Safari's fill colour unset, which is exactly how this form
   previously shipped invisible white-on-white text. */
.wbm-bf-section--bg .wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field input,
.wbm-bf-section--bg .wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field select,
.wbm-bf-section--bg .wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field textarea {
  background-color: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #005da5 !important;
}
.wbm-bf-section--bg .wbm-booking-form-wrap .wbm-bf-field input::placeholder,
.wbm-bf-section--bg .wbm-booking-form-wrap .wbm-bf-field textarea::placeholder {
  color: rgba(255,255,255,.5) !important;
  -webkit-text-fill-color: rgba(255,255,255,.5) !important;
}
.wbm-bf-section--bg .wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field input:hover,
.wbm-bf-section--bg .wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field select:hover,
.wbm-bf-section--bg .wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field textarea:hover {
  background-color: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.34) !important;
}
.wbm-bf-section--bg .wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field input:focus,
.wbm-bf-section--bg .wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field select:focus,
.wbm-bf-section--bg .wbm-booking-form-wrap.wbm-booking-form-wrap .wbm-bf-field textarea:focus {
  background-color: rgba(255,255,255,.17) !important;
  border-color: #005da5 !important;
  box-shadow: 0 0 0 3px rgba(0, 93, 165,.25) !important;
}
/* Autofill: Chrome paints its own background — force the dark-glass look. */
.wbm-bf-section--bg .wbm-booking-form-wrap .wbm-bf-field input:-webkit-autofill,
.wbm-bf-section--bg .wbm-booking-form-wrap .wbm-bf-field input:-webkit-autofill:hover,
.wbm-bf-section--bg .wbm-booking-form-wrap .wbm-bf-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  caret-color: #005da5 !important;
}
/* Native dropdown list stays readable (it renders outside the glass). */
.wbm-bf-section--bg .wbm-booking-form-wrap .wbm-bf-field select option {
  background-color: #14293a !important; color: #fff !important;
}

/* ── Controls on glass ───────────────────────────────────────── */
.wbm-bf-section--bg .wbm-bf-collapse-toggle {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.2) !important;
  color: #fff !important;
}
.wbm-bf-section--bg .wbm-bf-collapse-toggle:hover {
  background: rgba(255,255,255,.13) !important;
  border-color: rgba(255,255,255,.32) !important;
}
.wbm-bf-section--bg .wbm-bf-collapse-label { color: #fff !important; }
.wbm-bf-section--bg .wbm-bf-btn--outline {
  color: rgba(255,255,255,.85) !important;
  border-color: rgba(255,255,255,.3) !important;
}
.wbm-bf-section--bg .wbm-bf-btn--outline:hover:not(:disabled) {
  background: rgba(255,255,255,.12) !important; color: #fff !important;
  border-color: rgba(255,255,255,.5) !important;
}
.wbm-bf-section--bg .wbm-bf-btn:hover:not(:disabled) {
  background: #b5121b !important; border-color: #b5121b !important; color: #0e2233 !important;
}
.wbm-bf-section--bg .wbm-bf-btn:focus-visible { outline-color: #b5121b; }

/* ── Consent + summary + success on glass ────────────────────── */
.wbm-bf-section--bg .wbm-bf-consent {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.18) !important;
}
.wbm-bf-section--bg .wbm-bf-checkline { color: rgba(255,255,255,.9) !important; }
.wbm-bf-section--bg .wbm-bf-summary,
.wbm-bf-section--bg #wbm-summary p { color: rgba(255,255,255,.9) !important; }
.wbm-bf-section--bg .wbm-bf-summary strong { color: rgba(255,255,255,.65) !important; }
.wbm-bf-section--bg .wbm-bf-success h2 { color: #fff !important; }
.wbm-bf-section--bg .wbm-bf-success p  { color: rgba(255,255,255,.85) !important; }
.wbm-bf-section--bg .wbm-bf-success strong { color: #b5121b !important; }

/* Error keeps its light-on-red treatment so it stays unmissable. */
.wbm-bf-section--bg .wbm-bf-error-msg {
  background: rgba(239,68,68,.16) !important;
  color: #ffdcdc !important;
  border-left-color: #b5121b !important;
}
.wbm-bf-section--bg .wbm-bf-consent--error {
  background: rgba(239,68,68,.16) !important;
  border-color: #b5121b !important;
}
.wbm-bf-section--bg .wbm-bf-consent--error .wbm-bf-checkline { color: #ffdcdc !important; }

/* Backdrop-filter unsupported (older Firefox): fall back to solid tint. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wbm-bf-section--bg .wbm-booking-form-wrap { background: rgba(12,24,34,.82) !important; }
}

@media (max-width: 640px) {
  .wbm-bf-section--bg { padding: 36px 14px; background-attachment: scroll; }
}

/* ── AUTOFILL FIX (v2.8.2) ───────────────────────────────────────
 * The classic `box-shadow: 0 0 0 1000px <colour> inset` autofill hack
 * paints over the element's background-IMAGE, which wiped the little
 * field icons as soon as Chrome autofilled a value.
 * Parking the background-color transition for ~forever stops Chrome
 * ever painting its own autofill background, so our translucent field
 * AND the icon both survive. Text/caret colours are still forced. */
.wbm-booking-form-wrap .wbm-bf-field input:-webkit-autofill,
.wbm-booking-form-wrap .wbm-bf-field input:-webkit-autofill:hover,
.wbm-booking-form-wrap .wbm-bf-field input:-webkit-autofill:focus,
.wbm-booking-form-wrap .wbm-bf-field input:-webkit-autofill:active {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  transition: background-color 99999s ease-in-out 0s !important;
  -webkit-text-fill-color: #232323 !important;
  caret-color: #232323 !important;
}

/* Same treatment on the glass variant, in light-on-dark. */
.wbm-bf-section--bg .wbm-booking-form-wrap .wbm-bf-field input:-webkit-autofill,
.wbm-bf-section--bg .wbm-booking-form-wrap .wbm-bf-field input:-webkit-autofill:hover,
.wbm-bf-section--bg .wbm-booking-form-wrap .wbm-bf-field input:-webkit-autofill:focus,
.wbm-bf-section--bg .wbm-booking-form-wrap .wbm-bf-field input:-webkit-autofill:active {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  transition: background-color 99999s ease-in-out 0s !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #005da5 !important;
}

/* ── SUMMARY + HEADING CLEANUP (v2.9.0) ──────────────────────────
 * Drop the decorative rules (heading underline, summary left bar) and
 * raise the summary's contrast — the values were reading dim against
 * the glass. Icons are inline SVG now, so they inherit currentColor. */

/* No decorative lines. */
.wbm-booking-form-wrap .wbm-bf-panel h3::after,
.wbm-booking-form-wrap h3::after { display: none !important; }
.wbm-booking-form-wrap .wbm-bf-panel h3 { padding-bottom: 0 !important; }
.wbm-booking-form-wrap .wbm-bf-summary { border-left: 0 !important; }

/* Summary block */
.wbm-booking-form-wrap .wbm-bf-summary {
  background: rgba(255,255,255,.05);
  padding: 1.15rem 1.3rem;
  gap: .7rem;
}
.wbm-booking-form-wrap .wbm-bf-summary p strong {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 104px;
  font-size: .68rem; letter-spacing: .1em;
}
.wbm-sum-ico { width: 15px; height: 15px; flex: 0 0 auto; opacity: .85; }

/* Glass variant: readable values, muted-but-legible labels. */
.wbm-bf-section--bg .wbm-bf-summary {
  background: rgba(255,255,255,.07) !important;
}
.wbm-bf-section--bg .wbm-bf-summary p strong {
  color: rgba(255,255,255,.62) !important;
}
.wbm-bf-section--bg .wbm-bf-summary p strong .wbm-sum-ico { color: #005da5; opacity: 1; }
.wbm-bf-section--bg .wbm-bf-summary p span {
  color: #fff !important;
  font-weight: 700;
  font-size: .96rem;
}
/* The scheduling note above the rows. */
.wbm-bf-section--bg .wbm-bf-summary > p:first-child:not(:has(strong)) {
  color: rgba(255,255,255,.75) !important;
}

/* Light variant keeps the same structure, dark ink. */
.wbm-booking-form-wrap:not(.wbm-bf-glass) .wbm-bf-summary p span { font-weight: 700; }

/* Success icon (SVG replaced the emoji). */
.wbm-bf-success-ico {
  display: flex; justify-content: center;
  margin-bottom: 1rem; color: #b5121b;
}

/* ── FIELD ICONS: AUTOFILL-PROOF (v2.9.1) ────────────────────────
 * Chrome's :-webkit-autofill UA style forces `background-image: none`
 * on the control and author CSS cannot override it, so any icon painted
 * as the input's background vanished the moment a field was autofilled.
 * The icon now lives on the .wbm-bf-field wrapper as a ::before, which
 * Chrome never touches. Inputs keep their left padding for the gutter. */

.wbm-bf-field.wbm-ico { position: relative; }

.wbm-bf-field.wbm-ico::before {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 15px;          /* vertically centred in the ~48px control */
  width: 18px; height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  pointer-events: none;  /* never blocks clicking into the field */
  z-index: 2;
}
/* Textarea is tall — pin its icon near the top instead. */
.wbm-bf-field.wbm-ico--notes::before { bottom: auto; top: 42px; }

/* Icons no longer come from the control itself. */
.wbm-bf-field.wbm-ico input,
.wbm-bf-field.wbm-ico textarea { background-image: none !important; }
/* Select keeps only its right-hand chevron. */
.wbm-bf-field.wbm-ico select#wbm-service {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%2300C8FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 5.5 7 9.5 11 5.5'/%3E%3C/svg%3E") !important;
  background-position: right 14px center !important;
  background-size: 14px 14px !important;
}

/* Icon artwork (stroke colour baked in per theme below). */
.wbm-bf-field.wbm-ico--user::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a8b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.wbm-bf-field.wbm-ico--phone::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a8b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.wbm-bf-field.wbm-ico--mail::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a8b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); }
.wbm-bf-field.wbm-ico--pin::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a8b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.wbm-bf-field.wbm-ico--city::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a8b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2' ry='2'/%3E%3Cline x1='9' y1='6' x2='9.01' y2='6'/%3E%3Cline x1='15' y1='6' x2='15.01' y2='6'/%3E%3Cline x1='9' y1='10' x2='9.01' y2='10'/%3E%3Cline x1='15' y1='10' x2='15.01' y2='10'/%3E%3C/svg%3E"); }
.wbm-bf-field.wbm-ico--zip::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a8b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='4' y1='15' x2='20' y2='15'/%3E%3Cline x1='10' y1='3' x2='8' y2='21'/%3E%3Cline x1='16' y1='3' x2='14' y2='21'/%3E%3C/svg%3E"); }
.wbm-bf-field.wbm-ico--tag::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a8b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E"); }
.wbm-bf-field.wbm-ico--notes::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a8b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16M4 10h16M4 15h10'/%3E%3C/svg%3E"); }

/* Brighter strokes on the glass variant. */
.wbm-bf-section--bg .wbm-bf-field.wbm-ico--user::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.wbm-bf-section--bg .wbm-bf-field.wbm-ico--phone::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.wbm-bf-section--bg .wbm-bf-field.wbm-ico--mail::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); }
.wbm-bf-section--bg .wbm-bf-field.wbm-ico--pin::before,
.wbm-bf-section--bg .wbm-bf-field.wbm-ico--city::before,
.wbm-bf-section--bg .wbm-bf-field.wbm-ico--zip::before,
.wbm-bf-section--bg .wbm-bf-field.wbm-ico--tag::before,
.wbm-bf-section--bg .wbm-bf-field.wbm-ico--notes::before { opacity: .75; filter: brightness(0) invert(1); }

/* ── STEP RING / REQUIRED / PLUS ICON (v2.9.2) ───────────────────
 * 1. The glass variant styled .wbm-bf-step::before but never the
 *    --active state, so the current step's circle fell through to the
 *    grey inactive fill. It's now the same cyan as the primary button.
 * 2. Required markers read as red, not accent-cyan.
 * 3. The "+" is an SVG — a text glyph never centres reliably inside a
 *    round badge because it sits on its baseline. */

/* 1. Active step: solid brand cyan + matching cyan ring. */
.wbm-bf-section--bg .wbm-bf-step--active::before,
.wbm-booking-form-wrap .wbm-bf-step--active::before {
  background: #005da5 !important;
  color: #0e2233 !important;
  box-shadow: 0 0 0 4px rgba(0, 93, 165, .40) !important;
}
.wbm-bf-section--bg .wbm-bf-step--done::before,
.wbm-booking-form-wrap .wbm-bf-step--done::before {
  background: #005da5 !important;
  color: #0e2233 !important;
  box-shadow: none !important;
}
.wbm-bf-section--bg .wbm-bf-step--done::after,
.wbm-booking-form-wrap .wbm-bf-step--done::after { background: #005da5 !important; }

/* 2. Required asterisk in red. */
.wbm-booking-form-wrap .wbm-required,
.wbm-bf-section--bg .wbm-booking-form-wrap .wbm-required {
  color: #ff4d4d !important;
  font-weight: 800;
}

/* 3. Perfectly centred plus badge. */
.wbm-booking-form-wrap .wbm-bf-collapse-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px; height: 22px;
  line-height: 0 !important;
  padding: 0 !important;
  transition: transform .2s ease;
}
.wbm-booking-form-wrap .wbm-bf-collapse-icon svg {
  width: 12px; height: 12px; display: block;
}

/* ── SERVICE SELECT: NO CLIPPED TEXT (v2.9.3) ────────────────────
 * `appearance:none` was set without !important, so a theme rule could
 * restore the native control. A native <select> lays its text out by
 * its own metrics and ignores our vertical padding, which clipped the
 * "- Select a Service -" label along the bottom.
 * Fix: force appearance off, give the control a fixed height and ZERO
 * vertical padding — browsers vertically centre a select's text inside
 * the content box, so it can't be cut off at any font size. */
.wbm-booking-form-wrap .wbm-bf-field select,
.wbm-bf-section--bg .wbm-booking-form-wrap .wbm-bf-field select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  height: 48px !important;
  min-height: 48px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: normal !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/* Keep the icon gutter and chevron clear of the text. */
.wbm-booking-form-wrap .wbm-bf-field select#wbm-service {
  padding-left: 44px !important;
  padding-right: 38px !important;
}

/* ── "Prefer to talk?" row (v2.9.4) ──────────────────────────────
 * Label was 75% white on the glass, which read grey. Full white now,
 * and the whole row sized up so it's legible over a photo. */
.wbm-booking-form-wrap .wbm-bf-call,
.wbm-bf-section--bg .wbm-booking-form-wrap .wbm-bf-call {
  color: #fff !important;
  font-size: 1.05rem !important;
  gap: 10px;
}
.wbm-booking-form-wrap .wbm-bf-call-label,
.wbm-bf-section--bg .wbm-booking-form-wrap .wbm-bf-call-label {
  color: #fff !important;
  font-weight: 600;
  font-size: 1.05rem !important;
}
.wbm-booking-form-wrap .wbm-bf-call-number,
.wbm-bf-section--bg .wbm-booking-form-wrap .wbm-bf-call-number {
  font-size: 1.18rem !important;
  font-weight: 800;
  letter-spacing: -.01em;
}
.wbm-bf-section--bg .wbm-booking-form-wrap .wbm-bf-call svg {
  width: 16px !important;
  height: 16px !important;
}

/* Phone icon orientation — mirror the FontAwesome glyph so the handset
   runs top-left → bottom-right, matching conventional phone icons. */
.wbm-booking-form-wrap .wbm-bf-call > svg{
  transform: scaleX(-1);
  transform-origin: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   WWP DESIGN LAYER — authoritative

   Everything above is the inherited solar stylesheet with the palette
   swapped. This block is the White Apple / Wounded Warrior treatment and is
   the single place to change the look. It sits last deliberately.

   Values taken from WWP's own stylesheet, the same ones the team and impact
   card plugins use:
     h1/h2/h3   Montserrat bold, no text-transform of their own
     body       14px base, line-height 1.5em, colour #232323
     card       box-shadow 0 2px 12px 0 rgba(0,0,0,.12), square corners
     child-link 16px, 4px 20px padding, 29px row
   ══════════════════════════════════════════════════════════════════════════ */

.wbm-booking-form-wrap {
  /* WWP's shadowbox: soft shadow, no border, square corners. The inherited
     rule had a 1px grey border and no shadow, which read as a wireframe. */
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .12) !important;
  padding: 3rem 2.75rem 2.75rem !important;
  max-width: 1140px !important;   /* WWP's .container-wide */
}

/* ── Section headings ───────────────────────────────────────────────────── */
.wbm-booking-form-wrap h3,
.wbm-bf-section-heading {
  font-family: var(--wbm-font) !important;
  font-weight: 700 !important;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -.005em !important;
  color: #000 !important;
  text-transform: none !important;   /* WWP headings are typed, not transformed */
  margin: 0 0 1.75rem !important;
  padding-bottom: .85rem !important;
  border-bottom: 3px solid #b5121b !important;   /* WAI red rule under headings */
}

/* ── Field labels ───────────────────────────────────────────────────────── */
.wbm-bf-field label {
  font-family: var(--wbm-font) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #003161 !important;
  margin-bottom: .5rem !important;
}

/* ── Inputs ─────────────────────────────────────────────────────────────── */
.wbm-booking-form-wrap input[type="text"],
.wbm-booking-form-wrap input[type="tel"],
.wbm-booking-form-wrap input[type="email"],
.wbm-booking-form-wrap select,
.wbm-booking-form-wrap textarea {
  font-family: var(--wbm-font) !important;
  font-size: 16px !important;       /* 16px also stops iOS zooming on focus */
  color: #232323 !important;
  background: #fff !important;
  border: 2px solid #d6dee8 !important;
  border-radius: 2px !important;    /* near-square, matching WWP's edges */
  padding: .95rem 1rem .95rem 2.8rem !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

.wbm-booking-form-wrap textarea { padding-left: 2.8rem !important; }

.wbm-booking-form-wrap input:focus,
.wbm-booking-form-wrap select:focus,
.wbm-booking-form-wrap textarea:focus {
  outline: none !important;
  border-color: #005da5 !important;
  box-shadow: 0 0 0 3px rgba(0, 93, 165, .18) !important;
}

.wbm-booking-form-wrap ::placeholder { color: #8d99a8 !important; opacity: 1; }

/* ── Buttons: WWP's pill, WAI's red ─────────────────────────────────────── */
.wbm-bf-btn {
  font-family: var(--wbm-font) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  background: #b5121b !important;
  color: #fff !important;
  border: 2px solid #b5121b !important;
  border-radius: 999px !important;
  padding: 1.05rem 2.4rem !important;
  box-shadow: none !important;
  transition: background .2s ease, border-color .2s ease, transform .1s ease !important;
}
.wbm-bf-btn:hover { background: #8f0e15 !important; border-color: #8f0e15 !important; }
.wbm-bf-btn:active { transform: translateY(1px) !important; }
.wbm-bf-btn:focus-visible { outline: 3px solid #003161 !important; outline-offset: 3px !important; }

.wbm-bf-btn--outline {
  background: transparent !important;
  color: #003161 !important;
  border-color: #003161 !important;
}
.wbm-bf-btn--outline:hover {
  background: #003161 !important;
  color: #fff !important;
  border-color: #003161 !important;
}

/* ── Step indicator ─────────────────────────────────────────────────────── */
.wbm-bf-step {
  font-family: var(--wbm-font) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #8d99a8 !important;
}
.wbm-bf-step--active { color: #000 !important; }
.wbm-bf-step--done   { color: #005da5 !important; }

.wbm-bf-step::before {
  font-family: var(--wbm-font) !important;
  font-weight: 700 !important;
  background: #fff !important;
  color: #8d99a8 !important;
  border: 2px solid #d6dee8 !important;
}
.wbm-bf-step--active::before {
  background: #003161 !important;
  border-color: #003161 !important;
  color: #fff !important;
}
.wbm-bf-step--done::before {
  background: #005da5 !important;
  border-color: #005da5 !important;
  color: #fff !important;
}

/* ── Calendar, re-stated at this layer's specificity ────────────────────── */
.wbm-bf-cal-day {
  border-radius: 2px !important;
  border-width: 2px !important;
}
.wbm-bf-cal-day--active,
.wbm-bf-cal-day--active:hover {
  background: #005da5 !important;
  border-color: #005da5 !important;
  color: #fff !important;
}
.wbm-bf-slot {
  font-family: var(--wbm-font) !important;
  border-radius: 999px !important;
  border: 2px solid #d6dee8 !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}
.wbm-bf-slot:hover { border-color: #005da5 !important; color: #005da5 !important; }
.wbm-bf-slot--active {
  background: #005da5 !important;
  border-color: #005da5 !important;
  color: #fff !important;
}

/* ── "Prefer to talk?" ──────────────────────────────────────────────────── */
.wbm-booking-form-wrap .wbm-bf-call-number { color: #b5121b !important; font-weight: 700 !important; }
.wbm-booking-form-wrap .wbm-bf-call:hover .wbm-bf-call-number { color: #8f0e15 !important; }
.wbm-booking-form-wrap .wbm-bf-call svg { fill: #b5121b !important; }

@media (max-width: 767.98px) {
  .wbm-booking-form-wrap { padding: 2rem 1.25rem !important; }
  .wbm-bf-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .wbm-bf-btn, .wbm-bf-cal-day, .wbm-booking-form-wrap input { transition: none !important; }
}