/* ============================================
   MERIDIAN OCEANIC — CHARTER REQUEST
   Two steps: request, then summary + agreement.
   Inherits the palette and fonts from styles.css.
   ============================================ */

.ch-body {
  min-height: 100vh;
  background: var(--dark);
}

/* ---- Top bar ---- */
.ch-top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1.1rem, 4vw, 2.5rem);
  background: rgba(5, 14, 30, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
}

.ch-back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(226, 232, 240, 0.6);
  text-decoration: none;
  transition: color 0.25s;
}

.ch-back:hover { color: var(--platinum); }
.ch-back img { height: 26px; width: auto; display: block; }

.ch-top-actions { display: flex; gap: 0.5rem; }

/* ---- Layout ---- */
.ch-main {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1.1rem, 4vw, 2rem) 5rem;
}

.ch-progress {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  margin-bottom: clamp(1.75rem, 5vw, 2.75rem);
}

.ch-progress li {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-top: 0.7rem;
  border-top: 2px solid var(--glass-border);
  transition: border-color 0.4s, color 0.4s;
}

.ch-progress i {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(226, 232, 240, 0.3);
}

.ch-progress span {
  font-size: 0.76rem;
  color: rgba(226, 232, 240, 0.45);
}

.ch-progress li.is-on { border-top-color: var(--orange); }
.ch-progress li.is-on i { color: var(--orange); }
.ch-progress li.is-on span { color: var(--platinum); }

/* one step visible at a time — each reads as its own page */
.ch-panel { display: none; }
.ch-panel.is-on { display: block; animation: ch-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes ch-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-panel.is-on { animation: none; }
}

/* ---- Type ---- */
.ch-h1 {
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.ch-h2 {
  font-size: 0.72rem;
  font-family: var(--font-tech);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 2rem 0 0.75rem;
}

.ch-lead {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(226, 232, 240, 0.6);
  margin-bottom: 2rem;
}

.ch-hint {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: rgba(226, 232, 240, 0.4);
}

.ch-note {
  margin-top: 0.8rem;
  font-size: 0.72rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(226, 232, 240, 0.4);
}

/* ---- Fields ---- */
.ch-field { margin-bottom: 2rem; }

.ch-label {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-tech);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.55);
}

.ch-label-sm { margin-top: 1rem; }

.ch-input {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-main);
  font-size: 0.95rem;
  color: var(--platinum);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  transition: border-color 0.25s, background 0.25s;
}

/* iOS Safari zooms the page in on focus when a field's text is under 16px, and
   never zooms back out — on a booking form that means every tap from the date
   box onward is made in a magnified layout the reader did not ask for. Raising
   the field to the threshold is what stops it; the page itself pays nothing. */
@media (max-width: 640px) {
  .ch-input { font-size: 16px; }
}

.ch-input::placeholder { color: rgba(226, 232, 240, 0.3); }

.ch-input:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(255, 79, 0, 0.05);
}

/* the native date picker indicator is black-on-dark by default */
.ch-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.5;
  cursor: pointer;
}
.ch-input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ---- Weather strip ---- */
.ch-weather {
  display: none;
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  background: var(--glass);
}

.ch-weather.is-on { display: block; }

.ch-weather-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.ch-weather-main {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: var(--platinum);
}

.ch-weather-icon { font-size: 1.2rem; line-height: 1; }

.ch-weather-stat {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: rgba(226, 232, 240, 0.55);
}

.ch-weather-stat b {
  color: var(--platinum);
  font-weight: 500;
}

/* verdict on whether the day is fit for flight */
.ch-verdict {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--glass-border);
  font-family: var(--font-tech);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ch-verdict[data-v="good"] { color: var(--neon); }
.ch-verdict[data-v="ok"] { color: #FFA069; }
.ch-verdict[data-v="poor"] { color: var(--orange); }
.ch-verdict[data-v="none"] { color: rgba(226, 232, 240, 0.45); }

/* ---- Passenger stepper ---- */
.ch-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--glass);
}

.ch-stepper button {
  width: 46px;
  height: 46px;
  font-size: 1.2rem;
  color: var(--platinum);
  background: none;
  border: 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.ch-stepper button:hover:not(:disabled) { background: rgba(255, 79, 0, 0.16); color: var(--orange); }
.ch-stepper button:disabled { opacity: 0.25; cursor: not-allowed; }

.ch-stepper output {
  min-width: 56px;
  text-align: center;
  font-family: var(--font-tech);
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--platinum);
}

/* ---- Add-ons ---- */
.ch-addons { display: grid; gap: 0.5rem; }

.ch-addon {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  background: var(--glass);
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}

.ch-addon:hover { border-color: rgba(255, 79, 0, 0.4); }
.ch-addon.is-on { border-color: var(--orange); background: rgba(255, 79, 0, 0.07); }

.ch-addon input { accent-color: var(--orange); width: 16px; height: 16px; cursor: pointer; }
.ch-addon-name { flex: 1; font-size: 0.88rem; }

.ch-addon-price {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: rgba(226, 232, 240, 0.55);
}

.ch-addon.is-on .ch-addon-price { color: var(--orange); }

/* ---- Total ---- */
.ch-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1rem 0;
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--glass-border);
  font-family: var(--font-tech);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.55);
}

.ch-total b {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--platinum);
  font-variant-numeric: tabular-nums;
}

/* ---- Buttons ---- */
.ch-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem;
  font-family: var(--font-main);
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  background: var(--orange);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.25s, opacity 0.25s;
}

.ch-cta:hover:not(:disabled) { filter: brightness(1.12); }

.ch-cta:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.ch-cta-ghost {
  margin-top: 1.5rem;
  color: var(--platinum);
  background: none;
  border: 1px solid var(--glass-border);
}

