/* ═══════════════════════════════════════════════════════════════
   UNIFIED BUTTON SYSTEM — single source of truth for button size,
   shape and alignment across every public-facing page (marketing
   site, course/mentor detail, newsletter forms, Instagram reels
   page, and the 4 checkout pages).

   Why this file exists: button padding/height/border-radius had
   drifted across ~10 older stylesheets (ss-clean-2026.css,
   ss-platform-2026.css, public-custom.css, ss-public-conversion-
   2026.css, app.css, plus several page-local <style> blocks), each
   redefining the same classes with different values, some using
   !important. Rather than untangle a decade of cascade history
   across a repo with no version control, this file is loaded LAST
   and uses !important on every rule so it always wins — the older
   rules are left alone (still harmless dead weight) so nothing
   underneath needs to be touched to get a consistent result.

   Shape = full pill (999px), matching the site's existing dominant
   look (homepage hero / contact form / enrolment form) — chosen so
   this fix does not change what most visitors already see, it just
   makes every OTHER button match it.

   Adding a new CTA button anywhere on the public site? Reuse one of
   the classes below instead of inventing new padding/height values.
   ═══════════════════════════════════════════════════════════════ */

:is(
  .btn-ss, .btn-pr, .btn-rd, .btn-bk, .btn-out, .btn-white, .btn-wa,
  .btn-red, .btn-gold, .btn-dk,
  .btn-ss-primary, .btn-ss-outline, .btn-ss-outline-w, .btn-ss-gold, .btn-ss-wa,
  .hz-btn, .hero-btn, .ss12-band-btn,
  .cdt-cta
) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 44px !important;
  padding: 0 24px !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
/* Buy-box CTAs (.cdt-cta, .co-paybtn) are deliberately full-width — only
   their shape/weight/height are unified here, not their width/layout. */
.cdt-cta { width: 100% !important; height: 52px !important; font-size: 1rem !important; }

:is(.btn-ss, .hz-btn).btn-sm,
:is(.btn-ss, .hz-btn).sm {
  height: 36px !important;
  padding: 0 18px !important;
  font-size: .82rem !important;
}
:is(.btn-ss, .hz-btn, .hero-btn).btn-lg,
:is(.btn-ss, .hz-btn, .hero-btn).lg {
  height: 52px !important;
  padding: 0 32px !important;
  font-size: 1rem !important;
}

/* Course-detail secondary action row (Wishlist / Share / Compare) —
   same pill shape, keep its existing height/flex layout. */
.cdt-mini a, .cdt-mini button { border-radius: 999px !important; font-weight: 800 !important; }

/* Newsletter "Subscribe" buttons currently diverge (56px/14px radius on
   the homepage vs 54px/7px radius on the mentor page) — unify to the
   same pill CTA used everywhere else. */
.hz-nform button, .newsletter button {
  border-radius: 999px !important;
  height: 48px !important;
  font-weight: 800 !important;
}

/* Instagram reels page — buttons sit in a flex row with no align-items,
   which is harmless today only because both buttons happen to share a
   box model; setting it explicitly removes that fragility. */
.reel-actions { align-items: center !important; }

/* ── Checkout pages (4 standalone payment pages) ──
   These load app.css (the internal admin bundle) as their only
   stylesheet, which is why their buttons look like admin buttons
   instead of the public site. Scoped to .co-head/.co-paybtn only —
   the actual admin panel's own .btn styling is untouched on purpose. */
.co-head .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 18px !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}
.co-paybtn {
  border-radius: 999px !important;
  font-weight: 800 !important;
}