/*
 * Quiz Engine v1 — styles
 * Тёмная тема aibot.direct по умолчанию.
 * Переопределяй CSS-переменные на :root или .quiz-overlay для per-site брендинга.
 * Токены (--quiz-*) — от Ари/брендборда (Step 4).
 */

/* ── CSS-переменные (dark theme defaults) ─────────────────────────────────── */
:root {
  --quiz-bg:            #0d0d0d;
  --quiz-surface:       #181818;
  --quiz-surface-2:     #222222;
  --quiz-border:        rgba(255,255,255,0.1);
  --quiz-primary:       #7c6bec;
  --quiz-primary-h:     #9b8ef7;
  --quiz-primary-bg:    rgba(124,107,236,0.12);
  --quiz-text:          #e8e8e8;
  --quiz-text-muted:    #888;
  --quiz-danger:        #e05a5a;
  --quiz-success:       #4caf7d;
  --quiz-warn:          #f0b429;
  --quiz-radius:        14px;
  --quiz-radius-sm:     8px;
  --quiz-shadow:        0 32px 64px rgba(0,0,0,0.7);
  --quiz-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --quiz-transition:    0.18s ease;
}

/* ── Overlay ──────────────────────────────────────────────────────────────── */
.quiz-overlay {
  position:         fixed;
  inset:            0;
  background:       rgba(0,0,0,0.75);
  backdrop-filter:  blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  z-index:          9999;
  padding:          16px;
  box-sizing:       border-box;
  opacity:          0;
  transition:       opacity var(--quiz-transition);
  font-family:      var(--quiz-font);
}
.quiz-overlay--open {
  opacity: 1;
}

/* ── Panel ────────────────────────────────────────────────────────────────── */
.quiz-panel {
  background:    var(--quiz-surface);
  border:        1px solid var(--quiz-border);
  border-radius: var(--quiz-radius);
  box-shadow:    var(--quiz-shadow);
  width:         100%;
  max-width:     600px;
  max-height:    90vh;
  overflow-y:    auto;
  overflow-x:    hidden;
  display:       flex;
  flex-direction:column;
  color:         var(--quiz-text);
  transform:     translateY(20px);
  transition:    transform var(--quiz-transition);
  scrollbar-width: thin;
  scrollbar-color: var(--quiz-border) transparent;
}
.quiz-overlay--open .quiz-panel {
  transform: translateY(0);
}

