/* ============================================================
   AYS Quiz — Visual Redesign Only
   Target: [id^="ays-quiz-container-"] (all quiz instances)
   Pure cosmetic overrides — no step/visibility/behavior changes
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&family=DM+Serif+Display&display=swap');

[id^="ays-quiz-container-"] .ays-field.ays_list_view_item {
    cursor: pointer !important;
}
.ays-quiz-interval-message-box p {
    text-align: left !important;
}

/* ── Outer Container ─────────────────────────────────────────── */
[id^="ays-quiz-container-"] {
  font-family:   'DM Sans', sans-serif !important;
  background:    #0d0618 !important;
  border:        1px solid rgba(139, 92, 246, 0.2) !important;
  border-radius: 20px !important;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.1), 0 5px 35px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Decorative orb — top right */
[id^="ays-quiz-container-"]::before {
  content:        '' !important;
  position:       absolute !important;
  top:            -80px !important;
  right:          -80px !important;
  width:          320px !important;
  height:         320px !important;
  border-radius:  50% !important;
  background:     radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index:        0 !important;
}

/* Decorative orb — bottom left */
[id^="ays-quiz-container-"]::after {
  content:        '' !important;
  position:       absolute !important;
  bottom:         -60px !important;
  left:           -60px !important;
  width:          240px !important;
  height:         240px !important;
  border-radius:  50% !important;
  background:     radial-gradient(circle, rgba(45,212,191,0.08) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index:        0 !important;
}

[id^="ays-quiz-container-"] .ays-questions-container {
  position: relative !important;
  z-index:  1 !important;
}

/* ── Start Page ──────────────────────────────────────────────── */
[id^="ays-quiz-container-"] .ays-start-page {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
  padding:         3.5rem 2.5rem !important;
  text-align:      center !important;
}

/* Quiz title */
[id^="ays-quiz-container-"] .ays-fs-title {
  font-family:    'DM Serif Display', serif !important;
  font-size:      36px !important;
  font-weight:    400 !important;
  color:          #f1eefe !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  text-shadow:    none !important;
  margin-bottom:  1rem !important;
  line-height:    1.2 !important;
}

/* Gradient underline accent */
[id^="ays-quiz-container-"] .ays-fs-title::after {
  content:       '' !important;
  display:       block !important;
  width:         48px !important;
  height:        3px !important;
  background:    linear-gradient(90deg, #8b5cf6, #2dd4bf) !important;
  border-radius: 99px !important;
  margin:        0.75rem auto 0 !important;
}

/* Subtitle */
[id^="ays-quiz-container-"] .ays-fs-subtitle,
[id^="ays-quiz-container-"] .ays-fs-subtitle p {
  font-size:   15px !important;
  color:       #9d8fc0 !important;
  line-height: 1.7 !important;
  max-width:   440px !important;
  margin:      0 auto 2rem !important;
  font-weight: 300 !important;
}

/* ── Question Counter ────────────────────────────────────────── */
[id^="ays-quiz-container-"] p.ays-question-counter {
  font-size:      12px !important;
  font-weight:    500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color:          #a78bfa !important;
  padding:        1.25rem 1.75rem 0 !important;
  margin:         0 !important;
}

/* ── Inner Content Padding ───────────────────────────────────── */
[id^="ays-quiz-container-"] .ays-abs-fs {
  padding: 1.25rem 1.75rem 1.75rem !important;
}

/* ── Question Text ───────────────────────────────────────────── */
[id^="ays-quiz-container-"] .ays_quiz_question {
  text-align:    left !important;
  margin-bottom: 1.25rem !important;
}

[id^="ays-quiz-container-"] .ays_quiz_question p,
[id^="ays-quiz-container-"] .ays_quiz_question *:not([class^='enlighter']) {
  font-family: 'DM Sans', sans-serif !important;
  font-size:   18px !important;
  font-weight: 500 !important;
  color:       #f1eefe !important;
  line-height: 1.5 !important;
  text-align:  left !important;
}

/* ── Answer Choices ──────────────────────────────────────────── */
[id^="ays-quiz-container-"] .ays-field.ays_list_view_item {
  padding:       14px 18px !important;
  background:    #160d24 !important;
  border:        1px solid rgba(139, 92, 246, 0.18) !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
  transition:    all 0.2s ease !important;
  box-shadow:    none !important;
  position:      relative !important;
  overflow:      hidden !important;
}

/* Left accent bar */
[id^="ays-quiz-container-"] .ays-field.ays_list_view_item::before {
  content:       '' !important;
  position:      absolute !important;
  left:          0 !important;
  top:           0 !important;
  bottom:        0 !important;
  width:         3px !important;
  background:    linear-gradient(180deg, #8b5cf6, #2dd4bf) !important;
  border-radius: 0 !important;
  opacity:       0 !important;
  transition:    opacity 0.2s !important;
}

[id^="ays-quiz-container-"] .ays-field.ays_list_view_item:hover::before,
[id^="ays-quiz-container-"] .ays-field.ays_list_view_item:focus::before {
  opacity: 1 !important;
}

[id^="ays-quiz-container-"] .ays-quiz-answers .ays-field:hover,
[id^="ays-quiz-container-"] .ays-field.ays_list_view_item:hover,
[id^="ays-quiz-container-"] .ays-field.ays_list_view_item:focus {
  background:   #1e1030 !important;
  border-color: rgba(139, 92, 246, 0.5) !important;
  opacity:      1 !important;
}

/* Selected state */
[id^="ays-quiz-container-"] .ays-field input:checked + label:before {
  border-color:    #8b5cf6 !important;
  background:      #8b5cf6 !important;
  background-clip: content-box !important;
  box-shadow:      0 0 0 3px rgba(139,92,246,0.25) !important;
}

[id^="ays-quiz-container-"] .ays-field.checked_answer_div input:checked ~ label {
  background-color: rgba(139,92,246,0.08) !important;
}

/* Answer label text */
[id^="ays-quiz-container-"] .ays-questions-container label[for^="ays-answer-"],
[id^="ays-quiz-container-"] .ays-field label[for^="ays-answer-"].ays-quiz-keyboard-label {
  font-size:   14px !important;
  font-weight: 400 !important;
  color:       #9d8fc0 !important;
  line-height: 1.5 !important;
  transition:  color 0.15s !important;
}

[id^="ays-quiz-container-"] .ays-field:hover label[for^="ays-answer-"] {
  color: #f1eefe !important;
}

/* Hide dummy image label */
[id^="ays-quiz-container-"] .ays-field label.ays_answer_image.ays_empty_before_content {
  display: none !important;
}

/* Radio accent */
[id^="ays-quiz-container-"] .ays-field input[type="radio"] {
  accent-color: #8b5cf6 !important;
}

/* ── Global Text Colours ─────────────────────────────────────── */
[id^="ays-quiz-container-"].ays-quiz-container .ays-questions-container .ays-start-page *:not(input),
[id^="ays-quiz-container-"].ays-quiz-container .ays-questions-container p,
[id^="ays-quiz-container-"].ays-quiz-container .ays-questions-container form .step:not(.ays_thank_you_fs) p,
[id^="ays-quiz-container-"].ays-quiz-container .ays-questions-container .ays-fs-subtitle,
[id^="ays-quiz-container-"].ays-quiz-container .ays-questions-container .ays_score_message,
[id^="ays-quiz-container-"].ays-quiz-container .ays-questions-container .ays_message {
  color: #f1eefe !important;
}

[id^="ays-quiz-container-"] p::first-letter:not(.ays_no_questions_message) {
  color:            #f1eefe !important;
  background-color: transparent !important;
  font-size:        inherit !important;
  font-weight:      inherit !important;
  float:            none !important;
  line-height:      inherit !important;
  margin:           0 !important;
  padding:          0 !important;
}

/* ── Buttons ─────────────────────────────────────────────────── */
[id^="ays-quiz-container-"] .ays-quiz-form .action-button,
[id^="ays-quiz-container-"] .ays-quiz-form input.action-button,
[id^="ays-quiz-container-"] input#ays-submit,
[id^="ays-quiz-container-"] .action-button.ays_restart_button {
  font-family:      'DM Sans', sans-serif !important;
  font-size:        14px !important;
  font-weight:      500 !important;
  color:            #fff !important;
  background:       #8b5cf6 !important;
  background-image: none !important;
  border:           1px solid transparent !important;
  border-radius:    10px !important;
  padding:          12px 28px !important;
  box-shadow:       0 4px 20px rgba(139,92,246,0.3) !important;
  transition:       all 0.2s ease !important;
  text-transform:   none !important;
  letter-spacing:   0.02em !important;
  width:            auto !important;
}

[id^="ays-quiz-container-"] .ays-quiz-form .action-button:hover,
[id^="ays-quiz-container-"] .ays-quiz-form .action-button:focus,
[id^="ays-quiz-container-"] input#ays-submit:hover,
[id^="ays-quiz-container-"] input#ays-submit:focus {
  background:   #7c3aed !important;
  box-shadow:   0 6px 28px rgba(139,92,246,0.45) !important;
  transform:    translateY(-1px) !important;
  border-color: transparent !important;
}

/* Start button — pill */
[id^="ays-quiz-container-"] .ays-start-page .action-button.start_button {
  font-size:     15px !important;
  padding:       14px 36px !important;
  border-radius: 99px !important;
  background:    linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  box-shadow:    0 8px 32px rgba(139,92,246,0.4) !important;
}

[id^="ays-quiz-container-"] .ays-start-page .action-button.start_button:hover {
  background:  linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  box-shadow:  0 10px 40px rgba(139,92,246,0.55) !important;
  transform:   translateY(-2px) !important;
}

/* Prev — ghost */
[id^="ays-quiz-container-"] .ays_previous.action-button {
  background:   transparent !important;
  border:       1px solid rgba(139,92,246,0.25) !important;
  color:        #9d8fc0 !important;
  box-shadow:   none !important;
}

[id^="ays-quiz-container-"] .ays_previous.action-button:hover {
  background:   #1e1030 !important;
  border-color: rgba(139,92,246,0.5) !important;
  color:        #f1eefe !important;
  transform:    none !important;
  box-shadow:   none !important;
}

/* Arrow icon buttons */
[id^="ays-quiz-container-"] .action-button.ays_arrow {
  background:   transparent !important;
  border:       1px solid rgba(139,92,246,0.2) !important;
  color:        #a78bfa !important;
  box-shadow:   none !important;
  padding:      8px 14px !important;
}

/* Restart */
[id^="ays-quiz-container-"] .ays_restart_button {
  background:   transparent !important;
  border:       1px solid rgba(139,92,246,0.25) !important;
  color:        #9d8fc0 !important;
  box-shadow:   none !important;
}

[id^="ays-quiz-container-"] .ays_restart_button:hover {
  background:   #1e1030 !important;
  border-color: #8b5cf6 !important;
  color:        #a78bfa !important;
  box-shadow:   none !important;
}

[id^="ays-quiz-container-"] .ays_restart_button span {
  color: inherit !important;
}

/* Button row */
[id^="ays-quiz-container-"] .ays_buttons_div {
  justify-content: center !important;
}

[id^="ays-quiz-container-"] .step:first-of-type .ays_buttons_div {
  justify-content: center !important;
}

[id^="ays-quiz-container-"] .ays_restart_button_p {
  display:         flex !important;
  justify-content: center !important;
  flex-wrap:       wrap !important;
  margin-top:      1.25rem !important;
}

/* ── Progress Bar ────────────────────────────────────────────── */
[id^="ays-quiz-container-"] .ays-progress {
  border-color:  rgba(139,92,246,0.3) !important;
  border-radius: 99px !important;
}

[id^="ays-quiz-container-"] .ays-progress-bg {
  background-color: rgba(139,92,246,0.12) !important;
  border-radius:    99px !important;
}

[id^="ays-quiz-container-"] .ays-progress-bar {
  background:    linear-gradient(90deg, #8b5cf6, #2dd4bf) !important;
  border-radius: 99px !important;
}

[id^="ays-quiz-container-"] .ays-progress-value {
  color:       #a78bfa !important;
  font-size:   12px !important;
  font-weight: 500 !important;
}

[id^="ays-quiz-container-"] .ays-live-bar-fill {
  color:         #a78bfa !important;
  border-bottom: 2px solid #8b5cf6 !important;
}

/* ── Results ─────────────────────────────────────────────────── */
[id^="ays-quiz-container-"] .ays_score_message {
  font-family:   'DM Serif Display', serif !important;
  font-size:     26px !important;
  font-weight:   400 !important;
  color:         #f1eefe !important;
  line-height:   1.3 !important;
  margin-bottom: 0.75rem !important;
}

[id^="ays-quiz-container-"] .ays_message {
  font-size:   15px !important;
  color:       #9d8fc0 !important;
  line-height: 1.7 !important;
  max-width:   480px !important;
  margin:      0 auto 1.5rem !important;
}

[id^="ays-quiz-container-"] .ays_message h2,
[id^="ays-quiz-container-"] .ays_message h3 {
  font-family:   'DM Serif Display', serif !important;
  font-size:     22px !important;
  font-weight:   400 !important;
  color:         #f1eefe !important;
  margin-bottom: 0.5rem !important;
}

[id^="ays-quiz-container-"] .ays_message p {
  font-size:   14px !important;
  color:       #9d8fc0 !important;
  line-height: 1.7 !important;
}

[id^="ays-quiz-container-"] .ays_message a {
  color:           #a78bfa !important;
  text-decoration: underline !important;
}

[id^="ays-quiz-container-"] .ays_score {
  font-size: 13px !important;
  color:     #6b5f8a !important;
}

/* Interval result box */
[id^="ays-quiz-container-"] .ays-quiz-interval-message-box {
  background:    #160d24 !important;
  border:        1px solid rgba(139,92,246,0.18) !important;
  border-radius: 14px !important;
  padding:       1.75rem !important;
  text-align:    left !important;
  margin-bottom: 1rem !important;
}

[id^="ays-quiz-container-"] .ays-quiz-interval-message-box h2,
[id^="ays-quiz-container-"] .ays-quiz-interval-message-box h3 {
  color:         #f1eefe !important;
  font-family:   'DM Serif Display', serif !important;
  font-size:     20px !important;
  font-weight:   400 !important;
  margin-bottom: 0.5rem !important;
}

/* Personality result box */
[id^="ays-quiz-container-"] .ays-quiz-personality-result-box {
  background:    #160d24 !important;
  border:        1px solid rgba(139,92,246,0.18) !important;
  border-radius: 14px !important;
  padding:       1.5rem !important;
  margin:        1rem 0 !important;
}

[id^="ays-quiz-container-"] .ays-quiz-personality-result-box .ays-quiz-personality-result-title {
  color:       #f1eefe !important;
  font-family: 'DM Serif Display', serif !important;
  font-size:   20px !important;
  font-weight: 400 !important;
  text-align:  left !important;
}

[id^="ays-quiz-container-"].ays-quiz-container .ays-quiz-personality-result-box .ays-quiz-personality-result-description,
[id^="ays-quiz-container-"].ays-quiz-container .ays-quiz-personality-result-box .ays-quiz-personality-result-description * {
  color:      #9d8fc0 !important;
  text-align: left !important;
}

/* ── Right / Wrong ───────────────────────────────────────────── */
[id^="ays-quiz-container-"] .wrong_answer_text,
[id^="ays-quiz-container-"] .wrong_answer_text p {
  color:     #f87171 !important;
  font-size: 14px !important;
}

[id^="ays-quiz-container-"] .right_answer_text,
[id^="ays-quiz-container-"] .right_answer_text p {
  color:     #34d399 !important;
  font-size: 14px !important;
}

[id^="ays-quiz-container-"].ays_quiz_classic_dark .wrong_div {
  border-color:     #ef4444 !important;
  background-color: rgba(239,68,68,0.12) !important;
}

[id^="ays-quiz-container-"].ays_quiz_classic_dark .correct_div {
  border-color:     #10b981 !important;
  background-color: rgba(16,185,129,0.12) !important;
}

/* ── Validation Error ────────────────────────────────────────── */
[id^="ays-quiz-container-"] .ays-quiz-question-validation-error {
  font-size:  13px !important;
  color:      #f87171 !important;
  margin-top: 8px !important;
}

/* ── Loaders ─────────────────────────────────────────────────── */
[id^="ays-quiz-container-"] .lds-ellipsis div,
[id^="ays-quiz-container-"] .lds-circle,
[id^="ays-quiz-container-"] .lds-facebook div {
  background: #8b5cf6 !important;
}

[id^="ays-quiz-container-"] .lds-ripple div {
  border-color: #8b5cf6 !important;
}

[id^="ays-quiz-container-"] .lds-dual-ring::after,
[id^="ays-quiz-container-"] .lds-hourglass::after {
  border-color: #8b5cf6 transparent #8b5cf6 transparent !important;
}

[id^="ays-quiz-container-"] div.lds-spinner div:after,
[id^="ays-quiz-container-"] div.lds-spinner2 div:after {
  background-color: #8b5cf6 !important;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
[id^="ays-quiz-container-"] .select2-results__options::-webkit-scrollbar {
  width: 6px !important;
}

[id^="ays-quiz-container-"] .select2-results__options::-webkit-scrollbar-track {
  background-color: #160d24 !important;
}

[id^="ays-quiz-container-"] .select2-results__options::-webkit-scrollbar-thumb {
  background-color: #8b5cf6 !important;
  border-radius:    99px !important;
}

/* ── Icons ───────────────────────────────────────────────────── */
[id^="ays-quiz-container-"] .ays-quiz-close-full-screen,
[id^="ays-quiz-container-"] .ays-quiz-open-full-screen {
  fill: #9d8fc0 !important;
}

/* ── Focus Ring ──────────────────────────────────────────────── */
[id^="ays-quiz-container-"] input[type='button']:focus-visible,
[id^="ays-quiz-container-"] input[type='submit']:focus-visible {
  outline:        2px solid #8b5cf6 !important;
  outline-offset: 2px !important;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  [id^="ays-quiz-container-"] {
    border-radius: 14px !important;
  }

  [id^="ays-quiz-container-"] .ays-fs-title {
    font-size: 24px !important;
  }

  [id^="ays-quiz-container-"] .ays_quiz_question p,
  [id^="ays-quiz-container-"] .ays_quiz_question *:not([class^='enlighter']) {
    font-size: 16px !important;
  }

  [id^="ays-quiz-container-"] .ays-abs-fs {
    padding: 1rem 1.25rem 1.5rem !important;
  }

  [id^="ays-quiz-container-"] .ays-quiz-form .action-button {
    font-size: 14px !important;
    padding:   11px 20px !important;
  }
}