section { position: relative; z-index: 1; }

/* ── REGISTRATION HEADER ── */
.reg-header { background: var(--navy); position: relative; overflow: hidden; }
.reg-header-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  height: 88px; display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 2;
}
.reg-logo img { height: 42px; width: auto; display: block; }
.reg-header-link {
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  color: rgba(255,255,255,0.85); text-decoration: none; transition: color 0.2s;
}
.reg-header-link:hover { color: #fff; }

/* ── HERO BAND ── */
.reg-hero { background: var(--navy); position: relative; overflow: hidden; padding: 40px 0 48px; min-height: 200px; display: flex; align-items: flex-end; }
.reg-hero-geo {
  position: absolute; top: 0; bottom: 0; right: 0; margin: auto 0;
  height: auto; max-height: 100%; width: auto;
  pointer-events: none;
}
.reg-hero-inner { max-width: var(--container); margin: 0 auto; width: 100%; padding: 0 var(--gutter); position: relative; z-index: 2; }
.reg-hero h1 {
  font-family: var(--font-heading); font-size: 56px; font-weight: 900;
  color: #fff; line-height: 1.05; letter-spacing: -1px; margin-bottom: 12px;
}
.reg-hero p { font-family: var(--font-body); font-size: 21px; font-weight: 400; color: rgba(255,255,255,0.9); }
.reg-hero p em { font-style: normal; color: var(--cerise); }

/* ── BODY / FORM SHELL ── */
/* Sticky footer: keep the footer pinned to the bottom on short pages (sign-in,
   confirmation, "enquiry received", etc.) so there's no off-white gap below it.
   The body is a flex column and the content region grows to fill. Matches
   account.css so pages that load both behave identically. */
body { min-height: 100vh; display: flex; flex-direction: column; }
.reg-body {
  background: var(--off-white); background-image: url('../images/bg-pattern.svg');
  background-repeat: repeat; padding: 64px 0 80px;
  flex: 1 0 auto;
}
.reg-inner { max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter); }

/* ── STEP INDICATOR ── */
.reg-steps {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 0; margin-bottom: 56px;
}
.reg-step { display: flex; align-items: center; gap: 12px; }
.reg-step-num {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  border: 2px solid var(--grey); color: var(--grey); background: transparent;
}
.reg-step.active .reg-step-num,
.reg-step.done .reg-step-num {
  background: var(--cerise); border-color: var(--cerise); color: #fff;
}
.reg-step-label {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey);
  white-space: nowrap;
}
.reg-step.active .reg-step-label { color: var(--cerise); }
.reg-step.done .reg-step-label { color: var(--navy); }
.reg-step-line {
  flex: 1 1 auto; height: 2px; background: var(--grey); margin: 0 20px; min-width: 30px;
}
.reg-step-line.done { background: var(--cerise); }

/* ── SECTION TITLE ── */
.reg-section-title {
  font-family: var(--font-heading); font-size: 34px; font-weight: 900;
  color: var(--navy); letter-spacing: -0.5px; margin-bottom: 28px;
}

/* ── CHECKLIST CHROME (step 2) — from group-tours-step2.html ── */
.reg-inner .autosave-banner {
  background: #ececea; border-radius: var(--radius);
  padding: 20px 28px; margin-bottom: 40px;
  font-family: var(--font-body); font-size: 16px; color: #555; line-height: 1.5;
}
.reg-inner .autosave-banner strong { color: var(--navy); font-weight: 700; }
.reg-inner .checklist-intro {
  font-family: var(--font-body); font-size: 17px; color: #555; line-height: 1.6;
  max-width: 640px; margin-bottom: 24px;
}
.reg-inner .optional-note {
  font-family: var(--font-card); font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy);
  padding-bottom: 14px; border-bottom: 2px solid var(--navy); margin-bottom: 28px;
}
.reg-inner .optional-note .diamond { color: var(--cerise); margin-right: 8px; }

/* ── FIELDSET GROUPS ── */

/* ── FORM FIELDS (matches bespoke.html "Share Your Wishlist" form) ── */
.reg-field { display: flex; flex-direction: column; gap: 6px; }
.reg-field label,
.reg-field-label-standalone {
  font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--navy);
}
.reg-field-label-standalone { display: block; margin-bottom: 6px; }
/* Inside a flex .reg-field, the parent gap (6px) supplies the label→control spacing,
   so the standalone label must not add its own margin (keeps it equal to text fields). */
.reg-field > .reg-field-label-standalone { margin-bottom: 0; }
.reg-field label .req,
.reg-field-label-standalone .req { color: var(--cerise); }
.reg-field label .opt,
.reg-field-label-standalone .opt { color: #999; font-weight: 400; margin-left: 4px; }
.reg-field input, .reg-field select, .reg-field textarea {
  border: 1px solid #ddd; border-radius: var(--radius); padding: 12px 14px;
  font-family: var(--font-body); font-size: 16px; color: var(--body);
  background: #fff; outline: none; transition: border-color 0.2s; width: 100%; box-sizing: border-box;
}
.reg-field input::placeholder, .reg-field textarea::placeholder { color: #b3b3b3; }
.reg-field input:focus, .reg-field select:focus, .reg-field textarea:focus { border-color: var(--cerise); background: #fff; }
.reg-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23505050' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer;
}
.reg-field textarea { resize: vertical; min-height: 120px; }

/* ── CHECKBOX / RADIO PILLS (matches bespoke.html .checkbox-label + .cb-box) ── */

/* ── FORM ACTIONS ── */
.reg-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 48px; padding-top: 36px; border-top: 1px solid rgba(0,0,0,0.1);
}
.reg-btn-back {
  font-family: var(--font-body); font-size: 17px; font-weight: 600; color: var(--navy);
  text-decoration: none; border: 1px solid #c2c2c2; border-radius: 0;
  padding: 16px 28px; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; transition: border-color 0.2s;
}
.reg-btn-back:hover { border-color: var(--navy); }
.reg-btn-back .btn-arrow { display: inline-flex; transition: transform 0.2s ease; }
.reg-btn-back:hover .btn-arrow { animation: arrowBounceLeft 0.6s ease infinite; }
@keyframes arrowBounceLeft {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-6px); }
}
.reg-link-save {
  font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--navy);
  text-decoration: underline; text-underline-offset: 3px;
}
.reg-link-save:hover { color: var(--cerise); }
.reg-btn-next {
  font-family: var(--font-card); font-size: 15px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--cerise); color: #fff; border: none; padding: 18px 34px; border-radius: 0;
  cursor: pointer; display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; transition: background 0.2s;
}
.reg-btn-next:hover { background: var(--cerise-dk); }
.reg-btn-next .btn-arrow { display: inline-flex; transition: transform 0.2s ease; }
.reg-btn-next:hover .btn-arrow { animation: arrowBounceRight 0.6s ease infinite; }
@keyframes arrowBounceRight {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

/* ── REGISTRATION FOOTER ── */
.reg-footer { background: var(--navy); padding: 36px 0; }
.reg-footer-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.reg-footer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 20px;
}
.reg-footer-logo img { height: 40px; width: auto; display: block; }
.reg-footer-links { display: flex; gap: 36px; }
.reg-footer-links a {
  font-family: var(--font-body); font-size: 15px; color: rgba(255,255,255,0.75);
  text-decoration: none; transition: color 0.2s;
}
.reg-footer-links a:hover { color: #fff; }
.reg-footer-legal { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.5); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .reg-header-inner,
  .reg-hero-inner,
  .reg-footer-inner { padding: 0 28px; }
  .reg-inner { padding: 0 28px; }
  .reg-hero h1 { font-size: 46px; }
}

@media (max-width: 768px) {
  .reg-header-inner { height: 72px; padding: 0 20px; }
  .reg-logo img { height: 26px; }
  .reg-hero { padding: 32px 0 36px; min-height: 0; }
  .reg-hero-inner { padding: 0 20px; }
  .reg-hero h1 { font-size: 34px; letter-spacing: -0.5px; }
  .reg-hero p { font-size: 18px; }
  .reg-hero-geo { display: none; }
  .reg-body { padding: 44px 0 60px; }
  .reg-inner { padding: 0 20px; }
  .reg-steps { margin-bottom: 40px; }
  .reg-section-title { font-size: 28px; }
  /* single-column form rows — overrides two/three-col AND inline triple grids */
  /* actions stack */
  .reg-actions { flex-direction: column; align-items: stretch; gap: 20px; }
  .reg-btn-back { justify-content: center; }
  .reg-link-save { text-align: center; }
  .reg-btn-next { justify-content: center; width: 100%; }
  .reg-footer-inner { padding: 0 20px; }
  .reg-footer-top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .reg-footer-links { flex-wrap: wrap; gap: 20px 28px; }
}

@media (max-width: 480px) {
  .reg-hero h1 { font-size: 26px; }
  .reg-hero p { font-size: 16px; }
  .reg-section-title { font-size: 24px; }
  /* step indicator: keep circles + connectors, hide labels */
  .reg-step { gap: 0; }
  .reg-step-label { display: none; }
  .reg-step-line { margin: 0 8px; }
}

/* ══════════════════════════════════════════════════════════
   FLUENT FORM  →  the .reg-* design above
   Same approach as bespoke.css: scope through the .fluentform wrapper so we
   beat FF's own `.fluentform .ff-*` (0,2,0) rules on specificity rather than on
   enqueue order. Values are lifted from the templates unchanged.
   ══════════════════════════════════════════════════════════ */

/* Rows — grid ignores FF's flex-basis, giving us the template's ratios. */
.reg-inner .fluentform .ff-t-container { display: grid; gap: 20px; margin-bottom: 20px; }
.reg-inner .fluentform .ff_columns_total_1 { grid-template-columns: 1fr; }
.reg-inner .fluentform .ff_columns_total_2 { grid-template-columns: 1fr 1fr; }
.reg-inner .fluentform .ff_columns_total_3 { grid-template-columns: 1fr 1fr 1fr; }
.reg-inner .fluentform .jt-accom-row { grid-template-columns: 0.6fr 0.6fr 1.8fr; }
.reg-inner .fluentform .ff-t-cell { padding: 0; }

/* Fields.
   :not() on the button wrappers is load-bearing — they also carry .ff-el-group,
   and FF's JS shows/hides them per step. Forcing a display here overrides that
   and leaks the submit button onto every step. */
.reg-inner .fluentform .ff-el-group:not(.ff_submit_btn_wrapper):not(.ff-step-nav) {
  margin-bottom: 0; display: flex; flex-direction: column; gap: 6px;
}
/* FF clears floats with :before/:after{display:table}. In a flex column those
   become flex items and the gap applies three times — see bespoke.css. */
.reg-inner .fluentform .ff-el-group::before,
.reg-inner .fluentform .ff-el-group::after { content: none; }
.reg-inner .fluentform .ff-el-input--label { margin-bottom: 0; }
.reg-inner .fluentform .ff-el-input--label label {
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: var(--navy); margin: 0; padding: 0; display: block;
}
.reg-inner .fluentform .ff-el-input--label.ff-el-is-required label::after { color: var(--cerise); }

/* Field help text. FF renders help_message as a hover tooltip (an ⓘ icon with
   the copy in data-content); we want the template's inline grey hint instead.
   Drop the icon, print the copy under the label, and disable pointer events so
   FF's hover popup never fires. */
.reg-inner .fluentform .ff-el-input--label .ff-el-tooltip {
  display: block; pointer-events: none; margin: 4px 0 0;
}
.reg-inner .fluentform .ff-el-input--label .ff-el-tooltip svg { display: none; }
.reg-inner .fluentform .ff-el-input--label .ff-el-tooltip::after {
  content: attr(data-content);
  display: block; max-width: 62ch;
  font-family: var(--font-body); font-size: 13px; font-weight: 400;
  color: #8a8a8a; line-height: 1.45; white-space: normal;
}

