/* =====================================================================
   Envision Asia 2027 — Design System
   Direction: "Wise-clean × Thai gold"
   - White/warm-sand surfaces, big rounded cards, generous whitespace
   - Sapphire blue (from deck cover) + Thai temple gold accents
   - Poppins (Latin display) + Noto Sans Thai (Thai body)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

:root {
  --sapphire:      #16294F;
  --sapphire-deep: #0E1C3A;
  --sapphire-ink:  #0A1530;
  --gold:          #C3A572;
  --gold-soft:     #F3ECDC;
  --sand:          #FAF8F3;
  --white:         #FFFFFF;
  --mist:          #EEF1F6;
  --ink:           #141B2B;
  --ink-soft:      #5C6474;
  --line:          #E6E8EE;
  --success:       #178A50;
  --danger:        #C23B3B;

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow-card: 0 2px 8px rgba(10, 21, 48, .06), 0 12px 32px rgba(10, 21, 48, .07);
  --shadow-pop:  0 4px 12px rgba(10, 21, 48, .10), 0 24px 48px rgba(10, 21, 48, .12);

  --font-display: 'Poppins', 'Noto Sans Thai', sans-serif;
  --font-body: 'Noto Sans Thai', 'Poppins', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--sand);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--sapphire-ink); line-height: 1.25; }
a { color: var(--sapphire); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 680px; margin: 0 auto; padding: 0 24px; }

/* ---------- Top navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; max-width: 1120px; margin: 0 auto; padding: 0 24px;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--sapphire-ink); }
.brand svg { flex: none; }
.brand-year { color: var(--gold); }
.nav-links { display: flex; align-items: center; gap: 24px; font-weight: 500; font-size: .95rem; }

/* Visitors have six links and sit comfortably. Staff have twelve, which no
   amount of tightening fits on a laptop: shrinking them to .78rem left the
   wordmark touching the first item. Their menu opens from the burger at every
   width instead, which keeps each label at a readable size. */
@media (min-width: 861px) {
  .nav-inner-staff { position: relative; }
  .nav-inner-staff .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; margin: -10px -8px -10px 0;
    cursor: pointer; border-radius: var(--radius-sm);
  }
  .nav-inner-staff .nav-burger span {
    display: block; height: 2px; width: 100%;
    background: var(--sapphire-ink); border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .nav-inner-staff .nav-links {
    position: absolute; top: calc(100% + 14px); right: 0; left: auto;
    width: 260px; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    padding: 0 16px; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height .3s ease, opacity .2s ease, padding .3s ease;
    z-index: 60;
  }
  .nav-inner-staff .nav-links a {
    padding: 12px 4px; font-size: .95rem; white-space: normal;
    border-bottom: 1px solid var(--line);
  }
  .nav-inner-staff .nav-links a:last-child { border-bottom: none; }
  .nav-inner-staff .nav-links .btn {
    width: 100%; justify-content: center; margin: 12px 0; border-radius: var(--radius-sm);
  }
  .nav-inner-staff .nav-toggle:checked ~ .nav-links {
    max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain;
    opacity: 1; pointer-events: auto; padding: 8px 16px 14px;
  }
  .nav-inner-staff .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-inner-staff .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-inner-staff .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-inner-staff .nav-burger:focus-visible { outline: 3px solid rgba(22,41,79,.4); outline-offset: 2px; }
}
.nav-links a { color: var(--ink-soft); white-space: nowrap; }
/* Buttons in the nav keep their own colours — the muted link colour above made
   the Register button look greyed out, as if it were disabled. */
