@charset "utf-8";
/* MiamiMD L&F Ingredient Education Quiz v104 - Mobile-First Design */
/* Target: Women 55+, Under 30 seconds completion */

/* ===== CSS VARIABLES - MiamiMD Brand Colors ===== */
:root {
  --primary-blue: #00558C;
  --cta-cyan: #00B4D8;
  --deep-navy: #1A365D;
  --white: #FFFFFF;
  --off-white: #F5F5F5;
  --success-gold: #D4AF37;
  --body-text: #333333;
  --subtext: #666666;
  --privacy-text: #888888;
  --progress-bg: #E5E5E5;
  --button-shadow: rgba(0, 180, 216, 0.3);
}

/* ===== RESET & BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: var(--white);
  min-height: 100vh;
  color: var(--body-text);
  line-height: 1.6;
  font-weight: 600; /* Bold all body text for 55+ readability */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== QUIZ CONTAINER ===== */
.quiz-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 16px;
  min-height: 100vh;
}

/* ===== PROGRESS BAR (6px height, rounded ends) ===== */
.progress-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--progress-bg);
  z-index: 100;
  border-radius: 3px;
}

.progress-bar {
  height: 100%;
  background: var(--cta-cyan);
  width: 20%; /* Step 1 starts at 20% */
  transition: width 0.4s ease;
  border-radius: 3px;
}

/* ===== QUIZ STEPS ===== */
.quiz-step {
  display: none;
  padding-top: 30px;
  animation: fadeIn 0.4s ease;
}

.quiz-step.active {
  display: block;
}

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

/* ===== TYPOGRAPHY (55+ audience sizing) ===== */
.headline {
  font-size: 26px; /* Min 26px for headlines */
  font-weight: 700;
  color: var(--deep-navy);
  text-align: center;
  margin-bottom: 12px;
  line-height: 1.3;
}

.subhead {
  font-size: 19px;
  font-weight: 600;
  color: var(--body-text);
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.4;
}

.question {
  font-size: 26px; /* Min 26px for headlines */
  font-weight: 700;
  color: var(--deep-navy);
  text-align: center;
  margin-bottom: 12px;
  line-height: 1.35;
}

.subtext {
  font-size: 16px;
  color: var(--subtext);
  text-align: center;
  margin-bottom: 24px;
  font-weight: 600; /* Bold subtext */
}

.privacy-text {
  font-size: 14px;
  color: var(--privacy-text);
  text-align: center;
  margin-top: 20px;
  font-weight: 600;
}

/* ===== OPTIONS (Touch targets: 60px min height) ===== */
.options-container {
  display: flex;
  flex-direction: column;
  gap: 14px; /* 14px spacing between targets */
  margin-bottom: 20px;
}

.option-btn {
  width: 100%;
  min-height: 60px; /* 60px min height for option cards */
  padding: 16px 20px;
  background: var(--off-white);
  border: 2px solid #E0E0E0;
  border-radius: 12px; /* 12px border-radius */
  font-size: 19px; /* Min 19px body text */
  font-weight: 600; /* Bold */
  color: var(--body-text);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
}

.option-btn:hover {
  border-color: var(--cta-cyan);
  background: var(--white);
}

.option-btn:focus {
  outline: 2px solid var(--cta-cyan);
  outline-offset: 2px;
}

.option-btn.selected {
  background: var(--cta-cyan);
  border-color: var(--cta-cyan);
  color: var(--white);
}

.option-btn.italic-option {
  font-style: italic;
  color: var(--subtext);
}

.option-btn.italic-option.selected {
  color: var(--white);
}

/* Option Emoji Styling */
.option-emoji {
  font-size: 22px;
  min-width: 28px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== CONTINUE BUTTON (52px min height) ===== */
.continue-btn {
  width: 100%;
  min-height: 52px; /* 52px min height for buttons */
  padding: 16px 24px;
  background: var(--cta-cyan);
  border: none;
  border-radius: 12px; /* 12px border-radius */
  font-size: 20px; /* 20px bold for buttons */
  font-weight: 700;
  color: var(--white);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 16px;
  box-shadow: 0 4px 15px var(--button-shadow);
}

.continue-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--button-shadow);
}

