/* ============================================================
   VenueMax /demo/rsvp -- the interactive RSVP-demo shell. Loaded
   alongside guides.css for its layout/typography scaffolding
   (.g-nav/.g-footer/.g-container/.btn/.dm-* components), but this page
   IS a recreation of the real page builder, so its colors are the
   real product's own brand tokens (tailwind.config.js's brand-*
   values / the daisyUI "venuemax" theme), not the guide pages' pine/
   brass marketing palette. Overriding the shared custom properties
   here (rather than guides.css's own values) keeps /guides pages
   untouched -- this only applies under body.demo-page.
   ============================================================ */

body.demo-page {
    padding-bottom: 0;
}

/* guides.css's dark-mode override (body.guide-page:not([data-theme=
   "light"]) inside @media prefers-color-scheme:dark, and
   body.guide-page[data-theme="dark"]) is (0,2,1) specificity -- a
   plain "body.demo-page" selector (0,1,1) loses that fight, so on a
   dark-mode OS the demo page silently reverted to the GUIDE page's
   dark palette (light text) while this page's own elements
   (.dm-precustomize, .dm-dashboard-panel, the selected tab, etc.)
   still had hardcoded white backgrounds -- light text on white,
   nearly invisible. "html body.guide-page.demo-page" matches that
   specificity's class count (2) and beats it on element count (2 vs
   1), so it wins unconditionally regardless of source order or the
   visitor's OS color-scheme preference. This page always renders with
   the real product's own (light) palette, not a dark variant -- the
   real dashboard doesn't have one either. */
html body.guide-page.demo-page {
    /* --pine doubles as both a background-fill color (buttons) and a
       plain text/link color throughout guides.css -- brand-gold
       (#C6A96B) can only safely play the first role (2.26:1 as text
       on white, well under AA), so it's kept OUT of --pine and applied
       explicitly to the specific "gold button" elements below instead.
       --pine here is brand-dark, used for links/tab text/etc. */
    --pine: #2B2B2B;
    --pine-deep: #3A2F2F;
    /* brand-mauve -- the real theme's own "secondary" color, used here
       for focus rings/accents (passes AA easily, 8.9:1+ on paper/white,
       unlike gold). */
    --brass: #5A3E4D;
    --paper: #FAF9F7;
    --mist: #EDE7DF;
    --ink: #2B2B2B;
}

/* The real product's own confirmed pairing for a "selected/primary"
   fill (sidebar.php's active nav item: bg-brand-gold text-white) --
   matched here rather than substituted with higher-contrast text,
   since the goal is accurately recreating the real builder's look,
   not out-designing it. */
body.demo-page a.g-nav-cta,
body.demo-page .btn-primary,
body.demo-page .dm-toast {
    background: #C6A96B;
    color: #fff;
}
body.demo-page a.g-nav-cta:hover,
body.demo-page .btn-primary:hover {
    background: #A28A57;
}

.dm-main { padding: 32px 0 64px; }

.dm-intro {
    font-family: "Newsreader", Georgia, serif;
    font-size: 1.15rem;
    color: var(--ink);
    max-width: 68ch;
    margin: 0 0 24px;
}

.dm-toast {
    background: var(--pine);
    color: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 20px;
    font-family: "Instrument Sans", system-ui, sans-serif;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 12px;
}
.dm-toast a { color: #fff; text-decoration: underline; font-weight: 600; }
/* Same "own display:flex beats [hidden]'s default display:none" issue
   as .dm-preview-frame-wrap above -- not currently hit (nothing
   re-hides the toast today) but guarded against regardless. */
.dm-toast[hidden] { display: none; }

.dm-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 1024px) {
    .dm-layout { grid-template-columns: 360px 1fr; gap: 32px; align-items: start; }
}

/* ── Controls column ─────────────────────────────────────── */
.dm-controls-col {
    font-family: "Instrument Sans", system-ui, sans-serif;
}

.dm-precustomize {
    background: #fff;
    border: 1px solid var(--mist);
    border-radius: 10px;
    padding: 22px;
}
.dm-precustomize p { margin: 0 0 16px; font-size: 0.98rem; }

.dm-controls {
    background: #fff;
    border: 1px solid var(--mist);
    border-radius: 10px;
    padding: 16px;
}
@media (min-width: 1024px) {
    .dm-controls {
        /* No max-height/overflow-y here on purpose -- this panel must
           never get its own internal scrollbar; it just scrolls with
           the page like everything else once it's taller than the
           viewport. */
        position: sticky;
        top: 24px;
    }
}

/* ── Accordion cards -- mirrors the real page builder's own
   expand/collapse card layout (Template, Color Palette, Display
   Names, Banner, etc. are each their own clickable card there). ── */
.dm-card {
    border: 1px solid var(--mist);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}
