/* Zimana & DekPus — Wedding RSVP
   Palette from the couple's attire: olive gold, slate gray, black.
   Text is black on light surfaces, white over photo backgrounds. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Montserrat:wght@300;400;500&display=swap');

/* Mollani — used only for the couple's names */
@font-face {
    font-family: 'Mollani';
    src: url('../fonts/mollani.woff2') format('woff2'),
         url('../fonts/mollani.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Three independent typefaces. The couple's names always sit in their own
       slot so they can differ from every other piece of text on the page.
       index.php overrides these when a font is uploaded from the admin. */
    --font-names: 'Mollani', 'Cormorant Garamond', serif;
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Montserrat', sans-serif;

    --gutter: 24px;
    --gold: #8F8159;
    --gold-dark: #75683F;
    --gold-tint: rgba(143, 129, 89, .13);
    --slate: #84888B;
    --slate-tint: rgba(132, 136, 139, .14);
    --ink: #000000;
    --body-ink: #1c1c1c;
    --muted: #6d6d6d;
    --cream: #FAF8F4;
    --line: #ECE8E0;
    --grad: linear-gradient(90deg, #8F8159, #A5976B);
}

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

/* Nothing may scroll the page sideways */
html, body { max-width: 100%; overflow-x: hidden; }
img, iframe, svg, video { max-width: 100%; }

/* ── Hero cover panel ──
   The hero sits on top of the page and slides up out of the way; the RSVP page
   is underneath the whole time and is the only thing that ever scrolls. The
   .js-cover class is added by script, so without JS the hero stays an ordinary
   section and the page scrolls normally. */
html.js-cover .hero-cover {
    position: fixed;
    inset: 0;
    z-index: 60;
    margin: 0;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    background-color: var(--cream);
    will-change: transform;
    transform: translateY(0);
    transition: transform .85s cubic-bezier(.65, 0, .2, 1);
    touch-action: none;
}
/* Page beneath must not scroll while the cover is closed */
html.js-cover:not(.cover-open),
html.js-cover:not(.cover-open) body { overflow: hidden; height: 100%; }

html.js-cover.cover-open .hero-cover { transform: translateY(-100%); }
/* Once it has slid away it must not intercept taps */
html.js-cover .hero-cover.cover-gone { display: none; }

@media (prefers-reduced-motion: reduce) {
    html.js-cover .hero-cover { transition: none; }
    .pull-cue svg { animation: none; }
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 17px;
    background: var(--cream);
    color: var(--body-ink);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* Anchored sections shouldn't butt against the top edge when scrolled to */
#rsvp, #details-section { scroll-margin-top: 14px; }

h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; line-height: 1.12; color: var(--ink); }

.eyebrow {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ── Buttons ── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    letter-spacing: .04em;
    border: none;
    border-radius: 999px;
    padding: 13px 30px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}
.btn-primary {
    background: var(--gold);
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(143, 129, 89, .35);
}
.btn-primary:hover { background: var(--gold-dark); transform: translateY(-1px); box-shadow: 0 9px 24px rgba(143, 129, 89, .45); }
.btn-primary:disabled { opacity: .6; cursor: default; transform: none; }
.btn-outline {
    background: #FFFFFF;
    color: var(--ink);
    border: 1px solid #DCD6C8;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold-dark); }
.btn svg { width: 16px; height: 16px; }

/* ── Cards ── */

.card {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(30, 26, 12, .06);
}

/* ── Forms ── */

label {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14.5px;
    margin-bottom: 7px;
    color: var(--ink);
}
label .opt { color: #a5a5a5; font-weight: 300; }
input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=number], input[type=password], select, textarea {
    width: 100%;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    color: var(--body-ink);
    background: #FFFFFF;
    border: 1px solid #E2DDD1;
    border-radius: 12px;
    padding: 12px 15px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(143, 129, 89, .16);
}
textarea { resize: vertical; min-height: 90px; }
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── Toast ── */

#toast-wrap { position: fixed; right: 22px; bottom: 22px; z-index: 300; display: flex; flex-direction: column; gap: 10px; }
.toast {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
    padding: 13px 18px;
    font-size: 14px;
    min-width: 240px;
    animation: toast-in .25s ease;
}
.toast.error { border-left-color: var(--ink); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ════════════ PUBLIC PAGE ════════════ */

.invite {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 var(--gutter) 56px;
}

.invite-hero {
    text-align: center;
    padding: 60px 0 44px;
}
/* Full viewport: the hero owns the first screen and the pull cue sits on the
   very bottom edge of it, which is the only affordance to scroll on. */
.hero-full {
    min-height: 100svh;
    /* dvh tracks the address bar showing/hiding. Together with the RSVP screen
       below it this keeps the document exactly two viewports tall, so
       "scrolled to the bottom" always equals "RSVP flush at the top" —
       whatever the browser chrome is doing. svh is the fallback. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 28px 0 96px;
}

/* Full-bleed photo background for the hero (set from admin).
   The negative margin must match the page gutter exactly or the page
   overflows sideways. */
.hero-full.has-bg {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    background-size: cover;
    background-position: center;
}
.hero-full.has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .55));
}
.hero-inner { position: relative; z-index: 1; }
.pull-cue { z-index: 1; }
.hero-full.has-bg h1, .hero-full.has-bg .save-the-date { color: #FFFFFF; }
.hero-full.has-bg .eyebrow { color: #E7DFC9; }
.hero-full.has-bg .invite-sub { color: #FFFFFF; }
.hero-full.has-bg .hero-hint { color: rgba(255, 255, 255, .75); }
.hero-full.has-bg .countdown-chip { background: rgba(255, 255, 255, .18); color: #FFFFFF; backdrop-filter: blur(4px); }
.hero-full.has-bg .flourish line, .hero-full.has-bg .flourish rect { stroke: #E7DFC9; }
.hero-full.has-bg .pull-cue { color: #E7DFC9; }
.hero-full.has-bg .pull-cue span { color: rgba(255, 255, 255, .8); }

.invite-hero .eyebrow { margin-bottom: 16px; font-size: 13px; }
.invite-hero h1 {
    font-size: clamp(58px, 9.5vw, 104px);
    letter-spacing: .01em;
    margin-bottom: 10px;
}

/* Names stacked over three lines: name / & / name */
.invite-hero h1.couple {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Script faces carry tall ascenders and long descenders inside the em box;
       1.02 makes stacked names collide. Adjustable in the designer. */
    line-height: 1.15;
}
.invite-hero h1.couple .n { display: block; }
.invite-hero h1.couple .amp {
    display: block;
    font-size: .52em;
    line-height: 1;
    margin: .06em 0;
}

/* The couple's names carry the Mollani script; everything else keeps the
   Cormorant/Montserrat pairing. */
h1.couple .n {
    font-family: var(--font-names);
    font-weight: normal;
    letter-spacing: .01em;
}
.invite-hero h1 .amp {
    font-style: italic;
    font-weight: 500;
    color: var(--gold);
    padding: 0 .06em;
}
.save-the-date {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 28px;
    color: var(--gold-dark);
    margin-bottom: 6px;
}
.invite-sub {
    font-size: 16px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 6px;
}
.hero-hint {
    margin-top: 20px;
    color: #8d887d;
    font-size: 15px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

.flourish { display: block; margin: 16px auto 16px; }

.countdown-chip {
    display: inline-block;
    margin-top: 16px;
    background: var(--gold-tint);
    color: var(--gold-dark);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 10px 24px;
}

.pull-cue {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--gold);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .26em;
    text-transform: uppercase;
    padding: 8px 14px;
}
.pull-cue svg { animation: cue-float 1.8s ease-in-out infinite; }
.pull-cue span { color: var(--muted); }
@keyframes cue-float {
    0%, 100% { transform: translateY(0); opacity: .55; }
    50% { transform: translateY(-7px); opacity: 1; }
}

/* ── Celebration-day mode (no hero, no RSVP — photos first) ── */

.today-hero { text-align: center; padding: 44px 0 26px; }
.today-hero .eyebrow { display: block; margin-bottom: 14px; }
.today-hero h1.couple {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: clamp(44px, 8vw, 74px);
    line-height: 1.02;
}
.today-hero h1.couple .amp { display: block; font-size: .52em; font-style: italic; color: var(--gold); margin: .06em 0; }
.today-badge {
    display: inline-block;
    background: var(--gold);
    color: #FFFFFF;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 9px 22px;
}
.today-intro {
    max-width: 520px;
    margin: 18px auto 0;
    color: #4a4a4a;
    font-size: 16px;
}
.event-day .details-section { margin-top: 26px; }
/* Photos are the reason the page exists today — put that card first. */
.event-day .photos-block { order: -1; }
.event-day .photos-block .photos-intro { font-size: 16.5px; }

.icon-gold { background: var(--gold-tint); color: var(--gold-dark); }
.icon-slate { background: var(--slate-tint); color: #5c6063; }
.icon-ink { background: rgba(0, 0, 0, .07); color: var(--ink); }

.welcome-note {
    max-width: 660px;
    margin: 0 auto 28px;
    text-align: center;
    font-size: 18.5px;
    color: #3c3c3c;
}

.rsvp-step { padding-top: 8px; position: relative; }

/* Photo background for the RSVP step (set from admin) */
.rsvp-step.has-bg {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding: 34px var(--gutter);
    background-size: cover;
    background-position: center;
}
.rsvp-step.has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}
.rsvp-step.has-bg .welcome-note { color: #FFFFFF; position: relative; z-index: 1; }
.rsvp-step.has-bg .rsvp-panel { position: relative; z-index: 1; }

.step-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--slate);
    margin-bottom: 8px;
}
.step-tag span {
    background: var(--ink);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 12px;
    letter-spacing: .18em;
}

.rsvp-panel {
    max-width: 660px;
    margin: 0 auto;
    padding: 34px 40px 32px;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.rsvp-panel h2 { text-align: center; font-size: 42px; margin: 8px 0 24px; }

.attend-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.attend-toggle input { display: none; }
.attend-option {
    border: 1px solid #E2DDD1;
    border-radius: 14px;
    padding: 18px 14px;
    text-align: center;
    cursor: pointer;
    transition: all .15s ease;
    font-size: 14px;
}
.attend-option strong { display: block; font-family: var(--font-body); font-weight: 500; font-size: 16px; margin-bottom: 3px; }
.attend-option span { color: var(--muted); font-size: 13.5px; }
.attend-toggle input:checked + .attend-option.accept {
    background: var(--gold);
    border-color: transparent;
    color: #FFFFFF;
    box-shadow: 0 8px 20px rgba(143, 129, 89, .38);
}
.attend-toggle input:checked + .attend-option.accept strong { color: #FFFFFF; }
.attend-toggle input:checked + .attend-option.accept span { color: rgba(255, 255, 255, .85); }
.attend-toggle input:checked + .attend-option.decline {
    background: #F1F1F1;
    border-color: var(--slate);
}

#guest-details { overflow: hidden; transition: max-height .3s ease, opacity .3s ease; max-height: 900px; opacity: 1; }
#guest-details.hidden-soft { max-height: 0; opacity: 0; }

.rsvp-actions { text-align: center; margin-top: 22px; }
.rsvp-actions .btn { min-width: 240px; font-size: 15px; padding: 15px 32px; }
.deadline-note { text-align: center; color: #98927f; font-size: 14px; margin-top: 14px; }

.success-panel { text-align: center; padding: 24px 10px 12px; }
.success-panel .success-ring {
    width: 76px; height: 76px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: var(--gold-tint);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-dark);
}
.success-panel h2 { font-size: 36px; margin-bottom: 12px; }
.success-panel p { color: var(--muted); max-width: 420px; margin: 0 auto; }

.closed-panel { text-align: center; padding: 20px 10px; }
.closed-panel h2 { font-size: 32px; margin-bottom: 10px; }
.closed-panel p { color: var(--muted); }

/* ── Step 2: unlocked location & details ── */

/* No entrance animation here on purpose: Step 2 has to line up exactly with
   the top of its screen, and an animated transform offsets it. It also must
   never depend on an animation finishing in order to be visible. */
.details-section { margin-top: 56px; }

.details-head { text-align: center; margin-bottom: 26px; }
.details-head h2 { font-size: 44px; margin: 6px 0 8px; }
.details-intro { color: var(--muted); font-size: 16.5px; }

.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    max-width: 920px;
    margin: 0 auto;
}
.detail-block { padding: 28px 28px; }
.detail-block .icon {
    width: 50px; height: 50px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.detail-block .icon svg { width: 24px; height: 24px; }
.detail-block h3 { font-size: 27px; margin-bottom: 10px; }
.venue-name { font-weight: 500; font-size: 17px; color: var(--ink); }
.venue-addr { color: var(--muted); font-size: 15.5px; margin: 4px 0 0; }

.venue-facts { margin: 16px 0 18px; }
.venue-facts > div { display: flex; gap: 10px; padding: 5px 0; }
.venue-facts dt {
    flex: 0 0 52px;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-dark);
    padding-top: 2px;
}
.venue-facts dd { font-size: 16px; color: var(--ink); }

/* Dress-code colour swatches — the colours speak for themselves, no hex codes */
.swatches { list-style: none; display: flex; flex-wrap: wrap; gap: 18px 22px; margin: 4px 0 22px; }
.swatches li { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 74px; }
.swatch-dot {
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
}
.swatch-name {
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    color: #4a4a4a;
}
.map-block { overflow: hidden; min-height: 280px; display: flex; }
.map-embed { border: 0; width: 100%; min-height: 280px; flex: 1; }

.timeline-list { list-style: none; margin-top: 6px; }
.timeline-list li {
    position: relative;
    padding: 8px 0 8px 24px;
    font-size: 15.5px;
    color: #3c3c3c;
}
.timeline-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 15px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--gold);
}
.timeline-list li + li { border-top: 1px dashed var(--line); }
.timeline-list strong { font-family: var(--font-body); font-weight: 500; color: var(--gold-dark); margin-right: 6px; }

.dress-code { color: #3c3c3c; font-size: 16.5px; margin-bottom: 20px; }
.cal-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Guest photo uploads ── */

.photos-block { grid-column: 1 / -1; }
.photos-intro { color: var(--muted); font-size: 16px; margin-bottom: 18px; max-width: 560px; }
.photos-name { max-width: 320px; }
.photo-list { list-style: none; margin-top: 18px; }
.photo-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 14px;
    align-items: center;
    padding: 10px 0;
    font-size: 13.5px;
}
.photo-list li + li { border-top: 1px dashed var(--line); }
.photo-list .p-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.photo-list .p-status { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.photo-list .p-bar { grid-column: 1 / -1; height: 4px; background: #EFECE4; border-radius: 999px; overflow: hidden; }
.photo-list .p-fill { height: 100%; width: 0; background: var(--gold); border-radius: 999px; transition: width .2s ease; }
.photo-list li.p-done .p-status { color: var(--gold-dark); font-weight: 500; }
.photo-list li.p-done .p-fill { width: 100% !important; }
.photo-list li.p-error .p-status { color: #8a3d36; font-weight: 500; }
.photo-list li.p-error .p-fill { background: #b5aa9a; }

.invite-footer {
    text-align: center;
    color: #A8A296;
    font-size: 13.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 40px 0 24px;
}

.empty-state { text-align: center; padding: 140px 24px; }
.empty-state h1 { font-size: 44px; margin: 18px 0 12px; }
.empty-state p { color: var(--muted); }

/* ════════════ ADMIN ════════════ */

.admin-body { background: #F6F5F1; }

.topbar {
    background: #FFFFFF;
    border-bottom: 1px solid var(--line);
    padding: 0 34px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar-brand { display: flex; align-items: baseline; gap: 14px; }
.topbar-brand .logo { font-family: var(--font-heading); font-weight: 600; font-size: 24px; color: var(--ink); }
.topbar-brand .tag { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.topbar-nav { display: flex; align-items: center; gap: 20px; }
.topbar-nav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.topbar-nav a:hover { color: var(--gold-dark); }

.admin-wrap { max-width: 1200px; margin: 0 auto; padding: 34px 24px 80px; }

.controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
}
.controls-row select { width: auto; min-width: 260px; font-weight: 500; }
.controls-row .spacer { flex: 1; }
.controls-row input[type=text] { width: 240px; }
.btn-sm { padding: 10px 20px; font-size: 13px; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 26px;
}
.stat-card { padding: 22px 24px; display: flex; align-items: center; gap: 16px; }
.stat-card .icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.stat-card .icon svg { width: 22px; height: 22px; }
.stat-card .num { font-family: var(--font-heading); font-weight: 600; font-size: 32px; line-height: 1; }
.stat-card .lbl { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-top: 5px; }
.sync-note { font-size: 11.5px; color: #a9a49a; margin-top: 3px; }
.sync-note.pending { color: var(--gold-dark); font-weight: 500; }

.table-card { overflow: hidden; }
.table-scroll { overflow-x: auto; }
table.rsvp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rsvp-table th {
    text-align: left;
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9a9a9a;
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.rsvp-table td { padding: 15px 18px; border-bottom: 1px solid #F4F2EC; vertical-align: top; }
.rsvp-table tr:last-child td { border-bottom: none; }
.rsvp-table tr:hover td { background: #FBFAF6; }
.rsvp-table .g-name { font-weight: 500; }
.rsvp-table .g-contact { color: var(--muted); font-size: 13px; }
.rsvp-table .g-msg { color: var(--muted); font-size: 13px; max-width: 280px; }

.badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    border-radius: 999px;
    padding: 4px 13px;
    letter-spacing: .04em;
}
.badge-yes { background: var(--gold-tint); color: var(--gold-dark); }
.badge-no { background: #EFEFEF; color: #7c8083; }
.badge-open { background: var(--gold-tint); color: var(--gold-dark); }
.badge-closed { background: rgba(0, 0, 0, .08); color: #4c4c4c; }

.row-del {
    background: none; border: none; cursor: pointer;
    color: #c9c9c9; padding: 4px; border-radius: 8px;
    display: inline-flex;
}
.row-del:hover { color: var(--ink); background: rgba(0, 0, 0, .06); }
.row-del svg { width: 16px; height: 16px; }

.table-empty { text-align: center; color: var(--muted); padding: 60px 20px; }

/* ── Modal ── */

.modal-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 200;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px;
    overflow-y: auto;
}
.modal-backdrop.open { display: flex; }
.modal {
    background: #FFFFFF;
    border-radius: 18px;
    width: 100%;
    max-width: 560px;
    padding: 34px 36px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .2);
}
.modal h3 { font-size: 26px; margin-bottom: 24px; }
.modal-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.modal-actions .right { display: flex; gap: 12px; margin-left: auto; }
.link-danger { background: none; border: none; color: #8a3d36; font-size: 13px; cursor: pointer; font-family: var(--font-body); font-weight: 500; padding: 8px 0; }
.link-danger:hover { text-decoration: underline; }

/* ── Background picture manager (event modal) ── */

.bg-fields { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 18px; }
.bg-fields > label { margin-bottom: 12px; }
.bg-field {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
}
.bg-field + .bg-field { border-top: 1px dashed var(--line); }
.bg-thumb {
    width: 84px; height: 52px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #F4F2EC center/cover no-repeat;
    display: flex; align-items: center; justify-content: center;
    color: #b5b0a4;
    font-size: 11px;
    flex-shrink: 0;
    overflow: hidden;
}
.bg-label { flex: 1; }
.bg-label strong { display: block; font-family: var(--font-body); font-weight: 500; font-size: 13.5px; }
.bg-label span { color: var(--muted); font-size: 12px; }
.bg-field .btn { padding: 8px 16px; font-size: 12.5px; }
.bg-note { color: var(--muted); font-size: 12.5px; margin-top: 8px; }

.font-preview {
    width: 84px; height: 52px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #FBFAF6;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    color: var(--ink);
    flex-shrink: 0;
    overflow: hidden;
}

.qr-modal-box { max-width: 380px; text-align: center; }
.qr-hint { color: var(--muted); font-size: 13.5px; margin-bottom: 20px; }
#qr-box { display: flex; justify-content: center; margin-bottom: 16px; }
#qr-box img, #qr-box canvas { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #FFFFFF; }
.qr-url { font-size: 12.5px; color: var(--muted); word-break: break-all; margin-bottom: 16px; }
.qr-modal-box .modal-actions .right { margin: 0 auto; }

/* ── Login ── */

.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--cream); }
.login-card { width: 100%; max-width: 400px; padding: 46px 44px; text-align: center; }
.login-card .eyebrow { display: block; margin-bottom: 12px; }
.login-card h1 { font-size: 36px; margin-bottom: 30px; }
.login-card form { text-align: left; }
.login-card .btn { width: 100%; margin-top: 6px; }
.login-err { color: #8a3d36; font-size: 13px; margin-top: 14px; min-height: 18px; }

/* ── Responsive ── */

@media (max-width: 900px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .details-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    :root { --gutter: 16px; }
    /* No bottom padding: the footer supplies the closing space, and anything
       extra here reads as dead scroll below the footer text. */
    .invite { padding: 0 var(--gutter) 0; }
    .invite-hero { padding: 44px 0 32px; }
    .hero-full { min-height: 100svh; padding: 20px 0 88px; }
    .hero-hint { margin-top: 16px; font-size: 14.5px; }
    .pull-cue { font-size: 11px; letter-spacing: .22em; }

    /* Step 1 is sized to land in a single screen after the pull-up:
       two-up option cards and paired fields instead of one long column. */
    /* Land the section flush at the top — any scroll margin leaves a strip of
       the hero showing above it. */
    #rsvp { scroll-margin-top: 0; }
    /* Screen two is exactly the viewport minus the footer, so the RSVP card and
       the footer together fill one screen with nothing left over to scroll. */
    /* Screen two = RSVP card + footer, exactly one viewport tall. The card
       takes whatever is left after the footer, so the footer's height never
       has to be measured or guessed. */
    .screen-two {
        min-height: 100svh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
    }
    .rsvp-step {
        padding-top: 0;
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    /* With Step 2 present, Step 1 takes a whole screen so the two never share
       a viewport, and Step 2 starts on its own screen. */
    html.details-open .rsvp-step { min-height: 100svh; min-height: 100dvh; }
    html.details-open .details-section { min-height: 100svh; min-height: 100dvh; margin-top: 0; padding-top: 30px; }
    .rsvp-step.has-bg { padding: 14px var(--gutter) 16px; }
    .welcome-note { font-size: 14.5px; margin-bottom: 10px; line-height: 1.4; }
    .rsvp-panel { padding: 13px 14px 14px; border-radius: 14px; }
    .rsvp-panel h2 { font-size: 26px; margin: 3px 0 10px; }
    .step-tag { font-size: 10.5px; margin-bottom: 2px; }
    .step-tag span { padding: 3px 10px; font-size: 10px; }

    .attend-toggle { grid-template-columns: 1fr 1fr; gap: 8px; }
    .attend-option { padding: 8px 6px; border-radius: 10px; }
    .attend-option strong { font-size: 13px; margin-bottom: 0; }
    .attend-option span { font-size: 10.5px; line-height: 1.25; }

    .field { margin-bottom: 8px; }
    .field-row { grid-template-columns: 1fr 1fr; gap: 8px; }
    label { font-size: 12px; margin-bottom: 2px; }
    /* Stay at 16px: anything smaller makes iOS zoom the page on focus. */
    input[type=text], input[type=email], input[type=tel], input[type=number],
    input[type=date], input[type=password], select, textarea {
        font-size: 16px; padding: 8px 11px; border-radius: 10px;
    }
    textarea { min-height: 44px; }
    .rsvp-actions { margin-top: 10px; }
    .rsvp-actions .btn { padding: 11px 26px; font-size: 14px; min-width: 190px; }
    .deadline-note { margin-top: 7px; font-size: 11.5px; }
    .invite-footer { padding: 12px 0 10px; font-size: 11px; letter-spacing: .1em; }

    .details-head h2 { font-size: 34px; }
    .detail-block { padding: 22px 18px; }
    .details-section { margin-top: 36px; }
    .stat-grid { grid-template-columns: 1fr; }
    .controls-row input[type=text] { width: 100%; }
    .topbar { padding: 0 16px; }
}

/* Narrow handsets (360px class): keep the date on one line */
@media (max-width: 400px) {
    .invite-sub { font-size: 14px; letter-spacing: .1em; }
}

/* Very short screens (legacy 640px-tall handsets): drop the welcome line so
   the form and footer still land in a single screen. */
@media (max-width: 640px) and (max-height: 700px) {
    .welcome-note { display: none; }
    .rsvp-step.has-bg { padding: 10px var(--gutter) 12px; }
    .rsvp-panel h2 { font-size: 24px; margin: 2px 0 8px; }
    textarea { min-height: 38px; }
}