/* ==========================================================================
   BMA mattress quiz

   Merged from the two page copies (home + /mattress-quiz/). Of the 52 rules
   the two shared, all 52 had identical bodies, so the merge was conflict-free;
   the remaining 19 were extras present on only one page and are kept.

   Hardcoded hexes replaced with design tokens where they matched exactly:
     #B8860B -> --bma-gold        #1B2A4A -> --bma-navy
     #FFFDF7 -> --bma-cream-light #F5EFE0 -> --bma-cream
     #DAA520 -> --bma-gold-mid    #E8E0D0 -> --bma-border
     #2D6A4F -> --bma-pro

   Remaining literals (#7A7060, #999, #2D4A7A ...) are quiz-only shades with no
   token equivalent. Fold them into tokens.css if they turn up elsewhere.

   The Google Fonts @import that sat at the top of both copies is gone —
   functions.php enqueues fonts once, with the correct weights.
   ========================================================================== */

#bma-quiz-container * {
  box-sizing: border-box;
}

.bma-quiz-box {
  background: linear-gradient(170deg, var(--bma-cream-light) 0%, var(--bma-cream) 100%);
  border-radius: 20px;
  padding: 36px 28px;
  border: 1px solid var(--bma-border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.bma-site-tag {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--bma-gold);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.bma-intro {
  text-align: center;
  padding: 20px 0 0;
}

.bma-intro-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bma-navy), #2D4A7A);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 32px;
}

.bma-intro h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--bma-navy);
  margin: 0 0 10px;
  line-height: 1.25;
}

.bma-intro p {
  font-size: 15px;
  color: #7A7060;
  margin: 0 0 28px;
  line-height: 1.6;
}

.bma-start-btn {
  padding: 15px 44px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bma-gold), var(--bma-gold-mid));
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(184,134,11,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.bma-start-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(184,134,11,0.4);
}

.bma-intro-note {
  font-size: 11px;
  color: #AAA;
  margin: 14px 0 0;
}

.bma-progress-wrap {
  width: 100%;
  height: 5px;
  background: var(--bma-border);
  border-radius: 3px;
  overflow: hidden;
  margin: 0 0 24px;
}

.bma-progress-bar {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--bma-gold), var(--bma-gold-mid));
  transition: width 0.4s ease;
}

.bma-q-counter {
  text-align: center;
  font-size: 13px;
  color: #999;
  margin: 0 0 8px;
}

.bma-question {
  animation: bmaFadeIn 0.35s ease;
}

.bma-question h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 23px;
  font-weight: 700;
  color: var(--bma-navy);
  margin: 0 0 4px;
  line-height: 1.3;
}

.bma-question .bma-subtitle {
  font-size: 14px;
  color: #7A7060;
  margin: 0 0 22px;
  line-height: 1.5;
}

.bma-option-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  margin: 0 0 10px;
  border: 2px solid var(--bma-border);
  border-radius: 12px;
  background: var(--bma-cream-light);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--bma-navy);
  text-align: left;
  transition: all 0.2s ease;
}

.bma-option-btn:hover {
  border-color: #D4C5A0;
  background: #FFFCF0;
}

.bma-option-btn.selected {
  border-color: var(--bma-gold);
  background: #FFF8E7;
  font-weight: 600;
}

.bma-option-icon {
  font-size: 22px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

.bma-option-check {
  margin-left: auto;
  color: var(--bma-gold);
  font-size: 17px;
  display: none;
}

.bma-option-btn.selected .bma-option-check {
  display: block;
}

.bma-result {
  animation: bmaFadeIn 0.5s ease;
}

.bma-result-header {
  text-align: center;
  margin: 0 0 24px;
}

.bma-result-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--bma-gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.bma-result-header h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--bma-navy);
  margin: 0 0 4px;
}

.bma-result-header .bma-tagline {
  font-size: 15px;
  color: #7A7060;
  margin: 0;
}

.bma-top-card {
  background: var(--bma-cream-light);
  border: 2px solid var(--bma-gold);
  border-radius: 16px;
  padding: 24px;
  margin: 0 0 16px;
}

.bma-top-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.bma-pick-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.bma-rating-small {
  font-size: 13px;
  color: #7A7060;
}

.bma-rating-small strong {
  color: var(--bma-navy);
}

.bma-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 0 0 18px;
}

.bma-stat-box {
  background: var(--bma-cream);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
}

.bma-stat-label {
  font-size: 10px;
  color: #7A7060;
  margin: 0 0 3px;
}