.reg-inner .fluentform .ff-el-form-control {
  border: 1px solid #ddd; border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--font-body); font-size: 16px; color: var(--body);
  background: #fff; outline: none; transition: border-color 0.2s;
  width: 100%; box-sizing: border-box; height: auto;
}
.reg-inner .fluentform .ff-el-form-control:focus { border-color: var(--cerise); background: #fff; box-shadow: none; }
.reg-inner .fluentform textarea.ff-el-form-control { resize: vertical; min-height: 120px; }
.reg-inner .fluentform select.ff-el-form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23505050' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
  cursor: pointer;
}
/* Match the inputs. A <select> does not derive the same box from padding +
   font-size as an <input> does, so with the identical rules above it renders
   short — 42px against a 48px input on the Bespoke Enquiry form, measured
   31 Jul 2026. The :not() chain outranks Fluent Forms' own
   `select.ff-el-form-control:not([size]):not([multiple]) { height: … }`, whose
   stylesheet loads after this one and would otherwise win the tie. */
.reg-inner .fluentform select.ff-el-form-control:not([size]):not([multiple]) {
  height: 48px;
}

/* Section headings, rendered as custom_html blocks by the seed. */
.reg-inner .fluentform .jt-fieldset-label {
  font-family: var(--font-card); font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy);
  padding-bottom: 14px; border-bottom: 2px solid var(--navy);
  margin: 40px 0 28px;
}

/* The first section ("Select Your Departure") is a big Playfair heading in the
   template (.reg-section-title), not a small-caps label. */
.reg-inner .fluentform .jt-section-title {
  font-family: var(--font-heading); font-size: 34px; font-weight: 900;
  color: var(--navy); letter-spacing: -0.5px; margin: 0 0 28px;
}

/* Date fields (DOB) — FF's flatpickr is a plain readonly box; the template's
   native date input shows a calendar affordance. Add the icon back. */
.reg-inner .fluentform input.ff-el-datepicker,
.reg-inner .fluentform input.flatpickr-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23505050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 44px; cursor: pointer;
}

/* Checkbox / radio pills */
.reg-inner .fluentform .ff-el-input--content:has(.ff-el-form-check) {
  /* No extra margin-top: the label→control gap already matches the text inputs,
     so pill groups (Gender, Rooming) sit level with adjacent fields in a row. */
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
}
.reg-inner .fluentform .ff-el-form-check { margin: 0; padding: 0; }
.reg-inner .fluentform .ff-el-form-check-label {
  /* No gap here — the hidden input still counts as a flex item, so a gap on the
     label adds 9px of dead space before the box and each pill renders 9px wider
     than the template's, which is enough to wrap the accommodation row onto two
     lines. The box↔text gap lives on the span below. */
  display: flex; align-items: center;
  font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--navy);
  cursor: pointer; white-space: nowrap;
  border: 1px solid #ddd; border-radius: var(--radius);
  background: #fff; padding: 12px 16px; margin: 0;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.reg-inner .fluentform .ff-el-form-check-label:hover { border-color: var(--navy); }
.reg-inner .fluentform .ff-el-form-check-label:has(input:checked) {
  border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: #F9F9F9;
}
.reg-inner .fluentform .ff-el-form-check-input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.reg-inner .fluentform .ff-el-form-check-label > span { display: flex; align-items: center; gap: 9px; }
/* (0,4,3) — must out-specify FF's own
   `.ff-default .ff-el-form-check label.ff-el-form-check-label>span:before{content:none}` */
.reg-inner .fluentform .ff-el-form-check label.ff-el-form-check-label > span::before {
  content: ''; display: block; flex-shrink: 0;
  width: 18px; height: 18px;
  border: 2px solid #c8c8c8; border-radius: 4px; background: #fff;
  transition: background-color 0.15s, border-color 0.15s;
}
.reg-inner .fluentform .ff-el-form-check-label:hover > span::before { border-color: var(--navy); }
/* Both the ancestor :has() form (for hover/paint parity) and the sibling
   :checked form. The sibling combinator sidesteps a Chromium quirk where :has()
   doesn't repaint a box that was checked programmatically / pre-checked (e.g.
   the newsletter default) until the user interacts. */