.dm-card:last-of-type { margin-bottom: 6px; }
.dm-card-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--paper);
    border: none;
    padding: 0 16px;
    min-height: 48px;
    font-family: "Instrument Sans", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
}
.dm-card-header:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: -2px;
}
.dm-card-chevron {
    color: #6b7280;
    transition: transform 0.15s ease;
}
.dm-card-header[aria-expanded="true"] .dm-card-chevron {
    transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
    .dm-card-chevron { transition: none; }
}
.dm-card-body {
    padding: 4px 16px 16px;
    background: #fff;
}

.dm-field {
    padding: 16px 0;
    border-bottom: 1px solid var(--mist);
}
.dm-field:first-child { padding-top: 0; }
.dm-field:last-of-type { border-bottom: none; }

.dm-field label,
.dm-field-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}
.dm-field-help {
    font-size: 0.82rem;
    color: #6b7280;
    margin: 0 0 8px;
}
.dm-field-error {
    font-size: 0.82rem;
    color: #b91c1c;
    margin: 6px 0 0;
}

.dm-field input[type="text"],
.dm-field input[type="date"],
.dm-field select,
.dm-field textarea {
    width: 100%;
    border: none;
    border-bottom: 2px solid var(--mist);
    background: transparent;
    font-family: "Instrument Sans", system-ui, sans-serif;
    font-size: 1rem;
    color: var(--ink);
    padding: 8px 2px;
    resize: vertical;
}
.dm-field input[type="text"]:focus,
.dm-field input[type="date"]:focus,
.dm-field select:focus,
.dm-field textarea:focus {
    border-bottom-color: var(--brass);
    outline: none;
}
.dm-field input[type="file"] {
    font-size: 0.85rem;
    max-width: 100%;
}

.dm-char-count {
    font-size: 0.78rem;
    color: #6b7280;
    text-align: right;
    margin: 4px 0 0;
}

.dm-name-date-row {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.dm-name-date-row input { flex: 1 1 120px; }

.dm-swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.dm-color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    padding: 0;
}
.dm-color-swatch[aria-pressed="true"] {
    border-color: var(--brass);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brass);
}
.dm-color-swatch:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
}

.dm-choice-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dm-choice {
    border: 1px solid var(--mist);
    background: #fff;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.88rem;
    font-family: "Instrument Sans", system-ui, sans-serif;
    cursor: pointer;
    min-height: 40px;
}
.dm-choice[aria-pressed="true"] {
    border-color: var(--pine);
    background: var(--pine);
    color: #fff;
    font-weight: 600;
}
.dm-choice:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.dm-actions {
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dm-actions .btn { width: 100%; }

.dm-link-btn {
    background: none;
    border: none;
    color: var(--pine);
    text-decoration: underline;
    font-family: "Instrument Sans", system-ui, sans-serif;
    font-size: 0.88rem;
    cursor: pointer;
    padding: 8px 0;
    min-height: 32px;
    text-align: left;
}

.dm-confirm-inline {
    background: var(--paper);
    border: 1px solid var(--mist);
    border-radius: 8px;
    padding: 14px;
    margin-top: 4px;
}
.dm-confirm-inline p { margin: 0 0 10px; font-size: 0.88rem; }
.dm-confirm-inline .btn { width: auto; padding: 0 18px; min-height: 40px; margin-right: 8px; }

/* ── Preview column ──────────────────────────────────────── */
.dm-preview-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dm-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.dm-tabs {
    display: flex;
    gap: 4px;
    background: var(--mist);
    border-radius: 8px;
    padding: 4px;
}
.dm-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    font-family: "Instrument Sans", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    min-height: 40px;
}
.dm-tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: inset 0 -2px 0 #C6A96B; }
.dm-tab:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.dm-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #C6A96B;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}
/* Same "own display beats [hidden]'s default display:none" issue as
   .dm-preview-frame-wrap/.dm-toast elsewhere in this file. */
.dm-tab-badge[hidden] {
    display: none;
}

.dm-device-toggle { display: flex; gap: 6px; }
.dm-device-btn {
    border: 1px solid var(--mist);
    background: #fff;
    border-radius: 6px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 1rem;
}
.dm-device-btn[aria-pressed="true"] { border-color: var(--pine); background: var(--paper); }
.dm-device-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
@media (max-width: 1023px) {
    .dm-device-toggle { display: none; }
}

.dm-preview-frame-wrap {
    background: var(--mist);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: center;
    overflow-x: auto;
}
/* This class's own "display: flex" above otherwise beats the browser's
   default "[hidden] { display: none }" on specificity, so switching to
   the "Your dashboard" tab (which sets the [hidden] attribute here via
   jQuery's .prop('hidden', true)) left the RSVP preview visibly
   showing underneath the dashboard panel instead of being replaced by
   it. */
.dm-preview-frame-wrap[hidden] {
    display: none;
}
#dmPreviewFrame {
    width: 100%;
    max-width: 1024px;
    height: 720px;
    border: none;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(23, 44, 38, 0.18);
    transition: max-width 0.15s ease;
}
.dm-preview-frame-wrap.is-phone #dmPreviewFrame { max-width: 390px; }
@media (prefers-reduced-motion: reduce) {
    #dmPreviewFrame { transition: none; }
}