.nav-links a.btn-primary { color: #fff; }
.nav-links a.btn-gold { color: #221A0E; }
.nav-links a.btn-ghost { color: var(--sapphire); }
.nav-links a.btn:hover { text-decoration: none; }
.nav-links a:hover { color: var(--sapphire); text-decoration: none; }

/* hamburger toggle — hidden on desktop */
.nav-toggle, .nav-burger { display: none; }

@media (max-width: 860px) {
  .nav-inner { position: relative; }
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; margin: -10px -8px -10px 0;
    cursor: pointer; border-radius: var(--radius-sm);
  }
  .nav-burger span {
    display: block; height: 2px; width: 100%;
    background: var(--sapphire-ink); border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .nav-links {
    position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-pop);
    padding: 0 20px; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height .3s ease, opacity .2s ease, padding .3s ease;
  }
  .nav-links a {
    padding: 14px 4px; font-size: 1rem; white-space: normal;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links .btn { width: 100%; justify-content: center; margin-top: 12px; border-radius: var(--radius-sm); }
  .nav-toggle:checked ~ .nav-links {
    max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain;
    opacity: 1; pointer-events: auto; padding: 8px 20px 18px;
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-burger:focus-visible { outline: 3px solid rgba(22,41,79,.4); outline-offset: 2px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  border: none; border-radius: 999px; cursor: pointer;
  padding: 14px 28px; transition: transform .15s ease, box-shadow .15s ease, background .15s;
  text-decoration: none !important;
}
.btn-primary { background: var(--sapphire); color: #fff; }
.btn-primary:hover { background: var(--sapphire-deep); transform: translateY(-1px); box-shadow: var(--shadow-pop); }
.btn-gold { background: linear-gradient(135deg, #D9C08F 0%, #C3A572 55%, #B2925C 100%); color: #221A0E; }
.btn-gold:hover { filter: brightness(.94); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--sapphire); border: 1.5px solid var(--sapphire); }
.btn-ghost:hover { background: var(--mist); }
.btn-sm { padding: 9px 18px; font-size: .88rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- Hero with rotating Thailand images ---------- */
.hero {
  position: relative; min-height: 620px; display: flex; align-items: center;
  overflow: hidden; color: #fff;
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center;
  transition: opacity 1.8s ease;
  transform: scale(1.06);
}
.hero-slide.active {
  opacity: 1;
  animation: kenburns 9s ease-out forwards;
}
@keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1.0); } }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(8,15,34,.84) 0%, rgba(8,15,34,.58) 45%, rgba(8,15,34,.18) 100%);
}
.hero-content { position: relative; z-index: 2; padding: 96px 0; max-width: 640px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft);
  margin-bottom: 18px;
}
.hero-eyebrow::before { content: ''; width: 36px; height: 1.5px; background: linear-gradient(90deg, transparent, #D9C08F); }
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; color: #fff;
  letter-spacing: -.01em; margin-bottom: 18px;
}
.hero h1 .accent { color: var(--gold); }
.hero p.lead { font-size: 1.15rem; color: rgba(255,255,255,.88); margin-bottom: 32px; max-width: 520px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 40px; font-size: .95rem; }
.hero-meta div { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.92); }
.hero-meta svg { color: var(--gold); flex: none; }
.hero-dots { position: absolute; z-index: 2; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.hero-dots button {
  width: 8px; height: 8px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(255,255,255,.45); transition: all .3s;
}
.hero-dots button.active { background: var(--gold); width: 26px; }

/* ---------- Simple champagne divider ---------- */
.thai-divider { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 18px 0; }
.thai-divider .rule-line { width: 90px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.thai-divider .rule-line:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.thai-divider .rule-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--gold); flex: none; }

/* ---------- Sections & cards ---------- */
.section { padding: 80px 0; }
.section-head { max-width: 620px; margin: 0 auto 48px; text-align: center; }
.section-eyebrow {
  font-family: var(--font-display); font-weight: 600; font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 12px; }
.section-head p { color: var(--ink-soft); }

.card {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 32px;
}
.card + .card { margin-top: 20px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* Side by side, each card only as tall as its own content.
   The default stretches both to match the taller one, which leaves a large
   blank area whenever one card is short — a one-line "no payment yet" panel
   should not be as tall as a form. Equal height still suits the public pages
   where two cards are being compared, so it stays the default there. */
.grid-2.grid-top { align-items: start; }
/* Grids space their own children, so the stacked-card margin must not apply here —
   otherwise every card after the first is pushed down and the row looks broken. */
.grid-2 > .card + .card,
.grid-3 > .card + .card { margin-top: 0; }
/* Equal-height cards with their content optically centred.
   flex-between cards lay out horizontally on purpose, so leave those alone. */
.grid-2 > .card:not(.flex-between),
.grid-3 > .card:not(.flex-between) { display: flex; flex-direction: column; }
.grid-3 > .card.text-center { justify-content: center; }
@media (max-width: 860px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Registration wizard ---------- */
.wizard-layout {
  display: grid; grid-template-columns: 260px 1fr; gap: 40px;
  padding: 48px 0 96px;
}
@media (max-width: 900px) { .wizard-layout { grid-template-columns: 1fr; gap: 24px; } }

.stepper { position: sticky; top: 96px; align-self: start; }
.step-item {
  display: flex; gap: 14px; padding: 14px 0; position: relative;
}
.step-item:not(:last-child)::after {
  content: ''; position: absolute; left: 15px; top: 46px; bottom: -6px;
  width: 2px; background: var(--line);
}
.step-item.done:not(:last-child)::after { background: var(--gold); }
.step-dot {
  width: 32px; height: 32px; flex: none; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mist); color: var(--ink-soft);
  font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  border: 2px solid var(--line); z-index: 1;
}
.step-item.active .step-dot { background: var(--sapphire); border-color: var(--sapphire); color: #fff; }
.step-item.done .step-dot { background: var(--gold); border-color: var(--gold); color: #fff; }
.step-label { font-weight: 600; font-size: .95rem; color: var(--ink); }
.step-sub { font-size: .8rem; color: var(--ink-soft); }
.step-item.disabled { opacity: .5; }

@media (max-width: 900px) {
  .stepper { position: static; display: flex; overflow-x: auto; gap: 4px; padding-bottom: 8px; }
  .step-item { flex-direction: column; align-items: center; min-width: 110px; text-align: center; gap: 8px; }
  .step-item::after { display: none !important; }
}

/* ---------- Forms (Wise-style: big, calm, one thing at a time) ---------- */
.field { margin-bottom: 22px; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 8px; color: var(--sapphire-ink); }
.field .hint { font-size: .82rem; color: var(--ink-soft); margin-top: 6px; }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=date], .field input[type=tel], .field input[type=number],
.field input[type=url], .field input[type=search], .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sapphire);
  box-shadow: 0 0 0 4px rgba(22, 41, 79, .14);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 120px; gap: 16px; align-items: start; }

/* A title, then two names of equal width. The generic three-column row puts a
   narrow box last, which is wrong here: the two names must match. */
.field-row-name { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 640px) {
  .field-row-name { grid-template-columns: 1fr; }
}
@media (max-width: 720px) { .field-row-3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

/* Choice cards — radio as big tappable cards */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .choice-grid { grid-template-columns: 1fr; } }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; }
.choice-card {
  display: block; padding: 18px 20px; border-radius: var(--radius-md);
  border: 1.5px solid var(--line); background: #fff; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.choice-card:hover { border-color: var(--sapphire); }
.choice input:checked + .choice-card {
  border-color: var(--sapphire); background: var(--mist);
  box-shadow: 0 0 0 3px rgba(22,41,79,.14);
}
.choice input:focus-visible + .choice-card { outline: 3px solid rgba(22,41,79,.4); outline-offset: 2px; }
.choice-title { font-weight: 700; font-family: var(--font-display); color: var(--sapphire-ink); display: flex; align-items: center; gap: 8px; }
.choice-desc { font-size: .85rem; color: var(--ink-soft); margin-top: 4px; }
.choice-price { font-family: var(--font-display); font-weight: 700; color: var(--gold); margin-top: 8px; }
.choice-price .strike { color: var(--ink-soft); font-weight: 400; text-decoration: line-through; font-size: .85rem; margin-left: 8px; }

/* Toggle (cruise opt-in) */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; border: 1.5px solid var(--line); border-radius: var(--radius-md); background: #fff;
}

