/* Extracted from assets/modal.css — PAGES SHELL (standalone pages layout/chrome/embed mode) — Step 9 */

/* Standalone pages: force a dark canvas and kill UA margins */
html,
body {
  margin: 0;
  padding: 0;
  background-color: #0b0d10;
  /* same dark as site */
}

/* Ensure the page wrapper itself is dark and spans the viewport */
body.page,
.page {
  background-color: #0b0d10;
  min-height: 100svh;
  /* mobile-safe viewport height */
}

/* Sections on these pages should be transparent (no white cards) */
.page .section {
  background: transparent;
}

/* --- Standalone mobile pages: ensure dark text colors render correctly --- */

:root {
  /* fallback tokens in case main theme vars aren't loaded on these pages */
  --page-bg: #0b0d10;
  --page-fg: #e8eef6;
  --field-bg: #0f1317;
  --field-border: #2b3239;
  --muted: #a8b2bd;
  --page-section-gap-mobile: 12px;
}

/* page canvas + default text color */
html,
body {
  color-scheme: dark;
}

body.page,
.page {
  background: var(--page-bg);
  color: var(--page-fg);
}

/* headings and small text on the card */
.page h1,
.page h2,
.page h3,
.page p,
.page .muted {
  color: var(--page-fg);
}

.page .muted {
  color: var(--muted);
}

/* form controls: background, border, text color */
.page input,
.page textarea,
.page select {
  background-color: var(--field-bg);
  border-color: var(--field-border);
  color: var(--page-fg);
  -webkit-text-fill-color: var(--page-fg);
  /* Safari/iPadOS */
}

