/* NashFix v2.3: booking page (/schedule-appointment/) and /thank-you/.
   Built on the theme: Source Sans Pro, Speed FEZ titles, NashFix orange. Light + dark (html[data-theme=dark]). */
/* v3: tokens come from :root in app.css (one source); these pages only set the text color */
.nfb-page, .nft-page { color: var(--nf-text); }

.nfb-shell { width: 100%; max-width: calc(var(--nf-container) + 2 * var(--nf-gutter)); margin: 0 auto; padding: 0 var(--nf-gutter); box-sizing: border-box; }   /* v3: on the 1200 grid, same left edge as the logo */

/* compact title band: replaces the half-screen photo hero on these two pages only */
.nfb-head { padding: 84px 0 18px; }
@media (min-width: 768px) { .nfb-head { padding: 112px 0 26px; } }
/* v2.5: the title band sits on the page photo under the same theme scrim as the home hero (tokens --nf-hero-* in app.css,
   .nf-page). The band is 16px taller at the bottom and the form card overlaps it by 16px, so the form starts as high as before. */
.nfb-head, .nft-head { position: relative; isolation: isolate; overflow: hidden; background-color: var(--nf-hero-base); }
.nfb-head { padding-bottom: 34px; }
@media (min-width: 768px) { .nfb-head { padding-bottom: 50px; } }
.nfb-head + .nfb-layout .nfb { margin-top: -16px; }
@media (min-width: 768px) { .nfb-head + .nfb-layout .nfb { margin-top: -24px; } }
.nfb-head + .nfb-layout .nfb-content + .nfb { margin-top: 0; }
.nfb-head .nfb-title, .nft-head .nfb-title { color: var(--nf-hero-ink); }
.nfb-head .nfb-lede, .nft-head .nfb-lede { color: var(--nf-hero-ink-soft); }
.nft-head { padding-bottom: 32px; margin-bottom: var(--nf-head-gap); }
@media (min-width: 768px) { .nft-head { padding-bottom: 44px; } }
.nft-head .nft-check { background: var(--nf-surface); box-shadow: 0 1px 2px rgba(20, 22, 28, .08); }
.nfb-title {
  font-family: 'Speed FEZ', 'Source Sans Pro', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.7rem, 6vw, 2.6rem); line-height: 1.05; letter-spacing: 0; margin: 0 0 10px; color: var(--nf-text);
  text-wrap: balance;
}
.nfb-lede { margin: 0; max-width: 60ch; font-size: 1.125rem; line-height: 1.5; color: var(--nf-muted); text-wrap: pretty; }

.nfb-layout { display: grid; gap: 28px; padding-bottom: 8px; }
@media (min-width: 980px) {
  .nfb-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
  .nfb-aside { position: sticky; top: 96px; }
}
.nfb-main, .nfb-aside { min-width: 0; }
.nfb-content { margin-bottom: 20px; }

/* ---------------- form card ---------------- */
.nfb {
  position: relative; background: var(--nf-surface); border: 1px solid var(--nf-line); border-radius: 16px;
  box-shadow: var(--nf-shadow); padding: 20px 16px 18px; box-sizing: border-box; scroll-margin-top: 72px;
}
@media (min-width: 600px) { .nfb { padding: 28px 28px 24px; } }
.nfb [hidden], .nft-page [hidden] { display: none !important; }
.nfb fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.nfb-step + .nfb-step { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--nf-line); }   /* no-JS: all steps stacked */
.nfb.is-js .nfb-step + .nfb-step { margin-top: 0; padding-top: 0; border-top: 0; }
.nfb.is-js .nfb-step:not(.is-active) { display: none; }
.nfb-step__title {
  display: block; float: left; width: 100%; padding: 0; margin: 0 0 4px;
  font-size: 1.5rem; line-height: 1.2; font-weight: 700; color: var(--nf-text); text-wrap: balance; outline: none;
}
.nfb-step__title + * { clear: both; }
.nfb-hint { margin: 0 0 14px; color: var(--nf-muted); font-size: 1rem; line-height: 1.45; }
.nfb-hint--after { margin: 10px 0 0; font-size: .95rem; }

