/* Inter, self-hosted — the same variable files the admin panel uses. */
@font-face {
  font-family: 'IfxInter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IfxInter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   iFixOrlando booking widget — styles
   Design, spacing and colour from docs/booking-prototype.html.

   Every class is prefixed `ifx-`. The prototype's own names (.badge, .title,
   .price, .brand, .sub, .notice, .field) are among the most reused selectors in
   Divi and WooCommerce, and scoping under a root would not help: Divi's bare
   `.badge {...}` still matches our elements. Distinct names are the isolation.
   ========================================================================= */

.ifx-booking {
  --ifx-bg: #f3f6f4;
  --ifx-panel: #ffffff;
  --ifx-text: #17231c;
  --ifx-muted: #68766e;
  --ifx-border: #dce4df;
  --ifx-accent: #087443;
  --ifx-accent-dark: #065c35;
  --ifx-accent-soft: #edf8f1;
  --ifx-danger: #b42318;
  --ifx-danger-soft: #fff1f0;
  --ifx-shadow: 0 14px 36px rgba(20, 45, 31, .10);

  font-family: 'IfxInter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--ifx-text);
  line-height: 1.5;
}

.ifx-booking *,
.ifx-booking *::before,
.ifx-booking *::after { box-sizing: border-box; }

/* Divi styles bare buttons (padding, border, an ::after chevron on hover), so
   the widget needs its own reset. Kept at (0,1,1); every component rule below
   is `button.ifx-…`, the same weight but later in the file, so it wins the tie.
   A reset that outranks its components is how a widget loses all its colour. */
.ifx-booking button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
  background-image: none;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  transition: none;
}
.ifx-booking button::after,
.ifx-booking button::before { display: none !important; content: none !important; }

.ifx-booking input { font: inherit; }

.ifx-booking button:focus-visible,
.ifx-booking input:focus-visible,
.ifx-booking summary:focus-visible {
  outline: 3px solid rgba(8, 116, 67, .25);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- trigger */

button.ifx-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 14px 26px;
  border-radius: 13px;
  background: var(--ifx-accent);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  font-family: 'IfxInter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

.ifx-trigger:hover { background: var(--ifx-accent-dark); color: #fff; }
.ifx-trigger svg { width: 22px; height: 22px; flex: 0 0 auto; }

/* ---------------------------------------------------------------- dialog */

/* The theme's `* { margin: 0 }` overrides the browser's own
   `dialog:modal { margin: auto }`, which pinned the panel to the top-left.
   Centring is restated here rather than inherited from the UA stylesheet. */
dialog.ifx-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(100% - 32px, 476px);
  max-width: calc(100% - 32px);
  max-height: min(92vh, 900px);
  height: fit-content;
  padding: 0;
  border: 0;
  border-radius: 26px;
  background: transparent;
  overflow: visible;
}

.ifx-dialog::backdrop { background: rgba(8, 25, 16, .55); }

.ifx-shell {
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 900px);
  overflow: hidden;
  border: 1px solid var(--ifx-border);
  border-radius: 26px;
  background: var(--ifx-panel);
  box-shadow: var(--ifx-shadow);
}

.ifx-head {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 15px 16px;
  border-bottom: 1px solid var(--ifx-border);
}

.ifx-brand {
  text-align: center;
  color: var(--ifx-accent);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.8px;
}

button.ifx-iconbtn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  color: var(--ifx-text);
  font-size: 27px;
  line-height: 1;
}

.ifx-iconbtn:hover { background: var(--ifx-accent-soft); }

.ifx-progress-area { flex: 0 0 auto; padding: 18px 20px 0; }
.ifx-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

button.ifx-textbtn {
  padding: 2px 0;
  background: transparent;
  color: var(--ifx-accent);
  font-weight: 700;
}

.ifx-track {
  height: 8px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ifx-border);
}

.ifx-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--ifx-accent);
  transition: width .25s ease;
}

/* The body scrolls, not the page behind it. */
.ifx-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 20px 24px;
}

