/* ===== Jetour RSVP — single stylesheet ===== */

:root {
    --bg: #140a17;
    --text: #ede7f4;
    --muted: #cfc7da;
    --panel: rgba(175, 162, 180, 0.22);
    --panel-stroke: rgba(255, 255, 255, 0.25);
    --radius: 22px;

    /* fluid type */
    --fz-xxs: clamp(11px, 1.8vw, 13px);
    --fz-xs: clamp(12px, 2vw, 14px);
    --fz-sm: clamp(13px, 2.2vw, 15px);
    --fz-md: clamp(14px, 2.4vw, 16px);
    --fz-lg: clamp(18px, 3vw, 20px);
    --fz-xl: clamp(22px, 4vw, 26px);
    --fz-hero: clamp(38px, 11vw, 64px);
}

html,
body {
    margin: 0;
    height: 100%;
    /* background: #000; */
    color: var(--text);
    font-family: "Montserrat", "Poppins", system-ui, -apple-system, Segoe UI,
        Roboto, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}
img {
    max-width: 100%;
    display: block;
}

/* Background art */
.page {
    min-height: 100svh;
    background: #000 url("/assets/v2/BG.png") center top/cover no-repeat fixed;
}

/* Center column like your comps */
.canvas {
    width: min(430px, 100%);
    margin: 0 auto;
    padding: clamp(16px, 3.5vw, 28px) clamp(14px, 4vw, 26px)
        clamp(24px, 5vw, 40px);
    position: relative;
}

/* Brand + headings */
.logo {
    width: 300px;
    margin: 20px auto 20px;
}
.h1 {
    font: 800 var(--fz-xl) / 1.25 inherit;
    text-align: center;
    color: #fff;
    margin: 10px 0 16px;
}
.h2 {
    font: 800 var(--fz-lg) / 1.2 inherit;
    color: #fff;
    margin: 10px 0 12px;
}
.p {
    font: 400 var(--fz-sm) / 1.6 inherit;
    color: var(--text);
    text-align: center;
    margin: 0 0 10px;
}

/* Glass card (thank-you box, etc.) */
.card {
    background: var(--panel);
    border: 1px solid var(--panel-stroke);
    border-radius: var(--radius);
    padding: clamp(18px, 3.5vw, 24px) clamp(16px, 3.5vw, 20px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35) inset,
        0 2px 18px rgba(0, 0, 0, 0.45);
}

/* Event rows */
.details {
    margin-top: clamp(10px, 2.2vw, 14px);
}
.row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    justify-content: center;
}
.row svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}
.row strong {
    font-size: var(--fz-md);
}

/* Page-1 headline bits */
.hero-title {
    font: 800 var(--fz-hero) / 0.95 "Montserrat", sans-serif;
    letter-spacing: 0.08em;
    text-align: center;
    margin: 6px 0 6px;
}
.hero-sub {
    font: 800 clamp(18px, 6vw, 28px) / 1 "Montserrat", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
    margin: 0 0 10px;
}
.hero-sub .dim {
    color: #b7a6be;
}
.note {
    font-size: var(--fz-sm);
    text-align: center;
    color: var(--text);
    max-width: 92%;
    margin: 10px auto;
}
.invite-note {
    font-size: var(--fz-xs);
    text-align: center;
    color: var(--text);
    margin: 16px 0 8px;
}

/* Image buttons */
.btn-img {
    appearance: none;
    border: 0;
    background: transparent;
    display: block;
    margin: 18px auto 0;
}
.btn-rsvp {
    background: url("/assets/v2/Button%201.png") center/contain no-repeat;
    width: 280px;
    height: 58px;
}
.btn-confirm {
    background: url("/assets/v2/Button%202.png") center/contain no-repeat;
    width: 280px;
    height: 58px;
}

/* Floating icons */
.fab {
    position: fixed;
    z-index: 10;
    left: calc(16px + env(safe-area-inset-left));
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: url("/assets/v2/Home.png") center/cover no-repeat;
    /* box-shadow: 12px 12px 22px rgba(0, 0, 0, 0.45); */
}
.fab.back {
    left: auto;
    right: calc(16px + env(safe-area-inset-right));
    background: url("/assets/v2/Back.png") center/cover no-repeat;
}