/* progress */
.nfb-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0 0 10px; padding: 0; }
.nfb-progress__btn {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 0; margin: 0; border: 0; background: none;
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--nf-muted); text-align: left; cursor: pointer; white-space: nowrap; min-width: 0;
}
.nfb-progress__btn:disabled { cursor: default; opacity: .75; }
.nfb-progress__num {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--nf-line-strong); font-size: .85rem; font-variant-numeric: tabular-nums;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.nfb-progress__label { overflow: hidden; text-overflow: ellipsis; }
.nfb-progress__item.is-current .nfb-progress__btn { color: var(--nf-text); }
.nfb-progress__item.is-current .nfb-progress__num { border-color: var(--nf-orange); background: var(--nf-orange); color: var(--nf-on-orange); font-weight: 700; }
.nfb-progress__item.is-done .nfb-progress__btn { color: var(--nf-text); }
.nfb-progress__item.is-done .nfb-progress__num { border-color: var(--nf-orange); color: var(--nf-text); background: var(--nf-orange-wash); font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .nfb-progress__item.is-done .nfb-progress__btn:hover .nfb-progress__label { text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 400px) {   /* phones: numbers for the other steps, the name only for the current one */
  .nfb-progress { display: flex; gap: 14px; }
  .nfb-progress__item.is-current { flex: 1 1 auto; min-width: 0; }
  .nfb-progress__item:not(.is-current) .nfb-progress__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nfb-summary__row { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 8px; }
}
.nfb-bar { height: 4px; border-radius: 4px; background: var(--nf-sunken); overflow: hidden; margin: 0 0 22px; }
.nfb-bar__fill {
  display: block; height: 100%; width: 100%; background: var(--nf-orange); border-radius: inherit;
  transform-origin: left center; transform: scaleX(.3333); transition: transform .22s var(--nf-ease-out);
}

/* appliance tiles: 3 x 4 on phones, 4 x 3 from 600px; "Other" takes the whole row under the grid */
.nfb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .nfb-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } }
.nfb-tiles input[type="checkbox"], .nfb-chips input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.nfb-tiles label {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 8px 4px 10px;
  border: 1.5px solid var(--nf-line); border-radius: 12px; background: var(--nf-surface); cursor: pointer;
  font-size: .9rem; font-weight: 600; line-height: 1.15; text-align: center; color: var(--nf-text);
  transition: border-color .15s ease, background-color .15s ease, transform .12s var(--nf-ease-out);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.nfb-tiles label span { text-wrap: balance; }
.nfb-tiles label img {
  display: block; width: 100%; max-width: 96px; height: auto; aspect-ratio: 1; object-fit: contain; pointer-events: none;
  filter: grayscale(100%); opacity: .8; transition: filter .2s ease, opacity .2s ease;
}
.nfb-tiles label:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .nfb-tiles label:hover { border-color: var(--nf-line-strong); }
  .nfb-tiles label:hover img { filter: grayscale(40%); opacity: 1; }
}
.nfb-tiles input:checked + label { border-color: var(--nf-orange); background: var(--nf-orange-wash); box-shadow: inset 0 0 0 1px var(--nf-orange); }
.nfb-tiles input:checked + label img { filter: none; opacity: 1; }
.nfb-tiles input:checked + label::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--nf-orange)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%231c1d20' d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.nfb-tiles input:focus-visible + label { outline: 3px solid var(--nf-focus); outline-offset: 2px; }
.nfb-tiles .nfb-tile-other { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 10px; padding: 14px 12px; font-size: 1rem; }
.nfb-tile-other__plus { display: inline-grid; place-items: center; color: var(--nf-orange); }
.nfb-tiles input:checked + .nfb-tile-other .nfb-tile-other__plus { visibility: hidden; }
@media (max-width: 360px) { .nfb-tiles label { font-size: .8rem; padding: 6px 2px 8px; } }