/* ---------------------------------------------------------------- steps */

.ifx-step { display: none; }
.ifx-step.is-active { display: block; animation: ifx-fade .18s ease; }

@keyframes ifx-fade {
  from { opacity: .55; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* Restated, not inherited: Divi sets font-family and weight straight onto the
   tags, and a property declared ON an element always beats an inherited one, so
   `.ifx-booking { font-family: … }` could never reach these. */
.ifx-booking h2 {
  margin: 0 0 8px;
  font-family: 'IfxInter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.35px;
  color: var(--ifx-text);
}

.ifx-booking h3 {
  margin: 24px 0 0;
  font-family: 'IfxInter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ifx-text);
}

.ifx-helper { margin: 0; color: var(--ifx-muted); font-size: 13px; line-height: 1.45; }

.ifx-step[data-step="1"] h2 { text-align: center; font-size: 23px; margin-top: 8px; }
.ifx-step[data-step="1"] { padding-top: 8px; }

.ifx-stack { display: grid; gap: 12px; margin-top: 22px; }
.ifx-model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }

/* ---------------------------------------------------------------- choices */

button.ifx-choice {
  width: 100%;
  min-height: 54px;
  padding: 15px;
  border: 1px solid var(--ifx-border);
  border-radius: 16px;
  background: #fff;
  color: var(--ifx-text);
  text-align: left;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.ifx-choice:hover { border-color: #aebdb4; }
.ifx-choice:active { transform: scale(.993); }

button.ifx-choice.is-selected {
  border: 2px solid var(--ifx-accent);
  background: var(--ifx-accent-soft);
  padding: 14px;
}

.ifx-choice[disabled] { opacity: .56; cursor: not-allowed; }
.ifx-choice[disabled]:hover { border-color: var(--ifx-border); }

.ifx-row { display: flex; align-items: center; gap: 15px; }
.ifx-grow { flex: 1; min-width: 0; }
.ifx-name { font-size: 15px; font-weight: 750; }
.ifx-note { margin-top: 4px; color: var(--ifx-muted); font-size: 13px; line-height: 1.35; }

.ifx-art {
  position: relative;
  width: 46px;
  height: 70px;
  flex: 0 0 auto;
  margin: 0 auto;
  border: 3px solid currentColor;
  border-radius: 11px;
}

.ifx-art::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
}

.ifx-art::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: translateX(-50%);
}

/* `button.` is load-bearing: `button.ifx-choice` sets text-align:left at
   (0,1,1), which a bare `.ifx-model-btn` (0,1,0) loses to. */
button.ifx-model-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 118px;
  text-align: center;
}

.ifx-model-btn .ifx-name { margin-top: 10px; }

/* The catalogue has a photo for every device; .ifx-art is the fallback when
   one is missing. */
/* Sized for the catalogue's landscape artwork (150x124), not .ifx-art's
   portrait 46x70 box, which letterboxed the photos down to ~46x38. */
.ifx-thumb {
  display: block;
  width: 100%;
  max-width: 108px;
  height: 76px;
  flex: 0 0 auto;
  margin: 0 auto;
  object-fit: contain;
}

/* Flush left in the horizontal row; no auto side margins. */
.ifx-row .ifx-thumb { width: 56px; height: 56px; margin: 0; }

/* Step 2 rows are a mix now that categories carry their own picture from the
   admin panel: one with artwork, the next still on the outline. The outline is
   sized to the thumbnail it stands in for (46x70 keeps its aspect at 37x56) so
   the two rows are the same height either way. */
.ifx-row > .ifx-art { width: 37px; height: 56px; margin: 0; }
.ifx-row > .ifx-art::before { top: 4px; width: 14px; height: 3px; }
.ifx-row > .ifx-art::after { bottom: 3px; width: 7px; height: 7px; }


.ifx-thumb.is-loading { opacity: 0; }
.ifx-thumb { transition: opacity .2s ease; }

@media (prefers-reduced-motion: reduce) { .ifx-thumb { transition: none; } }