/* ---------- Badges & alerts ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; font-family: var(--font-display);
}
.badge-gold { background: var(--gold-soft); color: #7A6236; }
.badge-blue { background: var(--mist); color: var(--sapphire); }
.badge-green { background: #E4F5EC; color: var(--success); }
.badge-red { background: #FBEAEA; color: var(--danger); }

.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; border-radius: var(--radius-md); margin-bottom: 20px; font-size: .93rem;
}
.alert svg { flex: none; margin-top: 2px; }
.alert-info { background: var(--mist); color: var(--sapphire-ink); }
.alert-success { background: #E4F5EC; color: #0E5A34; }
.alert-warn { background: #FFF6E4; color: #7A5A12; }
.alert-error { background: #FBEAEA; color: #7C2222; }

/* ---------- Roommate cards ---------- */
.mate-card {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; border: 1.5px solid var(--line); border-radius: var(--radius-md);
  background: #fff; margin-bottom: 12px;
}
.mate-avatar {
  width: 46px; height: 46px; border-radius: 999px; flex: none;
  background: var(--mist); color: var(--sapphire);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  overflow: hidden;                    /* a photo fills the circle */
}
.mate-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mate-info { flex: 1; min-width: 0; }
.mate-name { font-weight: 700; color: var(--sapphire-ink); }
.mate-meta { font-size: .82rem; color: var(--ink-soft); }
.match-score { font-size: .78rem; color: var(--gold); font-weight: 600; }

/* Roommate code display */
.code-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--sapphire-ink); color: #fff; border-radius: var(--radius-md);
  padding: 18px 22px; margin: 12px 0;
}
.code-box .code { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: .08em; }

/* ---------- Summary / price panel ---------- */
.summary-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.summary-row:last-child { border-bottom: none; }
.summary-row .total { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--sapphire-ink); }

/* ---------- Tables (admin) ---------- */
/* inputs sitting inside a data table need their own breathing room */
table.data input[type=text], table.data input[type=number], table.data select {
  padding: 8px 10px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: .88rem; background: #fff; max-width: 100%;
}
table.data input:focus, table.data select:focus {
  outline: none; border-color: var(--sapphire); box-shadow: 0 0 0 3px rgba(22,41,79,.10);
}
table.data td { vertical-align: middle; }

.table-wrap { overflow-x: auto; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th {
  text-align: left; padding: 14px 16px; background: var(--mist);
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--sapphire-ink);
  white-space: nowrap;
}
table.data td { padding: 13px 16px; border-top: 1px solid var(--line); vertical-align: top; }
table.data tr:hover td { background: #FBFCFE; }

/* Admin stat cards */
.stat-card { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 22px 24px; }
.stat-num { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--sapphire-ink); }
.stat-label { font-size: .85rem; color: var(--ink-soft); }
.stat-card.gold .stat-num { color: var(--gold); }