/* fields */
.nfb-field { margin-top: 18px; min-width: 0; }
.nfb-field > label, .nfb-label { display: block; margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: var(--nf-text); }
.nfb-opt { font-weight: 400; color: var(--nf-muted); font-size: .9rem; margin-left: 4px; }
.nfb-input {
  display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 12px 14px; min-height: 48px;
  font: inherit; font-size: 1.0625rem; line-height: 1.35; color: var(--nf-text); background: var(--nf-surface);
  border: 1.5px solid var(--nf-line-strong); border-radius: 10px; caret-color: var(--nf-orange);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.nfb-input { resize: vertical; min-height: 92px; }
.nfb-input::placeholder { color: var(--nf-muted); opacity: 1; }   /* 6.9:1 on white */
html[data-theme="dark"] .nfb-input::placeholder { color: var(--nf-muted); }
.nfb-input:focus { outline: none; border-color: var(--nf-text); box-shadow: 0 0 0 3px var(--nf-orange-wash); }
.nfb-input[aria-invalid="true"] { border-color: var(--nf-error); }
.nfb-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .2); }
.nfb-error { margin: 6px 0 0; font-size: .95rem; line-height: 1.35; color: var(--nf-error); font-weight: 600; }
.nfb-other { display: none; }
.nfb:not(.is-js) .nfb-other, .nfb-other.is-open { display: block; }
.nfb-row { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .nfb-row { grid-template-columns: 1fr 1fr; }
  .nfb-row .nfb-field--wide { grid-column: 1 / -1; }
  .nfb-step[data-step="2"] .nfb-row { grid-template-columns: 1fr 160px; }
}

/* chips: days and time windows */
.nfb-chips { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.nfb-chips--days { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.nfb-chips label, .nfb-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; padding: 9px 6px; min-height: 48px; box-sizing: border-box;
  border: 1.5px solid var(--nf-line-strong); border-radius: 10px; background: var(--nf-surface); color: var(--nf-text);
  font: inherit; font-size: .98rem; font-weight: 600; line-height: 1.15; text-align: center; white-space: nowrap; cursor: pointer;
  font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background-color .15s ease, transform .12s var(--nf-ease-out);
}
.nfb-chip small { display: block; font-size: .8rem; font-weight: 400; color: var(--nf-muted); margin-top: 2px; }
.nfb-chips label:active, .nfb-chip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .nfb-chips label:hover, .nfb-chip:hover { border-color: var(--nf-line-strong); } }
.nfb-chips input:checked + label, .nfb-chip[aria-pressed="true"] { border-color: var(--nf-orange); background: var(--nf-orange-wash); box-shadow: inset 0 0 0 1px var(--nf-orange); }
.nfb-chips input:focus-visible + label, .nfb-chip:focus-visible { outline: 3px solid var(--nf-focus); outline-offset: 2px; }
.nfb.is-js .nfb-date-fallback { display: none; }
.nfb.is-js .nfb-date-fallback.is-shown { display: block; margin-top: 10px; }
.nfb:not(.is-js) [data-days] { display: none; }

/* summary on step 3 */
.nfb-summary { margin: 14px 0 4px; padding: 4px 14px; background: var(--nf-sunken); border-radius: 12px; }
.nfb-summary__row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 10px 0; }
.nfb-summary__row + .nfb-summary__row { border-top: 1px solid var(--nf-line); }
.nfb-summary dt { margin: 0; font-size: .9rem; color: var(--nf-muted); }
.nfb-summary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.nfb-summary dd .nfb-nw { white-space: nowrap; }
.nfb-edit { border: 0; background: none; padding: 6px 2px; font: inherit; font-size: .95rem; font-weight: 600; color: var(--nf-link); text-decoration-color: var(--nf-orange); text-decoration-thickness: 2px; cursor: pointer; text-decoration-line: underline; text-underline-offset: 3px; white-space: nowrap; }

/* "already sent" panel */
.nfb-done { padding: 8px 0 4px; }
.nfb-done .nft-check { margin-bottom: 12px; }
.nfb-done__title { margin: 0 0 6px; font-size: 1.5rem; line-height: 1.2; font-weight: 700; color: var(--nf-text); outline: none; text-wrap: balance; }
.nfb-done .nfb-hint a { color: var(--nf-link); text-decoration-color: var(--nf-orange); text-decoration-thickness: 2px; font-weight: 600; text-decoration-line: underline; text-underline-offset: 3px; }
.nfb-done .nfb-nav { margin-top: 16px; }

