/* ============================================
   SPOOKY SALE (upa-spk-*)
   Plain CSS (not part of the Tailwind build), loaded only on the
   Hot Deals, Spooky Sale and Lifetime Membership pages - see functions.php.
   Markup: template-parts/spooky-deals.php, page-lifetime-membership.php
     -hi       hero: artwork + offer, price, coupon
     -plans    clear pricing cards
     -deco     decorative images (ghosts, cobweb, stars...)
   ============================================ */

.upa-spk {
  --spk-purple: #330c5c;
  --spk-lilac: #b2a1b8;
  --spk-gold: #ffb752;
  --spk-gold-edge: #c9a46a;
  --spk-orange: #e3560e;
  --spk-orange-dark: #c4470a;
}

/* ---------- Hero ---------- */
.upa-spk-hi {
  position: relative;
  background: var(--spk-purple);
  overflow: hidden;
}

.upa-spk-hi-art img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile/tablet: offer stacked under the artwork */
.upa-spk-hi-offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 16px 40px;
  text-align: center;
  --spk-u: 1px; /* size unit: fixed below lg, scales with the artwork at lg+ */
}

.upa-spk-hi-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 * var(--spk-u));
  margin: 0;
  font-family: 'League Spartan', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: calc(30 * var(--spk-u));
  line-height: 1;
  text-transform: uppercase;
  color: var(--spk-gold);
}

/* Price in a lilac hexagon with a gold edge */
.upa-spk-hi-price {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(320 * var(--spk-u));
  max-width: 100%;
  aspect-ratio: 575 / 220;
  filter: drop-shadow(0 calc(6 * var(--spk-u)) calc(8 * var(--spk-u)) rgba(0, 0, 0, .35));
}

.upa-spk-hi-price::before,
.upa-spk-hi-price::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
}

.upa-spk-hi-price::before {
  inset: 0;
  background: var(--spk-gold-edge);
}

.upa-spk-hi-price::after {
  inset: 3px;
  background: var(--spk-lilac);
}

.upa-spk-hi-price > span {
  font-family: 'Metamorphous', 'Montserrat', serif;
  font-weight: 400;
  font-size: calc(70 * var(--spk-u));
  line-height: 1;
  text-transform: none;
  color: var(--spk-gold);
  -webkit-text-stroke: .07em #000;
  paint-order: stroke fill;
  text-shadow: .045em .045em 0 var(--spk-gold);
  letter-spacing: .01em;
}

.upa-spk-hi-label {
  display: inline-block;
  background: var(--spk-gold);
  color: #000;
  font-size: calc(13 * var(--spk-u));
  font-weight: 700;
  line-height: 1.2;
  border-radius: 999px;
  padding: calc(6 * var(--spk-u)) calc(14 * var(--spk-u));
}

/* Coupon: read-only code + Copy button inside a lilac pill */
.upa-spk-hi-coupon {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(300 * var(--spk-u));
  max-width: 100%;
  background: var(--spk-lilac);
  border: calc(3 * var(--spk-u)) solid var(--spk-gold-edge);
  border-radius: 999px;
  padding: calc(5 * var(--spk-u)) calc(5 * var(--spk-u)) calc(5 * var(--spk-u)) calc(22 * var(--spk-u));
  box-shadow: 0 calc(4 * var(--spk-u)) calc(8 * var(--spk-u)) rgba(0, 0, 0, .3);
}

.upa-spk-hi-code {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-size: calc(20 * var(--spk-u));
  font-weight: 700;
  letter-spacing: .04em;
  color: #000;
}

.upa-spk-hi-copy,
.upa-spk-hi-browse {
  display: inline-block;
  background: var(--spk-orange);
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s;
  box-shadow: 0 calc(4 * var(--spk-u)) calc(8 * var(--spk-u)) rgba(0, 0, 0, .3);
}

.upa-spk-hi-copy:hover,
.upa-spk-hi-browse:hover {
  background: var(--spk-orange-dark);
}

.upa-spk-hi-copy {
  flex-shrink: 0;
  color: #000;
  font-size: calc(15 * var(--spk-u));
  padding: calc(10 * var(--spk-u)) calc(30 * var(--spk-u));
}

.upa-spk-hi-browse {
  color: #fff;
  font-size: calc(17 * var(--spk-u));
  padding: calc(14 * var(--spk-u)) calc(32 * var(--spk-u));
  text-decoration: none;
}

/* lg+: offer over the empty right side of the artwork; everything
   scales with the artwork width (design is 1917px wide). */