.ifx-selected-model {
  margin-top: 20px;
  padding: 13px 15px;
  border-radius: 12px;
  background: var(--ifx-accent-soft);
  color: var(--ifx-accent-dark);
  font-size: 14px;
}

.ifx-optrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ifx-amount { flex: 0 0 auto; font-size: 16px; font-weight: 800; }

.ifx-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--ifx-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  vertical-align: 1px;
}

/* ---------------------------------------------------------------- extras */

.ifx-extra {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--ifx-border);
  border-radius: 16px;
  cursor: pointer;
}

.ifx-extra:has(input:checked) {
  border: 2px solid var(--ifx-accent);
  background: var(--ifx-accent-soft);
  padding: 14px;
}

.ifx-extra input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  accent-color: var(--ifx-accent);
}

.ifx-extra-body { flex: 1; min-width: 0; }

/* The "i" and the price travel together on the right of the row. */
.ifx-extra-end { display: flex; align-items: center; flex: 0 0 auto; gap: 10px; }

/* The row is built from <span>s so it can live inside the <label>, and .ifx-note
   carries no display of its own — as a repair option it is a <div> and gets one
   for free. Without this the sub-line runs on from the end of the name. */
.ifx-extra .ifx-name,
.ifx-extra .ifx-note { display: block; }

/* A real <button> inside the <label>, so it needs its own hit area and must
   not inherit the label's pointer semantics. 28px is under the 44px touch
   guidance on purpose — it sits beside a checkbox the customer is aiming at,
   and a bigger circle here is a bigger chance of buying by accident. The
   padding-free circle is what the client's mockup draws. */
button.ifx-infobtn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--ifx-accent);
  border-radius: 50%;
  background: transparent;
  color: var(--ifx-accent);
  font-size: 15px;
  font-weight: 800;
  /* Upright, at the client's request 2026-08-05. Stated as `normal` rather
     than simply dropped: Divi italicises some button text, so leaving it
     unset would let the theme tilt it straight back. */
  font-style: normal;
  line-height: 1;
  cursor: pointer;
}

.ifx-infobtn:hover { background: var(--ifx-accent); color: #fff; }

button.ifx-skip {
  width: 100%;
  margin-top: 16px;
  padding: 8px;
  background: transparent;
  color: var(--ifx-accent);
  font-weight: 750;
}

/* ---------------------------------------------------------------- dates */

.ifx-datenav { display: flex; align-items: center; gap: 7px; margin-top: 22px; }

button.ifx-arrow {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid var(--ifx-border);
  border-radius: 50%;
  background: #fff;
  color: var(--ifx-text);
  font-size: 26px;
  line-height: 1;
}

.ifx-arrow[disabled] { cursor: not-allowed; opacity: .3; }

.ifx-dategrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; flex: 1; min-width: 0; }
.ifx-timegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }

.ifx-dategrid button.ifx-choice,
.ifx-timegrid .ifx-choice { padding: 11px 4px; text-align: center; }

.ifx-dategrid button.ifx-choice.is-selected,
.ifx-timegrid .ifx-choice.is-selected { padding: 10px 3px; }

/* ---------------------------------------------------------------- form */

.ifx-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  margin-top: 22px;
}

.ifx-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 750; }

/* The address and the unit below it each take the whole row. Half a row is
   narrower than a Google-formatted street address, so on a phone the value
   scrolled out of sight and the customer could not read back what they picked. */
.ifx-field-wide { grid-column: 1 / -1; }

/* Anchor for the address suggestion list. */
.ifx-field-suggest { position: relative; }

.ifx-suggest {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  max-height: 232px;
  overflow-y: auto;
  /* The list sits over the form, so scrolling to its end must not carry on
     into the dialog body underneath and drag the field out from under it. */
  overscroll-behavior: contain;
  border: 1px solid var(--ifx-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--ifx-shadow);
}

.ifx-suggest[hidden] { display: none; }

