/* ==========================================================================
   Hello Sri Lanka Travel — Partner Registration Page
   Page-specific rules only — reset, header/brand, buttons, form fields, and
   toast layout are all inherited from ../booking.css (loaded first — see
   index.html). The color tokens below override booking.css's default
   ZeroPlastic green palette with the same red/premium tourism palette used
   on the guest experience-landing page (experience-landing-v2.css), so this
   registration page reads as Hello Sri Lanka branded rather than ZeroPlastic
   branded, without touching booking.css itself (shared with other pages).
   ========================================================================== */
:root {
  --color-primary: #B22222;
  --color-primary-dark: #8C1D18;
  --color-primary-light: #F6E3D6;
  --color-primary-soft: #F0D2BC;
  --color-bg: #FFF9F4;
  --color-text: #2F2A28;
  --color-text-muted: #6E5E56;
  --color-text-faint: #8C7B71;
  --color-border: #EBDDCC;
  --color-border-strong: #DCC4A8;
  --color-danger: #8C1D18;
  --color-danger-bg: #F6E3D6;
  --color-focus: #B22222;
}

/* A single, right-aligned action button (no "Back" step-nav button on this
   page, unlike the multi-step booking flow) — step-nav's own flex layout
   already spaces two children apart, so with only one child it needs an
   explicit alignment override. */
.step-nav-end {
  justify-content: center;
}

/* ── Center-aligned page content ─────────────────────────────────────────
   ../booking.css already centers .main as a block (max-width + margin:auto),
   but its text content and the form grid itself are left-aligned within that
   block by default. Scoped to #formScreen only (this page's own container),
   so the shared booking.css rules other pages rely on are untouched. Field
   labels/inputs stay left-aligned (readable) — only the heading, intro text,
   helper text, status messages, and the form/submit containers are centered. */
#formScreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#formScreen .step-header,
#formScreen .step-subtitle {
  max-width: 60ch;
}
#partnerForm {
  width: 100%;
  max-width: 480px;
  text-align: left; /* field labels/values must stay readable, not centered */
  margin: 0 auto;
}
#formScreen .step-nav {
  width: 100%;
  max-width: 480px;
}
#toast {
  text-align: center;
}

/* Inline Retry affordance shown alongside the Partner Type field-error message when
   get_partner_types fails to load (see partner.js's showPartnerTypesError()). */
.btn-inline-retry {
  display: inline;
  width: auto;
  font: inherit;
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--color-primary);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

/* Checkbox rows read better as a plain flex row (checkbox + label text) than
   the default .field column layout, which is built for text/select inputs. */
.field-checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-3);
}
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--color-text);
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--color-primary);
}
.field-checkbox.has-error .checkbox-label span { color: var(--color-danger); }

/* Lets a field span both columns of the existing .form-grid.two-col layout —
   used for Website and both checkbox rows, which read awkwardly split
   side-by-side with an unrelated neighboring field. */
@media (min-width: 640px) {
  .field-span-2 { grid-column: span 2; }
}