.continue-btn:disabled {
  background: #CCCCCC;
  cursor: not-allowed;
  box-shadow: none;
}

.continue-btn.delayed-show {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.continue-btn.delayed-show.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ===== SKIP QUIZ ===== */
.skip-quiz-container {
  text-align: center;
  margin-top: 24px;
}

.skip-quiz-link {
  background: none;
  border: none;
  color: var(--privacy-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px 16px;
}

.skip-quiz-link:hover {
  color: var(--body-text);
}

/* ===== INTERSTITIALS ===== */
.interstitial {
  text-align: center;
}

.interstitial-headline {
  font-size: 26px; /* Min 26px for headlines */
  font-weight: 700;
  color: var(--deep-navy);
  margin-bottom: 20px;
  line-height: 1.35;
}

.interstitial-body {
  font-size: 19px; /* Min 19px body text */
  color: var(--body-text);
  margin-bottom: 16px;
  line-height: 1.6;
  font-weight: 600; /* Bold */
}

/* Interstitial Countdown */
.interstitial-countdown {
  text-align: center;
  font-size: 14px;
  color: var(--privacy-text);
  margin-top: 12px;
  font-weight: 600;
}

.interstitial-countdown.hidden {
  display: none;
}

.interstitial-countdown .countdown-number {
  font-weight: 700;
  color: var(--primary-blue);
}

/* ===== PEPTIDE CARDS (Step 3) ===== */
.peptide-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
}

.peptide-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--off-white);
  border-left: 4px solid var(--primary-blue);
  border-radius: 12px;
  text-align: left;
}

.peptide-icon {
  font-size: 28px;
  min-width: 36px;
  text-align: center;
}

.peptide-content {
  flex: 1;
}

.peptide-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 4px;
}

.peptide-benefit {
  font-size: 16px;
  font-weight: 600;
  color: var(--body-text);
  line-height: 1.4;
}

.drugstore-note {
  font-size: 16px;
  font-style: italic;
  color: var(--privacy-text);
  margin-top: 16px;
  font-weight: 600;
}

/* ===== THREE-INTO-ONE VISUAL (Step 5) ===== */
.three-into-one-visual {
  margin: 24px 0;
  padding: 24px 16px;
  background: var(--off-white);
  border-radius: 16px;
  text-align: center;
}

.peptide-circles {
  display: flex;
  justify-content: space-around;
  margin-bottom: 8px;
}

.peptide-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.circle-icon {
  font-size: 32px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.circle-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-blue);
  text-align: center;
}

.flow-lines {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-lines svg {
  width: 200px;
  height: 60px;
}

.cream-jar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.jar-outline {
  font-size: 48px;
  position: relative;
  z-index: 2;
}

.jar-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.4) 0%, rgba(212, 175, 55, 0) 70%);
  border-radius: 50%;
  z-index: 1;
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

.rating-line {
  font-size: 16px;
  font-weight: 700;
  color: var(--success-gold);
}

.authority-line {
  font-size: 16px;
  color: var(--subtext);
  font-style: italic;
  margin-top: 16px;
  margin-bottom: 16px;
  font-weight: 600;
}

/* ===== FINAL STEP (Step 7) ===== */
.final-step {
  text-align: center;
}

.gold-checkmark {
  width: 60px;
  height: 60px;
  background: var(--success-gold);
  color: var(--white);
  font-size: 32px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.final-headline {
  font-size: 26px; /* Min 26px for headlines */
  font-weight: 700;
  color: var(--deep-navy);
  margin-bottom: 16px;
  line-height: 1.3;
}

.personalized-subhead {
  font-size: 19px;
  color: var(--body-text);
  font-weight: 600;
  margin-bottom: 20px;
  font-style: italic;
}

/* Product Reveal */
.product-reveal {
  margin-bottom: 24px;
}

.product-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--deep-navy);
  margin-bottom: 4px;
}

.product-brand {
  font-size: 16px;
  color: var(--body-text);
  font-weight: 600;
}

.brand-name {
  color: var(--primary-blue);
  font-weight: 700;
}