/* trust line, buttons, message, fine print */
.nfb-assure { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--nf-sunken); font-size: 1rem; line-height: 1.45; text-wrap: pretty; }
.nfb-assure svg { flex: none; color: var(--nf-orange); margin-top: 1px; }
.nfb-nav { display: flex; gap: 10px; margin-top: 24px; }
.nfb:not(.is-js) [data-next], .nfb:not(.is-js) [data-back] { display: none; }
.nfb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; margin: 0;
  border-radius: 999px; border: 1.5px solid transparent; font: inherit; font-size: 1.2rem; font-weight: 700; line-height: 1;   /* fix1: capsule (choice G) */
  white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, border-color .15s ease, transform .12s var(--nf-ease-out);
}
.nfb-btn:active { transform: scale(.98); }
.nfb-btn:focus-visible { outline: 3px solid var(--nf-focus); outline-offset: 3px; }
.nfb-btn--primary, a.nfb-btn--primary, a.nfb-btn--primary:visited { flex: 1 1 auto; background-color: var(--nf-orange); background-image: var(--nf-btn-fill); background-origin: border-box; color: var(--nf-btn-ink); box-shadow: var(--nf-btn-shadow); }
.nfb-btn--primary:active { background-image: var(--nf-btn-fill-active); }
@media (hover: hover) and (pointer: fine) { .nfb-btn--primary:hover { color: var(--nf-btn-ink); background-image: var(--nf-btn-fill-hover); box-shadow: var(--nf-btn-shadow-hover); } .nfb-btn--ghost:hover { border-color: var(--nf-text); background: var(--nf-sunken); } }
.nfb-btn--ghost { flex: 0 0 auto; background: transparent; color: var(--nf-text); border-color: var(--nf-line-strong); }
.nfb-btn:disabled { cursor: progress; opacity: .85; }
@media (max-width: 360px) { .nfb-btn { padding: 0 14px; font-size: 1.1rem; } .nfb-submit { font-size: 1.05rem; } }
.nfb-spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(28, 29, 32, .22); border-top-color: var(--nf-on-orange); animation: nfb-spin .8s linear infinite; }
.nfb-submit.is-busy .nfb-spinner { display: inline-block; }
@keyframes nfb-spin { to { transform: rotate(360deg); } }
.nfb-message { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 1rem; line-height: 1.45; text-wrap: pretty; scroll-margin-bottom: 120px; }
.nfb-message.error { background: var(--nf-error-bg); color: var(--nf-error); font-weight: 600; }
.nfb-message.success { background: var(--nf-ok-bg); color: var(--nf-ok); font-weight: 600; }
.nfb-message a { color: inherit; text-decoration: underline; white-space: nowrap; }
.nfb-fine { margin: 12px 0 0; font-size: .75rem; line-height: 1.5; color: var(--nf-muted); text-wrap: pretty; }   /* 16.10: 12px captions (consent + reCAPTCHA) */
.nfb-fine + .nfb-fine { margin-top: 4px; }
.nfb-fine a { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 2px; }

/* trust points */
.nfb-aside__title { font-size: 1.2rem; font-weight: 700; margin: 4px 0 14px; color: var(--nf-text); text-wrap: balance; }
.nfb-aside__lead { font-size: 1rem; line-height: 1.55; color: var(--nf-text); margin: 0 0 18px; text-wrap: pretty; }
.nfb-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.nfb-points li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; margin: 0; }
.nfb-points svg { color: var(--nf-orange); margin-top: 1px; }
.nfb-points strong { display: block; font-size: 1.05rem; line-height: 1.3; color: var(--nf-text); margin-bottom: 3px; text-wrap: balance; }
.nfb-points span { display: block; font-size: 1rem; line-height: 1.5; color: var(--nf-muted); text-wrap: pretty; }
.nfb-aside__call { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--nf-line); font-size: 1rem; color: var(--nf-muted); }
.nfb-aside__call a { color: var(--nf-link); text-decoration-color: var(--nf-orange); text-decoration-thickness: 2px; font-weight: 700; white-space: nowrap; text-decoration-line: underline; text-underline-offset: 3px; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .nfb-aside__call a:hover { text-decoration-thickness: 3px; } }
@media (min-width: 600px) and (max-width: 979px) { .nfb-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nfb-points li { grid-template-columns: 1fr; gap: 8px; } }

