/* ResultsAiX Surveys - front-end card, stepper and popup.
   Fully scoped under .rsv-survey / .rsv-popup; themed by --rsv-accent. */

/* The `hidden` attribute is only display:none at user-agent weight, so any author
   rule that sets a display value on the same element beats it and the element
   stays on screen. This file hides steps, errors, the thanks panel and the popup
   with a bare `hidden`, and it mixes those with flex. Declared ONCE here, before
   any component needs it, rather than one rule per class as each fault is found.
   Scoped to this plugin's own roots so it never reaches the host theme, and it
   matches the roots themselves as well as their descendants because .rsv-popup
   carries the attribute on the root element. */
.rsv-survey[hidden], .rsv-popup[hidden],
.rsv-survey [hidden], .rsv-popup [hidden] { display: none !important; }

.rsv-survey {
    --rsv-accent: #2271b1;
    --rsv-card: #ffffff;
    --rsv-text: #111827;
    --rsv-muted: #6b7280;
    --rsv-line: #e5e7eb;
    box-sizing: border-box;
    max-width: 640px;
    margin: 24px auto;
    background: var(--rsv-card);
    color: var(--rsv-text);
    border: 1px solid var(--rsv-line);
    border-radius: 14px;
    padding: 26px 28px 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .06);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
}
.rsv-survey *, .rsv-survey *::before, .rsv-survey *::after { box-sizing: border-box; }
.rsv-survey.rsv-theme-dark {
    --rsv-card: #111827;
    --rsv-text: #f9fafb;
    --rsv-muted: #9ca3af;
    --rsv-line: #374151;
}

.rsv-progress {
    height: 6px;
    background: var(--rsv-line);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 20px;
}
.rsv-progress-bar {
    display: block;
    height: 100%;
    background: var(--rsv-accent);
    border-radius: 999px;
    transition: width .25s ease;
}

.rsv-count {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rsv-muted);
}
.rsv-question {
    margin: 0 0 16px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
}
.rsv-req { color: var(--rsv-accent); }

/* Honeypot: visually gone, still in the DOM for bots. */
.rsv-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.rsv-options { display: flex; flex-direction: column; gap: 10px; }
.rsv-options-row { flex-direction: row; }
.rsv-options-row .rsv-option { flex: 1; justify-content: center; }
.rsv-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border: 2px solid var(--rsv-line);
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    transition: border-color .15s ease, background-color .15s ease;
}
.rsv-option:hover { border-color: var(--rsv-accent); }
.rsv-option input { margin: 0; accent-color: var(--rsv-accent); width: 18px; height: 18px; flex: none; }
.rsv-option.is-checked { border-color: var(--rsv-accent); background: color-mix(in srgb, var(--rsv-accent) 8%, transparent); }

.rsv-scale { display: flex; gap: 8px; flex-wrap: wrap; }
.rsv-scale-item { cursor: pointer; }
.rsv-scale-item input { position: absolute; opacity: 0; pointer-events: none; }
.rsv-scale-item span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
    border: 2px solid var(--rsv-line);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.rsv-scale-item:hover span { border-color: var(--rsv-accent); }
.rsv-scale-item input:checked + span { border-color: var(--rsv-accent); background: var(--rsv-accent); color: #fff; }
.rsv-stars .rsv-scale-item span { font-size: 22px; }
.rsv-stars .rsv-scale-item.is-lit span { color: var(--rsv-accent); border-color: var(--rsv-accent); }
.rsv-scale-legend { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--rsv-muted); }

.rsv-input {
    width: 100%;
    padding: 12px 14px;
    margin: 0 0 12px;
    border: 2px solid var(--rsv-line);
    border-radius: 10px;
    font-size: 16px;
    background: var(--rsv-card);
    color: var(--rsv-text);
}
.rsv-input:focus { outline: none; border-color: var(--rsv-accent); }
.rsv-textarea { resize: vertical; }

.rsv-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; gap: 12px; }
.rsv-btn {
    appearance: none;
    border: 0;
    border-radius: 10px;
    padding: 12px 22px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    background: var(--rsv-accent);
    color: #fff;
    transition: filter .15s ease;
}
.rsv-btn:hover { filter: brightness(.92); }
.rsv-btn:disabled { opacity: .6; cursor: wait; }
.rsv-btn-back { background: transparent; color: var(--rsv-muted); font-weight: 600; padding-left: 0; }
.rsv-btn-back:hover { filter: none; color: var(--rsv-text); }

.rsv-note { margin: 4px 0 0; font-size: 13px; color: var(--rsv-muted); }
.rsv-error, .rsv-fail { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: #dc2626; }
.rsv-thanks { text-align: center; padding: 12px 0; }

/* ── popup ─────────────────────────────────────────────────────────── */

.rsv-popup { position: fixed; inset: 0; z-index: 999999; }
.rsv-popup[hidden] { display: none; }
.rsv-popup-bg { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.rsv-popup-box {
    position: relative;
    max-width: 660px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    margin: 24px auto;
    padding: 0 12px;
}
.rsv-popup-box .rsv-survey { margin: 0 auto; }
.rsv-popup-close {
    position: absolute;
    top: 6px;
    right: 18px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #111827;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 600px) {
    .rsv-survey { padding: 20px 16px; margin: 16px auto; }
    .rsv-question { font-size: 18px; }
    .rsv-options-row { flex-direction: column; }
}

/* Optional public header: logo and/or headline above the survey. */
.rsv-head { text-align: center; margin-bottom: 18px; }
.rsv-logo-img { max-height: 80px; max-width: 70%; width: auto; height: auto; display: inline-block; margin: 0 auto 10px; }
.rsv-heading { margin: 0; font-size: 23px; font-weight: 800; line-height: 1.3; color: inherit; }

/* "Other (write-in)" answer: the typed field sits inline with its choice. */
.rsv-option-other { flex-wrap: wrap; }
.rsv-option-other .rsv-other-input {
    flex: 1 1 140px;
    min-width: 120px;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid var(--rsv-line);
    border-radius: 8px;
    font-size: 14px;
    background: var(--rsv-card);
    color: var(--rsv-text);
}
.rsv-option-other .rsv-other-input:focus { outline: none; border-color: var(--rsv-accent); }