/* Base */
:root{
  --bg: #0f172a;             /* slate-900 */
  --card: #0b1226;           /* deeper slate */
  --surface: #121a33;
  --brand: #8B0000;          /* your wine red */
  --brand-600: #a30000;
  --text: #e5e7eb;           /* gray-200 */
  --muted: #9ca3af;          /* gray-400 */
  --ring: 0 0 0 3px rgba(139,0,0,.25);
  --radius: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { color-scheme: dark; }   /* makes native form popups use dark styling */
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* Gradient background */
.bg{
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(800px 400px at 10% 10%, rgba(139,0,0,.25), transparent 50%),
    radial-gradient(600px 300px at 90% 20%, rgba(56,189,248,.25), transparent 50%),
    radial-gradient(700px 350px at 30% 90%, rgba(16,185,129,.22), transparent 50%),
    linear-gradient(180deg, #0b1222 0%, #0f172a 100%);
}

/* Layout */
.wrap { width: min(1100px, 92%); margin: 0 auto; }
.site-header, .site-footer { padding: 22px 0; }
.site-footer { border-top: 1px solid rgba(255,255,255,.06); }

/* Brand */
.brand{ display:flex; align-items:center; gap:14px; }
.brand-mark{
  width:42px; height:42px; display:grid; place-items:center;
  background: linear-gradient(135deg, #ffd6d6, #fff);
  color:#8B0000; border-radius:12px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.brand-text h1{ margin:0; font-size: clamp(22px, 3vw, 28px); font-weight:700; letter-spacing:.2px; }
.brand-text p{ margin:.2rem 0 0; color:var(--muted); font-size:.95rem; }

/* Grid */
.main-grid{
  display:grid; gap:24px; align-items:start;
  grid-template-columns: 1.2fr .8fr;
}
@media (max-width: 900px){
  .main-grid{ grid-template-columns: 1fr; }
}

/* Cards */
.card{
  background: linear-gradient(180deg, var(--card), var(--surface));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  overflow: clip;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.card--primary{ position:relative; }
.card--primary::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(600px 200px at 50% -10%, rgba(139,0,0,.25), transparent 60%);
}
.card-body{ padding: 28px; }
.card-title{ margin: 0 0 10px; font-size: 1.6rem; font-weight: 700; }

/* Stepper */
.stepper{
  display:flex; gap:12px; padding:0; margin: 8px 0 20px;
  list-style:none; counter-reset: step;
}
.step{
  position:relative; padding:10px 14px 10px 36px; border-radius:12px;
  background: rgba(255,255,255,.04); color: var(--muted); font-weight:600; font-size:.95rem;
}
.step::before{
  counter-increment: step; content: counter(step);
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center; background: rgba(255,255,255,.1); color:#fff; font-size:.8rem;
}
.step.is-active{ color:#fff; background: rgba(139,0,0,.16); }

/* Forms */
.form{ display:grid; gap:14px; }
.form-grid{
  display:grid; gap:14px;
  grid-template-columns: 1fr 1fr;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.span-2{ grid-column: 1 / -1; }
.label{ color:#d1d5db; font-weight:600; }
.input{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  color:#fff; border-radius:12px; padding:.9rem 1rem; font-size:1rem;
  outline: none; transition: box-shadow .2s, border-color .2s, background .2s;
}
.input::placeholder{ color:#9ca3af; }
.input:focus{ border-color: rgba(139,0,0,.6); box-shadow: var(--ring); background: rgba(255,255,255,.06); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .9rem 1rem; border-radius:12px; font-weight:700; border:1px solid transparent;
  transition: transform .04s ease, background .2s ease, border-color .2s ease;
  user-select:none;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: linear-gradient(180deg, #a21c1c, #8B0000);
  color:#fff; border-color: rgba(255,255,255,.12);
}
.btn-primary:hover{ background: linear-gradient(180deg, #b42323, #a30000); }

.btn-ghost{
  background: transparent; color:#fff; border-color: rgba(255,255,255,.18);
}
.btn-ghost:hover{ background: rgba(255,255,255,.06); }

/* Result */
.result{ padding: 14px; border-radius:12px; background: rgba(16,185,129,.12); color:#d1fae5; }
.result.error{ background: rgba(239,68,68,.12); color:#fecaca; }

/* Side card */
.side{ display:grid; gap:14px; }
.photo{
  width:100%; height:220px; border-radius:12px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35)),
    url('https://images.unsplash.com/photo-1520975922325-24c7e0b2e4bb?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
  border:1px solid rgba(255,255,255,.08);
}

/* Helpers */
.hidden{ display:none !important; }
.muted{ color: var(--muted); font-size: .95rem; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

.section { padding: 72px 0; }
.wrap { width: min(1100px, 92%); margin: 0 auto; }
.two-col { display:grid; grid-template-columns: 1fr; gap:24px; }
@media (min-width: 900px){ .two-col{ grid-template-columns: 1fr; } } /* single column card */

/* Topbar */
.topbar {
  position: fixed; top:0; z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(15, 23, 42, .6);  /* tweak for light theme if needed */
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-wrap { display:flex; align-items:center; justify-content:space-between; padding: 10px 0; }
.brand-mini { font-weight: 700; letter-spacing:.2px; }
.nav { display:flex; gap: 18px; }
.nav-link {
  color: var(--text); text-decoration:none; opacity:.8; font-weight:600;
}
.nav-link:hover, .nav-link.is-active { opacity: 1; }

/* Hero */
.hero { padding-top: 96px; }
.hero-grid { display:grid; gap:30px; grid-template-columns: 1.1fr .9fr; align-items:center; }
.hero-text h1 { margin: 0 0 .4rem; font-size: clamp(28px, 5vw, 44px); }
.hero-text .lead { color: var(--muted); font-size: 1.1rem; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; } }

/* Slideshow */
.slideshow { position: relative; border-radius: 16px; overflow: hidden; border:1px solid rgba(255,255,255,.1); }
.slides { position: relative; width: 100%; height: 360px; }
.slides img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity .6s ease;
}
.slides img.is-active { opacity: 1; }
.dots { position:absolute; left:0; right:0; bottom:12px; display:flex; gap:8px; justify-content:center; }
.dot{
  width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,.8);
  background:transparent; cursor:pointer; opacity:.8;
}
.dot.is-active{ background:#fff; opacity:1; }

/* Cards reused */
.card{ background: linear-gradient(180deg, var(--card), var(--surface)); border: 1px solid rgba(255,255,255,.06); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.card-body{ padding:28px; }
h2{ margin:0 0 10px; }

/* When row */
.when{ display:flex; gap:16px; align-items:center; margin: 10px 0 18px; }
.date-chip{
  width:66px; height:84px; border-radius:12px; overflow:hidden; background:#fff; color:#111; display:grid; grid-template-rows:auto 1fr auto; text-align:center;
  border:1px solid rgba(0,0,0,.08);
}
.date-chip .day{ background:#f1f5f9; font-weight:700; font-size:.8rem; padding:4px; }
.date-chip .num{ font-size:1.6rem; font-weight:800; display:grid; place-items:center; }
.date-chip .mon{ background:#f1f5f9; font-weight:700; font-size:.8rem; padding:4px; }

.addcal{ display:flex; gap:10px; flex-wrap: wrap; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:.8rem 1rem; border-radius:12px; font-weight:700; border:1px solid transparent; cursor:pointer; }
.btn-primary{ background: linear-gradient(180deg, #a21c1c, #8B0000); color:#fff; }
.btn-primary:hover{ background: linear-gradient(180deg, #b42323, #a30000); }
.btn-ghost{ background: transparent; color: var(--text); border-color: rgba(255,255,255,.18); }
.btn-ghost:hover{ background: rgba(255,255,255,.06); }

.map-embed iframe{ border-radius: 12px; }

/* RSVP (reuses your previous modern styles)
   Keep .hidden, .form, .form-grid, .field, .input, .label, .stepper, .step, .result, etc.
   from the earlier CSS I provided. */

/* Spotify embed */
.spotify-embed iframe{ width:100%; max-width: 100%; border: 0; }

/* Footer */
.site-footer{ padding: 28px 0; border-top:1px solid rgba(255,255,255,.08); text-align:center; }
.muted{ color: var(--muted); }

/* Topbar */
.topbar{
  position: sticky; top:0; z-index:60;
  backdrop-filter: blur(8px);
  background: rgba(15,23,42,.6); /* swap to rgba(255,255,255,.7) for light theme */
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-wrap{ display:flex; align-items:center; gap:16px; padding:10px 0; }
.brand-mini{ font-weight:700; text-decoration:none; color:var(--text); margin-right:auto; }
.nav{ display:flex; gap:18px; }
.nav-link{ color:var(--text); text-decoration:none; opacity:.85; font-weight:600; }
.nav-link:hover, .nav-link.is-active{ opacity:1; }

/* Hamburger (mobile) */
.hamburger{ display:none; width:40px; height:40px; border:1px solid rgba(255,255,255,.15); border-radius:10px; background:transparent; align-items:center; justify-content:center; gap:4px; }
.hamburger span{ display:block; width:18px; height:2px; background:var(--text); }
@media (max-width: 860px){
  .hamburger{ display:inline-flex; order:0; }
  .nav{ display:none; position:absolute; left:0; right:0; top:56px; padding:12px 4%; background:inherit; backdrop-filter:inherit; border-bottom:1px solid rgba(255,255,255,.08); flex-direction:column; gap:10px; }
  .nav.is-open{ display:flex; }
}

/* Language menu */
.lang-menu{ position:relative; }
.lang-toggle{
  display:inline-flex; align-items:center; gap:8px;
  padding:.55rem .8rem; border-radius:10px; border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06); color:var(--text); font-weight:600;
}
.lang-toggle img{ width:20px; height:14px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.15) inset; }
.lang-toggle svg{ opacity:.7 }
.lang-list{
  position:absolute; right:0; top:calc(100% + 8px); min-width:180px;
  background: linear-gradient(180deg, var(--card), var(--surface));
  border:1px solid rgba(255,255,255,.12); border-radius:12px;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
  padding:6px; display:none;
}
.lang-list.open{ display:block; }
.lang-list li{ list-style:none; }
.lang-list button{
  width:100%; display:flex; align-items:center; gap:10px; padding:.6rem .6rem;
  border-radius:10px; border:0; background:transparent; color:var(--text); cursor:pointer; text-align:left;
}
.lang-list button:hover{ background: rgba(255,255,255,.06); }
.lang-list img{ width:20px; height:14px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.15) inset; }

/* Small tweak so controls align on mobile */
@media (max-width: 860px){
  .lang-menu{ margin-left:auto; }
}

/* Shared button look (lang + burger) */
.navbar-button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .7rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: var(--text);
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease;
}
.navbar-button:hover{ background: rgba(255,255,255,.14); }

/* Burger lines */
.hamburger span{
  width:18px; height:2px; background: currentColor; display:block; margin:3px 0;
}

/* 1) Hide burger on desktop by default */
.hamburger{
  display:none;              /* stays hidden on desktop */
  flex-direction: column;    /* 👈 stack spans */
  align-items: center;
  justify-content: center;
  gap: 4px;                  /* space between bars */
}

.hamburger span{
  width: 22px;
  height: 2px;
  background: currentColor;
  display: block;            /* each bar */
  border-radius: 1px;
}

/* show burger on mobile */
@media (max-width: 860px){
  .hamburger{ display:inline-flex; }
}

/* 2) Show burger on mobile, hide inline nav */
@media (max-width: 860px){
  .hamburger{ display:inline-flex; }   /* now visible on phones */
  .nav{ display:none; }                /* hide links when collapsed */
  .nav.is-open{                        /* shown when toggled open by JS */
    display:flex; flex-direction:column; gap:10px;
    position:absolute; left:0; right:0; top:56px;
    padding:12px 4%;
    background: inherit;               /* matches topbar */
    backdrop-filter: inherit;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
}

/* In case older .hamburger styles exist, out-rank them */
.topbar .hamburger.navbar-button{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: var(--text);
}

.hamburger.lang-toggle.navbar-button{
  display:inline-flex;
  flex-direction:column;      /* stack bars */
  align-items:center;
  justify-content:center;
  gap:4px;
}
.hamburger.lang-toggle.navbar-button span{
  width:22px; height:2px; background: currentColor; border-radius:1px;
}

/* desktop: normal inline nav */
.nav{
  display:flex; gap:18px; align-items:center;
}

/* mobile: nav behaves like the language dropdown panel */
@media (max-width: 860px){
  .nav{
    display:none;                 /* hidden by default (closed) */
    position:absolute; right:4%; top:calc(100% + 8px);
    min-width: 220px; padding:6px; z-index: 1000;

    /* reuse the dropdown look */
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0,0,0,.35);

    flex-direction:column; gap:6px;
  }
  .nav.open{ display:flex; }      /* open state like .lang-list.open */

  /* make links look like items in the dropdown */
  .nav a{
    display:flex; align-items:center; gap:10px;
    padding:.6rem .65rem;
    border-radius:8px;
    color: var(--text); text-decoration:none; font-weight:600;
  }
  .nav a:hover{ background: rgba(255,255,255,.14); }

  /* show the burger on mobile only */
  .hamburger{ display:inline-flex; }
}

/* desktop: hide burger */
@media (min-width: 861px){
  .hamburger{ display:none; }
}

/* ensure stacking order with language menu */
.nav{ z-index: 900; }
.lang-list{ z-index: 1001; }

/* Burger button — keep your old style but ensure vertical bars */
.hamburger {
  display: none; /* hidden by default, only visible on mobile */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff; /* adjust if your nav bg is lighter */
  border-radius: 1px;
}

/* Mobile nav dropdown */
@media (max-width: 860px) {
  .hamburger {
    display: flex; /* visible only on mobile */
  }

  .nav {
    display: none;
    position: absolute;
    right: 4%;
    top: calc(100% + 8px);
    min-width: 220px;
    padding: 6px;
    z-index: 1000;

    /* Match language dropdown background */
    background: var(--dropdown-bg, #0f172a); /* use same variable or color */
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);

    flex-direction: column;
    gap: 6px;
  }
  .nav.open {
    display: flex;
  }

  .nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.6rem 0.65rem;
    border-radius: 8px;
    color: #1f2937;
    text-decoration: none;
    font-weight: 600;
  }
  .nav a:hover {
    background: rgba(0, 0, 0, 0.06);
  }
}

/* Ensure hidden on desktop */
@media (min-width: 861px) {
  .hamburger {
    display: none !important;
  }
}

/* === NAV WRAP MUST BE POSITIONED so dropdown anchors under the bar === */
.nav-wrap { position: relative; }

/* === Burger icon: vertical bars; hidden on desktop === */
.hamburger{
  display:none;                 /* desktop hidden */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.hamburger span{
  width: 22px;
  height: 2px;
  background: var(--text);      /* visible on your dark topbar */
  border-radius: 1px;
}

/* show burger only on mobile */
@media (max-width: 860px){
  .hamburger{ display: inline-flex; }
}
/* belt-and-braces: force-hide on desktop */
@media (min-width: 861px){
  .hamburger{ display: none !important; }
}

/* === MOBILE NAV DROPDOWN: match .lang-list exactly === */
@media (max-width: 860px){
  .nav{
    display: none;                       /* closed by default */
    position: absolute;
    right: 0;                            /* open from the right like language menu */
    top: calc(100% + 8px);
    min-width: 220px;
    padding: 6px;
    z-index: 1000;

    /* SAME LOOK AS .lang-list */
    background: linear-gradient(180deg, var(--card), var(--surface));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,.35);

    flex-direction: column;
    gap: 6px;
  }
  .nav.open { display: flex; }           /* ensure your JS toggles the 'open' class */

  /* links styled like dropdown items */
  .nav a{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .6rem .65rem;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
  }
  .nav a:hover{ background: rgba(255,255,255,.06); }
}

/* keep language menu above nav if both are open */
.lang-list{ z-index: 1001; }

/* ---- Fixed top bar with consistent height (desktop + mobile) ---- */
:root { --topbar-h: 64px; }             /* desktop height */
@media (max-width: 860px){
  :root { --topbar-h: 56px; }           /* mobile height */
}

.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  z-index: 1000;
  display: flex;                         /* ensure content stays visible */
  align-items: center;                   /* vertically center contents */
}

/* The inner container should fill the bar and anchor dropdowns */
.nav-wrap{ 
  position: relative; 
  height: 100%;
}

/* Push page content down exactly by the bar height (no extra) */
body{
  padding-top: var(--topbar-h);
}

/* Reduce hero’s extra top padding now that the bar is fixed */
.hero{
  padding-top: 24px;                     /* was 96px; this avoids double spacing */
}

/* Mobile menu panel should open under the fixed bar, aligned to the right */
@media (max-width: 860px){
  .nav{
    right: 0;                             /* line up with right edge */
    top: calc(100% + 8px);                /* just below the bar */
  }
}

/* Keep the burger visible on mobile, hidden on desktop */
@media (max-width: 860px){ .hamburger{ display:inline-flex; } }
@media (min-width: 861px){ .hamburger{ display:none !important; } }
.topbar{ box-shadow: 0 2px 12px rgba(0,0,0,.25); }

.photo-grid{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px){
  .photo-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px){
  .photo-grid{ grid-template-columns: repeat(4, 1fr); }
}
.photo-card{
  position:relative; overflow:hidden; border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  aspect-ratio: 1 / 1; /* square thumbs */
}
.photo-card img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* --- Loading/disabled buttons + tiny spinner --- */
.btn[disabled]{
  opacity:.6;
  cursor:not-allowed;
  filter:saturate(.7);
}

.spinner{
  display:inline-block;
  width:1em; height:1em;
  margin-right:.5em;
  border:.16em solid rgba(255,255,255,.4);
  border-top-color:#fff;              /* auto good on dark buttons */
  border-radius:50%;
  animation:spin .8s linear infinite;
  vertical-align:-0.125em;
}
@keyframes spin { to { transform: rotate(360deg); } }

.dots { display: none !important; }

/* --- Mobile fixes --- */

/* Prevent any section from exceeding the screen */
.section, .card, .photo-grid, .hero, .slideshow {
  max-width: 100% !important;
  overflow-x: hidden;
}

/* Images and iframes should shrink with the screen */
img, iframe, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Photo grid should collapse nicely on small screens */
@media (max-width: 480px) {
  .photo-grid {
    grid-template-columns: 1fr;  /* one per row on very small phones */
  }
}

/* Hero slideshow height smaller on phones */
@media (max-width: 600px) {
  .slides {
    height: 220px;   /* down from 360px */
  }
}

/* Map embed responsive */
.map-embed iframe {
  width: 100% !important;
  height: auto;
  aspect-ratio: 16 / 9; /* keep proportion */
  border-radius: 12px;
}

h1, h2, h3, p, a, button, input, textarea {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 480px) {
  :root { --topbar-h: 52px; }
}

/* --- Mobile fixes (safe) --- */

/* Prevent horizontal scroll on content sections only (NOT .wrap) */
.section, .card, .photo-grid, .hero, .slideshow {
  max-width: 100% !important;
  overflow-x: hidden;
}

/* Make sure header containers never clip overlays */
.topbar, .nav-wrap { 
  overflow: visible !important; 
}
/* If you still need .wrap elsewhere, keep it open by default */
.wrap { overflow: visible; }

/* Images and iframes should shrink with the screen */
img, iframe, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Photo grid: single column on very small phones */
@media (max-width: 480px) {
  .photo-grid { grid-template-columns: 1fr; }
}

/* Hero slideshow height smaller on phones */
@media (max-width: 600px) {
  .slides { height: 220px; }
}

/* Map embed responsive */
.map-embed iframe {
  width: 100% !important;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
}

/* ===== RSVP MOBILE FIXES (scoped) ===== */
#rsvp .card { overflow: visible; } /* avoid clipping dropdowns */

/* Prevent horizontal scroll only inside RSVP */
#rsvp, #rsvp .card, #rsvp .card-body { max-width: 100%; overflow-x: hidden; }

/* Stack the form in one column on phones */
@media (max-width: 720px) {
  #rsvp .card-body { padding: 16px; }
  #rsvp .form-grid { grid-template-columns: 1fr !important; }
  #rsvp .span-2 { grid-column: auto !important; }

  /* Inputs: full width, comfy hit targets, no iOS zoom jump */
  #rsvp .input,
  #rsvp select,
  #rsvp textarea {
    width: 100%;
    font-size: 16px;           /* prevents iOS zoom on focus */
    padding: .85rem .9rem;
  }
  #rsvp textarea { min-height: 110px; }

  /* Buttons: stack and fill width */
  #rsvp .actions { display: grid; gap: 10px; }
  #rsvp .actions .btn,
  #rsvp button[type="submit"] { width: 100%; }

  /* Stepper: wrap nicely / or stack */
  #rsvp .stepper {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
  }
  #rsvp .step {
    flex: 1 1 100%;
    padding: 10px 12px 10px 34px;
    font-size: .95rem;
  }

  /* Result box spacing */
  #rsvp #result-box .result,
  #rsvp #result-box .success,
  #rsvp #result-box .error { margin-top: 8px; }
}

/* Tiny phones: reduce headline size a touch */
@media (max-width: 380px) {
  #rsvp h2 { font-size: 1.25rem; }
}

/* === Dark-friendly select (matches your .input look) === */
select.input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(255,255,255,.04);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: .9rem 2.2rem .9rem 1rem;   /* extra right space for chevron */
  width: 100%;
}

/* Visible focus + brand color */
select.input:focus {
  border-color: rgba(139,0,0,.6);     /* --brand */
  box-shadow: 0 0 0 3px rgba(139,0,0,.25);
  outline: none;
}

/* === Fix RSVP dropdown readability === */
#rsvp select,
#rsvp select option {
  background: var(--surface) !important; /* dark background */
  color: var(--text) !important;         /* light text */
}

/* Ensure focus state is visible */
#rsvp select:focus {
  border-color: rgba(139,0,0,.6);
  box-shadow: 0 0 0 3px rgba(139,0,0,.25);
  outline: none;
}

.form-section-title{ margin: 18px 0 6px; font-size: 1.15rem; }
.radio-group, .check-group{ display:grid; gap:8px; margin: 8px 0 14px; }
.radio, .check{ display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.radio input, .check input{ margin-top: 4px; }
.hidden { display: none !important; }