/* ============================================================================
   AZ FAST BATH — HOLIDAY SKIN
   Loaded by inc/holiday.php on /shower-specials/ only, and only inside the
   date window set there. Everything is scoped to body.azfb-holiday, so this
   sheet can be left on disk forever and does nothing out of season.

   The brand is already deep evergreen and gold, so almost nothing new is
   introduced: the season is carried by a cooler background, ribbon bars on the
   offer cards, and one holly accent. No red-and-green stripes, no snow
   graphics, no images — this page sells a $12,000 remodel and it has to still
   look like a company you would let into your house.
   ============================================================================ */

body.azfb-holiday {
  --azfb-holly:      #8c2f39;   /* deep cranberry — the one new hue */
  --azfb-holly-dark: #6e232b;
  --azfb-snow:       #f1f6f3;   /* cool white, replaces the warm white */
  --azfb-snow-deep:  #e4eee8;
}

/* ── Hero ─────────────────────────────────────────────────────────────────
   One extra layer on the existing overlay: a warm gold glow behind the
   headline so gold type lifts off the photo, over a slightly deeper green. */
body.azfb-holiday .azfb-hero__overlay {
  background:
    radial-gradient(90% 70% at 50% 18%, rgba(201,165,90,0.22) 0%, rgba(201,165,90,0) 62%),
    linear-gradient(180deg, rgba(26,60,43,0.52) 0%, rgba(14,38,27,0.84) 100%);
}

/* The eyebrow becomes a cranberry pill — the first bit of red on the page, and
   the thing that says "seasonal" before anyone reads a word. White on this red
   clears 7:1, so the badge is not just decoration. */
body.azfb-holiday .azfb-hero .azfb-eyebrow {
  display: inline-block;
  padding: 7px var(--azfb-sp-4);
  border: 1px solid var(--azfb-gold-light);
  border-radius: var(--azfb-radius-pill);
  background: var(--azfb-holly);
  color: #fff;
  margin-bottom: var(--azfb-sp-6);
  box-shadow: 0 4px 14px rgba(110,35,43,0.45);
}

/* ── The specials section background ──────────────────────────────────────
   Warm white -> cool white, with a very faint gold sparkle field. The dots
   are 1px at 7% alpha; they read as texture, not as decoration. */
body.azfb-holiday .azfb-specials-section.azfb-bg-soft {
  background-color: var(--azfb-snow);
  background-image:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(201,165,90,0.20) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 14%, rgba(201,165,90,0.16) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 61%, rgba(201,165,90,0.14) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 78%, rgba(201,165,90,0.18) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8%  86%, rgba(201,165,90,0.14) 50%, transparent 51%),
    linear-gradient(180deg, var(--azfb-white) 0%, var(--azfb-snow) 38%, var(--azfb-snow-deep) 100%);
  background-size: 340px 340px, 420px 420px, 380px 380px, 460px 460px, 300px 300px, 100% 100%;
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat;
}

/* ── The ribbon above the offer cards ─────────────────────────────────── */
.azfb-holiday-ribbon {
  max-width: 760px;
  margin: 0 auto var(--azfb-sp-10);
  padding: var(--azfb-sp-6) var(--azfb-sp-6) var(--azfb-sp-5);
  text-align: center;
  background: linear-gradient(180deg, var(--azfb-green) 0%, #14301f 100%);
  border: 1px solid rgba(221,195,137,0.40);
  border-radius: var(--azfb-radius-lg);
  box-shadow: var(--azfb-shadow-green);
  /* Gold hairline along the top edge, like a ribbon across a parcel. */
  background-clip: padding-box;
  position: relative;
  overflow: hidden;
}

/* Red-gold-red across the top edge, like a ribbon over a parcel. */
.azfb-holiday-ribbon::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--azfb-holly-dark) 0%, var(--azfb-holly) 22%, var(--azfb-gold) 42%,
    var(--azfb-gold-light) 50%, var(--azfb-gold) 58%, var(--azfb-holly) 78%,
    var(--azfb-holly-dark) 100%);
}

.azfb-holiday-ribbon__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--azfb-sp-2);
  margin: 0 0 var(--azfb-sp-3);
  font-family: var(--azfb-font-body);
  font-size: var(--azfb-fs-eyebrow);
  font-weight: var(--azfb-weight-bold);
  letter-spacing: var(--azfb-ls-eyebrow);
  text-transform: uppercase;
  color: var(--azfb-gold-light);
}

/* The parcel itself is red, its ribbon gold. */
.azfb-holiday-ribbon__badge .azfb-icon--gift { color: #d4535f; }

.azfb-holiday-ribbon__text {
  margin: 0 auto var(--azfb-sp-4);
  max-width: 56ch;
  font-size: var(--azfb-fs-lead);
  line-height: 1.55;
  color: var(--azfb-on-dark);
}

.azfb-holiday-ribbon__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  font-size: var(--azfb-fs-small);
  color: var(--azfb-on-dark-soft);
}

.azfb-holiday-ribbon__note .azfb-icon { color: var(--azfb-gold-light); flex: 0 0 auto; }