/* SEO paragraph under the form keeps its look, only spacing and wrapping */
.nfb-page .info-block { margin: 28px 0 0; text-wrap: pretty; }
.nfb-page .info-block p { margin: 0; }
/* v2.5: the SEO paragraph reads as a quiet closing line, not a floating card */
.nfb-page .info-block {
  margin-top: var(--nf-gap); padding: 24px 0 0; border-top: 1px solid var(--nf-line); border-radius: 0;
  background: transparent; box-shadow: none; text-align: left; font-size: 1rem; line-height: 1.6; color: var(--nf-muted);
}
html[data-theme="dark"] .nfb-page .info-block { background: transparent; color: var(--nf-muted); }
.nfb-page .info-block a { color: var(--nf-text); text-decoration: underline; text-decoration-color: var(--nf-line-strong); text-underline-offset: 3px; }
.nfb-page .info-block b a { font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .nfb-page .info-block a:hover { text-decoration-color: var(--nf-orange); } }

/* v2.5: a time window that starts within the next hour (Today) cannot be picked */
.nfb-chips input:disabled + label {
  cursor: not-allowed; color: var(--nf-muted); background: var(--nf-sunken); border-color: var(--nf-line); border-style: dashed;
  text-decoration: line-through; text-decoration-color: var(--nf-line-strong); box-shadow: none; transform: none;
}
@media (hover: hover) and (pointer: fine) { .nfb-chips input:disabled + label:hover { border-color: var(--nf-line); } }

/* phones: body already reserves the 48px call bar (app.css); this extra room is for the chat bubble above it */
@media (max-width: 767px) { .nfb-page, .nft-page { padding-bottom: 32px; } }

/* ---------------- /thank-you/ ---------------- */
.nft-head { padding: 84px 0 8px; }
@media (min-width: 768px) { .nft-head { padding: 112px 0 12px; } }
.nft-check { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--nf-sunken); color: var(--nf-orange); margin-bottom: 14px; }
.nft-body { display: grid; gap: 28px; padding-bottom: 40px; }
@media (min-width: 900px) { .nft-body { grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; align-items: start; } }
.nft-steps { list-style: none; counter-reset: nft; margin: 0; padding: 0; display: grid; gap: 0; }
.nft-steps li { counter-increment: nft; position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 0 0 22px; margin: 0; }
.nft-steps li::before {
  content: counter(nft); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--nf-orange); border: 1.5px solid var(--nf-orange); color: var(--nf-on-orange); font-weight: 700; font-variant-numeric: tabular-nums;
}
.nft-steps li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 38px; bottom: 4px; width: 2px; background: var(--nf-line); }
.nft-steps strong { display: block; font-size: 1.15rem; line-height: 1.3; margin: 5px 0 3px; color: var(--nf-text); text-wrap: balance; }
.nft-steps span { display: block; font-size: 1.02rem; line-height: 1.5; color: var(--nf-muted); text-wrap: pretty; }
.nft-ask { background: var(--nf-surface); border: 1px solid var(--nf-line); border-radius: 16px; box-shadow: var(--nf-shadow); padding: 20px 18px; }
.nft-ask__title { display: flex; gap: 10px; align-items: center; font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; color: var(--nf-text); }
.nft-ask__title svg { color: var(--nf-orange); flex: none; }
.nft-ask .nfb-fine { max-width: none; margin-top: 14px; }
.nft-ask p { margin: 0 0 16px; font-size: 1.02rem; line-height: 1.5; color: var(--nf-muted); text-wrap: pretty; }
.nft-ask p a { color: var(--nf-link); text-decoration-color: var(--nf-orange); text-decoration-thickness: 2px; font-weight: 700; white-space: nowrap; text-decoration-line: underline; text-underline-offset: 3px; font-variant-numeric: tabular-nums; }
.nft-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.nft-actions .nfb-btn { flex: 1 1 140px; text-decoration: none; font-size: 1.1rem; }
.nft-actions .nfb-btn svg { flex: none; }
.nft-main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.nft-home-btn { text-decoration: none; font-size: 1.05rem; gap: 10px; }
.nft-home-btn svg { flex: none; }
@media (max-width: 899px) { .nft-home-btn { align-self: stretch; } }

@media (prefers-reduced-motion: reduce) {
  .nfb-bar__fill, .nfb-tiles label, .nfb-chips label, .nfb-chip, .nfb-btn { transition-duration: .01ms; }
  .nfb-tiles label:active, .nfb-chips label:active, .nfb-chip:active, .nfb-btn:active { transform: none; }
}

