@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

/* ═══════════════════════════════════════════════════════════════
   COLOR SEASON QUIZ — v3.1.0
   All layout rules use hardcoded px values + !important so no
   WordPress theme can override them. Centering uses flexbox on
   csq-content-col (not margin:auto which themes can break).
═══════════════════════════════════════════════════════════════ */

/* ── Brand tokens ── */
#color-season-quiz-container {
  --csq-forest:      #2E3B2A;
  --csq-gold:        #C4A35A;
  --csq-warm-grey:   #8B7D72;
  --csq-ivory:       #FAF7F2;
  --csq-ivory-light: #F4EFE6;
  background: #FAF7F2;
  color: #2E3B2A;
  font-family: 'Jost', sans-serif;
  width: 100%;
  display: block;
}

/* Hard reset — prevent theme bleed */
#color-season-quiz-container *,
#color-season-quiz-container *::before,
#color-season-quiz-container *::after {
  box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════════
   csq-inner  — the visible card, max 800px, centred on page
   Uses flex column so every direct child is auto-centred.
═══════════════════════════════════════════════════════════════ */
#color-season-quiz-container .csq-inner {
  display:        flex !important;
  flex-direction: column !important;
  align-items:    center !important;   /* ← centres every direct child */
  width:          100% !important;
  max-width:      800px !important;
  margin:         0 auto !important;
  padding:        48px 24px 56px !important;
  text-align:     center !important;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER  (DISCOVER / FIND YOUR SEASON / subtitle / divider)
═══════════════════════════════════════════════════════════════ */
#color-season-quiz-container .csq-header {
  width:         100% !important;
  text-align:    center !important;
  margin-bottom: 32px !important;
  padding:       0 !important;
}

#color-season-quiz-container .csq-discover {
  display:        block !important;
  font-family:    'Jost', sans-serif !important;
  font-size:      10px !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color:          #C4A35A !important;
  margin:         0 0 14px !important;
  padding:        0 !important;
  line-height:    1 !important;
}

#color-season-quiz-container .csq-title {
  display:        block !important;
  font-family:    'Cormorant Garamond', serif !important;
  font-size:      clamp(26px, 5vw, 42px) !important;
  font-weight:    400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color:          #2E3B2A !important;
  margin:         0 0 10px !important;
  padding:        0 !important;
  line-height:    1.1 !important;
}

#color-season-quiz-container .csq-subtitle {
  display:     block !important;
  font-family: 'Jost', sans-serif !important;
  font-size:   12px !important;
  font-weight: 300 !important;
  color:       #8B7D72 !important;
  line-height: 1.75 !important;
  max-width:   360px !important;
  margin:      0 auto !important;
  padding:     0 !important;
}

#color-season-quiz-container .csq-divider {
  display:    block !important;
  width:      40px !important;
  height:     1px !important;
  border:     none !important;
  background: rgba(196,163,90,0.45) !important;
  margin:     14px auto 0 !important;
  padding:    0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   QUESTION PANEL + SLIDE ANIMATION
═══════════════════════════════════════════════════════════════ */
#color-season-quiz-container .csq-panel {
  display:    block !important;
  width:      100% !important;
  text-align: center !important;
  padding:    0 !important;
  margin:     0 !important;
  animation:  csqSlideIn 0.38s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}

@keyframes csqSlideIn {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Intro note — Step 1 only */
#color-season-quiz-container .csq-intro-note {
  display:        block !important;
  font-family:    'Jost', sans-serif !important;
  font-size:      10px !important;
  font-style:     italic !important;
  letter-spacing: 0.08em !important;
  color:          #8B7D72 !important;
  line-height:    1.8 !important;
  max-width:      480px !important;
  margin:         0 auto 20px !important;
  padding:        0 !important;
  text-align:     center !important;
}