/* ---------- Program schedule (two-column rows) ---------- */
.prog-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 28px; }
.prog-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.prog-date {
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  letter-spacing: .04em; padding: 5px 14px; border-radius: 999px;
  background: var(--mist); color: var(--sapphire); white-space: nowrap;
}
.prog-date.gold { background: var(--gold-soft); color: #7A6236; }
.prog-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--sapphire-ink); }
.prog-row {
  display: grid; grid-template-columns: 130px 1fr; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--line); align-items: baseline;
}
.prog-row:first-of-type { border-top: none; }
.prog-time {
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.prog-act { font-size: .95rem; color: var(--ink); }
@media (max-width: 560px) {
  .prog-row { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
  .prog-time { font-size: .82rem; }
}

/* ---------- Image gallery (hotels / cruise cards) ---------- */
/* One equal-height row: a wide lead image + two supporting images.
   Every cell is the same fixed height, so the strip always lines up. */
.img-gallery {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6px;
  height: 220px;                       /* fixed strip height keeps all cells equal */
  border-radius: var(--radius-md); overflow: hidden; margin-bottom: 18px;
}
.img-gallery .ph {
  position: relative; height: 100%; min-height: 0;
  background: linear-gradient(135deg, var(--mist), #DDE3EE);
  display: flex; align-items: flex-end; padding: 10px;
  color: var(--sapphire-ink); overflow: hidden;
}
.img-gallery .ph img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 1;                          /* covers the placeholder icon below it */
}
.img-gallery .ph .ph-icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%);
  color: var(--gold); opacity: .5;
  z-index: 0;                          /* only visible while no photo has loaded */
}
.img-gallery .ph .ph-label {
  position: relative; z-index: 2; font-family: var(--font-display); font-weight: 600;
  font-size: .72rem; letter-spacing: .02em; background: rgba(255,255,255,.85);
  padding: 3px 8px; border-radius: 6px; backdrop-filter: blur(4px);
}
@media (max-width: 560px) {
  /* stack: big lead image on top, two smaller below — still equal within each row */
  .img-gallery { grid-template-columns: 1fr 1fr; height: auto; }
  .img-gallery .ph { height: 130px; }
  .img-gallery .ph:first-child { grid-column: span 2; height: 170px; }
}
.why-price { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--ink-soft); margin-top: 10px; }
.why-price svg { color: var(--gold); flex: none; margin-top: 2px; }


/* ---------- Stepper with progress bar ---------- */
.stepper-progress { margin-bottom: 22px; }
.stepper-progress-head { display: flex; justify-content: space-between; align-items: baseline;
  font-size: .82rem; font-weight: 600; color: var(--sapphire-ink); margin-bottom: 8px; }
.progress-track { height: 6px; border-radius: 999px; background: var(--mist); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #C3A572, #D9C08F); transition: width .4s ease; }

.step-item { display: flex; gap: 13px; align-items: flex-start; padding: 12px 12px;
  border-radius: var(--radius-md); color: inherit; }
a.step-item:hover { background: var(--mist); text-decoration: none; }
.step-item.current { background: var(--white); box-shadow: var(--shadow-card); }
.step-dot { flex: none; width: 28px; height: 28px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  background: var(--mist); color: var(--ink-soft); }
.step-item.done .step-dot { background: var(--gold); color: #fff; }
.step-item.current .step-dot { background: var(--sapphire); color: #fff; }
.step-item.locked { opacity: .5; }
.step-text { display: flex; flex-direction: column; gap: 1px; }
.step-label { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--sapphire-ink); }
.step-optional { font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft); background: var(--mist);
  padding: 2px 6px; border-radius: 5px; margin-left: 6px; }
.step-sub { font-size: .8rem; color: var(--ink-soft); }
.stepper-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink-soft); }
.stepper-note svg { color: var(--gold); flex: none; margin-top: 2px; }

/* ---------- Suggestion banner (what's still missing) ---------- */
.suggest-banner { display: flex; gap: 14px; align-items: flex-start;
  background: var(--gold-soft); border: 1px solid rgba(195,165,114,.4);
  border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 22px; }
.suggest-banner svg { color: var(--gold); flex: none; margin-top: 2px; }
.suggest-banner strong { font-family: var(--font-display); color: #6E5828; }
.suggest-list { margin: 6px 0 0; padding-left: 18px; font-size: .9rem; color: #6E5828; }
.suggest-list li { margin: 2px 0; }

/* ---------- Photo upload ---------- */
.photo-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.photo-preview { width: 92px; height: 92px; border-radius: var(--radius-md); flex: none;
  background: var(--mist); display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: var(--ink-soft); }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Member table (group) ---------- */
.member-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--line); }
.member-avatar { width: 44px; height: 44px; border-radius: 999px; overflow: hidden;
  background: var(--mist); display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); font-family: var(--font-display); font-weight: 700; font-size: .9rem; }
