:root {
  --color-bg: #f8f9fa;
  /* Clean White */
  --color-text: #212529;
  /* Dark Text */
  --color-text-muted: #6c757d;
  --color-primary: #d90429;
  /* Strong Red */
  --color-primary-dark: #ef233c;
  --color-surface: #ffffff;
  --glass-bg: rgba(255, 255, 255, 0.9);
  /* Solid Whiteish Glass */
  --glass-border: rgba(0, 0, 0, 0.08);
  /* Darker border for contrast */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
  /* Soft Shadow */
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Split Layout */
/* Clean Layout */
.quiz-header-nav {
  position: relative;
  z-index: 10;
  background: white;
  /* Header needs background in light mode */
  box-shadow: var(--shadow-sm);
}


/* Interface Container */
.quiz-interface {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  min-height: calc(100vh - 80px);
  /* Adjust for header height */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Start from top, giving space */
  padding-top: 40px;
}

.quiz-step {
  width: 100%;
  max-width: 500px;
  background: white;
  border: 1px solid var(--glass-border);
  padding: 40px;
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  /* Removed simple glass blur, using clear card look */
}

.step-indicator {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary);
  font-weight: 700;
  display: block;
  margin-bottom: 15px;
}

.quiz-header h2 {
  font-family: var(--font-heading);
  font-size: 2rem;
  margin-bottom: 30px;
  color: #212529;
  /* Force Dark */
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.quiz-btn {
  background: white;
  border: 1px solid var(--glass-border);
  padding: 20px;
  border-radius: 12px;
  color: #212529 !important;
  /* Force Dark Text */
  font-weight: 600;
  font-size: 1.1rem;
  font-family: var(--font-heading);
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
}

.quiz-btn:hover {
  border-color: var(--color-primary);
  background: rgba(217, 4, 41, 0.05);
  /* Red tint */
  transform: translateX(5px);
}

.quiz-btn::after {
  content: '\f054';
  /* Arrow right fontawesome */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.quiz-btn:hover::after {
  opacity: 1;
  color: var(--color-primary);
}

/* Responsive */
/* Responsive */
@media (max-width: 600px) {
  .quiz-interface {
    padding: 15px;
    padding-top: 10px;
    min-height: auto;
  }

  .quiz-step {
    padding: 20px 15px;
    margin-bottom: 20px;
  }

  .quiz-header h2 {
    font-size: 1.5rem;
  }

  .age-grid {
    gap: 10px;
  }

  .age-card img {
    aspect-ratio: 4/3;
  }

  .age-card span {
    padding: 10px;
    font-size: 0.95rem;
  }
}

/* --- HERO COMPOSITION --- */
.hero-composition {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* Below content, above overlay */
}

.hero-bg-blur {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(4px) brightness(1);
  /* Brighter for white theme */
  opacity: 0.2;
  /* Subtle background */
  transform: scale(1.1);
  /* Prevent blur edges */
}

.hero-product-fg {
  position: absolute;
  bottom: -50px;
  right: 20px;
  /* Adjust based on look */
  width: 280px;
  /* Adjust size */
  max-height: 80vh;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
  /* Softer shadow */
  z-index: 2;
  /* Optional: Animation */
  animation: floatProduct 6s ease-in-out infinite;
}

@keyframes floatProduct {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

@media (max-width: 900px) {
  .hero-product-fg {
    width: 200px;
    right: 50%;
    /* Start centering logic */
    transform: translateX(50%);
    /* Actually, right: 50% puts right edge at center. Need correction */
    /* Let's fix mobile centering */
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: -30px;
    animation: none;
    /* Simplify on mobile */
  }
}

/* --- PROGRESS BAR (New) --- */
.progress-container {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  height: 10px;
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #d90429, #ef233c);
  width: 4%;
  /* Start small */
  border-radius: 10px;
  transition: width 0.4s ease;
  box-shadow: 0 0 10px rgba(217, 4, 41, 0.3);
}

.quiz-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 25px;
  color: #2b2d42;
  line-height: 1.3;
}

/* --- RESULT SCREEN --- */
.result-list {
  list-style: none;
  margin-bottom: 30px;
}

.result-list li {
  font-size: 1.1rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  color: var(--color-text);
  /* Dark text */
}

.result-list li i {
  color: var(--color-primary);
  /* RED */
  margin-right: 12px;
  font-size: 1.2rem;
}

.result-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.btn-result {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  width: 100%;
}

.btn-result.primary {
  background-color: var(--color-primary);
  /* RED */
  color: white;
  border: none;
}

.btn-result.primary:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(217, 4, 41, 0.4);
}

.btn-result.outline {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-result.outline:hover {
  background: rgba(217, 4, 41, 0.05);
}

/* --- HOW IT WORKS SCREEN --- */
.steps-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.step-card {
  text-align: left;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: white;
  box-shadow: var(--shadow-sm);
}

.step-card h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  font-weight: 700;
  color: #212529;
  /* Force Dark */
  /* Dark */
}

.step-card p {
  font-size: 0.95rem;
  color: #000000;
  /* Darker grey */
  line-height: 1.4;
}

/* --- CONSULTATION STEPS --- */
.age-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  max-width: 800px;
  margin: 0 auto;
}