.reg-inner .fluentform .ff-el-form-check-label:has(input:checked) > span::before,
.reg-inner .fluentform .ff-el-form-check-input:checked ~ span::before {
  background-color: var(--navy); border-color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
/* The "How Did You Hear About Us?" group repeats its section heading. */
.reg-inner .fluentform .jt-hide-label .ff-el-input--label { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   CYCLING PROFILE (Group step 3)
   Converted from html-templates/pages/registration/group-tours-step3.html:
   compact size pills, the Bike Box|Brakes|Tyres row, size-chart notes + modal.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Intro line under the "Your Cycling Profile" heading (page-rendered, not FF). */
.reg-inner .reg-intro { font-family: var(--font-body); font-size: 17px; color: #555; margin: 0 0 24px; }

/* Bike Box | Brakes | Tires on one row: Bike Box grows, Brakes + Tires size to
   their content and never wrap (flex, not FF's equal-thirds grid). */
.reg-inner .fluentform .ff-t-container.jt-pill-row {
  display: flex; grid-template-columns: none; gap: 36px; align-items: flex-start;
}
.reg-inner .fluentform .ff-t-container.jt-pill-row > .ff-t-cell { width: auto !important; flex: 0 0 auto; }
.reg-inner .fluentform .ff-t-container.jt-pill-row > .ff-t-cell:first-child { flex: 1 1 auto; min-width: 0; }
.reg-inner .fluentform .jt-pill-row > .ff-t-cell:nth-child(2) .ff-el-input--content,
.reg-inner .fluentform .jt-pill-row > .ff-t-cell:nth-child(3) .ff-el-input--content { flex-wrap: nowrap; }
@media (max-width: 820px) {
  .reg-inner .fluentform .ff-t-container.jt-pill-row { flex-direction: column; gap: 22px; }
  .reg-inner .fluentform .jt-pill-row > .ff-t-cell:nth-child(2) .ff-el-input--content,
  .reg-inner .fluentform .jt-pill-row > .ff-t-cell:nth-child(3) .ff-el-input--content { flex-wrap: wrap; }
}

/* Dietary pills + "Other (Please specify)" on ONE row (Jacq, 3 Aug 2026).
   The MIRROR of .jt-pill-row above: there the first cell grows and the rest size
   to content; here the PILLS size to content and the input takes what is left.

   Flex rather than FF's percentage columns because the fit is tight — measured
   on the rendered page the five pills are 594px inside an 898px card, so a 66/34
   split leaves ~17px of slack and one font-rendering difference wraps them.
   Letting the input absorb the remainder cannot wrap however wide the pills go. */
.reg-inner .fluentform .ff-t-container.jt-diet-row {
  display: flex; grid-template-columns: none; gap: 24px; align-items: flex-start;
}
/* `flex` needs !important, not just `width`: Fluent Forms emits its own
   `flex: 0 0 <column width>%` from the stored column percentages, which
   otherwise wins and collapses the input cell to 0px. Measured, not assumed. */
.reg-inner .fluentform .ff-t-container.jt-diet-row > .ff-t-cell { width: auto !important; flex: 0 0 auto !important; }
.reg-inner .fluentform .ff-t-container.jt-diet-row > .ff-t-cell:last-child { flex: 1 1 auto !important; min-width: 0; }
.reg-inner .fluentform .jt-diet-row > .ff-t-cell:first-child .ff-el-input--content { flex-wrap: nowrap; }
@media (max-width: 820px) {
  .reg-inner .fluentform .ff-t-container.jt-diet-row { flex-direction: column; gap: 22px; align-items: stretch; }
  .reg-inner .fluentform .jt-diet-row > .ff-t-cell:first-child .ff-el-input--content { flex-wrap: wrap; }
}

/* A bit more air above the Drivetrain / Brake Type row (template step3: 24px). */
.reg-inner .fluentform .ff-t-container.jt-gap-top { margin-top: 24px; }

/* The "please specify" text inputs sit under their dropdown — give them room so
   they don't crowd the select when "Other" is chosen. */
.reg-inner .fluentform .ff-el-group.jt-specify { margin-top: 16px; }

/* A field that sits under another in the same column and needs clear separation
   (rental Pedals below BYO Pedals). Template step3 uses 24px there. */
.reg-inner .fluentform .ff-el-group.jt-field-gap { margin-top: 24px; }

/* Tighten the gaps between the step-3 sections to the template's rhythm. Scoped
   to .jt-cycling-profile so step 1's shared .jt-fieldset-label is untouched. */
.reg-inner .jt-cycling-profile .fluentform .jt-fieldset-label { margin-top: 22px; }
/* Standard row gap = the template's .reg-row (20px), so every field row sits on
   the same rhythm; the jt-gap-top / jt-field-gap accents add to specific ones. */
.reg-inner .jt-cycling-profile .fluentform .ff-t-container { margin-bottom: 20px; }

/* Compact SIZE PILLS (jersey + t-shirts) — no checkbox box, navy fill when picked.
   The extra .jt-size-field out-specifies the generic pill rules above. */
.reg-inner .fluentform .jt-size-field .ff-el-form-check label.ff-el-form-check-label > span::before { content: none; }
.reg-inner .fluentform .jt-size-field .ff-el-form-check-label {
  min-width: 52px; justify-content: center; text-align: center;
  font-weight: 600; padding: 12px 14px;
}
.reg-inner .fluentform .jt-size-field .ff-el-form-check-label > span { gap: 0; }
.reg-inner .fluentform .jt-size-field .ff-el-form-check-label:has(input:checked) {
  background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: none;
}
/* Keep the size pills tight to the size-chart note stacked below them. */
.reg-inner .fluentform .jt-size-field { margin-bottom: 6px; }

/* Small grey note under a group (Rapha / Uniqlo size-chart links, "Highly recommended"). */
.reg-inner .fluentform .field-note { font-family: var(--font-body); font-size: 13px; color: #999; margin: 8px 0 0; }
.reg-inner .fluentform .field-note a { color: var(--cerise); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.reg-inner .fluentform .field-note a:hover { color: var(--cerise-dk); }

/* Size-chart modal (markup lives in page-group-profile.php; opened by the links). */
.jt-size-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); padding: 24px; }
.jt-size-modal.open { display: flex; }
.jt-size-modal-panel { background: #fff; border-radius: var(--radius); width: 100%; max-width: 640px; padding: 30px 34px 40px; position: relative; box-shadow: 0 24px 60px rgba(0,0,0,0.3); }
.jt-size-modal-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid rgba(0,0,0,0.1); }
.jt-size-modal-title { font-family: var(--font-card); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); }
.jt-size-modal-close { border: none; background: transparent; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #888; transition: color 0.2s; line-height: 1; }
.jt-size-modal-close:hover { color: var(--navy); }
.jt-size-modal-close svg { display: block; }
.jt-size-modal-body { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 20px; max-height: 72vh; overflow-y: auto; }
.jt-size-modal-img { max-width: 100%; height: auto; display: block; border-radius: 4px; }
.jt-size-modal-empty { padding: 36px 0; }
.jt-size-modal-icon { color: #c8c8c8; margin-bottom: 22px; }
.jt-size-modal-icon svg { display: block; }
.jt-size-modal-body h4 { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.jt-size-modal-body p { font-family: var(--font-body); font-size: 15px; color: #999; max-width: 360px; line-height: 1.5; }
@media (max-width: 768px) { .jt-size-modal-panel { padding: 26px 22px 32px; } }

/* ── Departure cards (Group/Training step 1) ──────────────────────────────────
   registration.js restructures the injected "departure" radio options into the
   template's .date-card grid (month / date / duration + a radio dot), keeping
   the FF <input> intact. These rules must out-run the pill styling above (same
   specificity, so they win by coming later; grid uses !important to beat FF's
   flex-wrap :has() rule). */
.reg-inner .fluentform .jt-date-grid {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px; margin: 6px 0 8px;
}
.reg-inner .fluentform .jt-date-card {
  position: relative; display: block; cursor: pointer; white-space: normal;
  background: #fff; border: 1px solid #ddd; border-radius: var(--radius);
  padding: 22px 24px; margin: 0; box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.reg-inner .fluentform .jt-date-card:hover { border-color: var(--navy); }
.reg-inner .fluentform .jt-date-card:has(input:checked) {
  border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: #fff;
}
.reg-inner .fluentform .jt-date-card > input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.reg-inner .fluentform .date-card-month {
  font-family: var(--font-card); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #999; margin-bottom: 8px;
}
.reg-inner .fluentform .date-card-range {
  font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 4px;
}
.reg-inner .fluentform .date-card-dur { font-family: var(--font-body); font-size: 14px; color: #888; }
.reg-inner .fluentform .date-card-radio {
  position: absolute; top: 22px; right: 24px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #ccc; background: #fff; transition: all .15s;
}
/* The dot is a <span>, so the generic checkbox-pill span::before would draw a
   square inside the circle — suppress it. */
.reg-inner .fluentform .date-card-radio::before { content: none !important; }
.reg-inner .fluentform .jt-date-card:has(input:checked) .date-card-radio {
  border-color: var(--navy); background: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

/* ── Step-1 pax repeater + live pricing ───────────────────────────────────────
   No steppers — the repeater IS the group control, managed by registration.js:
   it starts collapsed (main rider only), a compact "＋" adds a card, and each
   card's × removes it (down to main-rider-only). FF's own per-row +/- are
   hidden; the JS drives them. */
.reg-inner .fluentform .ff-el-repeat-buttons-list { display: none; }

/* Compact centred "Add a rider" — a circled ＋ (registration.js). */
.reg-inner .fluentform .jt-add-rider {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; margin: 6px 0 0; padding: 8px; background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-card); font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cerise);
}
.reg-inner .fluentform .jt-add-circle {
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--cerise);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 300; line-height: 1; padding-bottom: 3px;
  transition: background .15s, color .15s;
}
.reg-inner .fluentform .jt-add-rider:hover .jt-add-circle { background: var(--cerise); color: #fff; }

/* The repeater body is a transparent stack — each pax row is its own card.
   FF shrink-wraps these wrappers (table/inline layout); force them to fill the
   container so each card spans 100% like the template. */
.reg-inner .fluentform .jt-pax-repeater .ff_repeater_container_list,
.reg-inner .fluentform .jt-pax-repeater .ff_repeater_body,
.reg-inner .fluentform .jt-pax-repeater .ff_repeater_cont {
  display: block; width: 100%; box-sizing: border-box;
  background: transparent; border: 0; padding: 0;
}
.reg-inner .fluentform .jt-pax-repeater .ff_repeater_body { margin-bottom: 12px; }
/* Each pax = one bordered white card, like the template's .pax-card. */
.reg-inner .fluentform .jt-pax-repeater .ff_repeater_cont_row {
  position: relative; display: flex; width: 100%; box-sizing: border-box;
  background: #fff; border: 1px solid #e2e2e2; border-radius: var(--radius);
  padding: 32px 34px;
}
.reg-inner .fluentform .jt-pax-repeater .ff-t-column-1 { flex: 1 1 auto; }
.reg-inner .fluentform .jt-pax-repeater .ff_repeater_cont_row + .ff_repeater_cont_row { margin-top: 12px; }
/* FF's own per-row +/- cell is driven by registration.js and stays hidden. */

/* Lay the 7 stacked fields onto the template's grid: First/Last/Alias share a
   3-up row, Email/Mobile a 2-up row, Rooming/Joining a 2-up row. A 6-col grid
   gives 2+2+2 and 3+3 spans off one track set. */
.reg-inner .fluentform .jt-pax-repeater .ff-t-column-1 {
  display: grid; grid-template-columns: repeat(6, 1fr);
  column-gap: 20px; row-gap: 20px; width: 100%; min-width: 0;
}
.reg-inner .fluentform .jt-pax-repeater .ff-t-column-1 > .ff_repeater_cell { padding: 0; margin: 0; min-width: 0; }
.reg-inner .fluentform .jt-pax-repeater .ff-t-column-1 > .ff_repeater_cell:nth-child(1),
.reg-inner .fluentform .jt-pax-repeater .ff-t-column-1 > .ff_repeater_cell:nth-child(2),
.reg-inner .fluentform .jt-pax-repeater .ff-t-column-1 > .ff_repeater_cell:nth-child(3) { grid-column: span 2; }
.reg-inner .fluentform .jt-pax-repeater .ff-t-column-1 > .ff_repeater_cell:nth-child(4),
.reg-inner .fluentform .jt-pax-repeater .ff-t-column-1 > .ff_repeater_cell:nth-child(5),
.reg-inner .fluentform .jt-pax-repeater .ff-t-column-1 > .ff_repeater_cell:nth-child(6),
.reg-inner .fluentform .jt-pax-repeater .ff-t-column-1 > .ff_repeater_cell:nth-child(7) { grid-column: span 3; }

/* Per-card remove × — top-right corner of each card. */
/* A labelled "× Remove" button was tried here on 6 Aug 2026 and reverted the
   same day at Jacq's request — the quiet circular × is the intended look.
   Worth remembering that the control was reported as missing before that, and
   it was never broken: a real mouse click removed the row every time. It is
   the discoverability that is deliberately traded away for the calmer card. */
.reg-inner .fluentform .jt-remove {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid #dcdcdc; background: #fff; color: #999;
  font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s, background .15s;
}
.reg-inner .fluentform .jt-remove:hover { border-color: var(--cerise); color: var(--cerise); }

/* The .jt-party-row rules that stood here went with the "Your group" line
   (Jacq, 3 Aug 2026). They styled that row alone and nothing else used them. */

/* ── Step-1 room builder ───────────────────────────────────────────────────
   Replaces the per-person rooming picker: everyone is assigned to an actual
   room, so the single supplement is driven by real occupancy. */

.reg-inner .fluentform .jt-pricing { margin-top: 4px; }
.reg-inner .fluentform .pricing-card { background: #fff; border: 1px solid #e2e2e2; border-radius: var(--radius); padding: 30px 34px; }
.reg-inner .fluentform .pricing-row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--font-body); font-size: 16px; color: var(--body); margin-bottom: 10px;
}
.reg-inner .fluentform .pricing-row:last-of-type { margin-bottom: 0; }
.reg-inner .fluentform .pricing-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 20px; margin-top: 20px; border-top: 1px solid rgba(0,0,0,.12);
}
.reg-inner .fluentform .pricing-total-label,
.reg-inner .fluentform .pricing-total-value { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--navy); }
.reg-inner .fluentform .deposit-box { background: #f6f4f1; border-left: 4px solid var(--cerise); padding: 22px 26px; margin-top: 24px; }
.reg-inner .fluentform .deposit-label {
  font-family: var(--font-card); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cerise); margin-bottom: 6px;
}
.reg-inner .fluentform .deposit-amount { font-family: var(--font-heading); font-size: 30px; font-weight: 900; color: var(--navy); letter-spacing: -.5px; margin-bottom: 6px; }
.reg-inner .fluentform .deposit-note { font-family: var(--font-body); font-size: 14px; color: #777; }
.reg-inner .fluentform .jt-price-note { font-family: var(--font-body); font-size: 13px; color: #8a8a8a; margin: 16px 0 0; }

/* Step nav + submit — the template's .reg-btn-next / .reg-btn-back.
   No `display` here: FF's JS owns whether these are shown on a given step. */
.reg-inner .fluentform .ff_submit_btn_wrapper,
.reg-inner .fluentform .ff-step-nav {
  margin-top: 48px; padding-top: 36px;
  border-top: 1px solid rgba(0,0,0,0.1);
}

/* Last step: FF lays the actions out as a 2-column row (.ff-inner_submit_
   container) — prev (Back) in column 1, submit in column 2. The submit wrapper's
   own top margin/divider dropped it ~84px below the Back button, so they read as
   two stacked rows. Move the divider + spacing onto the row container and
   vertically centre the columns so Back and Submit sit on one line (the
   template's .reg-actions). */
.reg-inner .fluentform .ff-inner_submit_container {
  margin-top: 48px; padding-top: 36px; border-top: 1px solid rgba(0,0,0,0.1);
  align-items: center;
}
.reg-inner .fluentform .ff-inner_submit_container .ff_submit_btn_wrapper,
.reg-inner .fluentform .ff-inner_submit_container .step-nav {
  margin-top: 0; padding-top: 0; border-top: none;
}
.reg-inner .fluentform .ff-btn-submit,
.reg-inner .fluentform .ff-btn-next {
  font-family: var(--font-card); font-size: 15px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--cerise) !important; color: #fff; border: none;
  padding: 18px 34px; border-radius: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 12px;
}
.reg-inner .fluentform .ff-btn-submit:hover,
.reg-inner .fluentform .ff-btn-next:hover { background: var(--cerise-dk) !important; }
.reg-inner .fluentform .ff-btn-prev {
  font-family: var(--font-body); font-size: 17px; font-weight: 600;
  /* !important: FF's .ff-btn-secondary paints the prev button solid grey; the
     template's back button is a ghost outline. */
  color: var(--navy) !important; background: transparent !important;
  border: 1px solid #c2c2c2 !important; border-radius: 0;
  padding: 16px 28px; cursor: pointer;
}
.reg-inner .fluentform .ff-btn-prev:hover { border-color: var(--navy) !important; }

/* FF programmatically focuses the step wrapper on each step change, which paints
   a heavy outline box around the top of the panel (not in the template). The
   wrapper isn't a tab stop — inputs keep their own focus rings — so drop it. */
.reg-inner .fluentform .fluentform-step:focus,
.reg-inner .fluentform .ff-step-body:focus,
.reg-inner .fluentform .ff_step_start:focus,
.reg-inner .fluentform .ff-el-group:focus { outline: none; }

/* Phase C fidelity: the template's .btn-arrow on next/submit (→) and prev (←).
   FF renders no arrow; add it as pseudo-content (the buttons are inline-flex
   with a gap, so it sits after/before the label cleanly). */
.reg-inner .fluentform .ff-btn-submit::after,
.reg-inner .fluentform .ff-btn-next::after { content: '\2192'; font-size: 17px; line-height: 1; }
.reg-inner .fluentform .ff-btn-prev::before { content: '\2190'; font-size: 17px; line-height: 1; margin-right: 8px; }

/* Phase C fidelity: the template's "✦ Required" note (.reg-required-note),
   rendered as a custom_html .jt-required-note element at the top of step 1. */
.reg-inner .fluentform .jt-required-note {
  font-family: var(--font-card); font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy);
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 14px; border-bottom: 2px solid var(--navy); margin-bottom: 36px;
}
.reg-inner .fluentform .jt-required-note::before { content: '\2726'; color: var(--cerise); font-size: 14px; }

/* Phase C fidelity: the back link registration.js injects into the action row —
   lay the row out as the template's .reg-actions (back left, next/submit right).
   FF floats its next button; flex + float:none takes the row back. */
.reg-inner .fluentform .step-nav.jt-has-back,
.reg-inner .fluentform .ff_submit_btn_wrapper.jt-has-back {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.reg-inner .fluentform .step-nav.jt-has-back .ff-btn-next,
.reg-inner .fluentform .ff_submit_btn_wrapper.jt-has-back .ff-btn-submit { float: none !important; margin: 0; }

/* Validation + confirmation in the brand's voice */
.reg-inner .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--cerise); }
.reg-inner .fluentform .ff-message-success {
  font-family: var(--font-body); font-size: 18px; color: var(--navy);
  background: #fff; border: 1px solid #ddd; border-left: 4px solid var(--cerise);
  border-radius: var(--radius); padding: 28px 30px;
}

/* ── Stepper. FF's 'steps' indicator gives <ul class="ff-step-titles"><li>,
   with .ff_active on the current step. Restyled here into the template's
   numbered circles + connector lines (.reg-steps in the static templates).
   The numbers are CSS counters — FF renders only the title text. ── */
.reg-inner .fluentform .ff-step-header {
  margin-bottom: 56px; padding: 0; background: none; border: none;
}
.reg-inner .fluentform .ff-step-titles {
  display: flex; align-items: center; justify-content: flex-start;
  list-style: none; margin: 0; padding: 0;
  counter-reset: jt-step;
}
.reg-inner .fluentform .ff-step-titles > li {
  display: flex; align-items: center; gap: 12px;
  flex: 0 0 auto; margin: 0; padding: 0; background: none;
  counter-increment: jt-step;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey);
  white-space: nowrap;
}
.reg-inner .fluentform .ff-step-titles > li::before {
  content: counter(jt-step);
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  border: 2px solid var(--grey); color: var(--grey); background: transparent;
}
/* Connector line — the template's .reg-step-line. Every step but the last
   grows, and its ::after absorbs the slack, so the lines stretch evenly. */
.reg-inner .fluentform .ff-step-titles > li:not(:last-child) { flex: 1 1 auto; }
.reg-inner .fluentform .ff-step-titles > li:last-child { flex: 0 0 auto; }
/* The last step needs no trailing connector — and FF has its own pseudo here
   that shows through as a stray dash if left alone. */
.reg-inner .fluentform .ff-step-titles > li:last-child::after { content: none; }
.reg-inner .fluentform .ff-step-titles > li:not(:last-child)::after {
  content: ''; display: block; height: 2px; background: var(--grey);
  flex: 1 1 auto; min-width: 30px; margin: 0 20px;
  /* FF positions this pseudo absolutely for its own connector; left as-is it
     drops out of the flex row and the line lands across the step label. */
  position: static;
}
.reg-inner .fluentform .ff-step-titles > li.ff_active { color: var(--cerise); }
.reg-inner .fluentform .ff-step-titles > li.ff_active::before {
  background: var(--cerise); border-color: var(--cerise); color: #fff;
}
/* Completed steps — the template's .reg-step.done: cerise circle, navy label.
   FF's own ff_completed styling is blue and would otherwise show through. */
.reg-inner .fluentform .ff-step-titles > li.ff_completed { color: var(--navy); }
.reg-inner .fluentform .ff-step-titles > li.ff_completed::before {
  background: var(--cerise); border-color: var(--cerise); color: #fff;
}
.reg-inner .fluentform .ff-step-titles > li.ff_completed::after { background: var(--cerise); }
.reg-inner .fluentform .ff-step-title-text { font: inherit; color: inherit; }

@media (max-width: 480px) {
  /* Circles + connectors only, as the template does at this width. */
  .reg-inner .fluentform .ff-step-titles > li { gap: 0; font-size: 0; }
  .reg-inner .fluentform .ff-step-titles > li::before { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════
   PRE-TRIP CHECKLIST  —  FF Pro accordion → the template's design
   Values lifted from account/pre-trip-checklist.html unchanged; only the
   selectors differ. Scoped through .fluentform to beat FF's own rules on
   specificity rather than enqueue order (same reason as everything above).
   ══════════════════════════════════════════════════════════ */

/* FF exposes the whole accordion through CSS variables, so retune those rather
   than out-specify its rules. Its open-state selector
   (.ff-accordion-container .ff-accordion-header.ff-accordion-header-open) is
   (0,3,0) and loads after us — it would win any tie, and every section here
   starts open. Variables sidestep that entirely. */
.reg-inner .fluentform {
  --ff-accordion-header-bg: #fff;
  --ff-accordion-header-hover-bg: #fff;
  --ff-accordion-title-color: var(--navy);
  --ff-accordion-border-color: #e2e2e2;
  --ff-accordion-border-radius: var(--radius);
  --ff-accordion-content-bg: #fff;
  --ff-accordion-content-border: transparent;
  --ff-accordion-icon-color: #999;
  --ff-accordion-margin-bottom: 12px;
}

/* Card + header — the template's .accordion-card / .accordion-header */
.reg-inner .fluentform .ff-accordion-container {
  box-shadow: 0 1px 3px rgba(0,0,0,0.04); overflow: hidden;
}
/* (0,4,0) — beats FF's own open-state rule rather than tying with it. */
.reg-inner .fluentform .ff-accordion-container .ff-accordion-header {
  flex-direction: row; align-items: center;
  gap: 20px; padding: 26px 30px; text-align: left; font-family: var(--font-body);
}
/* Title grows to fill the header, so the hint + chevron are pushed to the far
   right — matching the template's title / .accordion-header-right split. */
.reg-inner .fluentform .ff-accordion-container .ff-accordion-title {
  font-family: var(--font-body); font-size: 18px; font-weight: 700;
  margin: 0; white-space: nowrap; flex: 1 1 auto;
}
.reg-inner .fluentform .ff-accordion-content { padding: 4px 30px 30px; border-top: 0; }

/* custom_html blocks (notes, callouts, subheads) control their own spacing —
   strip the FF group's wrapper margin/gap so they don't sit in extra whitespace. */
.reg-inner .fluentform .ff-el-group.ff-custom_html { margin: 0; gap: 0; }

/* Template chrome rendered inside custom_html blocks (Travel Insurance +
   Travel & Address). Lifted from group-tours-step2.html. */
.reg-inner .field-note {
  font-family: var(--font-body); font-size: 14px; color: #777; line-height: 1.5; margin-top: 8px;
}
.reg-inner .insurance-callout {
  background: #faf6f7; border-left: 4px solid var(--cerise);
  padding: 20px 24px; border-radius: 0 var(--radius) var(--radius) 0; margin: 22px 0;
}
.reg-inner .insurance-callout-title {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--navy);
}
.reg-inner .insurance-callout-title .info-icon {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--cerise); color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 700; font-style: italic;
}
.reg-inner .insurance-callout-body {
  font-family: var(--font-body); font-size: 14px; color: #555; line-height: 1.6;
}

/* Insolvency — the template's full-width stacked radio ROWS (.radio-stack), not
   pills: each option a bordered full-width row with a circular radio dot. */
.reg-inner .fluentform .jt-insolvency .ff-el-input--content:has(.ff-el-form-check) {
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; margin-top: 6px;
}
.reg-inner .fluentform .jt-insolvency .ff-el-form-check { margin: 0; width: 100%; }
.reg-inner .fluentform .jt-insolvency .ff-el-form-check-label {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; white-space: normal;
  border: 1px solid #ddd; border-radius: var(--radius); background: #fff; padding: 16px 18px;
  font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--body);
}
.reg-inner .fluentform .jt-insolvency .ff-el-form-check-label:hover { border-color: var(--navy); }
.reg-inner .fluentform .jt-insolvency .ff-el-form-check-label:has(input:checked) {
  border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: #f9f9f9;
}
.reg-inner .fluentform .jt-insolvency .ff-el-form-check-label > span { align-items: flex-start; gap: 12px; }
.reg-inner .fluentform .jt-insolvency .ff-el-form-check label.ff-el-form-check-label > span::before {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid #c8c8c8; margin-top: 1px;
}
.reg-inner .fluentform .jt-insolvency .ff-el-form-check-label:has(input:checked) > span::before,
.reg-inner .fluentform .jt-insolvency .ff-el-form-check-input:checked ~ span::before {
  border-color: var(--navy); background: radial-gradient(var(--navy) 0 5px, #fff 6px);
}
/* The template's .accordion-hint — small grey text next to the chevron. FF
   stretches the description to fill the header, so right-align its text to put
   the hint at the right edge; align-self centres it with the title, and the
   padding-right leaves a gap before the chevron. */
.reg-inner .fluentform .ff-accordion-description {
  font-family: var(--font-body); font-size: 15px; line-height: 1;
  color: #999; white-space: nowrap; margin: 0; padding-right: 16px;
  text-align: right; align-self: center;
  /* FF's line-box sits ~4px high vs the title; nudge it onto the same line. */
  position: relative; top: 4px;
}
@media ( max-width: 768px ) {
  .reg-inner .fluentform .ff-accordion-description { display: none; }
}

/* ── Medical Yes/No: the template's .segmented control, not pills.
   FF renders every checkable the same way, so this re-skins only the rows the
   seed marks .jt-med-row. Two joined buttons, navy when chosen. ── */
/* Each declaration is ONE row: question left, No/Yes toggle right, divider below
   (last row none) — the template's .med-decl / .med-row. */
.reg-inner .fluentform .jt-med-row { margin-bottom: 0; }
.reg-inner .fluentform .jt-med-row .ff-el-group:not(.ff-step-nav) {
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: 20px; padding: 12px 0; border-bottom: 1px solid #f0f0f0;
}
.reg-inner .fluentform .jt-med-row:has( + :not(.jt-med-row) ) .ff-el-group { border-bottom: none; }
.reg-inner .fluentform .jt-med-row .ff-el-input--label { margin: 0; }
.reg-inner .fluentform .jt-med-row .ff-el-input--label label {
  font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--body);
}
.reg-inner .fluentform .jt-med-decl-head { margin-top: 10px; }
.reg-inner .fluentform .jt-med-row .ff-el-input--content:has(.ff-el-form-check) {
  display: inline-flex; flex-wrap: nowrap; gap: 0; margin-top: 0; flex-shrink: 0;
}
.reg-inner .fluentform .jt-med-row .ff-el-form-check-label {
  font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--navy);
  background: #fff; border: 1px solid #d0d0d0; border-radius: 0;
  padding: 7px 20px; box-shadow: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.reg-inner .fluentform .jt-med-row .ff-el-form-check:first-child .ff-el-form-check-label {
  border-radius: var(--radius) 0 0 var(--radius);
}
.reg-inner .fluentform .jt-med-row .ff-el-form-check:last-child .ff-el-form-check-label {
  border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px;
}
.reg-inner .fluentform .jt-med-row .ff-el-form-check-label:has(input:checked) {
  background: var(--navy); color: #fff; border-color: var(--navy);
  box-shadow: none; z-index: 1; position: relative;
}
/* The segmented control has no tick box — the fill IS the state. */
.reg-inner .fluentform .jt-med-row .ff-el-form-check label.ff-el-form-check-label > span::before {
  content: none;
}
.reg-inner .fluentform .jt-med-row .ff-el-form-check-label > span { gap: 0; }

/* ── Passport upload — the template's dashed dropzone (.upload-dropzone).
   FF renders only a button inside the holder; the template's title + subtext are
   injected as ::before / ::after and flex `order` puts them above the button
   (title, subtext, Choose File). FF's own `.ff_upload_btn.ff-btn` is (0,3,0) and
   loads after us, so match its element+class shape to reach (0,4,0). ── */
.reg-inner .fluentform .ff_file_upload_holder {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 2px dashed #ccc; border-radius: var(--radius);
  padding: 32px; text-align: center; cursor: pointer;
  transition: border-color 0.15s;
}
.reg-inner .fluentform .ff_file_upload_holder:hover { border-color: var(--navy); }
.reg-inner .fluentform .ff_file_upload_holder.jt-dragover { border-color: var(--navy); background: #f6f9fb; }
/* FF reserves 15px top margin on the uploaded-files list even when it is empty,
   which pushes the "stored securely" note into too much whitespace. Collapse it
   (inline style, so !important) — the list gets its own spacing once populated. */
.reg-inner .fluentform .ff-uploaded-list:empty { margin-top: 0 !important; }

/* The save-progress confirmation shows FF's raw resume URL, which logged-in
   riders don't need — their draft reloads by account, and the actions row
   navigates for them. Hide it on the checklist so no URL flashes. The same is
   true of FF's "saved-state" panel (the copy-link + email-a-link box it shows
   at the top of a resumed form): this page is login-only, so the rider is
   already themselves — the link is redundant, and it leaks the raw URL. */
.reg-inner:has( .ff-btn-save-progress ) .ff-message-success,
.reg-inner:has( .ff-btn-save-progress ) .ff-saved-state-input { display: none !important; }
.reg-inner .fluentform .ff_file_upload_holder::before {
  content: "Upload Passport Details Page"; order: 1;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--navy);
}
.reg-inner .fluentform .ff_file_upload_holder::after {
  content: "JPG, PNG or PDF \2014\00a0max 5MB"; order: 2;
  font-family: var(--font-body); font-size: 13px; color: #999;
}
.reg-inner .fluentform .ff_file_upload_holder input[type="file"] { display: none; }
/* The Choose File button — the template's navy .upload-choose-btn. */
.reg-inner .fluentform .ff_upload_btn.ff-btn {
  order: 3; margin-top: 2px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  color: #fff; background: var(--navy); border: none;
  border-radius: var(--radius); padding: 10px 20px; cursor: pointer;
  transition: background 0.2s;
}
.reg-inner .fluentform .ff_upload_btn.ff-btn:hover { background: #06455e; }

/* The template's .upload-note beneath the dropzone. */
.reg-inner .upload-note {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 14px;
  font-family: var(--font-body); font-size: 13px; color: #777; line-height: 1.5;
}
.reg-inner .upload-note .dot {
  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cerise); margin-top: 5px;
}

/* ── Save & Resume — the template's .reg-link-save, a link not a button ── */
.reg-inner .fluentform .ff_save_progress_wrapper { display: inline-block; margin-right: 28px; }
.reg-inner .fluentform .ff-btn-save-progress,
.reg-inner .fluentform button[data-action="save_progress"] {
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  color: var(--navy); background: none !important; border: none; padding: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.reg-inner .fluentform .ff-btn-save-progress:hover,
.reg-inner .fluentform button[data-action="save_progress"]:hover { color: var(--cerise); }

/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNT PRE-TRIP CHECKLIST — in-body hero + progress card
   The standalone /account/pre-trip-checklist/ page has no navy hero band; it
   opens with a "Back to My Bookings" link, an in-body hero carrying the trip
   context + auto-save note, and an overall-progress card. Converted from
   html-templates/pages/registration/account/pre-trip-checklist.html.
   ═══════════════════════════════════════════════════════════════════════════ */
.checklist-hero { margin-bottom: 40px; }
.checklist-hero h1 {
  font-family: var(--font-heading); font-size: 44px; font-weight: 900;
  color: var(--navy); letter-spacing: -0.5px; margin-bottom: 12px;
}
.checklist-trip {
  font-family: var(--font-body); font-size: 18px; color: #505050; margin-bottom: 8px;
}
.checklist-trip strong { color: var(--navy); font-weight: 700; }
.checklist-note {
  font-family: var(--font-body); font-size: 16px; color: #777; line-height: 1.5;
}
/* TRIP SWITCHER — account checklist only, and only when the rider holds more
   than one trip. Insurance and flights are stored per booking, so the page has
   to say plainly which one is on screen. */
.trip-switch {
  background: #fff; border: 1px solid #e2e2e2; border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 24px;
}
.trip-switch-label {
  font-family: var(--font-card); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #999; margin-bottom: 12px;
}
.trip-switch-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.trip-switch-tab {
  display: block; padding: 10px 16px; border: 1px solid #dcdcdc;
  border-radius: var(--radius); text-decoration: none; background: #faf8f5;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.trip-switch-tab:hover { border-color: var(--cerise); background: #fff; }
.trip-switch-tab.active { border-color: var(--cerise); background: #fff; box-shadow: inset 0 0 0 1px var(--cerise); }
.trip-switch-tour {
  display: block; font-family: var(--font-card); font-size: 14px;
  font-weight: 700; color: var(--navy);
}
.trip-switch-tab.active .trip-switch-tour { color: var(--cerise); }
.trip-switch-dates {
  display: block; font-family: var(--font-body); font-size: 13px; color: #777; margin-top: 2px;
}
.trip-switch-note {
  font-family: var(--font-body); font-size: 14px; color: #777;
  line-height: 1.5; margin-top: 14px;
}
.trip-switch-note strong { color: var(--navy); font-weight: 600; }

.progress-card {
  background: #fff; border: 1px solid #e2e2e2; border-radius: var(--radius);
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
  padding: 24px 28px; margin-bottom: 32px;
}
.progress-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 14px;
}
.progress-card-label {
  font-family: var(--font-card); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #999;
}
.progress-card-count {
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--navy);
}
.progress-card-count .pct { color: var(--cerise); font-weight: 700; }
/* Scoped under .progress-card so it never collides with the dashboard's own
   .progress-bar (account.css), which loads alongside this on the dashboard. */
.progress-card .progress-bar { height: 8px; background: #ece9e4; border-radius: 100px; overflow: hidden; }
.progress-card .progress-fill { height: 100%; background: var(--cerise); border-radius: 100px; }

/* Save & Return primary — the account template's .btn-card-primary */
.reg-inner .btn-card-primary {
  display: inline-block;
  font-family: var(--font-card); font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--cerise); color: #fff; border: none; border-radius: 0;
  padding: 16px 28px; cursor: pointer; text-decoration: none; transition: background 0.2s;
}
.reg-inner .btn-card-primary:hover { background: var(--cerise-dk); }

/* Per-section status pills (account page only — registration.js swaps the shared
   form's accordion hint for one of these). Matches the template's .section-pill. */
.reg-inner .ff-accordion-description .section-pill {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 100px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.reg-inner .ff-accordion-description .section-pill.complete { background: #e8f5ee; color: #1c7a4a; }
.reg-inner .ff-accordion-description .section-pill.incomplete { background: #f0efec; color: #999; }

/* On-file summary (account checklist tab only). The four standing sections moved
   to the profile SoT, so here they are read-only status rows with a link to edit
   in their tab; the form below collects only the per-trip half (insurance, flights).
   Card matches .progress-card so the two sit together. */
.jt-onfile {
  background: #fff; border: 1px solid #e2e2e2; border-radius: var(--radius);
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
  padding: 24px 28px; margin-bottom: 32px;
}
.jt-onfile-head {
  font-family: var(--font-card); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #999;
  margin: 0 0 6px;
}
.jt-onfile-intro {
  font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: #666;
  margin: 0 0 6px;
}
.jt-onfile-intro em { font-style: italic; color: var(--cerise); }
.jt-onfile-list { list-style: none; margin: 14px 0 0; padding: 0; }
.jt-onfile-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-top: 1px solid #efece7;
}
.jt-onfile-item:first-child { border-top: 0; padding-top: 4px; }
.jt-onfile-status {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; line-height: 1;
}
.jt-onfile-item.is-done .jt-onfile-status { background: #e8f5ee; color: #1c7a4a; }
.jt-onfile-item.is-done .jt-onfile-status::after { content: '\2713'; }
.jt-onfile-item.is-todo .jt-onfile-status { background: #fdeef0; color: var(--cerise); }
.jt-onfile-item.is-todo .jt-onfile-status::after { content: '!'; }
.jt-onfile-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.jt-onfile-label {
  font-family: var(--font-card); font-size: 15px; font-weight: 600; color: var(--navy);
}
.jt-onfile-hint { font-family: var(--font-body); font-size: 12.5px; color: #999; }
.jt-onfile-item.is-todo .jt-onfile-hint { color: var(--cerise); }
.jt-onfile-edit {
  flex: 0 0 auto; font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: var(--cerise); text-decoration: none; white-space: nowrap;
}
.jt-onfile-edit:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .jt-onfile { padding: 20px; }
  .jt-onfile-item { flex-wrap: wrap; }
  .jt-onfile-edit { margin-left: 36px; }
}

@media (max-width: 1024px) {
  .checklist-hero h1 { font-size: 38px; }
}
@media (max-width: 768px) {
  .checklist-hero { margin-bottom: 32px; }
  .checklist-hero h1 { font-size: 32px; }
  .checklist-trip { font-size: 16px; }
  .progress-card-head { flex-wrap: wrap; gap: 8px 16px; }
  .trip-switch { padding: 16px 18px; }
}
@media (max-width: 480px) {
  .checklist-hero h1 { font-size: 26px; }
  /* Full-width tabs — side-by-side tour names truncate badly at this width. */
  .trip-switch-tabs { flex-direction: column; }
  .trip-switch-tab { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONFIRMATION / RECEIVED PAGES (Phase C)
   Extracted from bespoke-enquiry-step3.html + the group/training confirmation
   templates. Shared by the Bespoke "Enquiry Received" page and the Group/
   Training "You're Booked" pages, none of which are Fluent Forms — so these are
   plain .reg-inner descendants, not scoped through .fluentform.
   ═══════════════════════════════════════════════════════════════════════════ */
.confirm-icon { width: 84px; height: auto; display: block; margin-bottom: 36px; }
.confirm-title {
  font-family: var(--font-heading); font-size: 44px; font-weight: 900;
  color: var(--navy); letter-spacing: -0.5px; margin-bottom: 18px;
}
.confirm-message {
  font-family: var(--font-body); font-size: 19px; color: #505050;
  line-height: 1.6; margin-bottom: 44px;
}
.confirm-message strong { color: var(--navy); font-weight: 700; }

/* Summary card (Bespoke received) */
.summary-card {
  background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius);
  padding: 36px 40px; box-shadow: 0 2px 16px rgba(0,0,0,0.05); margin-bottom: 48px;
}
.summary-label {
  font-family: var(--font-card); font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy);
  padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 24px;
}
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; max-width: 760px; }
.summary-item-label {
  font-family: var(--font-card); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #999; margin-bottom: 6px;
}
.summary-item-value { font-family: var(--font-body); font-size: 18px; color: var(--navy); }

/* Actions row + buttons */
.confirm-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.confirm-btn-primary {
  font-family: var(--font-card); font-size: 15px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--cerise); color: #fff; border: none; padding: 18px 34px; border-radius: 0;
  cursor: pointer; text-decoration: none; transition: background 0.2s;
  display: inline-flex; align-items: center; gap: 10px;
}
.confirm-btn-primary:hover { background: var(--cerise-dk); }
.confirm-btn-secondary {
  font-family: var(--font-body); font-size: 17px; font-weight: 600;
  color: var(--navy); text-decoration: none;
  border: 1px solid #c2c2c2; border-radius: 0; padding: 17px 30px;
  transition: border-color 0.2s;
}
.confirm-btn-secondary:hover { border-color: var(--navy); }

@media (max-width: 768px) {
  .confirm-icon { width: 72px; margin-bottom: 28px; }
  .confirm-title { font-size: 32px; }
  .confirm-message { font-size: 17px; margin-bottom: 36px; }
  .summary-card { padding: 28px 24px; margin-bottom: 40px; }
  .summary-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 560px) {
  .confirm-title { font-size: 26px; }
  .confirm-message { font-size: 16px; }
  .summary-item-value { font-size: 16px; }
  .confirm-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .confirm-btn-primary { justify-content: center; text-align: center; }
  .confirm-btn-secondary { text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOC PAGES — review / invoice / receipt / confirmation-extras (Phase C)
   These are server-rendered pages (NOT Fluent Forms), so the selectors are
   unscoped. The build gave them ad-hoc markup that diverged from the template
   class names and shipped without CSS; these rules style that markup to the
   templates' invoice / review / receipt look.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section label used across the doc pages (the FF-scoped copy above doesn't
   reach non-form pages). */
.reg-inner .jt-fieldset-label {
  font-family: var(--font-card); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--navy);
  padding-bottom: 14px; border-bottom: 2px solid var(--navy); margin: 0 0 22px;
}

/* Review & Pay (step 4) */
.reg-inner .review-edit { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--cerise); text-decoration: none; }
.reg-inner .review-edit:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Deposit box (unscoped copy for the doc pages) */
.reg-inner .deposit-box { background: #f6f4f1; border-left: 4px solid var(--cerise); padding: 22px 26px; margin-top: 24px; }
.reg-inner .deposit-label { font-family: var(--font-card); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cerise); margin-bottom: 6px; }
.reg-inner .deposit-amount { font-family: var(--font-heading); font-size: 30px; font-weight: 900; color: var(--navy); letter-spacing: -.5px; margin-bottom: 6px; }
.reg-inner .deposit-note { font-family: var(--font-body); font-size: 14px; color: #777; }
.reg-inner .jt-price-note { font-family: var(--font-body); font-size: 13px; color: #8a8a8a; margin: 16px 0 0; }

/* Invoice + Receipt document card */
.reg-inner .invoice { background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: var(--radius); padding: 40px 44px; box-shadow: 0 2px 20px rgba(0,0,0,.05); max-width: 840px; }
.reg-inner .invoice-head { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 24px; border-bottom: 2px solid var(--navy); margin-bottom: 26px; }
.reg-inner .invoice-head .jt-fieldset-label { margin: 0 0 4px; border: 0; padding: 0; }
.reg-inner .invoice-table { width: 100%; border-collapse: collapse; }
.reg-inner .invoice-table thead th { font-family: var(--font-card); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #999; text-align: left; padding: 0 0 12px; border-bottom: 1px solid rgba(0,0,0,.12); }
.reg-inner .invoice-table th.num, .reg-inner .invoice-table td.num { text-align: right; }
.reg-inner .invoice-table tbody td { font-family: var(--font-body); font-size: 16px; color: var(--body); padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,.08); vertical-align: top; }
.reg-inner .invoice-table tfoot td { font-family: var(--font-body); font-size: 16px; padding: 12px 0 0; color: var(--body); }

/* ═══════════════════════════════════════════════════════════════════════════
   DEPOSIT INVOICE (Group step 5) — the step-5 template's invoice document.
   Everything is scoped under .invoice-doc.
   NOTE (2026-07-20): this said the older .invoice styles above were "still used
   by the Training invoice". Not true — page-training-invoice.php renders
   .invoice-doc too, so both products share this block. Verify against the PHP
   before trusting a claim like that; this one outlived the code and helped put
   a phantom "Training receipt is on old markup" item on the migration checklist.
   ═══════════════════════════════════════════════════════════════════════════ */
.reg-inner--invoice { max-width: 820px; }
.reg-inner .invoice-doc {
  background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 28px rgba(0,0,0,0.08);
}
.reg-inner .invoice-doc .invoice-head {
  background: var(--navy); padding: 36px 48px;
  display: flex; align-items: center; justify-content: space-between; border: 0; margin: 0;
}
.reg-inner .invoice-doc .invoice-head-logo img { height: 44px; width: auto; display: block; }
.reg-inner .invoice-doc .invoice-head-meta { text-align: right; }
.reg-inner .invoice-doc .invoice-head-label {
  font-family: var(--font-card); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 6px;
}
.reg-inner .invoice-doc .invoice-head-number {
  font-family: var(--font-card); font-size: 22px; font-weight: 700; letter-spacing: 0.04em; color: #fff;
}
.reg-inner .invoice-doc .invoice-body { padding: 40px 48px 44px; }

.reg-inner .invoice-doc .invoice-parties {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-bottom: 28px;
}
.reg-inner .invoice-doc .invoice-block-label {
  font-family: var(--font-card); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); margin-bottom: 16px;
}
.reg-inner .invoice-doc .invoice-billed .name { font-family: var(--font-body); font-size: 17px; color: var(--body); margin-bottom: 5px; }
.reg-inner .invoice-doc .invoice-billed p { font-family: var(--font-body); font-size: 16px; color: #4a4a4a; line-height: 1.55; margin: 0; }
.reg-inner .invoice-doc .invoice-details { text-align: right; }
.reg-inner .invoice-doc .invoice-details .invoice-block-label { text-align: right; }
.reg-inner .invoice-doc .invoice-details p { font-family: var(--font-body); font-size: 16px; color: #4a4a4a; line-height: 1.7; margin: 0; }
.reg-inner .invoice-doc .invoice-details p strong { color: var(--navy); font-weight: 700; }

.reg-inner .invoice-doc .invoice-deposit {
  background: #f3f2f0; border-radius: var(--radius); padding: 24px 28px; margin: 28px 0 36px;
}
.reg-inner .invoice-doc .invoice-deposit-label {
  font-family: var(--font-card); font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); margin-bottom: 10px;
}
.reg-inner .invoice-doc .invoice-deposit-amount {
  font-family: var(--font-heading); font-size: 30px; font-weight: 900; color: var(--navy); line-height: 1; margin-bottom: 10px;
}
.reg-inner .invoice-doc .invoice-deposit-note { font-family: var(--font-body); font-size: 14px; color: #6a6a6a; }

.reg-inner .invoice-doc .invoice-table { width: 100%; border-collapse: collapse; }
.reg-inner .invoice-doc .invoice-table thead th {
  font-family: var(--font-card); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey);
  text-align: left; padding: 0 0 14px; border-bottom: 2px solid var(--navy);
}
.reg-inner .invoice-doc .invoice-table thead th.col-qty { padding-right: 20px; }
.reg-inner .invoice-doc .invoice-table thead th.col-amount { text-align: right; }
.reg-inner .invoice-doc .invoice-table tbody td {
  font-family: var(--font-body); font-size: 16px; color: var(--body); padding: 26px 0; vertical-align: top; border: 0;
}
.reg-inner .invoice-doc .invoice-table tbody tr:last-child td { border-bottom: 1px solid rgba(0,0,0,0.12); }
.reg-inner .invoice-doc .invoice-item-name { font-weight: 700; color: var(--body); margin-bottom: 4px; }
.reg-inner .invoice-doc .invoice-item-sub { font-size: 14px; color: #8a8a8a; }
.reg-inner .invoice-doc .invoice-table td.col-qty { padding-right: 20px; }
.reg-inner .invoice-doc .invoice-table td.col-amount { text-align: right; white-space: nowrap; }

.reg-inner .invoice-doc .invoice-summary { display: flex; justify-content: flex-end; margin-top: 24px; }
.reg-inner .invoice-doc .invoice-summary-inner { width: 50%; min-width: 320px; }
.reg-inner .invoice-doc .invoice-summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-body); font-size: 16px; color: #4a4a4a; padding: 8px 0;
}
.reg-inner .invoice-doc .invoice-summary-row .amt { color: var(--body); white-space: nowrap; }
.reg-inner .invoice-doc .invoice-summary-divider { border-top: 2px solid var(--navy); margin: 8px 0; }
.reg-inner .invoice-doc .invoice-summary-row.deposit { font-weight: 700; color: var(--navy); padding-top: 10px; }
.reg-inner .invoice-doc .invoice-summary-row.deposit .amt { color: var(--navy); font-weight: 700; }

.reg-inner .invoice-doc .payment-options { background: #f3f2f0; border-radius: var(--radius); padding: 28px 32px; margin-top: 40px; }
.reg-inner .invoice-doc .payment-options-label {
  font-family: var(--font-card); font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cerise); margin-bottom: 20px;
}
.reg-inner .invoice-doc .payment-method { margin-bottom: 20px; }
.reg-inner .invoice-doc .payment-method-name { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.reg-inner .invoice-doc .payment-method p { font-family: var(--font-body); font-size: 16px; color: #4a4a4a; line-height: 1.65; margin: 0; }
.reg-inner .invoice-doc .payment-note p { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--body); line-height: 1.4; margin: 0; }

.reg-inner .invoice-doc .invoice-doc-footer { text-align: center; margin-top: 30px; }
.reg-inner .invoice-doc .invoice-doc-footer .legal {
  font-family: var(--font-body); font-size: 14px; color: #8a8a8a; line-height: 1.7;
  margin: 0 auto 16px; max-width: 640px;
}
.reg-inner .invoice-doc .invoice-doc-footer .thanks { font-family: var(--font-body); font-size: 16px; color: var(--navy); }

.reg-inner .invoice-download { text-align: center; margin-top: 28px; }
.reg-inner .invoice-download a {
  font-family: var(--font-body); font-size: 15px; color: var(--navy);
  text-decoration: underline; text-underline-offset: 3px;
}
.reg-inner .invoice-download a:hover { color: var(--cerise); }

@media (max-width: 640px) {
  .reg-inner .invoice-doc .invoice-head { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 24px; }
  .reg-inner .invoice-doc .invoice-head-meta { text-align: left; }
  .reg-inner .invoice-doc .invoice-body { padding: 28px 24px 32px; }
  .reg-inner .invoice-doc .invoice-parties { flex-direction: column; gap: 24px; }
  .reg-inner .invoice-doc .invoice-details,
  .reg-inner .invoice-doc .invoice-details .invoice-block-label,
  .reg-inner .invoice-doc .invoice-details p { text-align: left; }
  .reg-inner .invoice-doc .invoice-summary-inner { width: 100%; min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAYMENT RECEIPT (Group step 7) — the step-7 template's receipt document.
   Scoped under .receipt-doc.
   NOTE (2026-07-20): this said the .receipt-secured callout below was "still
   used by the Training receipt", which read as though Training sat on older
   markup. It does not: page-training-receipt.php renders .receipt-doc exactly as
   Group does, and BOTH receipts render .receipt-secured. The callout is shared,
   not a Training leftover.
   ═══════════════════════════════════════════════════════════════════════════ */
.reg-inner--receipt { max-width: 820px; }
.reg-inner .receipt-doc {
  background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 8px 40px rgba(4,48,66,0.12);
}
.reg-inner .receipt-doc .receipt-head {
  background: var(--navy); padding: 36px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.reg-inner .receipt-doc .receipt-head-logo img { height: 44px; width: auto; display: block; }
.reg-inner .receipt-doc .receipt-head-meta { text-align: right; }
.reg-inner .receipt-doc .receipt-head-label {
  font-family: var(--font-card); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 8px;
}
.reg-inner .receipt-doc .receipt-head-no {
  font-family: var(--font-card); font-size: 24px; font-weight: 700; letter-spacing: 0.04em; color: #fff;
}
.reg-inner .receipt-doc .receipt-body { padding: 40px 48px 44px; }

.reg-inner .receipt-doc .receipt-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #f0eeeb; border-radius: var(--radius); padding: 12px 20px; margin-bottom: 30px;
}
.reg-inner .receipt-doc .receipt-badge svg { width: 16px; height: 16px; display: block; }
.reg-inner .receipt-doc .receipt-badge span {
  font-family: var(--font-card); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy);
}

.reg-inner .receipt-doc .receipt-meta {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; padding-bottom: 34px;
}
.reg-inner .receipt-doc .receipt-meta-label {
  font-family: var(--font-card); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); margin-bottom: 12px;
}
.reg-inner .receipt-doc .receipt-meta-col.right { text-align: right; }
.reg-inner .receipt-doc .receipt-meta-line {
  font-family: var(--font-body); font-size: 17px; color: var(--navy); line-height: 1.6;
}

.reg-inner .receipt-doc .receipt-table { width: 100%; border-collapse: collapse; }
.reg-inner .receipt-doc .receipt-table thead th {
  font-family: var(--font-card); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey);
  text-align: left; padding-bottom: 14px; border-bottom: 2px solid var(--navy);
}
.reg-inner .receipt-doc .receipt-table thead th.amount { text-align: right; }
.reg-inner .receipt-doc .receipt-table tbody td { padding: 22px 0 0; vertical-align: top; border: 0; }
.reg-inner .receipt-doc .receipt-item-title {
  font-family: var(--font-body); font-size: 18px; font-weight: 700; color: var(--navy);
}
.reg-inner .receipt-doc .receipt-item-sub {
  font-family: var(--font-body); font-size: 15px; color: #7a7a7a; margin-top: 4px;
}
.reg-inner .receipt-doc .receipt-table td.amount {
  text-align: right; font-family: var(--font-body); font-size: 18px; color: var(--navy); white-space: nowrap;
}

.reg-inner .receipt-doc .receipt-summary { margin-top: 30px; display: flex; justify-content: flex-end; }
.reg-inner .receipt-doc .receipt-summary-inner { width: 340px; }
.reg-inner .receipt-doc .receipt-summary-divider { border-top: 2px solid var(--navy); margin-bottom: 18px; }
.reg-inner .receipt-doc .receipt-summary-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 12px;
}
.reg-inner .receipt-doc .receipt-summary-row:last-child { margin-bottom: 0; }
.reg-inner .receipt-doc .receipt-summary-label { font-family: var(--font-body); font-size: 17px; color: #5a5a5a; }
.reg-inner .receipt-doc .receipt-summary-value {
  font-family: var(--font-body); font-size: 17px; font-weight: 700; color: var(--navy); white-space: nowrap;
}
.reg-inner .receipt-doc .receipt-summary-row.paid .receipt-summary-value {
  font-family: var(--font-heading); font-size: 24px; font-weight: 700;
}

/* Spot secured box — grey centred (overrides the older green callout base). */
.reg-inner .receipt-doc .receipt-secured {
  background: #f0eeeb; border-left: 0; border-radius: var(--radius);
  padding: 24px; text-align: center; margin-top: 30px;
}
.reg-inner .receipt-doc .receipt-secured-title {
  font-family: var(--font-body); font-size: 18px; font-weight: 700; color: var(--cerise); margin-bottom: 6px;
}
.reg-inner .receipt-doc .receipt-secured-sub {
  font-family: var(--font-body); font-size: 16px; color: var(--navy); line-height: 1.55;
}

.reg-inner .receipt-doc .receipt-legal {
  text-align: center; margin-top: 26px;
  font-family: var(--font-body); font-size: 13px; color: #9a9a9a; line-height: 1.7;
}

.reg-inner .receipt-actions {
  display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 28px;
}
.reg-inner .receipt-actions a {
  font-family: var(--font-body); font-size: 15px; color: var(--navy);
  text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s;
}
.reg-inner .receipt-actions a:hover { color: var(--cerise); }

@media (max-width: 640px) {
  .reg-inner .receipt-doc .receipt-head { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 24px; }
  .reg-inner .receipt-doc .receipt-head-meta { text-align: left; }
  .reg-inner .receipt-doc .receipt-body { padding: 28px 24px 32px; }
  .reg-inner .receipt-doc .receipt-meta { flex-direction: column; gap: 22px; }
  .reg-inner .receipt-doc .receipt-meta-col.right { text-align: left; }
  .reg-inner .receipt-doc .receipt-summary-inner { width: 100%; }
}

/* Print → PDF: show only the invoice / receipt document. */
@media print {
  #wpadminbar, .reg-header, .reg-footer, .invoice-download, .receipt-actions { display: none !important; }
  body, .reg-body { background: #fff !important; }
  .reg-body { padding: 0 !important; }
  .reg-inner--invoice, .reg-inner--receipt { max-width: none !important; padding: 0 !important; }
  .reg-inner .invoice-doc, .reg-inner .receipt-doc { box-shadow: none !important; border: 1px solid #e2e2e2; }
}

/* Receipt "spot secured" callout */
.reg-inner .receipt-secured { background: #eef7f1; border-left: 4px solid #1c7a4a; padding: 22px 26px; margin-top: 26px; border-radius: 0 var(--radius) var(--radius) 0; }
.reg-inner .receipt-secured strong { display: block; font-family: var(--font-heading); font-size: 20px; color: var(--navy); margin-bottom: 6px; }
.reg-inner .receipt-secured p { font-family: var(--font-body); font-size: 14px; color: #555; margin: 0; }

/* Confirmation next-steps + pax invite */

/* ── Group "You're Booked" (step-6 template). Scoped under .jt-confirm so the
   shared .confirm-icon/-title/-message (Bespoke received) stay as they are. ── */
.reg-inner .jt-confirm .confirm-icon {
  width: 72px; height: 72px; border-radius: 50%; background: #ffe0e8;
  display: flex; align-items: center; justify-content: center; margin-bottom: 28px;
}
.reg-inner .jt-confirm .confirm-icon svg { width: 34px; height: 34px; display: block; }
.reg-inner .jt-confirm .confirm-message { margin-bottom: 28px; }
.reg-inner .jt-confirm .confirm-message a { color: var(--cerise); text-decoration: none; }
.reg-inner .jt-confirm .confirm-message a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Ref badge */
.reg-inner .jt-confirm .ref-badge {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--navy); border-radius: var(--radius); padding: 14px 22px; margin-bottom: 32px;
}
.reg-inner .jt-confirm .ref-label {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.reg-inner .jt-confirm .ref-value {
  font-family: var(--font-body); font-size: 17px; font-weight: 700; letter-spacing: 0.04em; color: #fff;
}

/* Invite card (per additional pax) */
.reg-inner .jt-confirm .invite-card {
  display: flex; align-items: flex-start; gap: 20px;
  background: #fff; border: 1px solid #e2e2e2; border-radius: var(--radius);
  padding: 28px 32px; margin-bottom: 28px;
}
.reg-inner .jt-confirm .invite-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); display: flex; align-items: center; justify-content: center;
}
.reg-inner .jt-confirm .invite-icon svg { width: 22px; height: 22px; display: block; }
.reg-inner .jt-confirm .invite-body { flex: 1; }
.reg-inner .jt-confirm .invite-title {
  font-family: var(--font-body); font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 8px;
}
.reg-inner .jt-confirm .invite-text {
  font-family: var(--font-body); font-size: 16px; color: #555; line-height: 1.6;
}

/* What's-next 2x2 grid */
.reg-inner .jt-confirm .next-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px;
}
.reg-inner .jt-confirm .next-card {
  background: #fff; border: 1px solid #e2e2e2; border-radius: var(--radius); padding: 26px 30px;
}
.reg-inner .jt-confirm .next-num {
  width: 28px; height: 28px; border-radius: 50%; background: var(--cerise); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 14px; font-weight: 700; margin-bottom: 12px;
}
.reg-inner .jt-confirm .next-card-title {
  font-family: var(--font-body); font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 4px;
}
.reg-inner .jt-confirm .next-card-text {
  font-family: var(--font-body); font-size: 16px; color: #555; line-height: 1.55;
}
.reg-inner .jt-confirm .confirm-actions { margin-top: 36px; }
@media (max-width: 768px) {
  .reg-inner .jt-confirm .next-grid { grid-template-columns: 1fr; }
  .reg-inner .jt-confirm .invite-card { padding: 24px 22px; }
}

/* ══════════════════════════════════════════════════════════
   ACCOUNT — Create Account + Sign In (register-first)
   ══════════════════════════════════════════════════════════ */
.reg-inner--narrow { max-width: 560px; }
.reg-inner--narrow .fluentform .ff-el-group { max-width: none; }

.jt-auth-form {
  background: #fff; border: 1px solid #e2e2e2; border-radius: var(--radius);
  padding: 32px 34px; margin-bottom: 18px;
}
.jt-auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.jt-auth-field label { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--navy); }
.jt-auth-field input {
  border: 1px solid #ddd; border-radius: var(--radius); padding: 12px 14px;
  font-family: var(--font-body); font-size: 16px; color: var(--body);
  background: #fff; outline: none; transition: border-color .2s;
}
.jt-auth-field input:focus { border-color: var(--cerise); }
.jt-auth-error {
  background: #fdecef; border-left: 4px solid var(--cerise); color: var(--maroon);
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  padding: 12px 16px; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 20px;
}
.jt-auth-links { margin: 16px 0 0; font-family: var(--font-body); font-size: 14px; }
.jt-auth-links a,
.reg-auth-alt a { color: var(--cerise); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.jt-auth-links a:hover,
.reg-auth-alt a:hover { color: var(--cerise-dk); }
.reg-auth-alt {
  font-family: var(--font-body); font-size: 15px; color: var(--body);
  text-align: center; margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REVIEW & PAY (Group step 4)
   Converted from html-templates/pages/registration/group-tours-step4.html: a
   two-column grid (review cards + sticky pricing sidebar), the agree/newsletter
   Fluent Form styled as the template's rows, and a full-width actions row. All
   scoped under .jt-review.
   NOTE (2026-07-20): this said the scoping protected "the older single-column
   review styles the Training review page still uses". Not true —
   page-training-review.php renders .jt-review as well, so both products share
   this block.
   ═══════════════════════════════════════════════════════════════════════════ */
.reg-inner .jt-review .review-layout {
  display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start;
}
@media (max-width: 900px) {
  .reg-inner .jt-review .review-layout { grid-template-columns: 1fr; }
  .reg-inner .jt-review .pay-sidebar { position: static; }
}

.reg-inner .jt-review .review-card {
  background: #fff; border: 1px solid #e2e2e2; border-radius: var(--radius);
  padding: 28px 32px; margin-bottom: 20px;
}
.reg-inner .jt-review .review-card-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px;
}
.reg-inner .jt-review .review-card-title {
  font-family: var(--font-card); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy);
}
.reg-inner .jt-review .review-edit {
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  color: var(--cerise); text-decoration: none;
}
.reg-inner .jt-review .review-edit:hover { text-decoration: underline; text-underline-offset: 3px; }

.reg-inner .jt-review .rv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; }
.reg-inner .jt-review .rv-item { display: flex; flex-direction: column; gap: 5px; }
.reg-inner .jt-review .rv-item.full { grid-column: 1 / -1; }
.reg-inner .jt-review .rv-label {
  font-family: var(--font-card); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey);
}
.reg-inner .jt-review .rv-value {
  font-family: var(--font-body); font-size: 16px; color: var(--navy); line-height: 1.4;
}

.reg-inner .jt-review .invite-notice {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #d9d9d9; border-radius: var(--radius);
  padding: 13px 18px; margin-bottom: 22px;
}
.reg-inner .jt-review .invite-notice svg { flex-shrink: 0; display: block; }
.reg-inner .jt-review .invite-notice span {
  font-family: var(--font-card); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy);
}
.reg-inner .jt-review .pending-callout {
  border-left: 4px solid var(--cerise); background: #fbf1f4;
  padding: 16px 22px; margin-top: 22px; border-radius: 0 var(--radius) var(--radius) 0;
}
.reg-inner .jt-review .pending-callout-title {
  font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--cerise); margin-bottom: 6px;
}
.reg-inner .jt-review .pending-callout-body {
  font-family: var(--font-body); font-size: 15px; color: var(--body); line-height: 1.55;
}