.ifx-suggest-item {
  padding: 10px 11px;
  border-radius: 9px;
  line-height: 1.35;
  cursor: pointer;
  /* No 300ms tap delay: the pick has to feel like a button press. */
  touch-action: manipulation;
}

/* The street, then the city under it. A single grey run at 14px is the thing
   the client could not read on a phone. */
.ifx-suggest-main { display: block; font-size: 14px; font-weight: 650; color: var(--ifx-text); }
.ifx-suggest-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--ifx-muted); }

/* :active as well as :hover — a phone has no hover, so without it a tap gives
   no feedback at all. */
.ifx-suggest-item:hover,
.ifx-suggest-item:active { background: var(--ifx-accent-soft); }

.ifx-field input {
  width: 100%;
  min-height: 54px;
  padding: 11px 13px;
  border: 1px solid var(--ifx-border);
  border-radius: 12px;
  background: #fff;
  color: var(--ifx-text);
  /* 16px minimum, or iOS Safari zooms the dialog on focus. */
  font-size: 16px;
}

.ifx-field input.is-invalid { border-color: var(--ifx-danger); background: var(--ifx-danger-soft); }
.ifx-fielderr { min-height: 17px; margin-top: 5px; color: var(--ifx-danger); font-size: 12px; }

/* ---------------------------------------------------------------- step 1 */

.ifx-zip-lede { margin-top: 16px; font-size: 18px; text-align: center; }
.ifx-zip-wrap { margin-top: 34px; }
#ifxZip { min-height: 58px; font-size: 18px; text-align: center; }
.ifx-zip-msg { margin-top: 10px; text-align: center; }

/* Keyboard up (see trackViewport): the panel is only as tall as the strip
   above the keyboard, so step 1 gives back its generous spacing rather than
   scrolling its own heading out of sight. */
.ifx-dialog.is-compact .ifx-step[data-step="1"] h2 { font-size: 18px; }
.ifx-dialog.is-compact .ifx-zip-lede { margin-top: 8px; font-size: 15px; }
.ifx-dialog.is-compact .ifx-zip-wrap { margin-top: 16px; }
.ifx-dialog.is-compact .ifx-foot.is-inline .ifx-primary { margin-top: 12px; }

.ifx-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ifx-details {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--ifx-border);
  border-radius: 13px;
}

.ifx-details summary {
  cursor: pointer;
  color: var(--ifx-accent);
  font-size: 15px;
  font-weight: 750;
}

.ifx-coupon { display: flex; gap: 8px; margin-top: 12px; }

.ifx-coupon input {
  min-width: 0;
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--ifx-border);
  border-radius: 11px;
  font-size: 16px;
}

button.ifx-secondary {
  /* Sized here, or it inherits Divi's body size and dwarfs the input beside it. */
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--ifx-border);
  border-radius: 11px;
  background: #fff;
  font-weight: 750;
}

.ifx-coupon-msg { min-height: 18px; margin-top: 8px; font-size: 13px; }
.ifx-coupon-msg.is-ok { color: var(--ifx-accent); }
.ifx-coupon-msg.is-bad { color: var(--ifx-danger); }

/* ---------------------------------------------------------------- summary */

.ifx-summary {
  display: none;
  margin-top: 22px;
  padding: 15px;
  border: 1px solid var(--ifx-border);
  border-radius: 16px;
  background: #fbfcfb;
}

.ifx-summary.is-shown { display: block; }
.ifx-summary-flex { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ifx-summary-total { flex: 0 0 auto; font-size: 21px; font-weight: 850; }

/* ---------------------------------------------------------------- footer */

.ifx-foot { flex: 0 0 auto; padding: 0 20px 22px; }

/* placeFoot() moves the footer into .ifx-body — on step 1, and on any step
   while a keyboard is open — so the keyboard cannot cover it. It sits inside
   the body's padding there and must not repeat it. */
.ifx-foot.is-inline { padding: 0; }

button.ifx-primary {
  width: 100%;
  min-height: 54px;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 13px;
  background: var(--ifx-accent);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

.ifx-primary:hover:not([disabled]) { background: var(--ifx-accent-dark); color: #fff; }
.ifx-primary[disabled] { cursor: not-allowed; opacity: .42; }

.ifx-notice {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ifx-danger-soft);
  color: var(--ifx-danger);
  font-size: 14px;
}

.ifx-notice.is-shown { display: block; }

/* ---------------------------------------------------------------- states */

.ifx-loading {
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 40px 0;
  color: var(--ifx-muted);
  font-size: 14px;
}

.ifx-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--ifx-border);
  border-top-color: var(--ifx-accent);
  border-radius: 50%;
  animation: ifx-spin .8s linear infinite;
}

