/* ═══════════════════════════════════════════════════════════════════════════
   promo.css — campaign surfaces + the campaign landing page.
   Driven by src/data/promo.ts; components in src/components/PromoSurfaces.tsx
   and src/components/OfferCountdown.tsx; LP at src/app/teeth-whitening-26.
   Loaded after design-fixes.css (bump ?v= in layout.tsx on change).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Alert bar — fixed above the (fixed) utility bar + header ─────────────── */
.alert-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 102;
  padding: 10px 56px; text-align: center;
  font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.4;
}
.alert-bar__inner { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.alert-bar__text { letter-spacing: .2px; }
.alert-bar__cta {
  display: inline-block; padding: 5px 16px; border: 1px solid currentColor; border-radius: 999px;
  color: inherit; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.alert-bar__cta:hover { background: #fff; color: var(--c01-deep); }
.alert-bar__close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; background: transparent; color: inherit;
  font-size: 22px; line-height: 1; cursor: pointer; opacity: .8;
}
.alert-bar__close:hover { opacity: 1; }
/* Push the fixed bars and the page down by the bar's measured height.
   margin-top (not transform) so the fixed #mobile-menu inside isn't re-parented. */
html.alert-bar-active .utility-bar,
html.alert-bar-active .site-header { margin-top: var(--alert-h, 0px); }
html.alert-bar-active body { padding-top: var(--alert-h, 0px); }
@media (max-width: 768px) {
  .alert-bar { padding: 8px 44px; font-size: 13px; }
  .alert-bar__inner { gap: 10px; }
  .alert-bar__cta { padding: 4px 12px; font-size: 11px; }
}

/* ── Home popup ───────────────────────────────────────────────────────────── */
.promo-popup__overlay {
  position: fixed; inset: 0; z-index: 149; background: rgba(0, 0, 0, .55);
  opacity: 0; transition: opacity .35s var(--ease);
}
.promo-popup__overlay.is-active { opacity: 1; }
.promo-popup {
  position: fixed; z-index: 150; right: 24px; bottom: 24px; width: min(400px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: #141414; color: #fff; border: 1px solid rgba(180, 106, 85, .45); border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(24px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.promo-popup.is-active { opacity: 1; transform: none; }
.promo-popup__img { display: block; width: 100%; height: auto; border-radius: 12px 12px 0 0; }
.promo-popup__body { padding: 20px 24px 24px; }
.promo-popup__title { font-family: var(--font-head); font-weight: 400; font-size: 26px; line-height: 1.2; margin: 0 0 10px; }
.promo-popup__desc { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.promo-popup__desc p { margin: 0 0 10px; }
.promo-popup__desc ul { margin: 0 0 18px; padding-left: 20px; list-style: disc; }
.promo-popup__desc li { margin: 0 0 4px; }
.promo-popup__cta { width: 100%; justify-content: center; }
.promo-popup__close {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
@media (max-width: 768px) {
  /* compact, and lifted clear of the EnquiryBot chat bubble (bottom-right) */
  .promo-popup {
    right: 16px; left: 16px; bottom: 104px; width: auto; margin-inline: auto; max-width: 400px;
    max-height: calc(100vh - 104px - 24px - var(--alert-h, 0px));
  }
  .promo-popup__img { height: 140px; object-fit: cover; object-position: center 25%; }
  .promo-popup__body { padding: 16px 18px 18px; }
  .promo-popup__title { font-size: 22px; margin-bottom: 6px; }
  .promo-popup__desc { font-size: 13px; line-height: 1.5; }
  .promo-popup__desc ul { margin-bottom: 14px; }
}

/* ── Home hero: 2nd CTA sits beside the existing button ───────────────────── */
.hero__ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.promo-hero-cta { white-space: nowrap; }

/* ═══ Campaign landing page (.page-wlp) ═══════════════════════════════════ */
.page-wlp { color: #fff; }

/* Hero + form */
.wlp-hero { position: relative; padding: calc(var(--header-h) + 48px) 0 80px; overflow: hidden; }
.wlp-hero__media { position: absolute; inset: 0; z-index: 0; }
.wlp-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.wlp-hero__scrim {
  position: absolute; inset: 0;
  /* bottom-up shade keeps the headline (bottom-left, over the bright doors) legible;
     left-to-right shade sits behind the form panel */
  background:
    linear-gradient(0deg, rgba(10, 10, 10, .9) 0%, rgba(10, 10, 10, .55) 30%, rgba(10, 10, 10, 0) 60%),
    linear-gradient(90deg, rgba(10, 10, 10, .35) 0%, rgba(10, 10, 10, .5) 50%, rgba(10, 10, 10, .9) 100%);
}
.wlp-hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 64px; align-items: center;
}
.wlp-hero__copy { align-self: end; padding-bottom: 24px; }
.wlp-hero__eyebrow {
  display: inline-block; margin: 0 0 16px; padding: 6px 14px; border-radius: 999px; background: var(--c01);
  font-size: 13px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
}
.wlp-hero__title { margin: 0 0 12px; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
.wlp-hero__sub { margin: 0; max-width: 560px; text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }
.wlp-form {
  background: rgba(14, 14, 14, .9); border: 1px solid rgba(180, 106, 85, .4); border-radius: 12px;
  padding: 36px 36px 28px; backdrop-filter: none;
}
.wlp-form__title { font-family: var(--font-head); font-weight: 400; font-size: 28px; line-height: 1.25; margin: 0 0 28px; }
.wlp-form .bk-field { margin-bottom: 24px; }
.wlp-form .bk-form__submit { width: 100%; justify-content: center; margin-top: 8px; }
.wlp-form .bk-form__fineprint { margin-top: 16px; }

/* Countdown */
.offer-countdown { text-align: center; padding: 72px 0; background: #141414; }
.offer-countdown__title { font-family: var(--font-head); font-weight: 400; font-size: 36px; margin: 0 0 28px; }
.offer-countdown__units { display: flex; justify-content: center; gap: 16px; margin: 0; padding: 0; list-style: none; }
.offer-countdown__unit {
  min-width: 112px; padding: 18px 12px; border-radius: 10px; border: 1px solid rgba(180, 106, 85, .5);
  display: flex; flex-direction: column; gap: 4px;
}
.offer-countdown__num { font-family: var(--font-head); font-size: 48px; line-height: 1; color: var(--c01); font-variant-numeric: tabular-nums; }
.offer-countdown__label { font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: rgba(255, 255, 255, .75); }

/* Offer */
.wlp-offer__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 80px; align-items: center; }
.wlp-offer__title { margin: 0 0 24px; }
.wlp-offer__lede { font-family: var(--font-head); font-style: italic; font-size: 24px; color: var(--c01); margin: 24px 0 12px; }
.wlp-offer__copy p { line-height: 1.7; margin: 0 0 16px; color: rgba(255, 255, 255, .85); }
.wlp-offer__list { margin: 0 0 24px; padding: 0; list-style: none; }
.wlp-offer__list li { position: relative; padding: 0 0 10px 28px; line-height: 1.6; }
.wlp-offer__list li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px;
  border-left: 2px solid var(--c01); border-bottom: 2px solid var(--c01); transform: rotate(-45deg);
}
.wlp-offer__media { margin: 0; }
.wlp-offer__media img { width: 100%; height: auto; border-radius: 12px; display: block; }

/* Why choose us */
.wlp-why { background: #141414; }
.wlp-why__title { text-align: center; margin: 0 0 48px; }
.wlp-why__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.wlp-why__item { padding: 28px 24px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); }
.wlp-why__num {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--c01); font-weight: 600; margin-bottom: 16px;
}
.wlp-why__item-title { font-family: var(--font-head); font-weight: 400; font-size: 22px; margin: 0 0 10px; }
.wlp-why__item p { margin: 0; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.wlp-why__item a { color: var(--c01); text-decoration: underline; }

/* T&Cs */
.wlp-terms { padding: 40px 0 72px; }
.wlp-terms p { margin: 0 auto; max-width: 960px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .6); text-align: center; }

@media (max-width: 1024px) {
  /* minmax(0, …) — a bare 1fr lets the form's min-content width push the column
     wider than the screen (the hero's overflow:hidden then clips it). */
  .wlp-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .wlp-hero__copy { align-self: start; padding-bottom: 0; }
  .wlp-why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wlp-offer__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 768px) {
  .wlp-hero { padding: calc(var(--header-h) + 24px) 0 48px; }
  .wlp-hero__scrim { background: linear-gradient(180deg, rgba(10, 10, 10, .35) 0%, rgba(10, 10, 10, .92) 55%); }
  .wlp-form { padding: 28px 20px 20px; }
  .wlp-form__title { font-size: 24px; }
  .offer-countdown { padding: 48px 0; }
  .offer-countdown__title { font-size: 26px; }
  .offer-countdown__units { gap: 8px; }
  .offer-countdown__unit { min-width: 0; flex: 1; padding: 12px 4px; }
  .offer-countdown__num { font-size: 30px; }
  .offer-countdown__label { font-size: 10px; }
  .wlp-why__list { grid-template-columns: minmax(0, 1fr); }
}

/* ── Preview badge (only while ?promo_date= is in the URL) ────────────────── */
.promo-preview-badge {
  position: fixed; left: 16px; bottom: 16px; z-index: 300;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px;
  background: #F0D400; color: #111; font: 600 13px/1.3 var(--font-body);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
}
.promo-preview-badge button {
  border: 0; border-radius: 6px; padding: 6px 10px; background: #111; color: #fff;
  font: 600 12px/1 var(--font-body); cursor: pointer;
}
@media (max-width: 768px) { .promo-preview-badge { right: 16px; bottom: 88px; font-size: 12px; } }