@media (min-width: 1024px) {
  .upa-spk-hi-offer {
    --spk-u: calc(100vw / 1917);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 56.5%;
    width: 33%;
    justify-content: center;
    gap: calc(20 * var(--spk-u));
    padding: 0;
  }

  .upa-spk-hi-title {
    font-size: calc(54 * var(--spk-u));
    gap: calc(28 * var(--spk-u));
  }

  .upa-spk-hi-price {
    width: calc(575 * var(--spk-u));
  }

  .upa-spk-hi-price::after {
    inset: calc(4 * var(--spk-u));
  }

  .upa-spk-hi-price > span {
    font-size: calc(136 * var(--spk-u));
  }

  .upa-spk-hi-label {
    font-size: max(11px, calc(17 * var(--spk-u)));
  }

  .upa-spk-hi-coupon {
    width: calc(445 * var(--spk-u));
  }

  .upa-spk-hi-code {
    font-size: max(15px, calc(26 * var(--spk-u)));
  }

  .upa-spk-hi-copy {
    font-size: max(12px, calc(18 * var(--spk-u)));
    padding: calc(16 * var(--spk-u)) calc(56 * var(--spk-u));
  }

  .upa-spk-hi-browse {
    font-size: max(13px, calc(21 * var(--spk-u)));
    padding: calc(24 * var(--spk-u)) calc(36 * var(--spk-u));
  }
}

/* ---------- Accreditation ---------- */
.upa-spk-accred {
  background-color: var(--color-upa-green-2);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
}

/* Heading with a pumpkin either side */
.upa-spk-pumpkin-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.upa-spk-pumpkin-head img {
  width: 36px;
  height: auto;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .upa-spk-pumpkin-head img {
    width: 48px;
  }
}

/* ---------- Decorations ---------- */
.upa-spk-deco-wrap {
  position: relative;
  overflow: hidden;
}

/* Content sits above the decorations */
.upa-spk-deco-wrap > div {
  position: relative;
  z-index: 1;
}

.upa-spk-deco {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Course categories: ghost bottom-left (md+), cobweb top-right */
.upa-spk-cats-ghost {
  display: none;
  left: 0;
  bottom: 24px;
  width: 44px;
}

.upa-spk-cats-web {
  right: 0;
  top: 0;
  width: 46%;
  max-width: 560px;
  opacity: .9;
}

/* Cobweb drawn over the cards, like the design */
.upa-spk-deco-wrap > .upa-spk-cats-web {
  z-index: 2;
}

@media (min-width: 768px) {
  .upa-spk-cats-ghost {
    display: block;
    width: 70px;
  }
}

/* Clear pricing */
.upa-spk-plans {
  background-color: var(--color-upa-green-2);
  background-size: cover;
  background-position: center;
}

.upa-spk-plans-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

.upa-spk-plans-card {
  display: block;
  width: 100%;
  max-width: 320px;
  transition: transform .2s;
}

.upa-spk-plans-card:hover {
  transform: translateY(-4px);
}

.upa-spk-plans-card img {
  display: block;
  width: 100%;
  height: auto;
}

.upa-spk-plans-or {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-upa-navy);
}

/* Stars + sparkles only from md, they would cover the cards on phones */
.upa-spk-plans-stars,
.upa-spk-plans-sparkle {
  display: none;
}

.upa-spk-plans-stars {
  left: 0;
  top: 0;
  width: 120px;
}

.upa-spk-plans-sparkle {
  right: 0;
  bottom: 0;
  width: 150px;
}

@media (min-width: 768px) {
  .upa-spk-plans-row {
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }

  .upa-spk-plans-card {
    max-width: 340px;
  }

  .upa-spk-plans-stars,
  .upa-spk-plans-sparkle {
    display: block;
  }

  .upa-spk-plans-stars {
    width: 220px;
  }

  .upa-spk-plans-sparkle {
    right: 2%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 260px;
  }
}

/* Course library: big ghost peeking in from the right (xl+) */
.upa-spk-lib-ghost {
  display: none;
}

@media (min-width: 1280px) {
  .upa-spk-lib-ghost {
    display: block;
    right: -170px;
    top: 50%;
    width: 300px;
    transform: translateY(-30%);
  }
}

/* FAQ: pumpkins across the top-right, sparkles left, witch ghost right */
.upa-spk-faq-pumpkins {
  right: 0;
  top: 0;
  width: 220px;
}

.upa-spk-faq-sparkle,
.upa-spk-faq-ghost {
  display: none;
}

.upa-spk-faq > div {
  padding-top: 96px;
}

@media (min-width: 768px) {
  .upa-spk-faq-pumpkins {
    width: 340px;
  }

  .upa-spk-faq > div {
    padding-top: 110px;
  }
}

@media (min-width: 1024px) {
  .upa-spk-faq-sparkle,
  .upa-spk-faq-ghost {
    display: block;
  }

  .upa-spk-faq-pumpkins {
    width: 420px;
  }

  .upa-spk-faq > div {
    padding-top: 64px;
  }

  .upa-spk-faq-sparkle {
    left: 0;
    top: 45%;
    width: 22%;
    max-width: 300px;
    transform: translateY(-50%);
  }

  .upa-spk-faq-ghost {
    right: 2%;
    top: 55%;
    width: 15%;
    max-width: 200px;
    transform: translateY(-50%);
  }
}

/* Reviews: bat garland top-left (md+), little ghost by the heading */
.upa-spk-rev-garland {
  display: none;
  left: 0;
  top: 0;
  width: 130px;
}