@keyframes ifx-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ifx-spinner { animation-duration: 2.4s; }
  .ifx-step.is-active { animation: none; }
  .ifx-fill { transition: none; }
}

.ifx-retry { margin-top: 12px; }

/* ---------------------------------------------------------------- done */

.ifx-done { text-align: center; }

.ifx-done-mark {
  display: grid;
  width: 66px;
  height: 66px;
  margin: 0 auto 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--ifx-accent);
  color: #fff;
  font-size: 34px;
  font-weight: 800;
}

.ifx-done-details {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--ifx-border);
  border-radius: 16px;
  text-align: left;
}

.ifx-detail { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.ifx-detail span:first-child { color: var(--ifx-muted); }
.ifx-detail strong { text-align: right; }

/* ---------------------------------------------------------------- help */

/* Centring restated: the theme's `* { margin: 0 }` beats `dialog:modal
   { margin: auto }` and pins the panel to the top-left.
   Every dialog in the widget belongs in this selector list. .ifx-area-dialog
   was once a copy of the help dialog that dropped these four lines and spent a
   day pinned to the corner; joining the group is what stops that recurring. */
.ifx-help-dialog,
.ifx-area-dialog,
.ifx-info-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(100% - 32px, 410px);
  height: fit-content;
  max-height: min(92vh, 900px);
  padding: 0;
  border: 1px solid var(--ifx-border);
  border-radius: 20px;
  background: var(--ifx-panel);
  color: var(--ifx-text);
}

.ifx-help-dialog::backdrop { background: rgba(8, 25, 16, .52); }
.ifx-help-inner { padding: 20px; }
.ifx-help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ifx-help-head h2 { margin: 0; font-size: 21px; }

.ifx-area-dialog::backdrop { background: rgba(8, 25, 16, .52); }

/* Title centred, close button pinned right. */
.ifx-area-dialog .ifx-help-head { position: relative; justify-content: center; }

.ifx-area-dialog .ifx-help-head h2 {
  padding: 0 44px;
  font-size: 20px;
  text-align: center;
}

.ifx-area-dialog .ifx-iconbtn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--ifx-border);
}

/* Specificity must beat the theme's
   `p:not(.has-background):last-of-type { padding-bottom: 0 }` (0,2,1). */
dialog.ifx-area-dialog p.ifx-area-msg {
  margin: 18px 0 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--ifx-accent-soft);
  color: var(--ifx-text);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}

/* One action, full width. */
.ifx-area-actions { display: grid; gap: 10px; margin-top: 18px; }
.ifx-area-actions .ifx-primary { margin-top: 0; }

/* ------------------------------------------------------------ extra info */

.ifx-info-dialog::backdrop { background: rgba(8, 25, 16, .52); }

/* The close button is round and outlined here, as in the client's mockup —
   the help dialog's borderless one disappears against the white card. */
.ifx-info-dialog .ifx-help-head { align-items: flex-start; }
.ifx-info-dialog .ifx-help-head h2 { font-size: 20px; line-height: 1.3; }
.ifx-info-dialog .ifx-iconbtn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ifx-border);
  font-size: 20px;
}

/* Same specificity problem as .ifx-area-msg: the theme's
   `p:not(.has-background):last-of-type { padding-bottom: 0 }` is (0,2,1). */