.member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-name { font-family: var(--font-display); font-weight: 600; color: var(--sapphire-ink); }
.member-meta { font-size: .82rem; color: var(--ink-soft); }
.member-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .member-row { grid-template-columns: 40px 1fr; }
  .member-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- Invite link box ---------- */
.invite-box { display: flex; gap: 8px; align-items: center; background: var(--mist);
  border-radius: var(--radius-md); padding: 10px 10px 10px 16px; flex-wrap: wrap; }
.invite-link { flex: 1; min-width: 200px; font-family: ui-monospace, monospace;
  font-size: .85rem; color: var(--sapphire-ink); word-break: break-all; }


/* ---------- Payment: method panels ---------- */
.pay-panel {
  display: none;                      /* JS reveals the one matching the chosen method */
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: #fff; padding: 20px; margin: 4px 0 22px;
}
.pay-panel.active { display: block; }
.pay-panel-head {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: var(--sapphire-ink); padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.pay-panel-head svg { color: var(--gold); }
.pay-note { font-size: .85rem; color: var(--ink-soft); margin-top: 14px; line-height: 1.6; }

.pay-details { margin-top: 4px; }
.pay-detail {
  display: grid; grid-template-columns: 132px 1fr auto; gap: 14px;
  align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line);
}
.pay-detail:last-child { border-bottom: none; }
.pay-label { font-size: .84rem; color: var(--ink-soft); }
.pay-value { font-weight: 600; color: var(--sapphire-ink); word-break: break-word; }
.pay-mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.05rem; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .pay-detail { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; }
  .pay-label { grid-column: 1 / -1; }
}

/* PromptPay QR */
.qr-wrap { text-align: center; padding: 18px 0 6px; }
.qr-img {
  width: 200px; height: 200px; object-fit: contain; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px;
}

/* file inputs — plain inputs look broken next to the rest of the form */
input[type=file] {
  width: 100%; padding: 11px 13px; font: inherit; font-size: .9rem;
  border: 1.5px dashed var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink-soft); cursor: pointer;
}
input[type=file]:hover { border-color: var(--gold); }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 600; font-size: .85rem; margin-right: 12px;
  padding: 7px 14px; border: none; border-radius: 999px;
  background: var(--sapphire); color: #fff; cursor: pointer;
}

/* ---------- Footer ---------- */
.footer { background: var(--sapphire-ink); color: rgba(255,255,255,.75); padding: 56px 0 32px; margin-top: 80px; }
.footer a { color: var(--gold-soft); }
.footer .brand { color: #fff; margin-bottom: 12px; }
.footer-note { font-size: .82rem; margin-top: 24px; color: rgba(255,255,255,.5); }

/* ---------- Utilities ---------- */
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; }
.mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.text-center { text-align: center; }
.text-soft { color: var(--ink-soft); }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 28px; flex-wrap: wrap; }

:focus-visible { outline: 3px solid rgba(22,41,79,.4); outline-offset: 2px; }

/* ---------- FAQ ----------
   Answers are collapsed so the list stays scannable; a delegate opens only
   the question they actually have. */
