/* ============================================
   MAGTEK BUTTON SYSTEM - CORPORATE EDITION
   ============================================
   
   Purpose: Centralized button system for MagTek website
   Philosophy: Simple, professional, maintainable
   
   DESIGN APPROACH:
   Modern corporate 3D buttons with:
   - Subtle depth through layered shadows
   - Premium shimmer via gradient overlays
   - Professional tactile feel
   - Strategic color hierarchy (Red for primary, Blue for info, Red accents throughout)
   - Cohesive design system - all buttons share identical structure, only colors differ
   
   USAGE:
   <a href="#" class="btn-primary">Primary Action</a>
   <a href="#" class="btn-secondary">Secondary Action</a>
   
   Change colors once, update everywhere.
   
   ============================================ */

/* ============================================
   CSS VARIABLES - BRAND COLORS
   ============================================ */
:root {
  /* Brand Colors */
  --magtek-red: #d21242;
  --magtek-red-dark: #b01035;
  --magtek-blue: #263c50;
  --magtek-blue-dark: #1e293b;
  --magtek-white: #ffffff;

  /* STANDARDIZED BUTTON SETTINGS (Same for All Buttons) */
  --btn-height: 56px;
  --btn-padding-x: 2.8rem;
  --btn-font-size: 1.6rem;
  --btn-font-weight: 700;
  --btn-border-radius: 12px;
  --btn-border-width: 2px;

  /*
   * Optional size scale (small / medium / large). Default buttons use --btn-height etc. above;
   * add .btn-sm, .btn-md, or .btn-lg next to any MagTek button class.
   * Medium matches default dimensions exactly.
   */
  --btn-height-sm: 40px;
  --btn-padding-x-sm: 1.5rem;
  --btn-font-size-sm: 1.4rem;
  --btn-border-radius-sm: 10px;
  --btn-gap-sm: 0.55rem;

  --btn-height-md: 56px;
  --btn-padding-x-md: 2.8rem;
  --btn-font-size-md: 1.6rem;
  --btn-border-radius-md: 12px;
  --btn-gap-md: 0.8rem;

  --btn-height-lg: 64px;
  --btn-padding-x-lg: 3rem;
  --btn-font-size-lg: 1.8rem;
  --btn-border-radius-lg: 14px;
  --btn-gap-lg: 0.95rem;

  /* STANDARDIZED 3D SHIMMER (Same for All Buttons) */
  --btn-inset-top: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  --btn-inset-bottom: 0 -1px 0 rgba(0, 0, 0, 0.2) inset;
  --btn-shadow-base: 0 4px 8px rgba(0, 0, 0, 0.12);
  --btn-shadow-depth: 0 8px 16px rgba(0, 0, 0, 0.08);

  /* STANDARDIZED HOVER (Same for All Buttons) */
  --btn-hover-lift: -3px;
  --btn-inset-top-hover: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  --btn-inset-bottom-hover: 0 -1px 0 rgba(0, 0, 0, 0.25) inset;
  --btn-shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.15);
  --btn-shadow-hover-depth: 0 12px 24px rgba(0, 0, 0, 0.12);

  /* STANDARDIZED ACTIVE (Same for All Buttons) */
  --btn-active-press: 1px;
  --btn-shadow-active: 0 2px 4px rgba(0, 0, 0, 0.15) inset;

  /* STANDARDIZED SHIMMER ANIMATION (Same for All Buttons) */
  --btn-shimmer-transition: left 0.5s ease;
}

/* ============================================
   BUTTON PACK STANDARDIZATION
   ============================================
   
   ALL BUTTONS NOW SHARE IDENTICAL:
   ✓ Height: 56px
   ✓ Padding: 2.8rem horizontal
   ✓ Font size: 1.6rem
   ✓ Font weight: 700
   ✓ Border radius: 12px
   ✓ Border width: 2px
   ✓ Letter spacing: 0.02em
   ✓ Hover lift: -3px
   ✓ Active press: +1px
   ✓ Inset shimmer: Top light + bottom shadow
   ✓ Shadow structure: 4 layers
   ✓ Diagonal sweep: Left to right on hover
   ✓ Transition: 0.25s cubic-bezier
   
   COLOR SYSTEM (Strategic Brand Hierarchy):
   - Primary (btn-primary): MagTek Red gradient - Main conversions
   - Learn More (btn-learn-more): MagTek Red border/text, no fill - Informational CTAs
   - Secondary (btn-secondary): Light gradient - Alternative actions
   - Outline (btn-outline): Light background with MagTek Red border/text → Red fill on hover
   - Text (btn-text): MagTek Red text with underline - same weight as primary (700); inline/link treatment
   
   RESULT: One cohesive button system with strategic color hierarchy
   ============================================ */