/* Form (page 2) */
.form-intro {
    color: var(--text);
    font-size: var(--fz-sm);
    text-align: left;
    margin: -2px 0 12px;
}
.form-card {
    padding: 18px 14px;
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.label {
    font-weight: 700;
    font-size: var(--fz-xs);
    color: #fff;
}
.input {
    height: 42px;
    border-radius: 10px;
    border: 0;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    color: #222;
    font-size: var(--fz-sm);
}
.textarea {
    min-height: 80px;
    resize: vertical;
}
.select {
    background: #fff;
}
.consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 12px 2px 6px;
    color: var(--muted);
    font-size: var(--fz-xxs);
}
.consent input {
    width: 18px;
    height: 18px;
    transform: translateY(2px);
}

/* Tablet/desktop widen */
@media (min-width: 768px) {
    .canvas {
        width: min(560px, 100%);
    }
}
@media (min-width: 1024px) {
    .canvas {
        width: min(640px, 100%);
    }
}

/* ===== Form layout like the UI (labels left, inputs right) ===== */

/* Base: stacked on small screens (already your default) */
.form-grid .field {
    display: grid;
    gap: 8px;
}

/* Desktop/tablet: split into two columns */
@media (min-width: 620px) {
    .form-grid {
        row-gap: 14px;
    }
    .form-grid .field {
        grid-template-columns: 1.1fr 1.4fr; /* label : input */
        align-items: center;
    }
    .form-grid .field .label {
        text-align: left;
        color: #fff;
        font-weight: 700;
        font-size: var(--fz-sm);
    }
    .form-grid .field .label small {
        font-weight: 400;
        opacity: 0.75;
    }
    /* add the colon just like the comp */
    .form-grid .field .label::after {
        content: " :";
        margin-left: 8px;
        opacity: 0.6;
    }
}

/* Inputs look like the rounded light fields in the comp */
.input,
.textarea,
.select {
    width: 100%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.96),
        rgba(255, 255, 255, 0.9)
    );
    border: 0;
    border-radius: 12px;
    padding: 10px 12px;
    color: #222;
    font-size: var(--fz-sm);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

.textarea {
    min-height: 80px;
    resize: vertical;
}

/* Keep the image button obviously clickable */
.btn-img {
    cursor: pointer;
}

/* (Optional) tighten the card a touch to match screenshot spacing */
.form-card {
    padding: 18px 16px;
}

/* ==== RSVP page v2 skin (matches the screenshot) ==== */

/* Narrow centered column, extra bottom room so waves show */
.canvas {
    width: min(440px, 92%);
    padding-bottom: clamp(44px, 16vh, 180px);
}

/* Glass card like comp */
.card {
    background: linear-gradient(
        180deg,
        rgba(86, 70, 96, 0.44),
        rgba(60, 47, 69, 0.46)
    );
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    box-shadow: inset 0 10px 28px rgba(0, 0, 0, 0.35),
        0 12px 28px rgba(0, 0, 0, 0.3);
    padding: 22px 18px;
}

/* Stack labels above inputs (override the 2-column rules) */
.form-grid .field {
    display: block !important;
    margin-bottom: 14px;
}
.form-grid .field .label {
    display: block;
    margin: 0 0 7px;
    font-weight: 700;
    color: #fff;
}
.form-grid .field .label small {
    font-weight: 400;
    opacity: 0.75;
}
.form-grid .field .label::after {
    content: "" !important;
} /* no colon */