/* ── The offer cards become gift tags ─────────────────────────────────────
   A ribbon bar across the top of each card, and the kicker in evergreen
   instead of grey. The selected state is untouched in structure — only
   warmed — because that interaction was tested and works. */
body.azfb-holiday .azfb-offer {
  padding-top: calc(var(--azfb-sp-6) + 4px);
  border-color: var(--azfb-snow-deep);
}

/* Holly trio across the top of every card: cranberry, gold, evergreen. */
body.azfb-holiday .azfb-offer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  border-radius: var(--azfb-radius) var(--azfb-radius) 0 0;
  background: linear-gradient(90deg,
    var(--azfb-holly) 0%, var(--azfb-holly) 18%, var(--azfb-gold) 38%,
    var(--azfb-gold-light) 50%, var(--azfb-gold) 62%,
    var(--azfb-green-mid) 82%, var(--azfb-green-mid) 100%);
}

/* Extra air under the kicker so the bow has somewhere to sit without landing
   on "OFFER 1". The bow is out of flow, so this is what actually makes room. */
body.azfb-holiday .azfb-offer__kicker {
  color: var(--azfb-green-mid);
  margin-bottom: 9px;
}

/* ── The bow, tied onto the savings figure ────────────────────────────────
   Absolute inside the amount, so it overlaps the first digit by a few pixels
   and cannot reflow the number. The amount gains left padding to make the
   overlap read as "tied on" rather than "on top of" — the price stays the most
   legible thing in the card, because the price is what sells. */
body.azfb-holiday .azfb-offer__amount {
  position: relative;
  padding-left: 30px;
}

body.azfb-holiday .azfb-bow {
  position: absolute;
  left: -3px;
  top: -9px;
  width: clamp(29px, 2.7vw, 37px);
  height: auto;
  color: var(--azfb-holly);
  transform: rotate(-14deg);
  transform-origin: 50% 60%;
  /* A white halo so the loops stay crisp where they cross the digits. */
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.95))
          drop-shadow(0 2px 3px rgba(110,35,43,0.28));
  pointer-events: none;
}

body.azfb-holiday .azfb-bow .azfb-bow__knot { fill: var(--azfb-gold); }

/* Picked card: the bow deepens with the rest of the card. */
body.azfb-holiday .azfb-offer:has(.azfb-offer__input:checked) .azfb-bow {
  color: var(--azfb-holly-dark);
}

/* ── A small berry garland under the section heading ──────────────────── */
body.azfb-holiday .azfb-specials-section .azfb-heading-group::after {
  content: "";
  display: block;
  width: 94px;
  height: 10px;
  margin: var(--azfb-sp-6) auto 0;
  background-image:
    radial-gradient(circle, var(--azfb-holly) 46%, transparent 48%),
    radial-gradient(circle, var(--azfb-gold) 46%, transparent 48%),
    radial-gradient(circle, var(--azfb-green-mid) 46%, transparent 48%);
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: left center, center center, right center;
}

body.azfb-holiday .azfb-offer:has(.azfb-offer__input:checked) {
  border-color: var(--azfb-gold);
  background: linear-gradient(180deg, var(--azfb-white) 0%, var(--azfb-green-050) 100%);
  box-shadow: var(--azfb-shadow-md), 0 0 0 4px rgba(201,165,90,0.14);
}

body.azfb-holiday .azfb-offer:has(.azfb-offer__input:checked)::before {
  background: linear-gradient(90deg, var(--azfb-gold-dark) 0%, var(--azfb-gold-light) 50%, var(--azfb-gold-dark) 100%);
}

/* The "one per household" line sits under the cards; give it the holly accent
   so the constraint is noticed before the form rather than after. */
body.azfb-holiday .azfb-specials__onlyone {
  border-left: 3px solid var(--azfb-holly);
  padding-left: var(--azfb-sp-4);
  color: var(--azfb-charcoal);
}

/* ── Step numbers in evergreen with a gold ring ────────────────────────── */
body.azfb-holiday .azfb-specials__num {
  box-shadow: 0 0 0 3px rgba(201,165,90,0.28);
}

/* ── Success panel ────────────────────────────────────────────────────────
   Left alone apart from the border, so the confirmation reads as a plain,
   trustworthy receipt rather than more marketing. */
body.azfb-holiday .azfb-specials__done {
  border-top: 3px solid var(--azfb-gold);
}

/* ── Phones ───────────────────────────────────────────────────────────────
   Most paid clicks here are mobile. Tighten the ribbon so it does not push
   the offer cards below the fold. */
@media (max-width: 600px) {
  .azfb-holiday-ribbon {
    padding: var(--azfb-sp-5) var(--azfb-sp-4) var(--azfb-sp-4);
    margin-bottom: var(--azfb-sp-8);
    text-align: left;
  }
  .azfb-holiday-ribbon__text { font-size: var(--azfb-fs-body); }
  .azfb-holiday-ribbon__note { justify-content: flex-start; align-items: flex-start; }
  .azfb-holiday-ribbon__note .azfb-icon { margin-top: 3px; }
}

/* Nothing in this sheet animates, so there is no reduced-motion case of its
   own; the card hover lift it inherits is already covered in components.css. */