/* ============================================
   BASE BUTTON STYLES
   ============================================ */

.btn:not(.copy-btn):not(.audience-tab),
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-learn-more,
.btn-text {
  /* Layout */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.8rem !important;

  /* Sizing - STANDARDIZED */
  height: var(--btn-height) !important;
  min-height: var(--btn-height) !important;
  padding: 0 var(--btn-padding-x) !important;

  /* Typography - STANDARDIZED */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: var(--btn-font-size) !important;
  font-weight: var(--btn-font-weight) !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;

  /* Visual - STANDARDIZED */
  border-radius: var(--btn-border-radius) !important;
  border-width: var(--btn-border-width) !important;
  border-style: solid !important;
  cursor: pointer !important;
  box-sizing: border-box !important;

  /* Animation - STANDARDIZED */
  transform: translate3d(0, 0, 0) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;

  /* Performance */
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;

  /* Reset browser defaults */
  -webkit-appearance: none !important;
  appearance: none !important;
  user-select: none !important;
}

/* <a> CTAs have no UA margin; <button> often does — keeps paired rows aligned */
button.btn-primary,
button.btn-secondary,
button.btn-outline,
button.btn-learn-more {
  margin: 0 !important;
}

/*
 * Label wrappers (often <span> for icons) must match the button weight.
 * Body/section copy can set lighter weights; nested spans were inheriting
 * that and reading thinner than hero CTAs (text directly under <a>).
 */
.btn:not(.copy-btn):not(.audience-tab) span,
.btn-primary span,
.btn-secondary span,
.btn-outline span,
.btn-learn-more span {
  font-weight: var(--btn-font-weight) !important;
}

/* ============================================
   PRIMARY BUTTON - Modern Corporate 3D Red
   ============================================ */

.btn-primary {
  /* Colors - RED */
  background: linear-gradient(135deg, #d21242 0%, #b01035 100%) !important;
  color: var(--magtek-white) !important;
  border-color: rgba(176, 16, 53, 0.8) !important;

  /* 3D Shimmer - STANDARDIZED */
  box-shadow: var(--btn-inset-top), var(--btn-inset-bottom),
    var(--btn-shadow-base), var(--btn-shadow-depth) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Shimmer Effect - STANDARDIZED */
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  transition: var(--btn-shimmer-transition);
}

/* Hover State - STANDARDIZED */
.btn-primary:hover {
  background: linear-gradient(135deg, #e6164e 0%, #c01340 100%) !important;
  color: var(--magtek-white) !important;
  text-decoration: none !important;
  transform: translate3d(0, var(--btn-hover-lift), 0) !important;
  box-shadow: var(--btn-inset-top-hover), var(--btn-inset-bottom-hover),
    var(--btn-shadow-hover), var(--btn-shadow-hover-depth) !important;
}

.btn-primary:hover::before {
  left: 100%;
}

/* Active/Press State - STANDARDIZED */
.btn-primary:active {
  transform: translate3d(0, var(--btn-active-press), 0) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, var(--btn-shadow-active),
    0 2px 4px rgba(210, 18, 66, 0.15) !important;
}

/* ============================================
   SECONDARY BUTTON - Modern Corporate 3D Light
   ============================================
   
   Design: Light, subtle, clearly secondary to primary
   Feel: Professional but not competing for attention
   ============================================ */

.btn-secondary {
  /* Colors - LIGHT */
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
  color: var(--magtek-blue) !important;
  border-color: rgba(38, 60, 80, 0.15) !important;

  /* 3D Shimmer - STANDARDIZED (same structure as primary) */
  box-shadow: var(--btn-inset-top), var(--btn-inset-bottom),
    var(--btn-shadow-base), var(--btn-shadow-depth) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Shimmer Effect - STANDARDIZED (same as primary) */
.btn-secondary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(38, 60, 80, 0.08) 50%,
    transparent 100%
  );
  transition: var(--btn-shimmer-transition);
}

/* Hover State - STANDARDIZED (same lift and structure as primary) */
.btn-secondary:hover {
  background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%) !important;
  color: var(--magtek-blue) !important;
  text-decoration: none !important;
  transform: translate3d(0, var(--btn-hover-lift), 0) !important;
  box-shadow: var(--btn-inset-top-hover), var(--btn-inset-bottom-hover),
    var(--btn-shadow-hover), var(--btn-shadow-hover-depth) !important;
  border-color: rgba(38, 60, 80, 0.25) !important;
}

