/**
 * SmartMatch → UMA Design System Override
 * ────────────────────────────────────────
 * Drop this file AFTER quiz-styles.css to re-skin the SmartMatch
 * Recommendations quiz to match the UMA guided-shopping form aesthetic.
 *
 * Depends on UMA's CSS custom properties being available (:root vars
 * from uma-global.css). If SmartMatch is loaded on a page where
 * uma-global.css is already present, these vars resolve automatically.
 * Otherwise, the fallback hex values embedded here will apply.
 */


/* ============================================================
   0. RE-MAP SMR VARIABLES → UMA PALETTE
   ============================================================ */

.smr-quiz-container {
  --smr-primary:       var(--color-navy,       #012639);
  --smr-primary-dark:  var(--color-navy-deep,  #011C2B);
  --smr-primary-light: var(--color-blue,       #2887C8);
  --smr-blue-light:    var(--color-blue-light,  #EDF6FC);
  --smr-accent:        var(--color-teal,        #0D9488);
  --smr-accent-light:  #10B981;
  --smr-success:       var(--color-teal,        #0D9488);
  --smr-medigap:       var(--color-blue,        #2887C8);
  --smr-neutral:       var(--color-muted,       #78716C);
  --smr-warning:       var(--color-gold,        #D97706);
  --smr-danger:        var(--color-error,       #DC2626);
  --smr-text-dark:     var(--color-body,        #1C1917);
  --smr-text-body:     #44403C;
  --smr-text-light:    var(--color-muted,       #78716C);
  --smr-border:        var(--color-border,      #E8E2D9);
  --smr-bg:            var(--color-cream,       #FEFCF8);
  --smr-white:         var(--color-bg-white,    #FFFFFF);
  --smr-radius:        16px;
  --smr-shadow:        0 8px 40px rgba(0,0,0,0.08);
}


/* ============================================================
   1. OUTER CONTAINER
   Match the rounded-card-on-cream layout of the guided form.
   ============================================================ */

.smr-quiz-container {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  max-width: 780px;
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);
  overflow: hidden;
}


/* ============================================================
   2. HEADER — Navy-to-blue gradient (not navy-to-navy)
   ============================================================ */

.smr-quiz-header {
  background: linear-gradient(
    135deg,
    var(--color-navy, #012639) 0%,
    var(--color-blue, #2887C8) 100%
  );
  padding: 36px 32px 28px;
}

.smr-quiz-header h1 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.smr-quiz-subtitle {
  font-size: 1rem;
  opacity: 0.92;
  margin-bottom: 24px;
}


/* ============================================================
   3. AGENT CARD — Speech-bubble style
   Mirror the guided-form's agent pill: circular photo on the
   left with NPN beneath, speech-bubble on the right.
   ============================================================ */

.smr-guided-agent {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 16px 16px 16px 4px;
  padding: 14px 20px;
  gap: 14px;
  max-width: 560px;
}

.smr-agent-avatar {
  width: 56px;
  height: 56px;
  border: 3px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.15);
}

.smr-agent-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.smr-agent-name {
  font-size: 1rem;
  font-weight: 700;
}

.smr-agent-title {
  font-size: 0.85rem;
}

/* In-flow agent (question cards) — match UMA bubble aesthetic */
.smr-guided-agent-flow {
  background: var(--color-blue-light, #EDF6FC);
  border: 1px solid rgba(40,135,200,0.18);
  border-radius: 16px 16px 16px 4px;
}

.smr-guided-agent-flow .smr-agent-avatar {
  border-color: var(--color-blue, #2887C8);
  background: var(--color-blue-light, #EDF6FC);
}

.smr-guided-agent-flow .smr-agent-name {
  color: var(--color-blue, #2887C8);
}


/* ============================================================
   4. PROGRESS BAR → DOT STEPPER
   Replace the fill-bar with the UMA dot + connecting-bar
   pattern. Since SmartMatch's JS drives width% on the fill,
   we keep the structure but restyle to look like dots.
   ============================================================ */

.smr-progress-container {
  padding: 0 24px;
  margin-top: -4px;
}

.smr-progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}

.smr-progress-fill {
  background: var(--color-teal, #0D9488);
  border-radius: 3px;
}

.smr-progress-text {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 8px;
  opacity: 0.9;
}


/* ============================================================
   5. QUESTION CARDS
   ============================================================ */

.smr-quiz-form {
  padding: 28px 32px 32px;
}

.smr-section-header {
  font-size: 0.78rem;
  color: var(--color-blue, #2887C8);
  border-bottom-color: var(--color-teal, #0D9488);
  letter-spacing: 0.08em;
}

.smr-question-card {
  background: var(--color-cream, #FEFCF8);
  border-radius: 16px;
  padding: 24px 28px;
  border: 1px solid var(--color-border, #E8E2D9);
}

.smr-question-number {
  background: var(--color-blue, #2887C8);
  border-radius: 20px;
  font-size: 0.75rem;
  padding: 3px 11px;
}

.smr-question-text {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-navy, #012639);
}

.smr-question-subtext {
  color: var(--color-muted, #78716C);
  font-style: normal;
  font-size: 0.9rem;
}


/* ============================================================
   6. INPUTS — Warm-neutral border, 12px radius
   ============================================================ */

.smr-input,
.smr-select,
.smr-textarea {
  border: 1.5px solid var(--color-border, #E8E2D9);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 1rem;
  color: var(--color-body, #1C1917);
  background: var(--color-bg-white, #FFFFFF);
  height: 48px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.smr-textarea {
  height: auto;
}

.smr-input:focus,
.smr-select:focus,
.smr-textarea:focus {
  border-color: var(--color-blue, #2887C8);
  box-shadow: 0 0 0 3px rgba(40,135,200,0.15);
}

.smr-input::placeholder {
  color: var(--color-light-text, #A8A29E);
}


/* ============================================================
   7. RADIO & CHECKBOX OPTIONS
   ============================================================ */

.smr-radio-option,
.smr-checkbox-option {
  border: 1.5px solid var(--color-border, #E8E2D9);
  border-radius: 12px;
  padding: 14px 18px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.smr-radio-option:hover,
.smr-checkbox-option:hover {
  border-color: var(--color-blue, #2887C8);
  background: var(--color-blue-light, #EDF6FC);
}

.smr-radio-option:has(input:checked),
.smr-checkbox-option:has(input:checked) {
  border-color: var(--color-blue, #2887C8);
  background: var(--color-blue-light, #EDF6FC);
  box-shadow: 0 0 0 3px rgba(40,135,200,0.12);
}

.smr-radio-option input,
.smr-checkbox-option input {
  accent-color: var(--color-blue, #2887C8);
}

.smr-radio-option input:checked + span,
.smr-checkbox-option input:checked + span {
  color: var(--color-navy, #012639);
  font-weight: 600;
}


/* ============================================================
   8. BUTTONS — Teal primary, outlined secondary
   ============================================================ */

.smr-btn {
  border-radius: 12px;
  padding: 14px 28px;
  font-weight: 700;
  font-size: 1rem;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.smr-btn-primary {
  background: var(--color-blue, #2887C8);
  color: #fff;
  box-shadow: 0 4px 16px rgba(40,135,200,0.25);
}

.smr-btn-primary:hover {
  background: var(--color-blue-dark, #1F6CA0);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(40,135,200,0.35);
}

.smr-btn-secondary {
  border: 1.5px solid var(--color-border, #E8E2D9);
  border-radius: 12px;
  color: var(--color-muted, #78716C);
  background: var(--color-bg-white, #FFFFFF);
}

.smr-btn-secondary:hover {
  border-color: var(--color-navy, #012639);
  color: var(--color-navy, #012639);
}

.smr-nav-buttons {
  border-top: 1px solid var(--color-border, #E8E2D9);
  margin-top: 24px;
  padding-top: 16px;
}


/* ============================================================
   9. LEAD FORM SECTION
   ============================================================ */

.smr-lead-form-section {
  padding: 32px;
}

.smr-lead-form-section h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.5rem;
  color: var(--color-navy, #012639);
}

.smr-lead-intro {
  color: var(--color-muted, #78716C);
  font-size: 0.95rem;
}

.smr-lead-form-card {
  background: var(--color-cream, #FEFCF8);
  border-radius: 16px;
  padding: 28px;
  border: 1px solid var(--color-border, #E8E2D9);
}

.smr-form-group label {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy, #012639);
  margin-bottom: 6px;
}

.smr-required {
  color: var(--color-red, #EF3937);
}


/* Consent section */
.smr-consent-section {
  border-radius: 12px;
  border: 1px solid var(--color-border, #E8E2D9);
  background: var(--color-bg-white, #FFFFFF);
  padding: 18px;
}

.smr-consent-text {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-muted, #78716C);
}

.smr-consent-text a {
  color: var(--color-blue, #2887C8);
}

.smr-consent-label input {
  accent-color: var(--color-blue, #2887C8);
}

/* Submit button */
.smr-lead-submit-btn {
  background: var(--color-red, #EF3937);
  color: #fff;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 16px 40px;
  box-shadow: 0 4px 16px rgba(239,57,55,0.25);
  transition: background 0.2s ease, transform 0.15s ease;
}

.smr-lead-submit-btn:hover {
  background: var(--color-red-dark, #C62D2B);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(239,57,55,0.35);
}


/* ============================================================
   10. RESULTS SECTION
   ============================================================ */

.smr-quiz-header.smr-results-header {
  padding: 44px 36px;
}

.smr-results-title {
  font-size: 2rem !important;
  letter-spacing: -0.03em;
}

.smr-results-agent-pill {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem;
}

.smr-results-section {
  padding: 32px;
}

.smr-results-section h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.5rem;
  color: var(--color-navy, #012639);
}


/* ============================================================
   11. SCORE SCALE
   ============================================================ */

.smr-scale-container {
  background: var(--color-cream, #FEFCF8);
  border-radius: 16px;
  padding: 24px 28px;
  border: 1px solid var(--color-border, #E8E2D9);
}

.smr-scale-bar {
  height: 10px;
  background: linear-gradient(
    to right,
    var(--color-blue, #2887C8) 0%,
    var(--color-teal, #0D9488) 100%
  );
  border-radius: 5px;
}

.smr-scale-indicator {
  border: 3px solid var(--color-navy, #012639);
  width: 24px;
  height: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.smr-scale-labels span:first-child {
  color: var(--color-blue, #2887C8);
}

.smr-scale-labels span:last-child {
  color: var(--color-teal, #0D9488);
}


/* ============================================================
   12. RECOMMENDATION CARD — UMA color-coded tiers
   ============================================================ */

.smr-recommendation-card {
  border-radius: 16px;
  padding: 28px;
}

.smr-recommendation-card.tier-medigap,
.smr-recommendation-card.tier-strong-medigap {
  background: linear-gradient(135deg, rgba(40,135,200,0.08), rgba(40,135,200,0.03));
  border: 2px solid var(--color-blue, #2887C8);
}

.smr-recommendation-card.tier-ma,
.smr-recommendation-card.tier-strong-ma {
  background: linear-gradient(135deg, rgba(13,148,136,0.08), rgba(13,148,136,0.03));
  border: 2px solid var(--color-teal, #0D9488);
}

.smr-recommendation-card.tier-balanced {
  background: linear-gradient(135deg, rgba(120,113,108,0.08), rgba(120,113,108,0.03));
  border: 2px solid var(--color-muted, #78716C);
}

.smr-recommendation-plan {
  font-size: 1.6rem;
  color: var(--color-navy, #012639);
}

.smr-learn-more-link {
  background: var(--color-blue-light, #EDF6FC);
  border: 1px solid rgba(40,135,200,0.3);
  color: var(--color-blue, #2887C8);
  border-radius: 12px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 0.9rem;
}

.smr-learn-more-link:hover {
  background: rgba(40,135,200,0.12);
  transform: translateY(-1px);
}


/* ============================================================
   13. RATIONALE & NEXT STEPS
   ============================================================ */

.smr-rationale-section h3,
.smr-next-steps-section h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  color: var(--color-navy, #012639);
  border-bottom: 2px solid var(--color-teal, #0D9488);
  padding-bottom: 8px;
}

.smr-rationale-section li:before {
  color: var(--color-teal, #0D9488);
}


/* ============================================================
   14. WARNINGS BOX
   ============================================================ */

.smr-warnings-box {
  background: var(--color-gold-light, #FFFBEB);
  border: 1.5px solid var(--color-gold, #D97706);
  border-radius: 16px;
  padding: 20px 24px;
}


/* ============================================================
   15. CTA SECTION (bottom of results)
   ============================================================ */

.smr-cta-section {
  background: linear-gradient(
    135deg,
    var(--color-navy, #012639) 0%,
    var(--color-blue, #2887C8) 100%
  );
  border-radius: 20px;
  padding: 36px;
  margin: 32px 0;
}

.smr-cta-section h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.smr-cta-phone {
  border-radius: 12px;
  font-weight: 700;
  color: var(--color-red, #EF3937);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.smr-cta-phone:hover {
  box-shadow: 0 4px 16px rgba(239,57,55,0.2);
}

.smr-cta-consultation-btn {
  background: var(--color-red, #EF3937);
  border-radius: 12px;
  font-weight: 700;
}

.smr-cta-consultation-btn:hover {
  background: var(--color-red-dark, #C62D2B);
  box-shadow: 0 6px 20px rgba(239,57,55,0.35);
}


/* ============================================================
   16. SLIDER
   ============================================================ */

.smr-slider {
  background: linear-gradient(
    to right,
    var(--color-blue, #2887C8),
    var(--color-muted, #78716C),
    var(--color-teal, #0D9488)
  );
  border-radius: 4px;
}

.smr-slider::-webkit-slider-thumb {
  border: 3px solid var(--color-navy, #012639);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.smr-slider-value {
  color: var(--color-navy, #012639);
}


/* ============================================================
   17. RANKING ITEMS
   ============================================================ */

.smr-ranking-item {
  border: 1.5px solid var(--color-border, #E8E2D9);
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.smr-ranking-item:hover {
  border-color: var(--color-blue, #2887C8);
  box-shadow: 0 2px 8px rgba(40,135,200,0.1);
}


/* ============================================================
   18. COMPARISON TABLE
   ============================================================ */

.smr-comparison-section {
  border-radius: 16px;
  border: 1px solid var(--color-border, #E8E2D9);
  background: var(--color-cream, #FEFCF8);
}

.smr-comparison-section h3 {
  color: var(--color-navy, #012639);
}

.smr-comparison-table thead th {
  background: var(--color-navy, #012639);
}

.smr-comparison-table thead th:first-child {
  border-radius: 12px 0 0 0;
}

.smr-comparison-table thead th:last-child {
  border-radius: 0 12px 0 0;
}

.smr-comparison-table th,
.smr-comparison-table td {
  border-bottom-color: var(--color-border, #E8E2D9);
}

.smr-comparison-table td:nth-child(2) {
  color: var(--color-blue, #2887C8);
}

.smr-comparison-table td:nth-child(3) {
  color: var(--color-teal, #0D9488);
}

.smr-comparison-note {
  background: var(--color-gold-light, #FFFBEB);
  border: 1px solid var(--color-gold, #D97706);
  border-radius: 12px;
}


/* ============================================================
   19. TOOLTIPS
   ============================================================ */

.smr-tooltip {
  background: var(--color-navy, #012639);
  border: 2px solid var(--color-teal, #0D9488);
  border-radius: 12px;
}

.smr-tooltip::after {
  border-top-color: var(--color-navy, #012639);
}

.smr-tooltip-trigger {
  border-bottom-color: var(--color-teal, #0D9488);
}

.smr-tooltip-trigger::before {
  background: var(--color-teal, #0D9488);
}


/* ============================================================
   20. CHATBOT MODAL
   ============================================================ */

.smr-chatbot-container {
  border-radius: 20px;
}

.smr-chatbot-header {
  background: linear-gradient(
    135deg,
    var(--color-navy, #012639) 0%,
    var(--color-blue, #2887C8) 100%
  );
  border-radius: 20px 20px 0 0;
}

.smr-chat-message.bot .smr-message-bubble {
  background: var(--color-blue-light, #EDF6FC);
  color: var(--color-body, #1C1917);
  border-radius: 16px 16px 16px 4px;
}

.smr-chat-message.user .smr-message-bubble {
  background: var(--color-blue, #2887C8);
  border-radius: 16px 16px 4px 16px;
}

.smr-bot-avatar {
  background: var(--color-navy, #012639);
}

.smr-chat-button {
  border: 1.5px solid var(--color-border, #E8E2D9);
  border-radius: 12px;
}

.smr-chat-button:hover {
  border-color: var(--color-blue, #2887C8);
  background: var(--color-blue-light, #EDF6FC);
}

.smr-chat-button.primary {
  background: var(--color-blue, #2887C8);
  border-color: var(--color-blue, #2887C8);
}


/* ============================================================
   21. DISCLAIMER / TCPA
   ============================================================ */

.smr-disclaimer {
  background: var(--color-cream, #FEFCF8);
  border-radius: 12px;
  border: 1px solid var(--color-border, #E8E2D9);
  font-size: 0.82rem;
  color: var(--color-muted, #78716C);
  padding: 16px 20px;
}


/* ============================================================
   22. ERROR STATE
   ============================================================ */

.smr-error {
  background: var(--color-red-light, #FEF2F2);
  border: 2px solid var(--color-error, #DC2626);
  color: var(--color-error, #DC2626);
  border-radius: 16px;
}


/* ============================================================
   23. ACTION / RETAKE BUTTONS
   ============================================================ */

.smr-retake-btn {
  border-radius: 12px;
}

.smr-print-btn {
  border-radius: 12px;
}

.smr-action-buttons {
  gap: 12px;
}


/* ============================================================
   24. FILE UPLOAD
   ============================================================ */

.smr-file-label {
  border: 2px dashed var(--color-border, #E8E2D9);
  border-radius: 16px;
  background: var(--color-cream, #FEFCF8);
  padding: 36px;
}

.smr-file-label:hover {
  border-color: var(--color-blue, #2887C8);
  background: var(--color-blue-light, #EDF6FC);
}

.smr-file-name {
  color: var(--color-teal, #0D9488);
}


/* ============================================================
   25. BIRTHDAY SELECTOR
   ============================================================ */

.smr-birthday-selector {
  gap: 10px;
}


/* ============================================================
   26. ANIMATED TRANSITIONS — match UMA's fade-in-up
   ============================================================ */

.smr-question-slide.active {
  animation: smrUmaStepFadeIn 0.3s ease;
}

@keyframes smrUmaStepFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   27. RESPONSIVE OVERRIDES
   ============================================================ */

@media (max-width: 768px) {
  .smr-quiz-container {
    border-radius: 20px;
  }

  .smr-quiz-header {
    padding: 28px 20px 22px;
  }

  .smr-quiz-header h1 {
    font-size: 1.35rem;
  }

  .smr-quiz-form,
  .smr-lead-form-section,
  .smr-results-section {
    padding: 20px;
  }

  .smr-question-card {
    padding: 20px;
    border-radius: 12px;
  }

  .smr-guided-agent {
    padding: 12px 14px;
    border-radius: 12px 12px 12px 4px;
  }

  .smr-agent-avatar {
    width: 44px;
    height: 44px;
    border-width: 2px;
  }

  .smr-agent-name {
    font-size: 0.92rem;
  }

  .smr-btn {
    padding: 12px 20px;
    font-size: 0.95rem;
  }

  .smr-cta-section {
    padding: 28px 20px;
    border-radius: 16px;
  }

  .smr-cta-section h3 {
    font-size: 1.25rem;
  }

  .smr-recommendation-plan {
    font-size: 1.3rem;
  }

  .smr-lead-form-card {
    padding: 20px;
  }

  .smr-comparison-section {
    padding: 16px 12px;
    border-radius: 12px;
  }
}

@media (max-width: 480px) {
  .smr-quiz-container {
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  }

  .smr-quiz-header {
    padding: 24px 16px 20px;
  }

  .smr-quiz-header h1 {
    font-size: 1.2rem;
  }

  .smr-quiz-form,
  .smr-lead-form-section,
  .smr-results-section {
    padding: 16px;
  }

  .smr-question-card {
    padding: 16px;
  }

  .smr-guided-agent {
    flex-direction: column;
    text-align: center;
  }

  .smr-agent-avatar {
    margin: 0 auto;
  }

  .smr-nav-buttons {
    gap: 8px;
  }
}


/* ============================================================
   28. PRINT OVERRIDES — preserve UMA brand in print
   ============================================================ */

@media print {
  .smr-quiz-container {
    box-shadow: none;
    border: 1px solid #E8E2D9;
  }

  .smr-quiz-header,
  .smr-quiz-header.smr-results-header {
    background: #012639 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .smr-btn-primary {
    background: #2887C8 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .smr-recommendation-card {
    border-width: 2px;
  }
}