.faq-group { margin-bottom: 26px; }
.faq-group-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  color: var(--sapphire-ink); margin-bottom: 10px;
  display: flex; align-items: center; gap: 9px;
}
.faq-group-name svg { color: var(--gold); flex: none; }
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  margin-bottom: 8px; overflow: hidden;
}
.faq-item > summary {
  cursor: pointer; list-style: none; padding: 14px 18px;
  font-weight: 600; font-size: .95rem; color: var(--sapphire-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: ''; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq-item[open] > summary::after { transform: rotate(-135deg); }
.faq-item > summary:hover { background: var(--mist); }
.faq-answer {
  padding: 0 18px 16px; font-size: .93rem; color: var(--text-soft);
  line-height: 1.75;
}
@media (max-width: 560px) {
  .faq-item > summary { padding: 12px 14px; font-size: .92rem; }
  .faq-answer { padding: 0 14px 14px; font-size: .9rem; }
}


/* ---------- FAQ admin ----------
   Each question collapses to a single line so a long list stays workable;
   the page is for editing, not for reading. */
.faq-admin-item {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  margin-bottom: 10px; background: var(--white); overflow: hidden;
}
.faq-admin-item > summary {
  cursor: pointer; list-style: none; padding: 12px 16px;
  font-weight: 600; font-size: .93rem; color: var(--sapphire-ink);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.faq-admin-item > summary::-webkit-details-marker { display: none; }
.faq-admin-item > summary::before {
  content: ''; flex: none; width: 8px; height: 8px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.faq-admin-item[open] > summary::before { transform: rotate(45deg); }
.faq-admin-item > summary:hover { background: var(--mist); }
.faq-admin-body { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.faq-admin-body .field { margin-bottom: 14px; }


/* ---------- Phone with country code ----------
   The code sits beside the number. On a narrow screen the code column shrinks
   so the number itself stays comfortably wide. */
.phone-row { display: grid; grid-template-columns: minmax(120px, 170px) 1fr; gap: 8px; }
.phone-row select { min-width: 0; }
.phone-row input { min-width: 0; }
@media (max-width: 560px) {
  .phone-row { grid-template-columns: 104px 1fr; gap: 6px; }
  .phone-row select { padding-left: 10px; padding-right: 22px; font-size: .88rem; }
}

/* ---------- Team code ----------
   Meant to be read aloud and typed by hand, so it is set large with generous
   letter spacing rather than shown as a cramped string. */
.team-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.35rem; font-weight: 700; letter-spacing: .08em;
  color: var(--sapphire-ink); word-break: break-all;
}
@media (max-width: 480px) {
  .team-code { font-size: 1.15rem; }
}

/* ---------- Programme editor ----------
   Four fields and three buttons never fitted in half the page width, so the
   inputs were cut to a few characters. Each day now gets the full width, and
   every field carries a visible label — the old version relied on placeholders
   that vanish the moment anything is typed. */
.prog-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.prog-f label {
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700;
}
.prog-f input, .prog-f select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 9px; font: inherit; font-size: .93rem; background: #fff;
}
.prog-f input:focus, .prog-f select:focus {
  outline: none; border-color: var(--sapphire);
  box-shadow: 0 0 0 3px rgba(22,41,79,.08);
}
.prog-f-btn { justify-content: flex-end; }

.prog-day-head {
  display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 14px;
  align-items: end; padding-bottom: 18px; margin-bottom: 8px;
  border-bottom: 2px solid var(--gold-soft);
}

.prog-item {
  display: flex; gap: 12px; align-items: flex-end;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.prog-edit-row {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: 150px 1fr 150px 1fr auto; gap: 12px;
  align-items: end;
}
.prog-actions { display: flex; align-items: flex-end; }
.prog-move { display: flex; gap: 4px; align-items: flex-end; flex: none; }
.prog-move form { display: block; }
.prog-move .btn { padding: 9px 11px; }

.prog-add {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 12px;
  align-items: end; margin-top: 18px; padding-top: 18px;
  border-top: 2px solid var(--gold-soft);
}

@media (max-width: 900px) {
  .prog-day-head { grid-template-columns: 1fr 1fr; }
  .prog-edit-row { grid-template-columns: 130px 1fr; }
  .prog-item { flex-direction: column; align-items: stretch; gap: 10px; }
  .prog-move { justify-content: flex-end; }
}
@media (max-width: 520px) {
  .prog-day-head, .prog-edit-row, .prog-add { grid-template-columns: 1fr; }
}

/* ---------- Registrant table ----------
   The list can now show up to thirty columns, so it scrolls inside its own
   box rather than pushing the page sideways. */
.reg-filters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; align-items: end;
}
.col-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 8px 14px;
}
.table-wrap {
  overflow-x: auto; background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.reg-table { min-width: 100%; white-space: nowrap; }
.reg-table th a:hover { color: var(--gold); }
.reg-table td, .reg-table th { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .reg-filters { grid-template-columns: 1fr 1fr; }
  .col-picker { grid-template-columns: 1fr 1fr; }
}

/* ---------- Policies ----------
   Terms people scan rather than read: headings hold their own column so the
   eye can run down them, and a hairline separates each without boxing it.
   No cards here on purpose — the page already has three stacks of them. */
.policy-list { margin: 0; }
.policy-row {
  display: grid; grid-template-columns: 185px 1fr; gap: 24px;
  padding: 26px 0; border-top: 1px solid var(--line);
}
.policy-row:first-child { border-top: 2px solid var(--gold); }
.policy-row dt {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  color: var(--sapphire-ink); line-height: 1.4;
}
.policy-row dd { margin: 0; }
.policy-row dd p {
  margin: 0 0 12px; font-size: .94rem; line-height: 1.7;
  color: var(--ink-soft); max-width: 62ch;
}
.policy-row dd p:last-child { margin-bottom: 0; }

/* The opening phrase of a fee line, set apart so a reader finds their case */
.policy-term {
  font-weight: 600; color: var(--sapphire-ink);
}
.policy-term::after { content: ' —'; color: var(--gold); }

@media (max-width: 720px) {
  .policy-row { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .policy-row dt { font-size: 1rem; }
}

/* ---------- Menu editor ----------
   One row per link so the order on screen matches the order on the site. */
.nav-row {
  display: grid; grid-template-columns: 1fr 1fr 1.3fr 130px 76px auto auto;
  gap: 10px; align-items: end; padding: 14px 16px;
}
.nav-row .prog-f input, .nav-row .prog-f select { font-size: .88rem; padding: 8px 10px; }
.nav-flags { display: flex; gap: 12px; align-items: center; font-size: .82rem; }
.nav-flags .check { display: flex; gap: 5px; align-items: center; white-space: nowrap; }
.nav-actions { display: flex; gap: 6px; align-items: end; }
@media (max-width: 1330px) {
  .nav-row { grid-template-columns: 1fr 1fr; }
  .nav-flags, .nav-actions { grid-column: span 2; }
}
@media (max-width: 560px) {
  .nav-row { grid-template-columns: 1fr; }
  .nav-flags, .nav-actions { grid-column: auto; }
}

/* ---------- Note under the figures ----------
   One line of plain text across the full width of the pair above. Small and
   grey on purpose: it explains the numbers rather than adding a third. */
.stat-note { max-width: 720px; margin: 14px auto 0; }
.stat-note .card {
  padding: 14px 22px; text-align: center;
  font-size: .85rem; line-height: 1.6; color: var(--ink-soft);
}

/* ---------- Flight panel ----------
   The one section most people cannot finish on the day they register, and the
   only one they are asked to return to. It gets its own tinted panel and a gold
   edge so it reads as a separate errand rather than four more fields. */
.flight-panel {
  background: var(--mist);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 22px 22px 18px;
  margin: 28px 0 22px;
}
.flight-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.flight-icon {
  flex: none; width: 42px; height: 42px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--gold); box-shadow: var(--shadow-card);
}
.flight-head h2 {
  font-size: 1.15rem; margin: 2px 0 2px; color: var(--sapphire-ink);
}
.flight-head p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

/* The promise that it can be changed later, said where it is needed */
.flight-note {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fff; border-radius: var(--radius-sm);
  padding: 11px 14px; margin-bottom: 16px;
  font-size: .87rem; line-height: 1.6; color: var(--ink-soft);
}
.flight-note svg { flex: none; margin-top: 2px; color: var(--gold); }
.flight-panel input, .flight-panel select { background: #fff; }

@media (max-width: 560px) {
  .flight-panel { padding: 18px 16px 14px; }
  .flight-head { gap: 10px; }
  .flight-icon { width: 36px; height: 36px; }
}

/* ---------- Check-in search ----------
   The desk is worked from a phone. A three-column row left the input about
   90px wide there, so a typed name scrolled out of sight as it was entered.
   Full width on small screens, buttons underneath. */
.checkin-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; }
.checkin-row input { width: 100%; min-width: 0; }
@media (max-width: 620px) {
  .checkin-row { grid-template-columns: 1fr 1fr; }
  .checkin-row input { grid-column: 1 / -1; font-size: 1.05rem !important; }
  .checkin-row .btn { width: 100%; justify-content: center; }
}

/* ---------- Rooms: tabs and filter chips ----------
   Matching strangers and numbering settled rooms are separate jobs done at
   separate times, so they get separate tabs. Filters are chips because staff
   pick several nationalities at once and need to see what is selected. */
.room-tabs {
  display: flex; gap: 6px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.room-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px; text-decoration: none; font-weight: 600; font-size: .94rem;
  color: var(--ink-soft); border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.room-tab:hover { color: var(--sapphire-ink); }
.room-tab.is-on { color: var(--sapphire-ink); border-bottom-color: var(--gold); }
.room-tab-count {
  background: var(--mist); color: var(--ink-soft);
  border-radius: 999px; padding: 2px 9px; font-size: .78rem; font-weight: 700;
}
.room-tab.is-on .room-tab-count { background: var(--gold); color: #fff; }

.chip-row {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: flex-start;
  margin-bottom: 12px;
}
.chip-row > .chip { margin-top: 0; }
.chip-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); width: 104px; padding-right: 10px; flex: none;
  line-height: 1.3;
}
.chip {
  display: inline-block; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-size: .85rem; color: var(--ink-soft); text-decoration: none;
}
.chip:hover { border-color: var(--gold); color: var(--sapphire-ink); }
.chip.is-on {
  background: var(--sapphire-ink); border-color: var(--sapphire-ink); color: #fff;
}
@media (max-width: 560px) {
  .chip-label { width: 100%; margin-bottom: 2px; }
  .room-tab { padding: 10px 12px; font-size: .88rem; }
}

/* ---------- Pair by typing ----------
   A dropdown of a thousand delegates is unusable, so the field is a search
   box with the matches listed beneath it. */
.pair-results {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-top: 6px; max-height: 260px; overflow-y: auto; background: #fff;
}
.pair-hit {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; border: none; border-bottom: 1px solid var(--line);
  background: #fff; font: inherit;
}
.pair-hit:last-child { border-bottom: none; }
.pair-hit:hover { background: var(--mist); }
.pair-hit strong { display: block; font-size: .93rem; color: var(--sapphire-ink); }
.pair-hit span { font-size: .8rem; color: var(--ink-soft); }
.pair-empty { padding: 12px; font-size: .88rem; color: var(--ink-soft); }
.pair-chosen {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--gold); border-radius: var(--radius-sm);
  background: var(--mist); padding: 10px 12px; margin-top: 6px;
}
.pair-chosen strong { font-size: .93rem; color: var(--sapphire-ink); }
.pair-chosen span { font-size: .82rem; }
.pair-chosen button { margin-left: auto; }

/* ---------- Registrant filters ----------
   One card read top to bottom: search, then chips, then the few states that
   have too many values to be chips. */
.filter-card { padding: 20px 22px; }
.filter-search { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; }
.filter-search input {
  width: 100%; min-width: 0; font-size: 1rem; padding: 12px 14px;
}
.filter-divider { height: 1px; background: var(--line); margin: 18px 0 16px; }
.chip-sep {
  width: 1px; height: 20px; background: var(--line); margin: 0 4px;
}
.filter-selects {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px;
}
@media (max-width: 620px) {
  .filter-card { padding: 16px; }
  .filter-search { grid-template-columns: 1fr 1fr; }
  .filter-search input { grid-column: 1 / -1; }
  .filter-search .btn { width: 100%; justify-content: center; }
  .chip-sep { display: none; }
}

/* ---------- Search suggestions ----------
   Three kinds of hit in one list: a filter to click, a person to open, and
   searching the words everywhere. The tag on the left says which. */
.search-wrap { position: relative; }
.search-drop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop); max-height: 340px; overflow-y: auto;
}
.search-hit {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; text-decoration: none; border-bottom: 1px solid var(--line);
  font-size: .92rem; color: var(--sapphire-ink);
}
.search-hit:last-child { border-bottom: none; }
.search-hit:hover { background: var(--mist); }
.search-tag {
  flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft);
  background: var(--mist); border-radius: 999px; padding: 3px 9px; min-width: 76px;
  text-align: center;
}
.search-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-note { flex: none; font-size: .8rem; color: var(--ink-soft); font-family: ui-monospace, Menlo, monospace; }
.search-all { font-weight: 600; color: var(--sapphire-ink); background: var(--mist); }
.search-all:hover { background: var(--line); }