.btn-secondary:hover::before {
  left: 100%;
}

/* Active/Press State - STANDARDIZED (same as primary) */
.btn-secondary:active {
  transform: translate3d(0, var(--btn-active-press), 0) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, var(--btn-shadow-active),
    0 2px 4px rgba(38, 60, 80, 0.12) !important;
}

/* ============================================
   OUTLINE BUTTON - Modern Corporate 3D Outline
   ============================================
   
   Design: Light background with MagTek red border and text
   Hover: Fills with MagTek red gradient (matches primary)
   Purpose: Alternative to primary, maintains brand red presence
   ============================================ */

.btn-outline {
  /* Colors - LIGHT background with MagTek red border and text */
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
  color: var(--magtek-red) !important;
  border-color: rgba(210, 18, 66, 0.4) !important;

  /* 3D Shimmer - STANDARDIZED (same structure as primary/secondary) */
  box-shadow: var(--btn-inset-top), var(--btn-inset-bottom),
    var(--btn-shadow-base), var(--btn-shadow-depth) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Shimmer Effect - STANDARDIZED (red-tinted shimmer) */
.btn-outline::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(210, 18, 66, 0.1) 50%,
    transparent 100%
  );
  transition: var(--btn-shimmer-transition);
}

/* Hover State - STANDARDIZED (fills with MagTek red, matches primary) */
.btn-outline:hover {
  background: linear-gradient(135deg, #d21242 0%, #b01035 100%) !important;
  color: var(--magtek-white) !important;
  text-decoration: none !important;
  transform: translate3d(0, var(--btn-hover-lift), 0) !important;
  box-shadow: var(--btn-inset-top-hover), var(--btn-inset-bottom-hover),
    var(--btn-shadow-hover), var(--btn-shadow-hover-depth) !important;
  border-color: rgba(176, 16, 53, 0.8) !important;
}

.btn-outline:hover::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  left: 100%;
}

/* Active/Press State - STANDARDIZED (same as primary) */
.btn-outline:active {
  transform: translate3d(0, var(--btn-active-press), 0) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, var(--btn-shadow-active),
    0 2px 4px rgba(210, 18, 66, 0.15) !important;
}

/* ============================================
   LEARN MORE BUTTON - Informational CTA (Outline Style)
   ============================================
   
   Design: Light background with MagTek red border and text (NO FILL - EVER)
   Hover: Slightly darker background, stronger border (NEVER FILLS)
   Purpose: Informational button - less prominent than primary, never fills
   ============================================ */

.btn-learn-more {
  /* Colors - LIGHT background with MagTek red border and text (NO FILL) */
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
  color: var(--magtek-red) !important;
  border-color: rgba(210, 18, 66, 0.4) !important;

  /* 3D Shimmer - STANDARDIZED (same structure as primary/secondary) */
  box-shadow: var(--btn-inset-top), var(--btn-inset-bottom),
    var(--btn-shadow-base), var(--btn-shadow-depth) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Shimmer Effect - STANDARDIZED (red-tinted shimmer) */
.btn-learn-more::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(210, 18, 66, 0.1) 50%,
    transparent 100%
  );
  transition: var(--btn-shimmer-transition);
}

