/* ============================================================
   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;
    /* --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; }

.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: 22px;
}
@media (min-width: 1024px) {
    .dm-controls {
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        position: sticky;
        top: 24px;
    }
}

.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-partner-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.dm-partner-row input[type="text"] { flex: 1 1 130px; }
.dm-partner-row select { flex: 0 1 100px; }
.dm-partner-row input[type="file"] { flex: 1 1 100%; }
@media (min-width: 420px) {
    .dm-partner-row input[type="file"] { flex: 1 1 140px; font-size: 0.78rem; }
}

.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 {
    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-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;
}
#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-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 360px;
    overflow-y: auto;
}
.dm-guest-list li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--mist);
    font-size: 0.92rem;
}
.dm-guest-list li .dm-guest-status {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 4px;
}
.dm-guest-status.attending { background: #e6f3ec; color: #1c6b45; }
.dm-guest-status.declined { background: #fbe9e7; color: #a83a2f; }
.dm-guest-status.waiting { background: var(--paper); color: #6b7280; }
.dm-guest-list li.is-new { animation: dm-highlight 1s ease; }
@keyframes dm-highlight {
    from { background: #fdf3e0; }
    to { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .dm-guest-list li.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;
}

/* ── 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; }
}