/* iOS Safari autofill override for mobile pages */
.page input:-webkit-autofill,
.page input:-webkit-autofill:hover,
.page input:-webkit-autofill:focus,
.page input:-webkit-autofill:active,
.page textarea:-webkit-autofill,
.page textarea:-webkit-autofill:hover,
.page textarea:-webkit-autofill:focus,
.page textarea:-webkit-autofill:active,
.page select:-webkit-autofill,
.page select:-webkit-autofill:hover,
.page select:-webkit-autofill:focus,
.page select:-webkit-autofill:active {
  -webkit-text-fill-color: #e8eef6 !important;
  /* explicit, not var(--page-fg) — iOS 16 fix */
  box-shadow: 0 0 0 1000px #0f1317 inset !important;
  /* explicit, not var(--field-bg) */
  -webkit-box-shadow: 0 0 0 1000px #0f1317 inset !important;
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
  filter: none !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* iOS 16 WebKit internal autofill (Vivaldi/Safari) */
.page input:-internal-autofill-selected,
.page textarea:-internal-autofill-selected,
.page select:-internal-autofill-selected {
  -webkit-text-fill-color: #e8eef6 !important;
  /* explicit — iOS 16 fix */
  box-shadow: 0 0 0 1000px #0f1317 inset !important;
  -webkit-box-shadow: 0 0 0 1000px #0f1317 inset !important;
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
  filter: none !important;
}

/* placeholder text */
.page ::placeholder {
  color: rgba(232, 238, 246, .55);
}

/* links inside the card if you want them not-blue-on-black */
.page a {
  color: var(--page-fg);
  text-decoration: underline;
}

/* === Pages (standalone) mobile centering =================== */
/* Applies to /pages/*.html which wrap content in .page */
@media (max-width: 768px) {

  /* text & section shells */
  .page .lead-xl,
  .page h1,
  .page h2,
  .page h3,
  .page h4,
  .page p,
  .page .section {
    text-align: center;
  }

  /* layout blocks center themselves */
  .page .section,
  .page .plans-cards,
  .page .policies-box,
  .page .actions {
    margin-left: auto;
    margin-right: auto;
  }

  /* form to single column + centered controls */
  .page .form-grid {
    display: block;
  }

  .page .form-grid>*,
  .page .field,
  .page input,
  .page select,
  .page textarea {
    width: 100%;
  }

  /* wizard chips & buttons */
  .page .chips-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .page .wiz-actions {
    display: flex;
    justify-content: center;
  }

  .page .actions {
    display: flex;
    justify-content: center;
  }

  /* agreement row */
  .page .agree-policy {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
  }

  /* keep bullets readable (left), but center the box itself */
  .page .policies-box ul {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .page .section+.section,
  .page .section>.section {
    margin-top: var(--page-section-gap-mobile);
  }

  .page h3 p {
    margin: 4px 0 8px;
  }

  .page h3 p .note-inline {
    display: block;
    margin-left: 0;
  }
}

/* === Pages (standalone) mobile overflow fix ================= */
@media (max-width: 768px) {

  /* Ensure all page children size inside the viewport */
  .page,
  .page * {
    box-sizing: border-box;
  }

  /* Keep big blocks from exceeding their parents */
  .page .section,
  .page .table,
  .page .plans-cards,
  .page .policies-box,
  .page .form-grid,
  .page .form-grid>*,
  .page input,
  .page select,
  .page textarea,
  .page .wiz-recap,
  .page .wiz-day-block {
    max-width: 100%;
  }

  /* Form fields: full-width without bleed */
  .page .form-grid {
    display: block;
  }

  .page .form-grid>* {
    width: 100%;
  }

  /* Policies list: left-align text, but keep the box centered */
  .page .policies-box {
    margin-left: auto;
    margin-right: auto;
  }

  .page .policies-box ul {
    text-align: left;
    padding-left: 0;
  }

  .page .policies-box li {
    list-style: none;
  }

  /* “Agree to policies” row: stay centered and on one line */
  .page .agree-policy {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    white-space: nowrap;
  }

  /* Buttons rows centered */
  .page .wiz-actions,
  .page .actions {
    display: flex;
    justify-content: center;
  }
}

/* Override with equal specificity to beat the earlier rule */
.page .policies-box .policies {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.page .policies-box .policies li {
  margin: 8px 0;
}

/* Back link spacing on standalone pages */
.page .topbar a {
  display: inline-block;
  padding: .55rem 0;
  /* top & bottom padding */
}

.page .topbar {
  margin-bottom: .55rem;
  /* same as link's top padding */
}

/* Back link spacing when placed at the bottom of a page */
.page .bottombar {
  margin-top: 0.55rem;
  /* space above link, same as topbar bottom space */
  text-align: left;
  /* keep link aligned with content */
}

.page .bottombar a {
  display: inline-block;
  padding: 0.55rem 0;
  /* vertical touch space */
}

/* Back-link style (top and bottom) — consistent across pages & states */
.page .topbar a,
.page .bottombar a {
  display: inline-block;
  padding: .55rem 0;
  /* touch target + symmetry */
  text-decoration: none;
  /* kill default underline */
  color: var(--link-soft, #8ec5ff);
  /* pick a consistent link color */
}

.page .topbar a:visited,
.page .bottombar a:visited {
  color: var(--link-soft, #8ec5ff);
  /* keep visited same color */
  text-decoration: none;
  /* kill default underline */

}

/* spacing blocks you already added */
.page .topbar {
  margin-bottom: .55rem;
}

.page .bottombar {
  margin-top: .55rem;
}

@media (max-width: 768px) {

  /* Mobile pages: enforce consistent vertical rhythm inside forms */
  .page .form-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* tweak once here, affects all pages */
  }

  /* Prevent random margin fights */
  .page .form-grid>* {
    margin: 0 !important;
  }

  /* Fix date input sizing on all page forms (choreography, etc.) */
  .page input,
  .page select {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  /* iOS date input specific fix */
  .page input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    padding: 8px 12px !important;
  }

  .page textarea {
    height: auto !important;
    min-height: 100px;
    max-height: none !important;
  }
}

/* Normal page chrome */
.page-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 56px;
}

/* Embed mode: strip page chrome so it looks like modal content */
.is-embedded .topbar,
.is-embedded .page-crumb {
  display: none !important;
}

.is-embedded body {
  background: transparent;
}

.is-embedded .page-wrap {
  padding: 0;
  max-width: none;
}

body {
  margin: 0;
  padding: 16px;
  background: #000;
  color: #e9ecf1;
}

.page {
  max-width: 960px;
  margin: 0 auto;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px
}

.topbar a {
  color: #9be0ff;
  text-decoration: none
}