/* Hover State - STANDARDIZED (stays outline, no fill - informational button) */
.btn-learn-more:hover {
  background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%) !important;
  color: var(--magtek-red) !important;
  text-decoration: none !important;
  transform: translate3d(0, var(--btn-hover-lift), 0) !important;
  box-shadow: var(--btn-inset-top-hover), var(--btn-inset-bottom-hover),
    var(--btn-shadow-hover), var(--btn-shadow-hover-depth) !important;
  border-color: rgba(210, 18, 66, 0.6) !important;
}

.btn-learn-more:hover::before {
  left: 100%;
}

/* Active/Press State - STANDARDIZED (same as primary) */
.btn-learn-more:active {
  transform: translate3d(0, var(--btn-active-press), 0) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, var(--btn-shadow-active),
    0 2px 4px rgba(210, 18, 66, 0.15) !important;
}

/* ============================================
   TEXT BUTTON - Minimal, Link-Style
   ============================================ */

.btn-text {
  /* Reset base button styles to inline */
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
  align-items: initial !important;
  justify-content: initial !important;
  align-self: flex-start !important; /* Prevent stretching in flex containers */
  gap: 0 !important;

  background: transparent !important;
  color: var(--magtek-red) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  padding-bottom: 0.2rem !important;
  height: auto !important;
  min-height: auto !important;
  /* Match filled/outline MagTek buttons (--btn-font-weight) for consistent CTA weight */
  font-weight: var(--btn-font-weight) !important;
  position: relative !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1.6 !important;
}

/* Underline effect */
.btn-text::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: var(--magtek-red) !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform 0.25s ease !important;
}

.btn-text:hover {
  background: transparent !important;
  color: var(--magtek-red-dark) !important;
  transform: none !important;
  box-shadow: none !important;
}

.btn-text:hover::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}

/* ============================================
   DARK BACKGROUND VARIANTS
   ============================================ */

/* Auto white buttons on dark sections */
.on-dark .btn-primary,
.hero-dark .btn-primary,
.hero-gradient .btn-primary,
.hero-image .btn-primary,
.cta-gradient-primary .btn-primary,
.cta-dark-pattern .btn-primary {
  background: var(--magtek-white) !important;
  color: var(--magtek-red) !important;
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.3) !important;
}

.on-dark .btn-primary:hover,
.hero-dark .btn-primary:hover,
.hero-gradient .btn-primary:hover,
.hero-image .btn-primary:hover,
.cta-gradient-primary .btn-primary:hover,
.cta-dark-pattern .btn-primary:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--magtek-red) !important;
  box-shadow: 0 12px 40px rgba(255, 255, 255, 0.4) !important;
}

/* Auto glass buttons on dark sections */
.on-dark .btn-secondary,
.hero-dark .btn-secondary,
.hero-gradient .btn-secondary,
.hero-image .btn-secondary,
.cta-gradient-primary .btn-secondary,
.cta-dark-pattern .btn-secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--magtek-white) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: none !important;
}

.on-dark .btn-secondary:hover,
.hero-dark .btn-secondary:hover,
.hero-gradient .btn-secondary:hover,
.hero-image .btn-secondary:hover,
.cta-gradient-primary .btn-secondary:hover,
.cta-dark-pattern .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: var(--magtek-white) !important;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15) !important;
}

/* Auto white outline buttons on dark sections (with red accent) */
.on-dark .btn-outline,
.hero-dark .btn-outline,
.hero-gradient .btn-outline,
.hero-image .btn-outline,
.cta-gradient-primary .btn-outline,
.cta-dark-pattern .btn-outline {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--magtek-white) !important;
  border-color: rgba(210, 18, 66, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: none !important;
}

.on-dark .btn-outline:hover,
.hero-dark .btn-outline:hover,
.hero-gradient .btn-outline:hover,
.hero-image .btn-outline:hover,
.cta-gradient-primary .btn-outline:hover,
.cta-dark-pattern .btn-outline:hover {
  background: linear-gradient(135deg, #d21242 0%, #b01035 100%) !important;
  color: var(--magtek-white) !important;
  border-color: rgba(176, 16, 53, 0.8) !important;
  box-shadow: 0 8px 32px rgba(210, 18, 66, 0.3) !important;
}

/* Auto outline learn-more buttons on dark sections (red border, no fill) */
.on-dark .btn-learn-more,
.hero-dark .btn-learn-more,
.hero-gradient .btn-learn-more,
.hero-image .btn-learn-more,
.cta-gradient-primary .btn-learn-more,
.cta-dark-pattern .btn-learn-more {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--magtek-white) !important;
  border-color: rgba(210, 18, 66, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: none !important;
}

.on-dark .btn-learn-more:hover,
.hero-dark .btn-learn-more:hover,
.hero-gradient .btn-learn-more:hover,
.hero-image .btn-learn-more:hover,
.cta-gradient-primary .btn-learn-more:hover,
.cta-dark-pattern .btn-learn-more:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--magtek-white) !important;
  border-color: rgba(210, 18, 66, 0.7) !important;
  box-shadow: 0 4px 16px rgba(210, 18, 66, 0.2) !important;
}