.age-card {
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  padding: 0;
  border: 1px solid var(--glass-border);
  background: white;
  box-shadow: var(--shadow-sm);
}

.age-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.age-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.age-card span {
  display: block;
  padding: 15px;
  background: white;
  color: var(--color-text);
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 1.1rem;
}

/* Dark mode adjustment removed */

.age-card:hover span {
  background: var(--color-primary);
  color: white;
  /* Hover effect */
}

@media (min-width: 768px) {
  .age-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- WEIGHT SELECTION RULER --- */
.unit-toggle-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.unit-toggle {
  background: #eee;
  /* Light gray */
  border-radius: 50px;
  padding: 4px;
  display: flex;
  gap: 5px;
}

.unit-btn {
  background: transparent;
  border: none;
  padding: 8px 20px;
  border-radius: 40px;
  color: #888;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.unit-btn.active {
  background: white;
  color: var(--color-primary);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.weight-display-large {
  font-size: 4rem;
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 20px;
  color: var(--color-text);
}

#weight-unit {
  font-size: 1.5rem;
  margin-left: 5px;
  color: #888;
}

/* Ruler Scroll Component */
.ruler-container-wrapper {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.ruler-pointer-triangle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 60px;
  /* Line height */
  background: var(--color-primary);
  /* Red pointer */
  z-index: 10;
  border-radius: 2px;
}

.ruler-pointer-triangle::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--color-primary);
}

.ruler-scroll-area {
  display: flex;
  overflow-x: auto;
  height: 100%;
  align-items: center;
  /* Center ticks vertically */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
  cursor: grab;
}

.ruler-scroll-area::-webkit-scrollbar {
  display: none;
}

.ruler-spacer {
  min-width: 50%;
  /* Spacer to allow scroll to start at 0 at center */
  flex-shrink: 0;
}

.ruler-scale {
  display: flex;
  align-items: flex-start;
  /* Align ticks to top or center */
  height: 60px;
  /* Ticks container height */
  padding-top: 10px;
}

.tick {
  width: 1px;
  /* Tick width */
  background: #ccc;
  /* Lighter tick */
  margin-right: 9px;
  /* Tick spacing - total 10px per unit (1px line + 9px space) */
  height: 20px;
  flex-shrink: 0;
  position: relative;
}

.tick.major {
  height: 40px;
  background: #999;
  /* Major Tick Darker */
  width: 2px;
  margin-right: 8px;
  /* Adjust for width diff */
}

.tick-label {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: #666;
  font-family: var(--font-body);
}


/* --- HEALTH QUESTIONNAIRE --- */
.health-btn {
  background: white;
  border: 1px solid var(--glass-border);
  padding: 15px 20px;
  border-radius: 12px;
  color: #212529 !important;
  /* Force Dark */
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1rem;
  box-shadow: var(--shadow-sm);
}

.health-btn:hover {
  background: #f8f8f8;
  border-color: #ccc;
}

.health-btn.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(217, 4, 41, 0.3);
}

/* Light theme override if desired, but sticking to dark default */
/* --- CONDITIONS CHECKLIST --- */
.health-checklist-item {
  background: white;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  margin-bottom: 5px;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.health-checklist-item:hover {
  background: #f8f8f8;
}

.health-checklist-item.selected {
  border-color: var(--color-primary);
  background: rgba(217, 4, 41, 0.05);
}

.checklist-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #ccc;
  position: relative;
  transition: all 0.2s ease;
}

.health-checklist-item.selected .checklist-circle {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Optional Checkmark inside circle */
.health-checklist-item.selected .checklist-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;

}