/* Checklist Animation */
.checklist-animation {
  margin-bottom: 24px;
  text-align: left;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.checklist-item.active {
  opacity: 1;
}

.checklist-item.completed {
  opacity: 1;
}

.checklist-item.completed .check-icon {
  color: var(--success-gold);
}

.check-icon {
  font-size: 20px;
  color: var(--subtext);
  min-width: 24px;
}

.check-text {
  font-size: 16px;
  color: var(--body-text);
  text-align: left;
  font-weight: 600;
}

/* Trust Badges */
.trust-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.trust-badges.hidden {
  display: none;
}

.trust-badge {
  font-size: 14px;
  font-weight: 700;
  color: var(--body-text);
  padding: 8px 12px;
  background: var(--off-white);
  border-radius: 8px;
}

/* CTA Button with Pulse */
.cta-btn {
  width: 100%;
  min-height: 52px;
  padding: 18px 24px;
  background: var(--cta-cyan);
  border: none;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 6px 20px var(--button-shadow);
  margin-bottom: 16px;
}

.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--button-shadow);
}

.cta-btn.hidden {
  display: none;
}

.cta-btn.pulse {
  animation: button-pulse 2s ease-in-out infinite;
}

@keyframes button-pulse {
  0%, 100% {
    box-shadow: 0 6px 20px var(--button-shadow);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 8px 30px rgba(0, 180, 216, 0.5);
    transform: scale(1.02);
  }
}

.countdown-text {
  font-size: 14px;
  color: var(--privacy-text);
  font-weight: 600;
}

.countdown-text.hidden {
  display: none;
}

#countdown-timer {
  font-weight: 700;
  color: var(--primary-blue);
}

/* ===== LOADING SCREEN ===== */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
  text-align: center;
}

.loading-screen.hidden {
  display: none;
}

.loading-headline {
  font-size: 26px;
  font-weight: 700;
  color: var(--deep-navy);
  margin-bottom: 30px;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--progress-bg);
  border-top-color: var(--cta-cyan);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 30px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-subhead {
  font-size: 19px;
  color: var(--body-text);
  max-width: 400px;
  margin-bottom: 20px;
  line-height: 1.6;
  font-weight: 600;
}

.loading-microcopy {
  font-size: 16px;
  color: var(--subtext);
  font-style: italic;
  font-weight: 600;
}

/* ===== MODALS ===== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal.hidden {
  display: none;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.modal-content {
  position: relative;
  background: var(--white);
  border-radius: 16px; /* 16px border-radius */
  padding: 24px; /* 24px padding */
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  color: var(--subtext);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.modal-close:hover {
  color: var(--body-text);
}

.modal-headline {
  font-size: 22px;
  font-weight: 700;
  color: var(--deep-navy);
  margin-bottom: 16px;
}

.modal-body {
  font-size: 16px;
  color: var(--body-text);
  margin-bottom: 24px;
  line-height: 1.5;
  font-weight: 600;
}

.modal-cta-primary {
  width: 100%;
  min-height: 52px; /* 52px height */
  padding: 14px 24px;
  background: var(--cta-cyan);
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 12px;
}

.modal-cta-primary:hover {
  background: #009BBD;
}

.modal-cta-secondary {
  background: none;
  border: none;
  color: var(--subtext);
  font-size: 16px;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px 16px;
  font-weight: 600;
}

.modal-cta-secondary:hover {
  color: var(--body-text);
}

/* ===== DESKTOP STYLES ===== */
@media (min-width: 768px) {
  .quiz-container {
    padding: 40px 24px;
  }

  .headline {
    font-size: 32px;
  }

  .question {
    font-size: 28px;
  }

  .interstitial-headline {
    font-size: 28px;
  }

  .option-btn {
    padding: 18px 24px;
    font-size: 19px;
  }

  .peptide-card {
    padding: 20px;
  }

  .peptide-name {
    font-size: 20px;
  }

  .peptide-benefit {
    font-size: 17px;
  }

  .circle-icon {
    width: 60px;
    height: 60px;
    font-size: 36px;
  }

  .circle-name {
    font-size: 12px;
  }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: high) {
  .option-btn {
    border-width: 3px;
  }

  .option-btn.selected {
    border-width: 4px;
  }
}

/* Focus visible for keyboard navigation */
.option-btn:focus-visible,
.continue-btn:focus-visible,
.cta-btn:focus-visible {
  outline: 3px solid var(--deep-navy);
  outline-offset: 2px;
}