/* ============================================
   SIZE VARIANTS (all raised MagTek buttons + generic .btn)
   .btn-md matches default; use for clarity or to override another size.
   .btn-text uses auto height — sizes only adjust type + underline rhythm.
   ============================================ */

/* --- Raised: primary, secondary, outline, learn-more, .btn --- */
.btn:not(.copy-btn):not(.audience-tab).btn-sm,
.btn-primary.btn-sm,
.btn-secondary.btn-sm,
.btn-outline.btn-sm,
.btn-learn-more.btn-sm {
  height: var(--btn-height-sm) !important;
  min-height: var(--btn-height-sm) !important;
  padding: 0 var(--btn-padding-x-sm) !important;
  font-size: var(--btn-font-size-sm) !important;
  border-radius: var(--btn-border-radius-sm) !important;
  gap: var(--btn-gap-sm) !important;
}

.btn:not(.copy-btn):not(.audience-tab).btn-md,
.btn-primary.btn-md,
.btn-secondary.btn-md,
.btn-outline.btn-md,
.btn-learn-more.btn-md {
  height: var(--btn-height-md) !important;
  min-height: var(--btn-height-md) !important;
  padding: 0 var(--btn-padding-x-md) !important;
  font-size: var(--btn-font-size-md) !important;
  border-radius: var(--btn-border-radius-md) !important;
  gap: var(--btn-gap-md) !important;
}

.btn:not(.copy-btn):not(.audience-tab).btn-lg,
.btn-primary.btn-lg,
.btn-secondary.btn-lg,
.btn-outline.btn-lg,
.btn-learn-more.btn-lg {
  height: var(--btn-height-lg) !important;
  min-height: var(--btn-height-lg) !important;
  padding: 0 var(--btn-padding-x-lg) !important;
  font-size: var(--btn-font-size-lg) !important;
  border-radius: var(--btn-border-radius-lg) !important;
  gap: var(--btn-gap-lg) !important;
}

/* --- Text / link-style (no fixed hit height) --- */
.btn-text.btn-sm {
  height: auto !important;
  min-height: auto !important;
  font-size: 1.3rem !important;
  padding: 0 !important;
  padding-bottom: 0.1rem !important;
  line-height: 1.5 !important;
}

.btn-text.btn-md {
  height: auto !important;
  min-height: auto !important;
  font-size: var(--btn-font-size-md) !important;
  padding: 0 !important;
  padding-bottom: 0.2rem !important;
  line-height: 1.6 !important;
}

.btn-text.btn-lg {
  height: auto !important;
  min-height: auto !important;
  font-size: var(--btn-font-size-lg) !important;
  padding: 0 !important;
  padding-bottom: 0.24rem !important;
  line-height: 1.55 !important;
}

/* Loading spinner scale for sized raised buttons */
.btn-primary.btn-sm.loading::after,
.btn-primary.btn-sm.btn-loading::after,
.btn-secondary.btn-sm.loading::after,
.btn-secondary.btn-sm.btn-loading::after,
.btn-outline.btn-sm.loading::after,
.btn-outline.btn-sm.btn-loading::after,
.btn-learn-more.btn-sm.loading::after,
.btn-learn-more.btn-sm.btn-loading::after,
.btn:not(.copy-btn):not(.audience-tab).btn-sm.loading::after,
.btn:not(.copy-btn):not(.audience-tab).btn-sm.btn-loading::after {
  width: 16px !important;
  height: 16px !important;
  margin: -8px 0 0 -8px !important;
  border-width: 2px !important;
}