/* --- RESULT / SALES PAGE --- */
#result-screen,
#sales-page {
  padding-left: 15px;
  padding-right: 15px;
}

.offer-card {
  background: white;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  box-shadow: var(--shadow-sm);
}

.offer-card:hover {
  background: #f8f8f8;
}

.offer-card.selected {
  border: 2px solid var(--color-primary);
  background: rgba(217, 4, 41, 0.03);
  box-shadow: 0 0 15px rgba(217, 4, 41, 0.15);
}

.offer-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
  flex-shrink: 0;
  position: relative;
}

.offer-card.selected .offer-radio {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.offer-card.selected .offer-radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
}

.offer-details {
  flex-grow: 1;
}

.offer-details h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-text);
  /* Dark text */
}

.offer-tags {
  display: flex;
  gap: 5px;
  margin-top: 5px;
}

.tag-frete,
.tag-bonus {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
}

.tag-frete {
  background: #2ec4b6;
  /* Keep green for free shipping */
  color: white;
}

.tag-bonus {
  background: #fb8500;
  color: white;
}

.offer-price {
  text-align: right;
  min-width: 80px;
}

.old-price {
  font-size: 0.7rem;
  text-decoration: line-through;
  color: #888;
  display: block;
}

.current-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-primary);
  /* RED */
}

