/*
 * SugarBind funnel — gold CTA buttons
 * Applied globally on top of each page's base stylesheet.
 * Matches the RagnarOak reference: gold gradient, black uppercase text,
 * subtle dark border, warm shadow.
 */

/* ============ 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: #1a1005 !important;
  border: none !important;
  border-radius: 6px !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: 700 !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;
}

/* Force SVG icons inside gold buttons to be dark to 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: #1a1005 !important;
}
.pkg-btn svg path,
.hero-cta-btn svg path,
.nav-cta svg path,
.cta-orange svg path,
.popup-cta svg path {
  fill: #1a1005 !important;
}

/* Nav CTA in 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 button — full width inside 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 */
.cta-orange,
.cta-gold {
  padding: 20px 28px !important;
  font-size: 20px !important;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Popup CTA */
.popup-cta {
  padding: 18px 24px !important;
  font-size: 18px !important;
  width: 100%;
  display: inline-flex;
  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 pink/red background lingering from base styles */
.pkg-btn::before,
.cta-orange::before,
.cta-gold::before,
.popup-cta::before {
  content: none;
}

/* Make sure the "You Save" pill and price total aren't accidentally styled */
.pkg-save,
.pkg-total {
  background: transparent !important;
}