.btn-primary.btn-lg.loading::after,
.btn-primary.btn-lg.btn-loading::after,
.btn-secondary.btn-lg.loading::after,
.btn-secondary.btn-lg.btn-loading::after,
.btn-outline.btn-lg.loading::after,
.btn-outline.btn-lg.btn-loading::after,
.btn-learn-more.btn-lg.loading::after,
.btn-learn-more.btn-lg.btn-loading::after,
.btn:not(.copy-btn):not(.audience-tab).btn-lg.loading::after,
.btn:not(.copy-btn):not(.audience-tab).btn-lg.btn-loading::after {
  width: 24px !important;
  height: 24px !important;
  margin: -12px 0 0 -12px !important;
  border-width: 3px !important;
}

/* ============================================
   WIDTH VARIANTS
   ============================================ */

.btn-block {
  width: 100% !important;
  display: flex !important;
}

.btn-block-constrained {
  width: 100% !important;
  max-width: 400px !important;
  display: flex !important;
}

/* ============================================
   BUTTON STATES
   ============================================ */

/* Disabled */
.btn:not(.copy-btn):not(.audience-tab):disabled,
.btn.disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-outline:disabled,
.btn-learn-more:disabled,
.btn-text:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
}

/* Loading */
.btn-loading,
.loading {
  position: relative !important;
  color: transparent !important;
  pointer-events: none !important;
}