dialog.ifx-info-dialog p.ifx-info-body {
  margin: 14px 0 0;
  padding: 0;
  color: var(--ifx-muted);
  font-size: 15px;
  line-height: 1.55;
  /* The shop writes this in a textarea; blank lines there should survive. */
  white-space: pre-line;
}

/* Shown only when the quote carries a service fee. */
.ifx-summary-fee {
  display: none;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ifx-muted);
}

.ifx-summary-fee.is-shown { display: block; }

.ifx-how { display: grid; gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.ifx-how li { display: grid; grid-template-columns: 30px 1fr; gap: 11px; }

.ifx-num {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--ifx-accent-soft);
  color: var(--ifx-accent);
  font-weight: 800;
}

/* ---------------------------------------------------------------- badges */

.ifx-badge {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  vertical-align: 2px;
  white-space: nowrap;
}

.ifx-badge-rec { background: var(--ifx-accent-soft); color: var(--ifx-accent); }
.ifx-badge-pop { background: #fff2df; color: #9a5b06; }

/* ------------------------------------------------------------- day cards */

.ifx-dayname {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ifx-muted);
  line-height: 1.2;
}

.ifx-daydate {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.ifx-timegrid .ifx-choice { font-size: 14px; font-weight: 700; }

/* ---------------------------------------------------------------- narrow */

/* Full screen on phones, always. dvh, so the panel clears the collapsing
   address bar.
   The panel is NOT resized to the visual viewport. It was, briefly, and the
   client reported the result on 2026-08-05: "Step 7 and the ZIP code section
   are only displaying on half of the screen". Sizing a fixed panel to
   visualViewport.height and translating it by offsetTop assumes iOS reports
   both consistently while the keyboard animates, and it does not — the panel
   came up short and the page showed through underneath. Height is left alone
   and the keyboard is handled inside the scroll container instead: see
   --ifx-kb below. Nothing here depends on getting an iOS number exactly right. */
@media (max-width: 640px) {
  dialog.ifx-dialog {
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .ifx-shell {
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .ifx-brand { font-size: 22px; }

  /* --ifx-kb is how much of the screen the on-screen keyboard is covering,
     set by trackViewport() and 0 the rest of the time. Reserving it as bottom
     padding is what lets the body scroll its content — and the footer, which
     moves in here while the keyboard is up — clear of the keyboard. Over-
     estimating costs nothing but spare scroll room, which is exactly why this
     is safer than resizing the panel. */
  .ifx-body { padding: 18px 16px calc(22px + var(--ifx-kb, 0px)); }
  .ifx-progress-area { padding-inline: 16px; }
  .ifx-foot { padding-inline: 16px; }
  .ifx-datenav { gap: 4px; }
  .ifx-arrow { width: 36px; height: 36px; }
  .ifx-dategrid { gap: 5px; }
  .ifx-choice { padding: 13px; }
  .ifx-choice.is-selected { padding: 12px; }
  /* The four short fields stay paired on phones — the client asked for the
     contact step to fit without scrolling, and stacking all of them is the
     longest step in the flow. The address and unit are the exceptions above. */
  .ifx-fields { gap: 10px 8px; }
  .ifx-field label { font-size: 13px; }
  .ifx-field input { padding: 11px 10px; }
  /* Roomier rows on touch: five 40px entries are a wall of text and a hard
     tap target. Height is capped against the on-screen keyboard. */
  .ifx-suggest { max-height: 44vh; }
  .ifx-suggest-item { padding: 12px; }
  .ifx-suggest-main { font-size: 15px; }
  .ifx-booking h2 { font-size: 20px; }
  .ifx-step[data-step="1"] h2 { font-size: 21px; }
}

/* Below this a two-column input is narrower than the text inside it. */
@media (max-width: 359px) {
  .ifx-fields { grid-template-columns: 1fr; }
}

@supports not (height: 100dvh) {
  @media (max-width: 640px) {
    dialog.ifx-dialog, .ifx-shell { height: 100vh; max-height: 100vh; }
  }
}