/* ═══════════════════════════════════════════════════════════════
   csq-content-col
   This flex column is the KEY centering mechanism.
   It sits inside csq-panel (which is full-width).
   align-items:center ensures progress bar + options are centred
   even when the parent is wider than 512px.
═══════════════════════════════════════════════════════════════ */
#color-season-quiz-container .csq-content-col {
  display:        flex !important;
  flex-direction: column !important;
  align-items:    center !important;
  width:          100% !important;
  padding:        0 !important;
  margin:         0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   PROGRESS BAR
   Width: 512px (same as options grid)
   Centred by the parent flex column — no margin:auto needed.
═══════════════════════════════════════════════════════════════ */
#color-season-quiz-container .csq-progress-wrap {
  display:       block !important;
  width:         512px !important;
  max-width:     100% !important;
  margin-bottom: 28px !important;
  margin-top:    0 !important;
  padding:       0 !important;
}

/* Labels row: QUESTION N  ·····  N / 5 */
#color-season-quiz-container .csq-progress-labels {
  display:         flex !important;
  flex-direction:  row !important;
  justify-content: space-between !important;
  align-items:     center !important;
  width:           100% !important;
  margin:          0 0 8px !important;
  padding:         0 !important;
}

#color-season-quiz-container .csq-progress-labels span {
  display:        inline !important;
  font-family:    'Jost', sans-serif !important;
  font-size:      10px !important;
  font-weight:    400 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  line-height:    1 !important;
  margin:         0 !important;
  padding:        0 !important;
}

#color-season-quiz-container .csq-q-label { color: #C4A35A !important; }
#color-season-quiz-container .csq-q-count { color: #8B7D72 !important; }

/* 1 px track + gold fill */
#color-season-quiz-container .csq-progress-track {
  display:    block !important;
  width:      100% !important;
  height:     1px !important;
  background: rgba(46,59,42,0.12) !important;
  position:   relative !important;
  margin:     0 !important;
  padding:    0 !important;
}

#color-season-quiz-container .csq-progress-fill {
  position:   absolute !important;
  top:        0 !important;
  left:       0 !important;
  height:     100% !important;
  background: #C4A35A !important;
  transition: width 0.5s ease !important;
}

/* ═══════════════════════════════════════════════════════════════
   QUESTION TEXT + HELPER
═══════════════════════════════════════════════════════════════ */
#color-season-quiz-container .csq-question {
  display:        block !important;
  font-family:    'Cormorant Garamond', serif !important;
  font-size:      clamp(19px, 3.5vw, 26px) !important;
  font-weight:    400 !important;
  color:          #2E3B2A !important;
  line-height:    1.3 !important;
  width:          512px !important;
  max-width:      100% !important;
  margin:         0 0 6px !important;
  padding:        0 !important;
  text-align:     center !important;
}

#color-season-quiz-container .csq-helper {
  display:        block !important;
  font-family:    'Jost', sans-serif !important;
  font-size:      10px !important;
  letter-spacing: 0.10em !important;
  color:          #8B7D72 !important;
  line-height:    1.6 !important;
  width:          512px !important;
  max-width:      100% !important;
  margin:         0 0 20px !important;
  padding:        0 !important;
  text-align:     center !important;
}

#color-season-quiz-container .csq-no-helper {
  display: block !important;
  height:  20px !important;
  margin:  0 !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   OPTIONS GRID
   Width: 512px — SAME as progress bar → they align perfectly.
   2 columns desktop, 1 column ≤ 480px.
   Text wraps inside fixed-width buttons.
═══════════════════════════════════════════════════════════════ */
#color-season-quiz-container .csq-options {
  display:               grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:                   10px !important;
  width:                 512px !important;
  max-width:             100% !important;
  margin:                0 !important;
  padding:               0 !important;
  text-align:            left !important;
}

@media (max-width: 480px) {
  #color-season-quiz-container .csq-options {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
}