.bma-stat-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--bma-navy);
}

.bma-reasons-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--bma-gold);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.bma-reason-item {
  display: flex;
  gap: 8px;
  margin: 0 0 7px;
  align-items: flex-start;
}

.bma-reason-check {
  color: var(--bma-pro);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.bma-reason-text {
  font-size: 13px;
  color: #3A3A3A;
  line-height: 1.5;
}

.bma-btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.bma-btn-review {
  flex: 1;
  min-width: 130;
  display: block;
  text-align: center;
  padding: 13px 16px;
  background: var(--bma-navy);
  color: #fff !important;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s;
}

.bma-btn-review:hover {
  background: #2D4A7A;
}

.bma-btn-price {
  flex: 1;
  min-width: 130;
  display: block;
  text-align: center;
  padding: 13px 16px;
  background: linear-gradient(135deg, var(--bma-gold), var(--bma-gold-mid));
  color: #fff !important;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
}

.bma-runner-card {
  background: #FAFAF5;
  border: 1px solid var(--bma-border);
  border-radius: 14px;
  padding: 20px;
  margin: 0 0 18px;
}

.bma-runner-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.bma-runner-label {
  font-size: 11px;
  font-weight: 600;
  color: #7A7060;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.bma-runner-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--bma-navy);
  margin: 3px 0 0;
}

.bma-runner-meta {
  font-size: 13px;
  color: #7A7060;
}

.bma-runner-reason {
  font-size: 13px;
  color: #555;
  line-height: 1.5;
  margin: 0 0 12px;
}

.bma-runner-btn {
  display: inline-block;
  padding: 9px 18px;
  border: 2px solid var(--bma-navy);
  color: var(--bma-navy) !important;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s;
}

.bma-runner-btn:hover {
  background: #F0EDE0;
}

.bma-compare-link {
  text-align: center;
  margin: 0 0 4px;
}

.bma-compare-link a {
  font-size: 13px;
  color: var(--bma-gold) !important;
  text-decoration: underline !important;
}

.bma-restart-btn {
  display: block;
  margin: 18px auto 0;
  padding: 9px 22px;
  border: 2px solid #CCC;
  border-radius: 8px;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #888;
  cursor: pointer;
}

.bma-restart-btn:hover {
  border-color: #999;
  color: #666;
}

.bma-footer-note {
  text-align: center;
  font-size: 10px;
  color: #BBB;
  margin: 24px 0 0;
  line-height: 1.5;
}

.bma-badge {
  position:absolute;top:0;right:0;display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;
  padding:6px 12px 6px 14px;border-bottom-left-radius:12px;z-index:4;
}

.bma-badge .bi {
  font-size:11px;line-height:1;
}

.bma-badge.award {
  background:linear-gradient(135deg,#D4A24E,var(--bma-gold));color:#1A1A1A;
}

.bma-badge.cred {
  background:rgba(0,0,0,0.35);color:#fff;border:1px solid rgba(255,255,255,0.28);
}

.bma-code-chip {
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:linear-gradient(135deg,#FFF7E8,#FBEECB);border:1.5px dashed #C9A24B;border-radius:10px;
  padding:10px 13px;margin:0 0 12px;
}

.bma-code-chip .lbl {
  font-size:10.5px;color:#8B6914;font-weight:700;letter-spacing:0.3px;
}

.bma-code-chip .code {
  font-size:15px;font-weight:800;color:#7A4E00;letter-spacing:0.8px;
}

/* --- Brand colour on the result badge -----------------------------------
   Driven by [data-brand] on .bma-result via tokens.css, so the engine never
   emits a brand hex. Replaces the old inline style="background:<hex>". */
.bma-pick-badge {
  background: var(--bma-brand, var(--bma-navy));
  color: #fff;
}

/* --- Exclusive discount code in the result ------------------------------
   Only Luxara has one today. It is the single most reliable attribution we
   have (a code cannot be blocked like a cookie) and the strongest reason to
   act now, so it sits above the price/trial/warranty row rather than below. */
.bma-quiz-code {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #FFF8E7;
  border: 1px dashed var(--bma-gold, #B8860B);
  border-radius: 10px;
  padding: 11px 14px;
  margin: 0 0 14px;
}
.bma-quiz-code-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--bma-gold, #B8860B);
}
.bma-quiz-code-value {
  font-family: var(--bma-font-body, 'DM Sans', sans-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--bma-navy, #1B2A4A);
  margin-left: auto;
}
.bma-quiz-code-note { font-size: 13px; color: #7A7060; }