/* ============================================================
   /demo/reviews -- a static recreation of the real "Guest review
   request" card from Settings > Email (app/Views/venue/
   settings-dashboard.php) plus a live email preview modeled on the
   Messaging composer's (communications-dashboard.php /
   public_html/assets/css/communications.css). Every class/color here
   is ported directly from those two real dashboard pages, not
   reinvented -- same principle as demo-rsvp.css recreating the real
   page builder's own brand tokens. Loaded alongside guides.css (nav/
   footer/layout/.btn) and demo-rsvp.css (forces this page to the
   product's real light palette regardless of OS dark-mode, via
   body.guide-page.demo-page -- this page reuses that same class).
   ============================================================ */

.dr-intro { max-width: 68ch; }

.dr-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-top: 24px;
}
@media (min-width: 900px) {
    .dr-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ── Setting card (ported from settings-dashboard.php) ──────── */
.ui-setting-card {
    background: #fff;
    border: 1.5px solid #EDE7DF;
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 2px 6px rgba(43, 43, 43, 0.04);
    font-family: "Inter", system-ui, sans-serif;
}
.ui-setting-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #2B2B2B;
    margin: 0 0 4px;
}
.ui-setting-card > .muted { margin-bottom: 16px; }
.muted { font-size: 0.82rem; color: #9ca3af; margin: 0; }
.field-help { font-size: 0.78rem; color: #9ca3af; margin: 4px 0 0; }

.ui-setting-field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.ui-setting-field[hidden] { display: none; }
.ui-setting-field:first-of-type { margin-top: 0; }
.ui-setting-field > label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
}
.ui-setting-field input[type="text"],
.ui-setting-field input[type="email"],
.ui-setting-field input[type="url"],
.ui-setting-field textarea {
    width: 100%;
    max-width: 420px;
    padding: 8px 10px;
    border: 1.5px solid #EDE7DF;
    border-radius: 7px;
    font-size: 0.9rem;
    color: #2B2B2B;
    background: #fff;
    font-family: "Inter", system-ui, sans-serif;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    box-sizing: border-box;
}
.ui-setting-field input:focus,
.ui-setting-field textarea:focus {
    border-color: #C6A96B;
    box-shadow: 0 0 0 3px rgba(198, 169, 107, 0.15);
}
.ui-setting-field textarea { max-width: 100%; min-height: 90px; resize: vertical; }

/* ── Toggle (Yes / No) ────────────────────────────────────── */
.ui-toggle {
    display: inline-flex;
    align-self: flex-start;
    border: 1.5px solid #EDE7DF;
    border-radius: 8px;
    overflow: hidden;
    background: #FAF9F7;
}
.ui-toggle-option {
    padding: 7px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: "Inter", system-ui, sans-serif;
    color: #6b7280;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ui-toggle-option + .ui-toggle-option { border-left: 1.5px solid #EDE7DF; }
.ui-toggle-option.is-active { background: #C6A96B; color: #fff; }
.ui-toggle-option:not(.is-active):hover { background: #f0ebe3; color: #2B2B2B; }

/* ── Character counter ────────────────────────────────────── */
.ui-char-counter { font-size: 0.75rem; font-weight: 400; color: #9ca3af; margin-left: 6px; }
.ui-char-counter.is-near-limit { color: #f59e0b; }
.ui-char-counter.is-at-limit { color: #ef4444; }

/* ── Merge-field placeholder chips ────────────────────────── */
.comms-merge-hints { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.comms-merge-hint {
    font-size: 0.72rem;
    font-family: monospace;
    color: #6b7280;
    background: #F5F1EA;
    border: 1px solid #EDE7DF;
    padding: 2px 8px;
    border-radius: 999px;
    cursor: pointer;
}
.comms-merge-hint:hover { background: #EDE7DF; color: #2B2B2B; }
.comms-merge-hint:active { background: #C6A96B; color: #fff; border-color: #C6A96B; }

/* ── Days-after-event slider -- exact port of #reviewRequestDaysAfter
   from settings-dashboard.php, including the JS-painted gradient fill
   (WebKit has no fill pseudo-element of its own) -- see
   updateDaysAfterDisplay() in demo-reviews.js. ────────────────── */
.dr-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 340px;
    /* 20% bigger than the real card's 10px track / 24px thumb, per
       request. */
    height: 12px;
    border-radius: 999px;
    background: #EDE7DF;
    outline: none;
    cursor: pointer;
}
.dr-slider::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: transparent; }
.dr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28.8px;
    height: 28.8px;
    margin-top: -8.4px;
    border-radius: 50%;
    background: #C6A96B;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(43, 43, 43, 0.25);
    cursor: pointer;
}
.dr-slider::-moz-range-track { height: 12px; border-radius: 999px; background: #EDE7DF; }
.dr-slider::-moz-range-progress { height: 12px; border-radius: 999px; background: #C6A96B; }
.dr-slider::-moz-range-thumb {
    width: 28.8px;
    height: 28.8px;
    border-radius: 50%;
    background: #C6A96B;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(43, 43, 43, 0.25);
    cursor: pointer;
}
.dr-slider:focus { box-shadow: 0 0 0 4px rgba(198, 169, 107, 0.18); }
/* Row instead of the real card's stacked layout, per request -- the
   hint sits to the right of the slider rather than below it. */
.dr-slider-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dr-slider-row .dr-slider { flex: 0 1 340px; }
.dr-days-recommended { margin: 0; font-size: 0.8rem; font-weight: 700; color: #15803d; white-space: nowrap; }
/* 20% bigger than the real card's 0.82rem label, per request. */
.dr-days-after-label { font-size: 0.984rem; }

/* ── Template + subject/body panel -- a subtly-shaded sub-panel
   (same treatment as the real settings page's own nested "Automated
   Emails" card, .ui-automations-card) grouping the template picker
   through the merge-tag help text, so that whole block doesn't wash
   into the card's plain white background. ──────────────────────── */
.dr-template-section {
    background: #FAF7F0;
    border: 1px solid #EDE7DF;
    border-radius: 12px;
    padding: 20px;
    margin-top: 24px;
}

/* ── Template picker (demo-only -- the real card has one default,
   not two; added here per request so there's something to switch
   between and compare) ──────────────────────────────────────── */
.dr-template-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.dr-template-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 17px;
    border-radius: 24px;
    border: 1.8px solid #EDE7DF;
    background: #fff;
    color: #6b7280;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.dr-template-btn:hover { border-color: #C6A96B; color: #2B2B2B; }
.dr-template-btn.is-active { background: #C6A96B; border-color: #C6A96B; color: #fff; }

/* ── Live email preview -- ported from communications.css's
   .comms-phone-frame/.comms-mail-* (the real, working live preview
   from Settings > Messaging), sample data substituted instead of a
   real guest's. ──────────────────────────────────────────────── */
.dr-preview-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; position: sticky; top: 24px; }
.dr-preview-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; }
/* Ported from communications.css's .comms-inline-alert.is-info --
   updates live with the days-after-event slider, see
   initDaysAfterSlider() in demo-reviews.js. */
.dr-alert {
    padding: 12px 16px;
    border-radius: 10px;
    font-family: "Inter", system-ui, sans-serif;
    /* 10% bigger than the base 0.86rem, per request. */
    font-size: 0.946rem;
    line-height: 1.5;
    box-sizing: border-box;
}
.dr-alert.is-info { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E40AF; }
#drAudienceAlertDays { font-weight: 700; }
.comms-phone-frame {
    display: flex;
    flex-direction: column;
    min-height: 220px;
    background: #F5F1EA;
    border: 1px solid #EDE7DF;
    border-radius: 22px;
    padding: 14px 12px 18px;
    box-shadow: 0 10px 24px rgba(43, 43, 43, 0.08);
}
.comms-mail-frame { background: #fff; padding: 0; overflow: hidden; }
.comms-mail-topbar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #EDE7DF; flex-shrink: 0; }
.comms-mail-topbar-back { color: #3B82F6; font-size: 0.85rem; font-weight: 700; }
.comms-mail-topbar-title { color: #3B82F6; font-size: 0.78rem; font-weight: 600; flex: 1; }
.comms-mail-topbar-icon { color: #3B82F6; display: flex; }
.comms-mail-meta-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 10px; flex-shrink: 0; }
.comms-mail-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #C6A96B;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.comms-mail-meta-text { flex: 1; min-width: 0; }
.comms-mail-from { font-size: 0.86rem; font-weight: 700; color: #2B2B2B; }
.comms-mail-to { font-size: 0.74rem; color: #9ca3af; }
.comms-mail-time { font-size: 0.72rem; color: #9ca3af; flex-shrink: 0; }
.comms-mail-subject {
    margin: 0 14px 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #F0EBE3;
    font-size: 0.92rem;
    font-weight: 700;
    color: #2B2B2B;
    white-space: pre-wrap;
    word-break: break-word;
}
.comms-mail-subject.is-placeholder { color: #9ca3af; font-weight: 600; font-style: italic; }
.comms-mail-body {
    padding: 0 14px 14px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: #2B2B2B;
    white-space: pre-wrap;
    word-break: break-word;
    flex: 1;
    overflow-y: auto;
}
.comms-mail-body.is-placeholder { color: #9ca3af; font-style: italic; }