#color-season-quiz-container .csq-option-btn {
  -webkit-appearance: none !important;
  appearance:         none !important;
  display:            block !important;
  width:              100% !important;
  margin:             0 !important;
  padding:            16px 18px !important;
  border:             1px solid rgba(46,59,42,0.12) !important;
  background:         #F4EFE6 !important;
  color:              #2E3B2A !important;
  font-family:        'Jost', sans-serif !important;
  font-size:          11px !important;
  font-weight:        400 !important;
  letter-spacing:     0.14em !important;
  text-transform:     uppercase !important;
  text-align:         left !important;
  line-height:        1.55 !important;
  word-wrap:          break-word !important;
  overflow-wrap:      break-word !important;
  white-space:        normal !important;
  cursor:             pointer !important;
  border-radius:      0 !important;
  box-shadow:         none !important;
  outline:            none !important;
  transition:         background 0.35s ease, color 0.35s ease, border-color 0.25s ease !important;
}

#color-season-quiz-container .csq-option-btn:hover,
#color-season-quiz-container .csq-option-btn:focus {
  background:   #2E3B2A !important;
  color:        #FAF7F2 !important;
  border-color: #2E3B2A !important;
  outline:      none !important;
}

/* ═══════════════════════════════════════════════════════════════
   RESULT PANEL
═══════════════════════════════════════════════════════════════ */
#color-season-quiz-container .csq-result {
  display:    block !important;
  width:      100% !important;
  text-align: center !important;
  padding:    0 !important;
  margin:     0 !important;
  animation:  csqFadeScale 0.55s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}

@keyframes csqFadeScale {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* Season name e.g. "SUMMER" */
#color-season-quiz-container .csq-season-title {
  display:        block !important;
  font-family:    'Cormorant Garamond', serif !important;
  font-size:      clamp(44px, 10vw, 72px) !important;
  font-weight:    400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color:          #2E3B2A !important;
  line-height:    1 !important;
  margin:         0 0 10px !important;
  padding:        0 !important;
}

#color-season-quiz-container .csq-result .csq-divider {
  margin: 10px auto 16px !important;
}

#color-season-quiz-container .csq-season-desc {
  display:     block !important;
  font-family: 'Jost', sans-serif !important;
  font-size:   12px !important;
  font-weight: 300 !important;
  color:       #8B7D72 !important;
  line-height: 1.85 !important;
  max-width:   420px !important;
  margin:      0 auto 36px !important;
  padding:     0 !important;
}

/* ── Colour circles ── */
#color-season-quiz-container .csq-circles {
  display:         flex !important;
  flex-direction:  row !important;
  flex-wrap:       wrap !important;
  justify-content: center !important;
  align-items:     center !important;
  gap:             28px !important;
  width:           100% !important;
  margin:          0 auto 44px !important;
  padding:         0 !important;
}

@media (min-width: 640px) {
  #color-season-quiz-container .csq-circles { gap: 40px !important; }
}

#color-season-quiz-container .csq-circle-item {
  display:        flex !important;
  flex-direction: column !important;
  align-items:    center !important;
  margin:         0 !important;
  padding:        0 !important;
  opacity:        0;
  transform:      scale(0.82);
  animation:      csqCircleIn 0.42s ease forwards;
}

#color-season-quiz-container .csq-circle-item:nth-child(1) { animation-delay: 0.08s; }
#color-season-quiz-container .csq-circle-item:nth-child(2) { animation-delay: 0.18s; }
#color-season-quiz-container .csq-circle-item:nth-child(3) { animation-delay: 0.28s; }

@keyframes csqCircleIn {
  to { opacity: 1; transform: scale(1); }
}

#color-season-quiz-container .csq-circle {
  display:       flex !important;
  align-items:   center !important;
  justify-content: center !important;
  width:         90px !important;
  height:        90px !important;
  border-radius: 50% !important;
  box-shadow:    0 6px 20px rgba(0,0,0,0.14) !important;
  flex-shrink:   0 !important;
  margin:        0 !important;
  padding:       0 !important;
}

@media (min-width: 640px) {
  #color-season-quiz-container .csq-circle { width: 106px !important; height: 106px !important; }
}

