/*
 * CardioClear bottle-matched visual theme.
 * Intentionally scoped to the CPDA landing page, first upsell, and thank-you page.
 */
:root {
  --cc-navy: #4b586d;
  --cc-navy-dark: #29364b;
  --cc-navy-soft: #697589;
  --cc-red: #a6403e;
  --cc-red-dark: #7d2928;
  --cc-red-soft: #d69b97;
  --cc-paper: #f5f3f1;
  --cc-white: #ffffff;
  --cc-ink: #252d39;
  --cc-muted: #6b7280;
  --cc-border: #ddd5d1;
  --cc-shadow: 0 18px 50px rgba(41, 54, 75, 0.14);
}

/* Landing page */
body.CardioClear:is(#home, #dtc) {
  --primary-color: var(--cc-navy);
  --primary-color-light: #40536c;
  --primary-color-dark: var(--cc-navy-dark);
  --secondary-color: var(--cc-red);
  --secondary-color-light: #c75a55;
  --secondary-color-dark: var(--cc-red-dark);
  --contrast-color: var(--cc-red);
  --third-color: var(--cc-red-soft);
  --fourth-color: #ead1ce;
  --text-gradient: #efc0bc;
  background: var(--cc-paper);
  color: var(--cc-ink);
}

body.CardioClear:is(#home, #dtc) .steps {
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--cc-border);
  box-shadow: 0 5px 22px rgba(39, 56, 78, 0.06);
}

body.CardioClear:is(#home, #dtc) .steps .step {
  background: #e9e4e1;
  color: var(--cc-navy);
}

body.CardioClear:is(#home, #dtc) .steps .step.current {
  background: linear-gradient(135deg, var(--cc-red), var(--cc-red-dark));
  color: var(--cc-white);
  box-shadow: 0 6px 16px rgba(166, 56, 52, 0.25);
}

body.CardioClear:is(#home, #dtc) #headline {
  padding: 38px 0 52px;
  background:
    radial-gradient(circle at 82% 12%, rgba(219, 166, 162, 0.25), transparent 28%),
    linear-gradient(135deg, var(--cc-navy-dark), var(--cc-navy) 62%, #3e5067);
}

body.CardioClear:is(#home, #dtc) #headline::before {
  background: radial-gradient(circle, rgba(166, 56, 52, 0.22), transparent 70%);
}

body.CardioClear:is(#home, #dtc) #headline .title {
  max-width: none;
  margin-right: auto;
  margin-left: auto;
  font-size: clamp(30px, 3.2vw, 56px);
  line-height: 1.08;
  white-space: nowrap;
}

body.CardioClear:is(#home, #dtc) #headline .title .span-title {
  color: #efb4af;
}

body.CardioClear:is(#home, #dtc) .rating {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

body.CardioClear:is(#home, #dtc) .products {
  padding: 46px 0;
}

body.CardioClear:is(#home, #dtc) .products .item {
  border: 1px solid var(--cc-border);
  border-radius: 18px;
  box-shadow: var(--cc-shadow);
}

body.CardioClear:is(#home, #dtc) .products .card-header {
  background: linear-gradient(135deg, #bd514c, var(--cc-red-dark));
}

body.CardioClear:is(#home, #dtc) .products .item.promo {
  border: 3px solid var(--cc-red);
  box-shadow: 0 22px 58px rgba(166, 56, 52, 0.2);
}

body.CardioClear:is(#home, #dtc) .products .item.promo .item-header {
  background: #ffad14 !important;
  color: #000;
}

body.CardioClear:is(#home, #dtc) .products .item .item-info .price b,
body.CardioClear:is(#home, #dtc) .products .item .item-info .price sup {
  color: var(--cc-navy);
}

body.CardioClear:is(#home, #dtc) .products .item .item-buy .button,
body.CardioClear:is(#home, #dtc) .products .item.promo .item-buy .button,
body.CardioClear:is(#home, #dtc) .cta-promo .button {
  background: linear-gradient(180deg, #bd514c, var(--cc-red-dark)) !important;
  color: var(--cc-white) !important;
  box-shadow: 0 8px 20px rgba(166, 56, 52, 0.28);
}

body.CardioClear:is(#home, #dtc) .products .item .item-buy .button:hover,
body.CardioClear:is(#home, #dtc) .products .item.promo .item-buy .button:hover {
  background: linear-gradient(180deg, #c85d57, #8b2b28) !important;
  transform: translateY(-2px);
}

body.CardioClear:is(#home, #dtc) .products .item .item-info .savings > div:first-child {
  background: #f1dfdc;
  color: var(--cc-red-dark);
}

body.CardioClear:is(#home, #dtc) .products .item.promo .item-info .savings > div:nth-child(2) {
  background: var(--cc-navy);
}

body.CardioClear:is(#home, #dtc) #guarantee,
body.CardioClear:is(#home, #dtc) .benefits-section {
  background: var(--cc-white) !important;
}

body.CardioClear:is(#home, #dtc) footer {
  background: linear-gradient(135deg, var(--cc-navy-dark), var(--cc-navy));
  border-top: 5px solid var(--cc-red);
}

/* First upsell */
body#upsell1 {
  --primary-color: var(--cc-navy);
  --primary-color-light: var(--cc-navy-soft);
  --primary-color-dark: var(--cc-navy-dark);
  --secondary-color: var(--cc-red);
  --secondary-color-light: #bf5b57;
  --secondary-color-dark: var(--cc-red-dark);
  --contrast-color: var(--cc-red);
  --third-color: var(--cc-red-soft);
  --fourth-color: #ead1ce;
  --jl-red: var(--cc-red);
  --jl-red-dark: var(--cc-navy-dark);
  --jl-cream: #f8efec;
  --jl-pink: var(--cc-paper);
  --jl-pink-soft: #faf7f5;
  --jl-rose: var(--cc-red);
  --jl-gold: #efc7a2;
  --jl-green: var(--cc-red);
  --jl-green-dark: var(--cc-red-dark);
  background:
    radial-gradient(circle at 50% -10%, rgba(166, 56, 52, 0.12), transparent 34%),
    var(--cc-paper);
  color: var(--cc-ink);
}

body#upsell1 #steps {
  background: linear-gradient(135deg, var(--cc-navy-dark), var(--cc-navy));
  border-bottom: 4px solid var(--cc-red);
}

body#upsell1 #steps .step.current {
  background: var(--cc-red);
  color: var(--cc-white);
}

body#upsell1 #steps .steps-headline h1,
body#upsell1 #steps .steps-headline h1 span {
  color: var(--cc-white) !important;
}

body#upsell1 .quiz-q,
body#upsell1 .weight-card {
  border-color: var(--cc-border);
  box-shadow: 0 8px 24px rgba(39, 56, 78, 0.08);
}

body#upsell1 .opt {
  border-color: var(--cc-border);
  background: #fcfaf9;
}

body#upsell1 .opt.selected {
  border-color: var(--cc-red);
  background: #f6e9e7;
  box-shadow: 0 0 0 2px rgba(166, 56, 52, 0.12);
}

body#upsell1 .opt .dot {
  border-color: var(--cc-red-soft);
}

body#upsell1 .weight-card::after {
  background: radial-gradient(circle, rgba(166, 64, 62, 0.15), transparent 70%);
}

body#upsell1 .unit-toggle,
body#upsell1 .quiz-progress,
body#upsell1 .load-bar {
  background: #eadfdb;
}