.upa-spk-rev-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.upa-spk-rev-head img {
  width: 40px;
  height: auto;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .upa-spk-rev-garland {
    display: block;
    width: 240px;
  }

  .upa-spk-rev-head img {
    width: 56px;
  }
}

@media (min-width: 1280px) {
  .upa-spk-rev-garland {
    width: 320px;
  }
}

/* ============================================
   LIFETIME MEMBERSHIP (upa-spk-lft-*)
   Spooky layer over the existing upa-lftsub-* page:
   dark hero + dark plan card, decorations per section.
   ============================================ */

/* ---------- Hero ---------- */
.upa-spk-lft-hi {
  position: relative;
  background-color: #0c1e1b;
  background-size: cover;
  background-position: center;
}

/* Darkens the texture to match the design */
.upa-spk-lft-hi::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 14, 12, .55);
}

.upa-spk-lft-hi > div {
  position: relative;
}

.upa-spk-lft .upa-lftsub-hi-badge img {
  max-width: 420px;
}

.upa-spk-lft .upa-lftsub-hi-intro,
.upa-spk-lft .upa-lftsub-hi-intro .upa-txt-normal,
.upa-spk-lft .upa-lftsub-hi-benefits,
.upa-spk-lft .upa-lftsub-hi-stat-num {
  color: #fff;
}

.upa-spk-lft .upa-lftsub-hi-stat-label {
  color: rgba(255, 255, 255, .75);
}

.upa-spk-lft .upa-lftsub-hi-stats > li {
  border-color: rgba(255, 255, 255, .5);
}

/* Plan card: black face, silver frame, thin white inner line */
.upa-spk-lft .upa-lftsub-hi-plan {
  border: 12px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(135deg, #fdfdfd 0%, #d4d4d4 45%, #f4f4f4 70%, #b9b9b9 100%) border-box;
  box-shadow: inset 0 0 0 2px #fff, 0 12px 30px rgba(0, 0, 0, .55);
}

.upa-spk-lft .upa-lftsub-hi-plan-title,
.upa-spk-lft .upa-lftsub-hi-plan-per,
.upa-spk-lft .upa-lftsub-hi-plan-guarantee,
.upa-spk-lft .upa-lftsub-hi-plan-offer {
  color: #fff;
}

.upa-spk-lft .upa-lftsub-hi-plan-regular {
  color: rgba(255, 255, 255, .85);
}

.upa-spk-lft .upa-lftsub-hi-timer-num {
  background: #06264a;
  color: #ff8a3d;
  font-weight: 500;
}

.upa-spk-lft .upa-lftsub-hi-timer-label {
  color: #ff8a3d;
}

/* .upa-btn colours come from these custom properties (buttons.css) */
.upa-spk-lft .upa-lftsub-hi-plan-btn {
  --_bg-base: #ff7a30;
  --_bg-hover: #e3560e;
  --_text-base: var(--color-upa-navy);
  --_text-hover: #fff;
}

/* ---------- How to start: garland left, reading ghost + stars right (lg+) ---------- */
.upa-spk-lft-steps-garland,
.upa-spk-lft-steps-ghost,
.upa-spk-lft-steps-stars {
  display: none;
}

@media (min-width: 1024px) {
  .upa-spk-lft-steps-garland,
  .upa-spk-lft-steps-ghost,
  .upa-spk-lft-steps-stars {
    display: block;
  }

  .upa-spk-lft-steps-garland {
    left: 0;
    top: 0;
    width: 15%;
    max-width: 230px;
  }

  .upa-spk-lft-steps-ghost {
    right: 3%;
    top: 24px;
    width: 7%;
    max-width: 110px;
  }

  .upa-spk-lft-steps-stars {
    right: 0;
    bottom: 40px;
    width: 9%;
    max-width: 150px;
  }
}

/* ---------- Ready to start: garland left, pumpkin tree right (md+) ---------- */
.upa-spk-lft-cta-garland,
.upa-spk-lft-cta-tree {
  display: none;
}

@media (min-width: 768px) {
  .upa-spk-lft-cta-garland,
  .upa-spk-lft-cta-tree {
    display: block;
  }

  .upa-spk-lft-cta-garland {
    left: 0;
    top: 0;
    height: 100%;
    width: auto;
    max-width: 22%;
    object-fit: contain;
    object-position: left top;
  }

  .upa-spk-lft-cta-tree {
    right: 0;
    bottom: 0;
    height: 90%;
    width: auto;
    max-width: 20%;
    object-fit: contain;
    object-position: right bottom;
  }
}

/* ---------- Question form: witch hat trail on the right (lg+) ---------- */
.upa-spk-lft-form-trail {
  display: none;
}

@media (min-width: 1024px) {
  .upa-spk-lft-form-trail {
    display: block;
    right: 3%;
    top: 50%;
    width: 22%;
    max-width: 300px;
    transform: translateY(-50%);
  }
}