/*
 * Weight-Loss treatment color theme
 * Gradient: #f69081 → #facba1 (warm peach-coral)
 *
 * Layered atmospheric washes, warm-tinted surfaces,
 * and accent overrides. Creates a cohesive warm identity
 * that flows through every section of the page.
 */

/* ── CSS custom properties ─────────────────────────────── */

body {
  --tx-from: #f69081;
  --tx-to: #facba1;
  --tx-mid: #f8a991;
  --tx-light: #fef5f1;
  --tx-surface: #fdf0ea;
  --tx-glow: rgba(246, 144, 129, 0.18);
  --tx-shadow: rgba(246, 144, 129, 0.12);
}

/* ── Hero: layered warm atmosphere ─────────────────────── */

.sh-split-hero {
  background:
    radial-gradient(
      ellipse 55% 70% at 72% 45%,
      rgba(250, 203, 161, 0.30) 0%,
      rgba(246, 144, 129, 0.12) 45%,
      transparent 80%
    ),
    radial-gradient(
      ellipse 90% 60% at 40% 80%,
      rgba(250, 203, 161, 0.12) 0%,
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #fff 0%,
      #fefaf7 40%,
      #fdf5f0 100%
    );
}

.sh-split-hero__headline-sub {
  color: var(--tx-from);
}

.sh-split-hero__cta:hover {
  background: linear-gradient(135deg, var(--tx-from), var(--tx-to));
}

.sh-split-hero__badge-check {
  color: var(--tx-from);
}

.sh-split-hero__media {
  box-shadow:
    0 8px 40px rgba(246, 144, 129, 0.12),
    0 2px 12px rgba(246, 144, 129, 0.06);
}

/* ── Medication cards section: white bg, warm cards ─────── */

.sh-med-section {
  background: #fff;
}

/* Cards: warm-tinted surface + warm shadow */
.sh-med-card {
  background: var(--tx-light);
  border: 1px solid rgba(246, 144, 129, 0.12);
  box-shadow:
    0 2px 16px rgba(246, 144, 129, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.02);
}

.sh-med-card:hover {
  box-shadow:
    0 12px 40px rgba(246, 144, 129, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Back face inherits warm tint */
.sh-med-card__back {
  background: var(--tx-light);
}

/* Price → warm color */
.sh-med-card__price {
  color: var(--tx-from);
}

.sh-med-card__back-price {
  color: var(--tx-from);
}

/* Badge pills → warm */
.sh-med-card__badge {
  background: rgba(255, 255, 255, 0.95);
  color: var(--tx-from);
  font-weight: 700;
}

/* CTA → warm on hover */
.sh-med-card__cta:hover {
  background: var(--tx-from);
}

/* Check marks → warm */
.sh-med-card__point svg {
  color: var(--tx-from);
}

/* ── Timeline: WHITE background, warm accents only ─────── */

.sh-timeline-dot--active {
  background: linear-gradient(135deg, var(--tx-from), var(--tx-to));
  box-shadow: 0 4px 16px var(--tx-shadow);
}

.sh-timeline-segment::after {
  background: linear-gradient(90deg, var(--tx-from), var(--tx-mid), var(--tx-to));
}

.sh-timeline-container {
  background: #fff;
}

.sh-timeline-cta:hover {
  background-color: var(--tx-from);
  border-color: var(--tx-from);
}

/* ── MeetDoctor: WHITE background, warm accents only ───── */

.sh-meet__inner {
  background: #fff;
}

.sh-meet__image-accent {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(246, 144, 129, 0.10) 100%
  );
}

.sh-meet__name {
  color: var(--tx-from) !important;
}

.sh-meet__label {
  color: var(--tx-from);
}

.sh-meet__stat-value {
  color: var(--tx-from);
}

.sh-meet__cta:hover {
  background-color: var(--tx-from);
  border-color: var(--tx-from);
}

/* ── FAQ: warm gradient field ──────────────────────────── */

.sh-faq {
  background:
    radial-gradient(
      ellipse 70% 50% at 30% 60%,
      rgba(250, 203, 161, 0.14) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 40% 40% at 85% 20%,
      rgba(246, 144, 129, 0.08) 0%,
      transparent 70%
    ),
    #fffbf8;
}

.sh-faq-item[open] {
  border-color: rgba(246, 144, 129, 0.35);
}

.sh-faq-cta:hover {
  background-color: var(--tx-from);
  border-color: var(--tx-from);
}

/* ── OtherTreatments: warm surface ─────────────────────── */

.sh-treatments {
  background:
    radial-gradient(
      ellipse 50% 60% at 70% 30%,
      rgba(250, 203, 161, 0.14) 0%,
      transparent 70%
    ),
    var(--tx-light);
}

.sh-treatments__card-cta {
  color: var(--tx-from);
}

.sh-treatments__card:hover {
  box-shadow:
    0 12px 40px rgba(246, 144, 129, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.04);
}

/* ── Testimonials: warm atmosphere ─────────────────────── */

.sh-testimonials {
  background:
    radial-gradient(
      ellipse 60% 70% at 55% 45%,
      rgba(250, 203, 161, 0.12) 0%,
      transparent 70%
    ),
    #fffcf9;
}

.sh-testimonials__stars svg {
  fill: var(--tx-from);
}

.sh-testimonials__category {
  color: var(--tx-from);
  background: rgba(246, 144, 129, 0.1);
}

.sh-testimonials__dot--active {
  background: var(--tx-from);
}

.sh-testimonials__avatar {
  background: linear-gradient(135deg, var(--tx-from), var(--tx-to));
}

.sh-testimonials__card {
  background: var(--tx-light);
}

.sh-testimonials__card:hover {
  box-shadow: 0 8px 32px rgba(246, 144, 129, 0.10);
}

/* ── Decorative gradient dividers between sections ─────── */

.sh-split-hero::after,
.sh-med-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, 45%);
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--tx-from),
    var(--tx-to),
    transparent
  );
  opacity: 0.35;
  border-radius: 1px;
}

.sh-med-section {
  position: relative;
}

/* ── Responsive: tone down on mobile ───────────────────── */

@media (max-width: 809px) {
  .sh-split-hero {
    background:
      radial-gradient(
        ellipse 80% 45% at 50% 15%,
        rgba(250, 203, 161, 0.25) 0%,
        transparent 70%
      ),
      linear-gradient(
        180deg,
        #fff 0%,
        #fefaf7 50%,
        #fdf5f0 100%
      );
  }

  .sh-split-hero::after,
  .sh-med-section::after {
    width: 60%;
  }
}