.best-seller-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  /* RED */
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* FAQ Details */
.custom-details {
  background: white;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.custom-details summary {
  padding: 15px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  /* Hide default triangle */
  position: relative;
  color: var(--color-text);
}

.custom-details summary::-webkit-details-marker {
  display: none;
}

.custom-details summary::after {
  content: '+';
  position: absolute;
  right: 15px;
  font-weight: bold;
  color: var(--color-primary);
}

.custom-details[open] summary::after {
  content: '-';
}

.custom-details p {
  padding: 0 15px 15px 15px;
  margin: 0;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.4;
}

/* Pulse Animation for CTA */
.pulse-btn {
  animation: pulse-shadow 2s infinite;
}

@keyframes pulse-shadow {
  0% {
    box-shadow: 0 0 0 0 rgba(217, 4, 41, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(217, 4, 41, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(217, 4, 41, 0);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Split Layout */
/* Clean Layout */
.quiz-header-nav {
  position: relative;
  z-index: 10;
}


/* Interface Container */
.quiz-interface {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  min-height: calc(100vh - 80px);
  /* Adjust for header height */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Start from top, giving space */
  padding-top: 40px;
}

.quiz-step {
  width: 100%;
  max-width: 500px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  padding: 40px;
  border-radius: 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
}

.step-indicator {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary);
  font-weight: 700;
  display: block;
  margin-bottom: 15px;
}

.quiz-header h2 {
  font-family: var(--font-heading);
  font-size: 2rem;
  margin-bottom: 30px;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.quiz-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  padding: 20px;
  border-radius: 12px;
  color: #212529 !important;
  /* Force Dark */
  font-size: 1.1rem;
  font-family: var(--font-heading);
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quiz-btn:hover {
  border-color: var(--color-primary);
  background: rgba(255, 42, 42, 0.05);
  transform: translateX(5px);
}

.quiz-btn::after {
  content: '\f054';
  /* Arrow right fontawesome */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.quiz-btn:hover::after {
  opacity: 1;
  color: var(--color-primary);
}

/* Responsive */
/* Responsive */
@media (max-width: 600px) {
  .quiz-interface {
    padding: 15px;
    padding-top: 10px;
    min-height: auto;
  }

  .quiz-step {
    padding: 20px 15px;
    margin-bottom: 20px;
  }

  .quiz-header h2 {
    font-size: 1.5rem;
  }

  .age-grid {
    gap: 10px;
  }

  .age-card img {
    aspect-ratio: 4/3;
  }

  .age-card span {
    padding: 10px;
    font-size: 0.95rem;
  }
}

/* --- HERO COMPOSITION --- */
.hero-composition {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* Below content, above overlay */
}

.hero-bg-blur {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(4px) brightness(0.6);
  transform: scale(1.1);
  /* Prevent blur edges */
}

.hero-product-fg {
  position: absolute;
  bottom: -50px;
  right: 20px;
  /* Adjust based on look */
  width: 280px;
  /* Adjust size */
  max-height: 80vh;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8));
  z-index: 2;
  /* Optional: Animation */
  animation: floatProduct 6s ease-in-out infinite;
}

@keyframes floatProduct {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

@media (max-width: 900px) {
  .hero-product-fg {
    width: 200px;
    right: 50%;
    /* Start centering logic */
    transform: translateX(50%);
    /* Actually, right: 50% puts right edge at center. Need correction */
    /* Let's fix mobile centering */
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: -30px;
    animation: none;
    /* Simplify on mobile */
  }
}

/* --- QUIZ PROGRESS PILL --- */
.progress-pill {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  display: inline-flex;
  padding: 4px;
  margin-bottom: 25px;
  position: relative;
}

.step-circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  transition: all 0.3s ease;
  margin: 0 5px;
}

.step-circle.active {
  background-color: #d90429;
  /* Using the Blue from the image for now as requested, or stick to RED? Users image had blue. I'll try to match the image specific vibe for the quiz, or use Primary Red? User said 'os textos'. I'll use a variation of Cyan to match reference or Red. Let's use Red for brand consistency but make it 'pill' style. */
  /* Actually, let's use the brand Primary Red to stay 'Dark Science'. */
  background-color: var(--color-primary);
  color: white;
  box-shadow: 0 0 15px var(--color-primary-glow);
}

.step-circle.completed {
  color: white;
  background: rgba(255, 255, 255, 0.2);
}

.quiz-header {
  text-align: center;
  /* Center the pill and title */
}

/* --- RESULT SCREEN --- */
.result-list {
  list-style: none;
  margin-bottom: 30px;
}

.result-list li {
  font-size: 1.1rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  color: #212529;
  /* Dark text */
}

.result-list li i {
  color: #d90429;
  /* Cyan Blue from image */
  margin-right: 12px;
  font-size: 1.2rem;
}

.result-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.btn-result {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  width: 100%;
}

.btn-result.primary {
  background-color: #d90429;
  /* Cyan Blue */
  color: white;
  border: none;
}

.btn-result.primary:hover {
  background-color: #0096c7;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(217, 4, 41, 0.3);
}

.btn-result.outline {
  background: transparent;
  border: 2px solid #d90429;
  color: #d90429;
}

.btn-result.outline:hover {
  background: rgba(217, 4, 41, 0.1);
}

/* --- HOW IT WORKS SCREEN --- */
.steps-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.step-card {
  text-align: left;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
}

.step-card h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  font-weight: 700;
}

.step-card p {
  font-size: 0.95rem;
  color: #000000;
  line-height: 1.4;
}

/* --- CONSULTATION STEPS --- */
.age-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  max-width: 800px;
  margin: 0 auto;
}

.age-card {
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  padding: 0;
  border: 1px solid transparent;
}

.age-card:hover {
  border-color: #d90429;
  transform: translateY(-5px);
}

.age-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.age-card span {
  display: block;
  padding: 15px;
  background: white;
  /* White background as in reference? */
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  /* Dark text */
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 1.1rem;
}

/* Dark mode adjustment for age card if needed, but reference had white cards. 
   Our theme is dark. I will keep white text on black glass to match or 
   white background for the label part to look like 'ticket' style? 
   Let's stick to glass but maybe white label area. */
.age-card span {
  background: var(--glass-bg);
  color: #212529;
  /* Dark text for Age Card */
  border-top: 1px solid var(--glass-border);
}

.age-card:hover span {
  background: var(--color-primary);
  color: white;
  /* Hover effect */
}

@media (min-width: 768px) {
  .age-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- WEIGHT SELECTION RULER --- */
.unit-toggle-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.unit-toggle {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 4px;
  display: flex;
  gap: 5px;
}

.unit-btn {
  background: transparent;
  border: none;
  padding: 8px 20px;
  border-radius: 40px;
  color: #aaa;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.unit-btn.active {
  background: #d90429;
  /* Cyan Blue */
  color: white;
  box-shadow: 0 2px 10px rgba(217, 4, 41, 0.3);
}

.weight-display-large {
  font-size: 4rem;
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 20px;
}

#weight-unit {
  font-size: 1.5rem;
  margin-left: 5px;
  color: #aaa;
}

/* Ruler Scroll Component */
.ruler-container-wrapper {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.ruler-pointer-triangle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 60px;
  /* Line height */
  background: #d90429;
  z-index: 10;
  border-radius: 2px;
}

.ruler-pointer-triangle::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #d90429;
}

.ruler-scroll-area {
  display: flex;
  overflow-x: auto;
  height: 100%;
  align-items: center;
  /* Center ticks vertically */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
  cursor: grab;
}

.ruler-scroll-area::-webkit-scrollbar {
  display: none;
}

.ruler-spacer {
  min-width: 50%;
  /* Spacer to allow scroll to start at 0 at center */
  flex-shrink: 0;
}

.ruler-scale {
  display: flex;
  align-items: flex-start;
  /* Align ticks to top or center */
  height: 60px;
  /* Ticks container height */
  padding-top: 10px;
}

.tick {
  width: 1px;
  /* Tick width */
  background: #555;
  margin-right: 9px;
  /* Tick spacing - total 10px per unit (1px line + 9px space) */
  height: 20px;
  flex-shrink: 0;
  position: relative;
}

.tick.major {
  height: 40px;
  background: #ccc;
  width: 2px;
  margin-right: 8px;
  /* Adjust for width diff */
}

.tick-label {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: #888;
  font-family: var(--font-body);
}


/* --- HEALTH QUESTIONNAIRE --- */
.health-btn {
  background: rgba(255, 255, 255, 0.05);
  /* Glass dark */
  border: 1px solid var(--glass-border);
  padding: 15px 20px;
  border-radius: 12px;
  color: #212529;
  /* Dark text */
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1rem;
}

.health-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.health-btn.active {
  background: #d90429;
  /* Cyan Blue */
  color: white;
  border-color: #d90429;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(217, 4, 41, 0.3);
}

/* Light theme override if desired, but sticking to dark default */
/* --- CONDITIONS CHECKLIST --- */
.health-checklist-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  margin-bottom: 5px;
}