body#upsell1 .unit-toggle button {
  color: var(--cc-navy-soft);
}

body#upsell1 input[type="range"].weight-range::-webkit-slider-runnable-track {
  background: repeating-linear-gradient(
    to right,
    rgba(166, 64, 62, 0.42) 0 1px,
    transparent 1px 11px
  );
}

body#upsell1 input[type="range"].weight-range::-moz-range-track {
  background: repeating-linear-gradient(
    to right,
    rgba(166, 64, 62, 0.42) 0 1px,
    transparent 1px 11px
  );
}

body#upsell1 input[type="range"].weight-range::-webkit-slider-thumb,
body#upsell1 input[type="range"].weight-range::-moz-range-thumb {
  box-shadow: 0 0 8px rgba(166, 64, 62, 0.7);
}

body#upsell1 .ruler-scale,
body#upsell1 .ruler-hint {
  color: var(--cc-navy-soft);
}

body#upsell1 .quiz-progress > div,
body#upsell1 .load-bar > div,
body#upsell1 .load-item .check {
  background: linear-gradient(90deg, var(--cc-red-soft), var(--cc-red-dark));
}

body#upsell1 .load-item {
  background: #f2e9e6;
}

body#upsell1 .submit-answers,
body#upsell1 .step-next,
body#upsell1 .cta-green {
  background: linear-gradient(180deg, #bd514c, var(--cc-red-dark));
  box-shadow: 0 8px 20px rgba(166, 56, 52, 0.3);
}

body#upsell1 .step-next:disabled,
body#upsell1 .submit-answers:disabled {
  background: #b7afb0;
}

body#upsell1 .offer-card {
  background: linear-gradient(145deg, var(--cc-navy-dark), var(--cc-navy));
  border: 1px solid rgba(239, 180, 175, 0.28);
  box-shadow: 0 18px 42px rgba(23, 36, 54, 0.3);
}

body#upsell1 .offer-head {
  background: linear-gradient(180deg, #bd514c, var(--cc-red-dark));
}

body#upsell1 .offer-img img {
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.28));
}

body#upsell1 .offer-total s {
  color: var(--cc-red-soft);
}

body#upsell1 footer {
  background: linear-gradient(135deg, var(--cc-navy-dark), var(--cc-navy));
  border-top: 5px solid var(--cc-red);
}

/* Thank-you layout only. Colors and typography continue to come from main.css. */
body#thankyou {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body#thankyou .main-content {
  min-height: calc(100vh - 150px);
  padding: 64px 0 !important;
  display: flex;
  align-items: center;
}

body#thankyou .main-content .container {
  width: 100%;
  max-width: 1320px;
}

body#thankyou .main-content .row {
  min-height: 620px;
}

body#thankyou .main-content .col-md-7 {
  padding-right: clamp(24px, 5vw, 80px);
}

body#thankyou .main-content img {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

body#thankyou footer {
  margin-top: auto;
}

@media (max-width: 767px) {
  body.CardioClear:is(#home, #dtc) #headline {
    padding: 30px 0 38px;
  }

  body.CardioClear:is(#home, #dtc) #headline .title {
    font-size: 34px;
    white-space: normal;
  }

  body#thankyou .main-content {
    min-height: auto;
    padding: 40px 0 !important;
  }

  body#thankyou .main-content .row {
    min-height: 0;
  }

  body#thankyou .main-content .col-md-7 {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
  }

  body#thankyou .main-content img {
    max-width: 280px;
    margin-top: 32px;
  }
}