.dm-try-guest-btn { align-self: flex-start; }

/* ── Dashboard panel ─────────────────────────────────────── */
.dm-dashboard-panel {
    background: #fff;
    border: 1px solid var(--mist);
    border-radius: 12px;
    padding: 20px;
    font-family: "Instrument Sans", system-ui, sans-serif;
}
.dm-dashboard-note {
    font-size: 0.88rem;
    color: #6b7280;
    margin: 0 0 16px;
}
.dm-dashboard-counts {
    display: flex;
    gap: 24px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.dm-count { display: flex; flex-direction: column; }
.dm-count-value {
    font-family: "Newsreader", Georgia, serif;
    font-weight: 600;
    font-size: 1.8rem;
    color: var(--pine);
}
.dm-count-label {
    font-size: 0.8rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dm-guest-table-wrap {
    max-height: 420px;
    overflow: auto;
    border: 1px solid var(--mist);
    border-radius: 8px;
}
.dm-guest-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    white-space: nowrap;
}
.dm-guest-table thead th {
    position: sticky;
    top: 0;
    background: var(--paper);
    text-align: left;
    padding: 0;
    border-bottom: 1px solid var(--mist);
}
.dm-sort-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    font-family: "Instrument Sans", system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    padding: 10px 12px;
    cursor: pointer;
    min-height: 40px;
}
.dm-sort-btn:hover,
th[aria-sort="ascending"] .dm-sort-btn,
th[aria-sort="descending"] .dm-sort-btn {
    color: var(--ink);
}
.dm-sort-btn:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: -2px;
}
.dm-sort-arrow {
    font-size: 0.7rem;
    color: var(--pine);
}
.dm-guest-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--mist);
}
.dm-guest-table tbody tr:last-child td { border-bottom: none; }

.dm-status-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.dm-status-badge.attending { background: #e6f3ec; color: #1c6b45; }
.dm-status-badge.declined { background: #fbe9e7; color: #a83a2f; }
.dm-status-badge.invited { background: #eef1fb; color: #3d4f9e; }
.dm-status-badge.pending { background: var(--paper); color: #6b7280; }
.dm-guest-table tbody tr.is-new { animation: dm-highlight 1s ease; }
@keyframes dm-highlight {
    from { background: #fdf3e0; }
    to { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .dm-guest-table tbody tr.is-new { animation: none; background: #fdf3e0; }
}

/* ── Save dialog ─────────────────────────────────────────── */
.dm-dialog {
    border: none;
    border-radius: 12px;
    padding: 0;
    max-width: 420px;
    width: calc(100% - 40px);
    box-shadow: 0 24px 60px rgba(23, 44, 38, 0.25);
}
.dm-dialog::backdrop { background: rgba(23, 44, 38, 0.55); }
.dm-dialog-form, .dm-dialog-confirmed { padding: 28px; font-family: "Instrument Sans", system-ui, sans-serif; }
.dm-dialog-form h2, .dm-dialog-confirmed h2 {
    font-family: "Newsreader", Georgia, serif;
    font-weight: 600;
    font-size: 1.4rem;
    margin: 0 0 8px;
    color: var(--ink);
}
.dm-dialog-form p, .dm-dialog-confirmed p { margin: 0 0 18px; font-size: 0.95rem; color: var(--ink); }
.dm-dialog-form label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 6px; }
.dm-dialog-form input[type="email"] {
    width: 100%;
    border: 1px solid var(--mist);
    border-radius: 8px;
    padding: 12px;
    font-size: 1rem;
    margin-bottom: 8px;
    min-height: 48px;
}
.dm-dialog-form input[type="email"]:focus { outline: 2px solid var(--brass); outline-offset: 2px; border-color: var(--brass); }
.dm-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dm-dialog-message { font-size: 0.88rem; margin: 4px 0 12px !important; }
.dm-dialog-message.is-error { color: #b91c1c; }
.dm-dialog-actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.dm-dialog-actions .btn { flex: 1; }

/* ── Below-demo static section ───────────────────────────── */
.dm-below {
    background: var(--paper);
    border-top: 1px solid var(--mist);
    padding: 40px 0;
    margin-top: 40px;
}
.dm-below h2 {
    font-family: "Newsreader", Georgia, serif;
    font-weight: 600;
    font-size: 1.4rem;
    margin: 0 0 10px;
}
.dm-below p {
    font-family: "Newsreader", Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 68ch;
    margin: 0;
}
.dm-photo-credits {
    font-family: "Instrument Sans", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    color: #6b7280;
    margin-top: 16px !important;
}
.dm-photo-credits a { color: #6b7280; }

/* ── Mobile: controls become a bottom sheet ──────────────── */
@media (max-width: 1023px) {
    .dm-controls[data-open="true"] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 75vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        z-index: 200;
        box-shadow: 0 -12px 40px rgba(23, 44, 38, 0.25);
    }
    .dm-controls:not([data-open="true"]) { display: none; }
    .dm-precustomize[data-open="true"] ~ .dm-controls { display: none; }
}