.reg-inner .jt-review .pay-sidebar {
  position: sticky; top: 24px;
  background: #fff; border: 1px solid #e2e2e2; border-radius: var(--radius);
  padding: 30px 32px; box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.reg-inner .jt-review .pay-tour-name {
  font-family: var(--font-heading); font-size: 22px; font-weight: 700;
  color: var(--navy); line-height: 1.15; margin-bottom: 6px;
}
.reg-inner .jt-review .pay-tour-sub {
  font-family: var(--font-body); font-size: 15px; color: #888; margin-bottom: 22px;
}
.reg-inner .jt-review .pay-divider { height: 1px; background: rgba(0,0,0,0.12); margin: 22px 0; }
.reg-inner .jt-review .pay-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  font-family: var(--font-body); font-size: 15px; color: var(--body); margin-bottom: 12px;
}
.reg-inner .jt-review .pay-line:last-of-type { margin-bottom: 0; }
.reg-inner .jt-review .pay-line-value { white-space: nowrap; color: var(--navy); }
.reg-inner .jt-review .pay-total { display: flex; align-items: baseline; justify-content: space-between; }
.reg-inner .jt-review .pay-total-label,
.reg-inner .jt-review .pay-total-value {
  font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--navy);
}

/* Scoped deposit box — the older global .deposit-box uses different spacing. */
.reg-inner .jt-review .deposit-box {
  background: #f6f4f1; border-left: 4px solid var(--cerise); padding: 22px 26px; margin-top: 24px;
}
.reg-inner .jt-review .deposit-label {
  font-family: var(--font-card); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cerise); margin-bottom: 6px;
}
.reg-inner .jt-review .deposit-amount {
  font-family: var(--font-heading); font-size: 30px; font-weight: 900;
  color: var(--navy); letter-spacing: -0.5px; margin-bottom: 6px;
}
.reg-inner .jt-review .deposit-note { font-family: var(--font-body); font-size: 14px; color: #777; }
/* "SGD 1,500 per person x 2" under the amount — shows how a flat deposit was
   arrived at, so the figure is not just asserted (Jacq, 4 Aug 2026). */
.reg-inner .deposit-sub {
  font-family: var(--font-body); font-size: 14px; color: #777;
  margin: -2px 0 6px;
}

/* The Booking Agreement Fluent Form → the template's agree-row + newsletter-row. */
.reg-inner .jt-agreement { margin-top: 22px; }
.reg-inner .jt-agreement .fluentform .ff-el-group { margin: 0 0 16px; }
.reg-inner .jt-agreement .ff-el-input--label { display: none; }
.reg-inner .jt-agreement .jt-agree-field .ff-el-form-check-label {
  align-items: flex-start; white-space: normal;
  background: #f1efec; border: none; border-radius: var(--radius); padding: 18px 22px;
}
.reg-inner .jt-agreement .jt-agree-field .ff-el-form-check-label:has(input:checked) { background: #f1efec; box-shadow: none; }
/* Block, not flex — the label wraps HTML (links) that must flow as a paragraph;
   the checkbox is pulled out of the flow to the top-left. */
.reg-inner .jt-agreement .jt-agree-field .ff-el-form-check-label > span {
  display: block; position: relative; padding-left: 32px; gap: 0; line-height: 1.5;
}
.reg-inner .jt-agreement .jt-agree-field .ff-el-form-check label.ff-el-form-check-label > span::before {
  position: absolute; left: 0; top: 1px; margin: 0; border-color: var(--navy);
}
/* Policy links inside the agreement (open in a new tab, set server-side). */
.reg-inner .jt-agreement .jt-agree-field .ff-el-form-check-label a { color: var(--cerise); text-decoration: none; }
.reg-inner .jt-agreement .jt-agree-field .ff-el-form-check-label a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* More breathing room before the newsletter row. */
.reg-inner .jt-agreement .fluentform .ff-el-group.jt-agree-field { margin-bottom: 26px; }
.reg-inner .jt-agreement .jt-newsletter-field .ff-el-form-check-label {
  white-space: normal; background: none; border: none; padding: 6px 22px;
}
.reg-inner .jt-agreement .jt-newsletter-field .ff-el-form-check-label:has(input:checked) { background: none; box-shadow: none; }
.reg-inner .jt-agreement .jt-newsletter-field .ff-el-form-check label.ff-el-form-check-label > span::before { border-color: var(--navy); }
.reg-inner .jt-agreement .ff_submit_btn_wrapper { display: none; } /* page actions row drives it */

.reg-inner .jt-review-actions { margin-top: 40px; }

/* ══════════════════════════════════════════════════════════
   MOBILE — the Fluent Forms rebuild
   ══════════════════════════════════════════════════════════
   WHY THIS BLOCK EXISTS. The mobile rules near the top of this file were lifted
   from the approved templates and still target the template's hand-rolled
   classes — .reg-row, .reg-actions, .reg-btn-next, .med-row. Fluent Forms
   replaced that markup, so those selectors match NOTHING and every one of the
   template's mobile behaviours was silently lost. The DESKTOP rules were
   re-pointed at the FF selectors during the port; the media blocks were not.

   The worst symptom: FF's .ff-btn carries white-space:nowrap, so "Continue to
   Pre-Trip Checklist" has a min-content width of 413px. On a 390px phone the
   layout viewport blew out to 573px and the browser scaled the whole first
   booking screen to ~68% — 16px text rendering at ~11px.

   Everything here re-points a template rule at what FF actually renders. Each
   one names the template rule it restores. Appended at the end of the file on
   purpose: several base rules sit at the same specificity, so source order is
   what makes these win. Do not move this block higher.
   ══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* The @media(900) rule at ~:1617 is dead: :1669 re-declares position:sticky at
     identical specificity LATER in the file, so it always won and the sidebar
     stayed sticky on phones. Re-assert it here, after both. */
  .reg-inner .jt-review .pay-sidebar { position: static; }
}

@media (max-width: 768px) {
  /* ACTION ROW — restores .reg-actions{flex-direction:column} + .reg-btn-next{width:100%}.
     white-space:normal is the load-bearing part: without it the button cannot
     shrink below its 413px label and the viewport blows out. */
  .reg-inner .fluentform .step-nav.jt-has-back,
  .reg-inner .fluentform .ff_submit_btn_wrapper.jt-has-back {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .reg-inner .fluentform .ff-btn-submit,
  .reg-inner .fluentform .ff-btn-next,
  .reg-inner .fluentform .ff-btn-prev {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }

  /* FORM ROWS — restores .reg-row{grid-template-columns:1fr}. Without this a
     three-column row renders at 103px per field, and the accommodation row at
     53px/53px/197px, clipping placeholders. */
  .reg-inner .fluentform .ff_columns_total_2,
  .reg-inner .fluentform .ff_columns_total_3,
  .reg-inner .fluentform .jt-accom-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* DEPARTURE CARDS — restores .date-grid{grid-template-columns:1fr}. */
  .reg-inner .fluentform .jt-date-grid { grid-template-columns: 1fr; gap: 14px; }

  /* CHECKLIST SECTION BADGES — the display:none at ~:896 was written for the grey
     hint text, but the "Complete / Incomplete" pill was later put in the same
     container, so phones lost the at-a-glance progress signal. Hide the plain
     hint, keep the pill. :has() raises specificity to (0,4,0) so this wins
     regardless of order. */
  .reg-inner .fluentform .ff-accordion-description:has(.section-pill) {
    display: block;
    white-space: normal;
    padding-right: 8px;
  }

  /* REVIEW & PAY — this section had no mobile block at all. Restores
     .rv-grid{1fr} and the template's tighter card padding. The label/value pairs
     were sitting in 140px columns. */
  .reg-inner .jt-review .rv-grid { grid-template-columns: 1fr; gap: 16px; }
  .reg-inner .jt-review .review-card { padding: 24px 22px; }
  .reg-inner .jt-review .pay-sidebar { padding: 26px 24px; }

  /* min-width:auto on a grid item refuses to shrink below its content, which
     pushed the 350px container to 388px and overflowed the document. */
  .reg-inner .jt-review .review-layout { min-width: 0; }
  .reg-inner .jt-review .review-layout > * { min-width: 0; }
}

@media (max-width: 480px) {
  /* MEDICAL Yes/No — restores .med-row{flex-direction:column} + .segmented{width:100%}.
     Side by side, the question was squeezed to 148px and wrapped to two lines
     against its toggle. */
  .reg-inner .fluentform .jt-med-row .ff-el-group:not(.ff-step-nav) {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .reg-inner .fluentform .jt-med-row .ff-el-input--content { width: 100%; }

  /* restores .checkbox-label{white-space:normal} — FF's pills are nowrap with no
     escape hatch, so a long option label could not wrap. */
  .reg-inner .fluentform .ff-el-form-check-label { white-space: normal; }

  .reg-inner .jt-review .review-card { padding: 22px 18px; }
}

/* ── Optional add-ons (e.g. Emerald Class) — added 2026-07-21 ─────────────── */
.jt-extras { margin: 22px 0 0; }
.jt-extras-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.jt-extra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--grey);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
}
.jt-extra:hover { border-color: var(--cerise); }
.jt-extra input { margin: 0; }
.jt-extra-label { flex: 1 1 auto; color: var(--body); }
.jt-extra-price {
  font-family: var(--font-card);
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

/* Room occupancy — one row per cyclist, twin/double vs single.
   Rendered only where the tour's tiers quote a real single rate, so on most
   tours these rules never match anything. See registration.js. */
.jt-occupancy { margin: 22px 0 0; }
.jt-occ-note {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--body);
  opacity: .8;
}
.jt-occ-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
/* A card per rider, name on the left and the choice on the right (Jacq, 6 Aug:
   "I find the previous design is better, card for each pax"). A labels-only
   version was tried in between and rejected. The border is #e2e2e2 to sit with
   the pricing card below rather than --grey, which read heavier than the #ddd
   hairline on the option pills it now contains. */
.jt-occ-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid #e2e2e2;
  border-radius: var(--radius);
  background: var(--white);
}
.jt-occ-name {
  flex: 1 1 140px;
  font-family: var(--font-card);
  font-weight: 600;
  color: var(--navy);
  font-size: 15px;
}
/* The option pills deliberately MIRROR the form's own choice fields
   (.ff-el-form-check-label, ~line 330) rather than inventing a second look:
   same 16px navy body text, same #ddd hairline, same square tick box, same
   navy-on-#F9F9F9 selected state. This markup is ours, not Fluent Forms', so
   the rules cannot simply be shared — they are restated to match. If the form's
   choice styling is ever changed, change it here too. */