.health-checklist-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.health-checklist-item.selected {
  border-color: #d90429;
  background: rgba(217, 4, 41, 0.1);
}

.checklist-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #666;
  position: relative;
  transition: all 0.2s ease;
}

.health-checklist-item.selected .checklist-circle {
  background-color: #d90429;
  border-color: #d90429;
}

/* Optional Checkmark inside circle */
.health-checklist-item.selected .checklist-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;

}

/* --- RESULT / SALES PAGE --- */
#result-screen,
#sales-page {
  padding-left: 15px;
  padding-right: 15px;
}

.offer-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.offer-card:hover {
  background: rgba(255, 255, 255, 0.08);
}

.offer-card.selected {
  border: 2px solid #d90429;
  background: rgba(217, 4, 41, 0.05);
  box-shadow: 0 0 15px rgba(217, 4, 41, 0.15);
}

.offer-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #888;
  flex-shrink: 0;
  position: relative;
}

.offer-card.selected .offer-radio {
  border-color: #d90429;
  background: #d90429;
}

.offer-card.selected .offer-radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
}

.offer-details {
  flex-grow: 1;
}

.offer-details h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #212529;
  /* Dark text */
}

.offer-tags {
  display: flex;
  gap: 5px;
  margin-top: 5px;
}

.tag-frete,
.tag-bonus {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
}

.tag-frete {
  background: #2ec4b6;
  color: white;
}

.tag-bonus {
  background: #fb8500;
  color: white;
}

.offer-price {
  text-align: right;
  min-width: 80px;
}

.old-price {
  font-size: 0.7rem;
  text-decoration: line-through;
  color: #888;
  display: block;
}

.current-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: #d90429;
}

.best-seller-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #d90429;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* FAQ Details */
.custom-details {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

.custom-details summary {
  padding: 15px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  /* Hide default triangle */
  position: relative;
}

.custom-details summary::-webkit-details-marker {
  display: none;
}

.custom-details summary::after {
  content: '+';
  position: absolute;
  right: 15px;
  font-weight: bold;
  color: #d90429;
}

.custom-details[open] summary::after {
  content: '-';
}

.custom-details p {
  padding: 0 15px 15px 15px;
  margin: 0;
  font-size: 0.9rem;
  color: #666;
  /* Darker gray */
  line-height: 1.4;
}

/* Pulse Animation for CTA */
.pulse-btn {
  animation: pulse-shadow 2s infinite;
}

@keyframes pulse-shadow {
  0% {
    box-shadow: 0 0 0 0 rgba(217, 4, 41, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(217, 4, 41, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(217, 4, 41, 0);
  }
}