/* Inputs look like light rounded bars from the comp */
.input,
.textarea,
.select {
    width: 90%;
    height: 44px;
    background: linear-gradient(180deg, #f5f3f7 0%, #ece8f0 100%);
    border: 0;
    border-radius: 14px;
    padding: 10px 12px;
    color: #222;
    font-size: var(--fz-sm);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
    outline: none;
}
.textarea {
    min-height: 86px;
    resize: vertical;
}

/* Consent block small & near waves */
.consent {
    margin: 12px 2px 6px;
    font-size: var(--fz-xxs);
    color: #cfc7da;
}

/* Confirm RSVP button image */
.btn-img {
    cursor: pointer;
}
.btn-confirm {
    background: url("/assets/v2/Button%202.png") center/contain no-repeat;
    width: 268px;
    height: 56px;
    margin: 12px auto 0;
}

/* Bottom-left Home & Back (both at left, like comp) */
.fab {
    position: fixed;
    z-index: 10;
    left: calc(16px + env(safe-area-inset-left));
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: url("/assets/v2/Home.png") center/cover no-repeat;
    /* box-shadow: 12px 12px 22px rgba(0, 0, 0, 0.45); */
}
.fab.back {
    /* place to the right of Home, still bottom-left area */
    left: calc(16px + 56px + 12px + env(safe-area-inset-left));
    right: auto;
    background: url("/assets/v2/Back.png") center/cover no-repeat;
}

/* Headline spacing like screenshot */
.h2 {
    margin-top: 8px;
    margin-bottom: 6px;
}
.form-intro {
    margin-bottom: 12px;
    line-height: 1.55;
}

/* ===== Page 1: full-bleed poster background + bottom CTA ===== */

/* Use poster artwork as the whole-screen background on page 1 only */
.page--poster {
    /* full height even on mobile address-bar collapse */
    min-height: var(--app-svh, 100svh);
    background: #000 url("/assets/v2/homeBG.png") center top / cover no-repeat;
    /* 'fixed' can stutter on iOS; keep it scrolling */
    background-attachment: scroll;
}

/* remove inner padding/width constraints for the poster page */
.canvas--bare {
    width: 100%;
    max-width: none;
    padding: 0;
    min-height: var(--app-svh, 100svh);
}

/* RSVP button as an image, floating near the bottom center */
.cta-rsvp {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(16px, 5.5vh, 36px); /* sits above the bottom waves */
    width: 280px;
    height: 58px;
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 5;
    background: url("/assets/v2/rsvp.png") center / contain no-repeat;
}

/* keep text for screen readers only */
.cta-rsvp > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

/* slightly larger CTA on wider screens */
@media (min-width: 768px) {
    .cta-rsvp {
        width: 300px;
        height: 62px;
    }
}

.is-hidden {
    display: none !important;
}

/* Force-hide +1 wrappers no matter what earlier rules say */
.form-grid .field.is-hidden,
.field.is-hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* On larger screens, swap background image for desktop version */
@media (min-width: 1024px) {
    .page--poster {
        background-color: #1b0821;
        background-image: url("/assets/v2/homeBG2.png");
        background-size: contain;
    }
}

/* ===== Show page (read-only details) ===== */
/* Two-column on wider screens, stacked on mobile */
.show-grid .field {
    display: grid;
    gap: 8px;
}
@media (min-width: 620px) {
    .show-grid .field {
        grid-template-columns: 1.1fr 1.4fr;
        align-items: center;
    }
}
.show-grid .label {
    font-weight: 700;
    color: #fff;
    font-size: var(--fz-sm);
}
.show-grid .label::after {
    content: " :";
    margin-left: 8px;
    opacity: 0.6;
}

/* Reuse input look, but make it read-only and selectable for copy */
.input.readonly {
    pointer-events: none;
    user-select: text;
    background: linear-gradient(180deg, #f5f3f7 0%, #ece8f0 100%);
    border-radius: 14px;
    padding: 10px 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
    color: #222;
    font-size: var(--fz-sm);
}
.input.readonly.multiline {
    white-space: pre-wrap;
    align-items: flex-start;
    min-height: 72px;
}

/* Stretch the “full width” row (special requests) across the grid */
.field.field--full {
    grid-column: 1 / -1;
}

/* Tighten the card like the comp */
.form-card {
    padding: 22px 18px;
}

.flash {
    margin: 12px auto 0;
    max-width: 640px;
    text-align: center;
    font-weight: 700;
    padding: 10px 12px;
    border-radius: 12px;
    opacity: 1;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.flash--ok {
    background: rgba(52, 199, 89, 0.14);
    border: 1px solid rgba(52, 199, 89, 0.35);
    color: #b1ffb1;
}
.flash.is-fade {
    opacity: 0;
    transform: translateY(-6px);
}

.btn-checkin {
    background: url("/assets/v2/checkin.png") center/contain no-repeat;
    width: 268px;
    height: 56px;
    margin: 12px auto 0;
}