.btn-loading::after,
.loading::after {
  content: "" !important;
  position: absolute !important;
  width: 20px !important;
  height: 20px !important;
  top: 50% !important;
  left: 50% !important;
  margin: -10px 0 0 -10px !important;
  border: 3px solid currentColor !important;
  border-radius: 50% !important;
  border-top-color: transparent !important;
  animation: btn-spin 0.8s linear infinite !important;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.btn:not(.copy-btn):not(.audience-tab):focus,
.btn-primary:focus,
.btn-secondary:focus,
.btn-outline:focus,
.btn-text:focus {
  outline: 3px solid var(--magtek-red) !important;
  outline-offset: 3px !important;
  box-shadow: var(--btn-shadow-hover), 0 0 0 3px rgba(210, 18, 66, 0.2) !important;
}

.on-dark .btn:not(.copy-btn):not(.audience-tab):focus,
.on-dark .btn-primary:focus,
.on-dark .btn-secondary:focus,
.on-dark .btn-outline:focus,
.on-dark .btn-learn-more:focus,
.on-dark .btn-text:focus {
  outline-color: var(--magtek-white) !important;
  box-shadow: var(--btn-shadow-hover), 0 0 0 3px rgba(255, 255, 255, 0.3) !important;
}

/* Don't show outline when clicked */
.btn:not(.copy-btn):not(.audience-tab):focus:not(:focus-visible),
.btn-primary:focus:not(:focus-visible),
.btn-secondary:focus:not(:focus-visible),
.btn-outline:focus:not(:focus-visible),
.btn-learn-more:focus:not(:focus-visible) {
  outline: none !important;
}

/* ============================================
   BUTTON CONTAINERS
   ============================================ */

.cta-buttons,
.btn-group,
.button-group {
  display: flex !important;
  gap: 2rem !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* Shared fintech CTA stack for panels/cards */
.magtek-button-stack {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.magtek-sticky-cta-actions {
  display: inline-flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
  .btn:not(.copy-btn):not(.audience-tab),
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-learn-more,
  .btn-text {
    font-size: 1.5rem !important;
  }

  .cta-buttons,
  .btn-group {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .cta-buttons .btn:not(.copy-btn):not(.audience-tab),
  .cta-buttons .btn-primary,
  .cta-buttons .btn-secondary,
  .cta-buttons .btn-outline,
  .cta-buttons .btn-learn-more,
  .btn-group .btn:not(.copy-btn):not(.audience-tab),
  .btn-group .btn-primary,
  .btn-group .btn-secondary,
  .btn-group .btn-outline,
  .btn-group .btn-learn-more {
    width: 100% !important;
    max-width: 400px !important;
  }

  .btn:not(.copy-btn):not(.audience-tab).btn-sm,
  .btn-primary.btn-sm,
  .btn-secondary.btn-sm,
  .btn-outline.btn-sm,
  .btn-learn-more.btn-sm {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 1.3rem !important;
  }

  .btn:not(.copy-btn):not(.audience-tab).btn-lg,
  .btn-primary.btn-lg,
  .btn-secondary.btn-lg,
  .btn-outline.btn-lg,
  .btn-learn-more.btn-lg {
    height: 58px !important;
    min-height: 58px !important;
    font-size: 1.6rem !important;
  }

  /* Allow long Reader Management CTA label to wrap on mobile */
  .section-cta-buttons a[href="/services/remote-services"] {
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
    text-align: center !important;
    height: auto !important;
    min-height: var(--btn-height) !important;
    padding: 1rem var(--btn-padding-x) !important;
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .btn:not(.copy-btn):not(.audience-tab),
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-learn-more,
  .btn-text {
    font-size: 1.4rem !important;
    padding: 0 1.5rem !important;
  }

  .btn-text {
    padding: 0 !important;
    padding-bottom: 0.1rem !important;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .btn:not(.copy-btn):not(.audience-tab),
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-learn-more,
  .btn-text {
    transition: none !important;
  }

  .btn:not(.copy-btn):not(.audience-tab):hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-outline:hover,
  .btn-learn-more:hover,
  .btn-text:hover,
  .btn-text:hover {
    transform: none !important;
  }

  .btn-text::after {
    transition: none !important;
  }
}

/* ==========================================================================
   ADDITIONAL RESPONSIVE STYLES FOR SERVICES PAGE CTA BUTTONS
   ========================================================================== */

/* Tablet Portrait (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .cta-buttons {
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 2rem;
  }

  .cta-buttons a {
    width: 100%;
    max-width: 400px;
  }
}

/* Mobile Landscape (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
  .cta-buttons {
    flex-direction: column;
    gap: 1.2rem;
    padding: 0 1.5rem;
  }

  .cta-buttons a {
    width: 100%;
    max-width: 100%;
  }
}

/* Mobile Portrait (320px - 479px) */
@media (max-width: 479px) {
  .cta-buttons {
    flex-direction: column;
    gap: 1rem;
    padding: 0 1rem;
    margin-top: 3rem;
  }

  .cta-buttons a {
    width: 100%;
    max-width: 100%;
    font-size: 1.4rem;
  }
}

/* ============================================
   IMPLEMENTATION NOTES
   ============================================
   
   PRIMARY BUTTON (for standard actions):
   <a href="#" class="btn-primary">Get Started</a>
   
   SECONDARY BUTTON:
   <a href="#" class="btn-secondary">Learn More</a>
   
   LEARN MORE BUTTON (informational CTA - outline style with red border, no fill):
   <a href="#" class="btn-learn-more">Learn More About Service</a>
   
   OUTLINE BUTTON (MagTek Red border/text, fills red on hover):
   <a href="#" class="btn-outline">View Details</a>
   
   TEXT BUTTON (minimal, link-style):
   <a href="#" class="btn-text">Read More</a>
   
   SIZES (add next to any variant — default = same as .btn-md):
   Raised: .btn-sm | .btn-md | .btn-lg
   Text:   .btn-text.btn-sm | .btn-text.btn-md | .btn-text.btn-lg
   
   <a href="#" class="btn-primary btn-sm">Small primary</a>
   <a href="#" class="btn-secondary btn-md">Medium secondary</a>
   <a href="#" class="btn-outline btn-lg">Large outline</a>
   <a href="#" class="btn-learn-more btn-sm">Small learn-more</a>
   <a href="#" class="btn btn-primary btn-md">Generic .btn + primary + md</a>
   <a href="#" class="btn-text btn-lg">Large text link</a>
   
   FULL WIDTH:
   <a href="#" class="btn-primary btn-block">Full Width</a>
   
   DISABLED:
   <button class="btn-primary" disabled>Not Available</button>
   
   LOADING:
   <button class="btn-primary loading">Processing...</button>
   
   BUTTON GROUP:
   <div class="cta-buttons">
     <a href="#" class="btn-primary">Primary</a>
     <a href="#" class="btn-secondary">Secondary</a>
   </div>
   
   ============================================ */