/* fix4 #5: no dark text on a saturated orange disc (Vitya 17.10). Current step: graphite (light in the dark theme);
   done steps keep the soft orange ring; the thank-you steps use the same ring. */
.nfb-progress__item.is-current .nfb-progress__num { border-color: var(--nf-text); background: var(--nf-text); color: var(--nf-bg); }
.nft-steps li::before { background: var(--nf-orange-wash); color: var(--nf-text); }
/* fix4 #8: the optional sticker line under the changes card stays small and quiet */
.nft-ask .nfb-fine { font-size: .875rem; }
.nft-ask .nfb-fine a { color: inherit; font-weight: 600; text-decoration-color: var(--nf-orange); text-decoration-thickness: 1px; white-space: normal; }

/* fix5 #1: schedule / thank-you ledes under the shared band (app.css "fix5 #1"), on the booking shell */
.nfb-shell.nf-band-sub { padding: 0 var(--nf-gutter); margin-top: var(--nf-head-gap); display: block; }
.nfb-sub { margin-bottom: 20px; }
.nft-sub { margin-bottom: var(--nf-head-gap); }

/* 17.10 Vitek: no peach fills - step numbers on a neutral surface with an orange ring */
.nft-steps li::before { background: var(--nf-surface); box-shadow: inset 0 0 0 1.5px var(--nf-orange); }
.nft-sub__line { display: flex; align-items: center; gap: 12px; }
.nft-sub__line .nf-band__check { width: 36px; height: 36px; margin: 0; background: var(--nf-sunken); box-shadow: none; }

/* fix6 #4 (17.10): the SEO paragraph at the bottom: one link style (the site one: bold, orange underline, as in the home
   intro and the town list), and the same distance to the footer as the other pages' last blocks. */