/* ── Header (progress + close) ────────────────────────────────────────────── */
.quiz-header {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       16px 20px;
  border-bottom: 1px solid var(--quiz-border);
  position:      sticky;
  top:           0;
  background:    var(--quiz-surface);
  z-index:       1;
}
.quiz-progress-wrap {
  flex:     1;
  height:   4px;
  background: var(--quiz-border);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.quiz-progress-bar {
  height:     100%;
  background: var(--quiz-primary);
  border-radius: 2px;
  transition: width 0.3s ease;
  width:      0%;
}
.quiz-progress-text {
  font-size:   11px;
  color:       var(--quiz-text-muted);
  white-space: nowrap;
  min-width:   36px;
  text-align:  right;
}
.quiz-close {
  background:    none;
  border:        none;
  color:         var(--quiz-text-muted);
  font-size:     22px;
  line-height:   1;
  cursor:        pointer;
  padding:       4px 6px;
  border-radius: var(--quiz-radius-sm);
  min-width:     36px;
  min-height:    36px;
  display:       flex;
  align-items:   center;
  justify-content:center;
  transition:    color var(--quiz-transition), background var(--quiz-transition);
}
.quiz-close:hover, .quiz-close:focus-visible {
  color:      var(--quiz-text);
  background: var(--quiz-surface-2);
  outline:    none;
}

/* ── Back button ──────────────────────────────────────────────────────────── */
.quiz-back {
  background:    none;
  border:        none;
  color:         var(--quiz-text-muted);
  font-size:     13px;
  cursor:        pointer;
  padding:       8px 20px 0;
  min-height:    36px;
  text-align:    left;
  transition:    color var(--quiz-transition);
}
.quiz-back:hover, .quiz-back:focus-visible {
  color:   var(--quiz-text);
  outline: none;
}

/* ── Content area ─────────────────────────────────────────────────────────── */
.quiz-content {
  padding: 24px 20px 28px;
  flex:    1;
}

/* ── Question heading ─────────────────────────────────────────────────────── */
.quiz-question {
  font-size:     20px;
  font-weight:   600;
  line-height:   1.3;
  margin:        0 0 20px;
  color:         var(--quiz-text);
}
@media (max-width: 480px) {
  .quiz-question { font-size: 18px; }
}

/* ── Option buttons (single/multiple) ────────────────────────────────────── */
.quiz-options {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-bottom:  20px;
}
.quiz-option {
  display:        flex;
  align-items:    center;
  background:     var(--quiz-surface-2);
  border:         1.5px solid var(--quiz-border);
  border-radius:  var(--quiz-radius-sm);
  padding:        12px 16px;
  min-height:     52px;           /* ≥44px tap target */
  cursor:         pointer;
  text-align:     left;
  color:          var(--quiz-text);
  font-size:      15px;
  font-family:    var(--quiz-font);
  line-height:    1.4;
  transition:     border-color var(--quiz-transition), background var(--quiz-transition);
  -webkit-tap-highlight-color: transparent;
  word-break:     break-word;
}
.quiz-option:hover, .quiz-option:focus-visible {
  border-color: var(--quiz-primary);
  background:   var(--quiz-primary-bg);
  outline:      none;
}
.quiz-option--sel {
  border-color: var(--quiz-primary);
  background:   var(--quiz-primary-bg);
  color:        var(--quiz-primary-h);
}
.quiz-option-label { pointer-events: none; }

/* multiple-choice: небольшой чекбокс-маркер справа */
.quiz-options--multiple .quiz-option::after {
  content:       '';
  flex-shrink:   0;
  margin-left:   auto;
  margin-right:  0;
  width:         18px;
  height:        18px;
  border:        1.5px solid var(--quiz-border);
  border-radius: 4px;
  background:    transparent;
  transition:    background var(--quiz-transition), border-color var(--quiz-transition);
}
.quiz-options--multiple .quiz-option--sel::after {
  background:   var(--quiz-primary);
  border-color: var(--quiz-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.quiz-btn {
  display:       block;
  width:         100%;
  background:    var(--quiz-primary);
  color:         #fff;
  border:        none;
  border-radius: var(--quiz-radius-sm);
  padding:       14px 20px;
  min-height:    52px;
  font-size:     16px;
  font-weight:   600;
  font-family:   var(--quiz-font);
  cursor:        pointer;
  transition:    background var(--quiz-transition), opacity var(--quiz-transition);
  margin-top:    4px;
}
.quiz-btn:hover, .quiz-btn:focus-visible {
  background: var(--quiz-primary-h);
  outline:    none;
}
.quiz-btn:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}
.quiz-btn--next {
  background: transparent;
  border:     1.5px solid var(--quiz-primary);
  color:      var(--quiz-primary-h);
}
.quiz-btn--next:hover, .quiz-btn--next:focus-visible {
  background: var(--quiz-primary-bg);
}

/* ── Contact form ─────────────────────────────────────────────────────────── */
.quiz-contact-form { display: flex; flex-direction: column; gap: 0; }
.quiz-field {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin-bottom:  16px;
}
.quiz-label {
  font-size:   13px;
  color:       var(--quiz-text-muted);
  font-weight: 500;
}
.quiz-input {
  background:    var(--quiz-surface-2);
  border:        1.5px solid var(--quiz-border);
  border-radius: var(--quiz-radius-sm);
  color:         var(--quiz-text);
  font-size:     15px;
  font-family:   var(--quiz-font);
  padding:       12px 14px;
  min-height:    48px;
  outline:       none;
  transition:    border-color var(--quiz-transition);
  width:         100%;
  box-sizing:    border-box;
}
.quiz-input::placeholder { color: var(--quiz-text-muted); }
.quiz-input:focus {
  border-color: var(--quiz-primary);
}
.quiz-select {
  background:    var(--quiz-surface-2);
  border:        1.5px solid var(--quiz-border);
  border-radius: var(--quiz-radius-sm);
  color:         var(--quiz-text);
  font-size:     15px;
  font-family:   var(--quiz-font);
  padding:       12px 14px;
  min-height:    48px;
  outline:       none;
  cursor:        pointer;
  width:         100%;
  box-sizing:    border-box;
  transition:    border-color var(--quiz-transition);
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.quiz-select:focus { border-color: var(--quiz-primary); }
.quiz-select option { background: var(--quiz-surface-2); color: var(--quiz-text); }

.quiz-type-toggle {
  display: flex;
  gap:     8px;
  margin-bottom: 8px;
}
.quiz-type-btn {
  background:    var(--quiz-surface-2);
  border:        1.5px solid var(--quiz-border);
  border-radius: var(--quiz-radius-sm);
  color:         var(--quiz-text-muted);
  font-size:     14px;
  font-family:   var(--quiz-font);
  padding:       8px 14px;
  min-height:    38px;
  cursor:        pointer;
  transition:    border-color var(--quiz-transition), color var(--quiz-transition);
}
.quiz-type-btn--active {
  border-color: var(--quiz-primary);
  color:        var(--quiz-primary-h);
}
.quiz-type-btn:focus-visible { outline: 2px solid var(--quiz-primary); outline-offset: 2px; }

/* Согласие */
.quiz-consent {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  margin:      12px 0 16px;
}
.quiz-consent-chk {
  flex-shrink:   0;
  width:         20px;
  height:        20px;
  margin-top:    2px;
  cursor:        pointer;
  accent-color:  var(--quiz-primary);
}
.quiz-consent-lbl {
  font-size:   13px;
  color:       var(--quiz-text-muted);
  line-height: 1.5;
  cursor:      pointer;
}
.quiz-consent-lbl a {
  color:            var(--quiz-primary-h);
  text-decoration:  underline;
  text-underline-offset: 2px;
}

/* Honeypot — скрыто, НЕ display:none (некоторые боты его игнорируют) */
.quiz-honeypot {
  position:   absolute;
  left:       -9999px;
  opacity:    0;
  height:     0;
  overflow:   hidden;
  pointer-events: none;
  tabindex:   -1;
}

/* Validation */
.quiz-validation-err {
  color:      var(--quiz-danger);
  font-size:  13px;
  margin:     8px 0 0;
  padding:    8px 12px;
  background: rgba(224,90,90,0.1);
  border-radius: var(--quiz-radius-sm);
}

/* ── Loading ──────────────────────────────────────────────────────────────── */
.quiz-loading {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  padding:        48px 20px;
  gap:            16px;
}
.quiz-spinner {
  width:  36px;
  height: 36px;
  border: 3px solid var(--quiz-border);
  border-top-color: var(--quiz-primary);
  border-radius: 50%;
  animation: quiz-spin 0.7s linear infinite;
}
@keyframes quiz-spin {
  to { transform: rotate(360deg); }
}
.quiz-loading-text {
  color:     var(--quiz-text-muted);
  font-size: 14px;
  margin:    0;
}

/* ── Result ───────────────────────────────────────────────────────────────── */
.quiz-result-wrap { display: flex; flex-direction: column; gap: 16px; }
.quiz-score-badge {
  display:       inline-block;
  font-size:     12px;
  font-weight:   700;
  padding:       4px 10px;
  border-radius: 20px;
  letter-spacing: 0.02em;
  align-self:    flex-start;
}
.quiz-score--hot  { background: rgba(240,100,60,0.15); color: #f06440; }
.quiz-score--warm { background: rgba(240,180,41,0.15); color: #f0b429; }
.quiz-score--cold { background: rgba(140,180,240,0.1); color: #8cb4f0; }

.quiz-result-html {
  font-size:   15px;
  line-height: 1.65;
  color:       var(--quiz-text);
}
.quiz-result-html h3 {
  font-size:   18px;
  margin:      0 0 12px;
  color:       var(--quiz-text);
}
.quiz-result-html p  { margin: 0 0 10px; }
.quiz-result-html ul { margin: 8px 0; padding-left: 20px; }
.quiz-result-html li { margin-bottom: 4px; }
.quiz-result-html a  { color: var(--quiz-primary-h); }
.quiz-result-html strong { color: var(--quiz-text); }
.quiz-result-html .quiz-offer {
  background:    var(--quiz-primary-bg);
  border-left:   3px solid var(--quiz-primary);
  border-radius: 0 var(--quiz-radius-sm) var(--quiz-radius-sm) 0;
  padding:       12px 14px;
  margin-top:    14px;
}

/* ── Error screen ─────────────────────────────────────────────────────────── */
.quiz-error-screen {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             16px;
  padding:         32px 16px;
  text-align:      center;
}
.quiz-error-msg {
  color:     var(--quiz-danger);
  font-size: 15px;
  margin:    0;
}
.quiz-error-screen .quiz-btn { width: auto; padding: 12px 28px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .quiz-overlay  { padding: 0; align-items: flex-end; }
  .quiz-panel    {
    max-height:    95vh;
    border-bottom-left-radius:  0;
    border-bottom-right-radius: 0;
    border-left:   none;
    border-right:  none;
    border-bottom: none;
  }
  .quiz-content  { padding: 20px 16px 32px; }
  .quiz-btn      { min-height: 56px; font-size: 17px; }
  .quiz-option   { min-height: 56px; }
}

/* Focus-visible общий (доступность) */
.quiz-overlay *:focus-visible {
  outline:        2px solid var(--quiz-primary);
  outline-offset: 2px;
}