/*
 * SodaMelt funnel — gold CTA buttons
 * Loaded on top of each page's base stylesheet so every purchase button in the
 * funnel (DTC buyboxes, upsell accepts, downsell cards, pop-ups) is gold.
 */

/* ===== GOLD BUTTON · base look ===== */
.pkg-btn,
.pkg-cta,
.hero-cta-btn,
.faq-cta-btn,
.nav-cta,
.cta-orange,
.cta-gold,
.popup-cta,
.accept-link,
.up-cta,
button.pkg-btn,
button.hero-cta-btn,
a.pkg-cta,
a.faq-cta-btn,
a.cta-orange,
a.cta-gold,
a.popup-cta {
  background: linear-gradient(180deg,
    #F5D06A 0%,
    #EFC048 22%,
    #E5A82E 55%,
    #C88E22 100%) !important;
  color: #241305 !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow:
    0 4px 14px rgba(184,134,46,.42),
    inset 0 1px 0 rgba(255,255,255,.5) !important;
  font-family: 'Oswald', 'Nunito Sans', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.32);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  cursor: pointer;
}

.pkg-btn:hover,
.pkg-cta:hover,
.hero-cta-btn:hover,
.faq-cta-btn:hover,
.nav-cta:hover,
.cta-orange:hover,
.cta-gold:hover,
.popup-cta:hover,
.accept-link:hover,
.up-cta:hover,
button.pkg-btn:hover,
a.pkg-cta:hover,
a.faq-cta-btn:hover,
a.cta-orange:hover,
a.cta-gold:hover,
a.popup-cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 6px 18px rgba(184,134,46,.55),
    inset 0 1px 0 rgba(255,255,255,.6) !important;
}

.pkg-btn:active,
.pkg-cta:active,
.hero-cta-btn:active,
.cta-orange:active,
.cta-gold:active,
.popup-cta:active {
  transform: translateY(0);
  box-shadow:
    0 2px 6px rgba(184,134,46,.4),
    inset 0 2px 4px rgba(0,0,0,.08) !important;
}

/* Animated shine sweeping across the gold buttons.
   .pkg-btn is deliberately NOT in this list: the featured pricing card hangs the
   animated hand cursor off its bottom-right corner (.pkg-hand), and the clipping
   this effect needs would cut the hand in half. Those buttons already have the
   hand as their attention device. */
.hero-cta-btn,
.cta-orange,
.cta-gold,
.popup-cta,
.faq-cta-btn { position: relative; overflow: hidden; }

.hero-cta-btn::after,
.cta-orange::after,
.cta-gold::after,
.popup-cta::after,
.faq-cta-btn::after {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.62), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: gold-shine 3s ease-in-out infinite;
}
@keyframes gold-shine {
  0%   { left: -80%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

/* Force SVG icons inside gold buttons dark so they keep contrast */
.pkg-btn svg,
.pkg-cta svg,
.hero-cta-btn svg,
.faq-cta-btn svg,
.nav-cta svg,
.cta-orange svg,
.cta-gold svg,
.popup-cta svg { fill: #241305 !important; }
.pkg-btn svg path,
.hero-cta-btn svg path,
.nav-cta svg path,
.cta-orange svg path,
.popup-cta svg path { fill: #241305 !important; }

/* Nav CTA in the header is smaller — tighten padding */
.nav-cta {
  padding: 8px 18px !important;
  font-size: 13px !important;
}

/* Hero CTA — big and prominent */
.hero-cta-btn {
  padding: 18px 26px !important;
  font-size: 18px !important;
}

/* Package card CTA — full width inside the card */
.pkg-btn,
.pkg-cta {
  padding: 16px 24px !important;
  font-size: 18px !important;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Upsell/downsell main CTA — huge and bold.
   display MUST be block-level (flex, not inline-flex): the page stylesheets cap
   these buttons at max-width:460px and center them with `margin: 0 auto`, and
   auto margins do not center an inline-level box. */
.cta-orange,
.cta-gold {
  padding: 20px 28px !important;
  font-size: 20px !important;
  width: 100%;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Pop-up CTA — same reasoning as above */
.popup-cta {
  padding: 18px 24px !important;
  font-size: 18px !important;
  width: 100%;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center;
}

/* FAQ side CTA */
.faq-cta-btn {
  padding: 16px 24px !important;
  font-size: 16px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Kill any coloured background lingering from the base styles */
.cta-orange::before,
.cta-gold::before,
.popup-cta::before { content: none; }

/* Keep the price total unstyled by the rules above. The "You Save" pill keeps its
   own tinted background from style.css — it is a badge, not a button. */
.pkg-total { background: transparent !important; }

/* ===== PHONE SIZING =====
   The rules above use !important to beat each page's base stylesheet, which also
   means every per-page mobile override loses to them. Phone sizes therefore have
   to live here, or long CTA labels overflow onto a line of their own. */
@media (max-width: 480px) {
  .nav-cta {
    padding: 7px 14px !important;
    font-size: 12px !important;
    letter-spacing: .4px !important;
  }
  .hero-cta-btn {
    padding: 16px 16px !important;
    font-size: 16px !important;
    letter-spacing: .4px !important;
  }
  .pkg-btn,
  .pkg-cta {
    padding: 15px 14px !important;
    font-size: 16px !important;
    letter-spacing: .5px !important;
  }
  .cta-orange,
  .cta-gold {
    padding: 16px 16px !important;
    font-size: 16px !important;
    letter-spacing: .4px !important;
    line-height: 1.3;
  }
  .popup-cta {
    padding: 15px 14px !important;
    font-size: 15px !important;
    letter-spacing: .3px !important;
    line-height: 1.3;
  }
  .faq-cta-btn {
    padding: 15px 18px !important;
    font-size: 14px !important;
    letter-spacing: .4px !important;
  }
}