@media (min-width: 768px) {
  #color-season-quiz-container .csq-circle { width: 120px !important; height: 120px !important; }
}

/* Label inside circle */
#color-season-quiz-container .csq-circle-label {
  display:        block !important;
  font-family:    'Jost', sans-serif !important;
  font-size:      9px !important;
  font-weight:    400 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  line-height:    1 !important;
  text-align:     center !important;
  margin:         0 !important;
  padding:        0 !important;
}

@media (min-width: 640px) {
  #color-season-quiz-container .csq-circle-label { font-size: 10px !important; }
}

/* ── CTA buttons row ── */
#color-season-quiz-container .csq-ctas {
  display:         flex !important;
  flex-direction:  row !important;
  flex-wrap:       wrap !important;
  justify-content: center !important;
  align-items:     center !important;
  gap:             12px !important;
  width:           100% !important;
  margin:          0 0 16px !important;
  padding:         0 !important;
}

#color-season-quiz-container .csq-cta-primary,
#color-season-quiz-container .csq-cta-secondary {
  -webkit-appearance: none !important;
  appearance:         none !important;
  display:            inline-flex !important;
  align-items:        center !important;
  justify-content:    center !important;
  padding:            13px 36px !important;
  font-family:        'Jost', sans-serif !important;
  font-size:          11px !important;
  font-weight:        400 !important;
  letter-spacing:     0.16em !important;
  text-transform:     uppercase !important;
  text-decoration:    none !important;
  cursor:             pointer !important;
  border-radius:      0 !important;
  box-shadow:         none !important;
  line-height:        1.3 !important;
  white-space:        nowrap !important;
  transition:         background 0.45s ease, color 0.45s ease, border-color 0.45s ease !important;
}

#color-season-quiz-container .csq-cta-primary {
  background: #2E3B2A !important;
  color:      #FAF7F2 !important;
  border:     1px solid #2E3B2A !important;
}

#color-season-quiz-container .csq-cta-primary:hover,
#color-season-quiz-container .csq-cta-primary:focus {
  background:   #C4A35A !important;
  border-color: #C4A35A !important;
  color:        #FAF7F2 !important;
  text-decoration: none !important;
  outline: none !important;
}

#color-season-quiz-container .csq-cta-secondary {
  background: transparent !important;
  color:      #2E3B2A !important;
  border:     1px solid rgba(46,59,42,0.20) !important;
}

#color-season-quiz-container .csq-cta-secondary:hover,
#color-season-quiz-container .csq-cta-secondary:focus {
  background:      #2E3B2A !important;
  border-color:    #2E3B2A !important;
  color:           #FAF7F2 !important;
  text-decoration: none !important;
  outline:         none !important;
}

@media (max-width: 480px) {
  #color-season-quiz-container .csq-ctas { flex-direction: column !important; }
  #color-season-quiz-container .csq-cta-primary,
  #color-season-quiz-container .csq-cta-secondary { width: 100% !important; }
}

/* ── Retake link ── */
#color-season-quiz-container .csq-retake-btn {
  -webkit-appearance: none !important;
  appearance:         none !important;
  display:            block !important;
  background:         none !important;
  border:             none !important;
  margin:             0 auto !important;
  padding:            8px 0 !important;
  font-family:        'Jost', sans-serif !important;
  font-size:          9px !important;
  font-weight:        400 !important;
  letter-spacing:     0.22em !important;
  text-transform:     uppercase !important;
  color:              rgba(139,125,114,0.55) !important;
  cursor:             pointer !important;
  border-radius:      0 !important;
  box-shadow:         none !important;
  transition:         color 0.3s ease !important;
}

#color-season-quiz-container .csq-retake-btn:hover,
#color-season-quiz-container .csq-retake-btn:focus {
  color:                  #8B7D72 !important;
  text-decoration:        underline !important;
  text-underline-offset:  4px !important;
  outline:                none !important;
}