.jt-occ-opts { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.jt-occ-opt {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--navy);
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid #ddd;
  border-radius: var(--radius);
  background: #fff;
  padding: 12px 16px;
  margin: 0;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.jt-occ-opt:hover { border-color: var(--navy); }
.jt-occ-opt.is-on {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
  background: #F9F9F9;
}
/* The native control is hidden and replaced by the box below, exactly as the
   form does it — but it stays in the DOM and focusable so keyboard and screen
   readers still work. */
.jt-occ-opt input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.jt-occ-opt > span { display: flex; align-items: center; gap: 9px; }
.jt-occ-opt > span::before {
  content: ''; display: block; flex-shrink: 0;
  width: 18px; height: 18px;
  border: 2px solid #c8c8c8; border-radius: 4px; background: #fff;
  transition: background-color 0.15s, border-color 0.15s;
}
.jt-occ-opt:hover > span::before { border-color: var(--navy); }
/* Both forms, for the same reason the form field needs both: renderOccupancy()
   writes `checked` when it rebuilds the list, and Chromium does not always
   repaint a :has() match for a box that was checked programmatically rather
   than clicked. */
.jt-occ-opt.is-on > span::before,
.jt-occ-opt input:checked ~ span::before {
  background-color: var(--navy);
  border-color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* --cerise, not --orange: the design-system table in CLAUDE.md lists an
   --orange token for price highlights, but no stylesheet in this theme has ever
   defined it. `color: var(--orange)` is therefore invalid at computed-value
   time and silently falls back to the INHERITED colour — so the upcharge
   rendered as ordinary body text with no error anywhere. */
.jt-occ-opt em {
  font-style: normal;
  font-weight: 600;
  color: var(--cerise);
}

@media (max-width: 560px) {
  .jt-occ-row { align-items: flex-start; gap: 10px; }
  .jt-occ-name { flex: 1 1 100%; }
  .jt-occ-opts { width: 100%; }
  .jt-occ-opt { flex: 1 1 100%; white-space: normal; }
}