.ch-cta-ghost:hover { border-color: var(--orange); filter: none; }

.ch-backstep {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.5rem;
  padding: 0;
  font-family: var(--font-main);
  font-size: 0.78rem;
  color: rgba(226, 232, 240, 0.5);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.25s;
}

.ch-backstep:hover { color: var(--orange); }

/* ---- Summary ---- */
.ch-summary {
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  background: var(--glass);
}

.ch-summary div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--glass-border);
}

.ch-summary div:last-child { border-bottom: 0; padding-bottom: 0; }
.ch-summary div:first-child { padding-top: 0; }

.ch-summary dt {
  font-family: var(--font-tech);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.45);
}

.ch-summary dd {
  font-size: 0.88rem;
  text-align: right;
  color: var(--platinum);
}

.ch-summary .ch-sum-total dt { color: var(--orange); }

.ch-summary .ch-sum-total dd {
  font-family: var(--font-tech);
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- Confirmations + agreement ---- */
.ch-confirm { margin-top: 1.25rem; }

.ch-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.8);
  cursor: pointer;
}

.ch-check input {
  flex: none;
  margin-top: 0.15rem;
  width: 16px;
  height: 16px;
  accent-color: var(--orange);
  cursor: pointer;
}

.ch-agreement {
  height: 230px;
  overflow-y: auto;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  background: rgba(8, 22, 51, 0.5);
  font-size: 0.78rem;
  line-height: 1.65;
  color: rgba(226, 232, 240, 0.7);
}

.ch-agreement:focus { outline: 1px solid var(--orange); }
.ch-agreement h4 {
  margin: 1.1rem 0 0.3rem;
  font-family: var(--font-tech);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--platinum);
}
.ch-agreement h4:first-child { margin-top: 0; }
.ch-agreement p { margin-bottom: 0.5rem; }

/* ---- Done ---- */
.ch-done { text-align: center; padding-top: 2rem; }
.ch-done > svg { color: var(--neon); margin-bottom: 1.25rem; }
.ch-done .ch-lead { max-width: 26rem; margin-inline: auto; }

#chRef {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--orange);
  margin-bottom: 1rem;
}

/* ============================================
   Light mode
   ============================================ */
body.light-mode.ch-body { background: #EBF2FA; }

body.light-mode .ch-top {
  background: rgba(235, 242, 250, 0.85);
  border-bottom-color: rgba(5, 14, 30, 0.1);
}

body.light-mode .ch-back { color: rgba(5, 14, 30, 0.55); }
body.light-mode .ch-back:hover { color: #050E1E; }

body.light-mode .ch-progress li { border-top-color: rgba(5, 14, 30, 0.12); }
body.light-mode .ch-progress i { color: rgba(5, 14, 30, 0.35); }
body.light-mode .ch-progress span { color: rgba(5, 14, 30, 0.5); }
body.light-mode .ch-progress li.is-on span { color: #050E1E; }

body.light-mode .ch-lead,
body.light-mode .ch-hint,
body.light-mode .ch-note { color: rgba(5, 14, 30, 0.55); }

body.light-mode .ch-label { color: rgba(5, 14, 30, 0.6); }

body.light-mode .ch-input,
body.light-mode .ch-weather,
body.light-mode .ch-stepper,
body.light-mode .ch-addon,
body.light-mode .ch-summary {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(5, 14, 30, 0.12);
  color: #050E1E;
}

body.light-mode .ch-input { color: #050E1E; }
body.light-mode .ch-input::placeholder { color: rgba(5, 14, 30, 0.35); }
body.light-mode .ch-input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }

body.light-mode .ch-stepper button,
body.light-mode .ch-stepper output,
body.light-mode .ch-weather-main,
body.light-mode .ch-summary dd,
body.light-mode .ch-total b { color: #050E1E; }

body.light-mode .ch-weather-stat { color: rgba(5, 14, 30, 0.55); }
body.light-mode .ch-weather-stat b { color: #050E1E; }
body.light-mode .ch-verdict { border-top-color: rgba(5, 14, 30, 0.12); }
/* lime is invisible on a pale background — same petrol the 3D section uses */
body.light-mode .ch-verdict[data-v="good"] { color: #0B7C8A; }
body.light-mode .ch-verdict[data-v="ok"] { color: #C25100; }
body.light-mode .ch-verdict[data-v="none"] { color: rgba(5, 14, 30, 0.45); }

body.light-mode .ch-addon-price { color: rgba(5, 14, 30, 0.55); }
body.light-mode .ch-addon.is-on { background: rgba(255, 79, 0, 0.08); }

body.light-mode .ch-total,
body.light-mode .ch-summary dt { color: rgba(5, 14, 30, 0.55); }
body.light-mode .ch-total,
body.light-mode .ch-summary div { border-color: rgba(5, 14, 30, 0.12); }

body.light-mode .ch-check { color: rgba(5, 14, 30, 0.85); }

body.light-mode .ch-agreement {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(5, 14, 30, 0.12);
  color: rgba(5, 14, 30, 0.75);
}
body.light-mode .ch-agreement h4 { color: #050E1E; }

body.light-mode .ch-cta-ghost { color: #050E1E; border-color: rgba(5, 14, 30, 0.2); }
body.light-mode .ch-backstep { color: rgba(5, 14, 30, 0.55); }
body.light-mode .ch-done > svg { color: #0B7C8A; }

/* ---- Narrow ---- */
@media (max-width: 560px) {
  .ch-progress span { font-size: 0.68rem; }
  .ch-weather-row { gap: 0.75rem; }
  .ch-summary dd { font-size: 0.82rem; }
}