/* ---------- Admin form sections ----------
   The delegate record is long. Named sections with a rule above them break it
   into the jobs staff actually do, instead of one run of paired boxes. */
.form-section {
  font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); margin: 26px 0 12px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.form-section:first-of-type { margin-top: 18px; }

/* Child fields kept together: they only matter when the box is ticked, and
   pairing them with the amount put two very different heights side by side. */
.child-panel {
  background: var(--mist); border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 16px;
}
.child-panel input[type="date"] { background: #fff; }

/* Rows keep their tops level even when one hint runs to two lines */
.field-row, .field-row-3, .field-row-name { align-items: start; }
/* ...except a cell holding only a button, which sits level with the input
   beside it. Without this the button rose to the label line. */
.field-row > .field-action,
.field-row > .field:has(> .btn:only-child) { align-self: end; }

/* ---------- Editing on someone's behalf ----------
   Replaces the progress rail when an organiser opens a family member's record,
   so it is obvious whose details are on screen. */
.behalf-card { padding: 20px; }
.behalf-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 4px;
}
.behalf-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
  color: var(--sapphire-ink); margin-bottom: 8px; line-height: 1.3;
}

/* ---------- Homepage poster ----------
   Centred and tappable; opens full size over the page. */
.poster-section { padding-top: 48px; padding-bottom: 48px; }
.poster-thumb {
  display: block; margin: 0 auto; padding: 0; border: none; background: none;
  cursor: zoom-in; position: relative; max-width: 460px; width: 100%;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 18px 40px rgba(12, 22, 48, .18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.poster-thumb img { display: block; width: 100%; height: auto; }
.poster-thumb:hover, .poster-thumb:focus-visible {
  transform: translateY(-3px); box-shadow: 0 24px 48px rgba(12, 22, 48, .24);
}
.poster-thumb:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.poster-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: rgba(12, 22, 48, .78); color: #fff; font-size: .82rem; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; pointer-events: none;
}

.poster-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(8, 14, 30, .92);
  display: flex; align-items: center; justify-content: center;
  padding: 56px 16px 24px; cursor: zoom-out;
}
.poster-lightbox[hidden] { display: none; }
.poster-lightbox img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); cursor: default;
}
.poster-close {
  position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px;
  width: 44px; height: 44px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.poster-close:hover, .poster-close:focus-visible { background: rgba(255, 255, 255, .26); }
@media (max-width: 560px) {
  .poster-section { padding-top: 32px; padding-bottom: 32px; }
  .poster-thumb { max-width: 100%; }
}