.nfb-page .info-block { margin-bottom: var(--nf-gap, 64px); }
.nfb-page .info-block a, .nfb-page .info-block b a { color: var(--nf-link); font-weight: 700; text-decoration: underline; text-decoration-color: var(--nf-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nfb-page .info-block b { font-weight: inherit; }
@media (hover: hover) and (pointer: fine) { .nfb-page .info-block a:hover { text-decoration-thickness: 3px; } }
.nfb-page .info-block a:focus-visible { outline: 3px solid var(--nf-focus); outline-offset: 2px; border-radius: 2px; }
/* fix7 mobile pass: the time windows broke as "8- / 11 AM" and "9 AM / - / 12 PM": the site-wide word-group script wraps "9 AM"
   in its own span and the chip is a flex column, so every piece became its own line. One line, the range kept together. */
.nfb-chips--windows label { flex-direction: row; flex-wrap: nowrap; gap: 0; }
/* rule 5: 9 windows = 3x3; on the narrowest phones two columns and "Any time" takes the whole last row instead of an orphan */
.nfb-chips--windows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 24.99rem) {
  .nfb-chips--windows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nfb-chips--windows label:last-of-type { grid-column: 1 / -1; }
}

/* hotfix 18.10: the calendar (flatpickr, loaded from the CDN on "Pick another day", also on phones: disableMobile) kept its
   stock look: a light panel in the dark theme and a blue selected day. It follows the theme now; the selected day is an orange
   ring with a bold number (white on #f87d25 is 2.6:1 and black on orange is banned): dark theme orange number (6.7:1 on the
   surface), light theme the text colour inside a #d9650f ring (3.6:1, non-text). Today: a thin neutral ring. flatpickr.css is
   appended to <head> after this file, so the rules carry "html body" to outrank it. */
html body .flatpickr-calendar {
  background: var(--nf-surface); color: var(--nf-text); border: 1px solid var(--nf-line); border-radius: 16px;
  box-shadow: var(--nf-shadow-lift, 0 18px 44px rgba(17, 18, 20, .16)); font-family: var(--nf-sans); accent-color: var(--nf-orange);
}
html body .flatpickr-calendar.arrowTop::before, html body .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--nf-surface); }
html body .flatpickr-calendar.arrowBottom::before, html body .flatpickr-calendar.arrowBottom::after { border-top-color: var(--nf-surface); }
html body .flatpickr-calendar.arrowTop::before { border-bottom-color: var(--nf-line); }
html body .flatpickr-calendar.arrowBottom::before { border-top-color: var(--nf-line); }
html body .flatpickr-calendar .flatpickr-months .flatpickr-month,
html body .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
html body .flatpickr-calendar .flatpickr-current-month input.cur-year { background: transparent; color: var(--nf-text); fill: var(--nf-text); font-weight: 700; }
html body .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: var(--nf-surface); color: var(--nf-text); }
html body .flatpickr-calendar .flatpickr-months .flatpickr-prev-month, html body .flatpickr-calendar .flatpickr-months .flatpickr-next-month { color: var(--nf-text); fill: var(--nf-text); }
html body .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg, html body .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--nf-orange); }
html body .flatpickr-calendar .numInputWrapper span.arrowUp::after { border-bottom-color: var(--nf-text); }
html body .flatpickr-calendar .numInputWrapper span.arrowDown::after { border-top-color: var(--nf-text); }
html body .flatpickr-calendar span.flatpickr-weekday { background: transparent; color: var(--nf-muted); font-weight: 600; }
html body .flatpickr-calendar .flatpickr-day { color: var(--nf-text); border-width: 2px; font-variant-numeric: tabular-nums; }
html body .flatpickr-calendar .flatpickr-day:hover, html body .flatpickr-calendar .flatpickr-day:focus { background: var(--nf-sunken); border-color: var(--nf-sunken); color: var(--nf-text); }
html body .flatpickr-calendar .flatpickr-day.today { border-color: var(--nf-line-strong); }
html body .flatpickr-calendar .flatpickr-day.today:hover, html body .flatpickr-calendar .flatpickr-day.today:focus { background: var(--nf-sunken); border-color: var(--nf-line-strong); color: var(--nf-text); }
html body .flatpickr-calendar .flatpickr-day.selected, html body .flatpickr-calendar .flatpickr-day.selected:hover, html body .flatpickr-calendar .flatpickr-day.selected:focus,
html body .flatpickr-calendar .flatpickr-day.selected.today {
  background: var(--nf-orange-wash); border-color: #d9650f; color: var(--nf-text); font-weight: 700; box-shadow: none;
}
html[data-theme="dark"] body .flatpickr-calendar .flatpickr-day.selected, html[data-theme="dark"] body .flatpickr-calendar .flatpickr-day.selected:hover,
html[data-theme="dark"] body .flatpickr-calendar .flatpickr-day.selected:focus { border-color: var(--nf-orange); color: var(--nf-orange); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) body .flatpickr-calendar .flatpickr-day.selected, html:not([data-theme]) body .flatpickr-calendar .flatpickr-day.selected:hover,
  html:not([data-theme]) body .flatpickr-calendar .flatpickr-day.selected:focus { border-color: var(--nf-orange); color: var(--nf-orange); }
}
html body .flatpickr-calendar .flatpickr-day.flatpickr-disabled, html body .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover,
html body .flatpickr-calendar .flatpickr-day.prevMonthDay, html body .flatpickr-calendar .flatpickr-day.nextMonthDay {
  background: transparent; border-color: transparent; color: color-mix(in srgb, var(--nf-text) 30%, transparent);
}
html body .flatpickr-calendar .flatpickr-day.prevMonthDay:not(.flatpickr-disabled), html body .flatpickr-calendar .flatpickr-day.nextMonthDay:not(.flatpickr-disabled) { color: var(--nf-muted); }
/* the native fallback field (calendar script blocked): orange accent, the picker in the page's scheme */
.nfb-date-fallback { accent-color: var(--nf-orange); color-scheme: light; }
html[data-theme="dark"] .nfb-date-fallback { color-scheme: dark; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .nfb-date-fallback { color-scheme: dark; } }
/* hotfix 18.10: at 401-480 (Vitek's 412px phone) the three step names sat in a row and "Time & place" ended in an ellipsis;
   at <=400 only the current name showed. Up to 480 each step is now a small column, number over its name, so all three
   names are whole at 320-480; the bar under them still spans the full row. */
@media (max-width: 480px) {
  .nfb-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .nfb-progress__item.is-current { flex: none; }
  .nfb-progress__btn { flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 2px 0; text-align: center; font-size: .875rem; line-height: 1.2; }
  .nfb-progress__item:not(.is-current) .nfb-progress__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .nfb-progress__label { overflow: visible; text-overflow: clip; }
}