/* ============================================
   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
   - No tacky mixed color gradients
   - Clean color separation (Navy OR Red, never mixed)
   
   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;

  /* 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
   
   ONLY COLORS DIFFER:
   - Primary: Bold red or blue gradient
   - Secondary: Light white/gray
   - Outline: Light background → dark on hover
   
   RESULT: One cohesive button system, infinite flexibility
   ============================================ */

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

.btn:not(.copy-btn):not(.audience-tab),
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-outline-primary,
.btn-text,
.btn-link,
.cta-button {
  /* 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;
}

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

.btn-primary,
.cta-button {
  /* 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,
.cta-button::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,
.cta-button: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,
.cta-button:hover::before {
  left: 100%;
}

/* Active/Press State - STANDARDIZED */
.btn-primary:active,
.cta-button: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
   ============================================ */

.btn-outline,
.btn-outline-primary {
  /* Colors - LIGHT with border */
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
  color: var(--magtek-blue) !important;
  border-color: rgba(38, 60, 80, 0.2) !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 (same as primary/secondary) */
.btn-outline::before,
.btn-outline-primary::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 as primary/secondary) */
.btn-outline:hover,
.btn-outline-primary:hover {
  background: linear-gradient(135deg, #263c50 0%, #1e293b 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(210, 18, 66, 0.3) !important;
}

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

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

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

.btn-text,
.btn-link {
  /* 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;
  font-weight: 600 !important;
  position: relative !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1.6 !important;
}

/* Underline effect */
.btn-text::after,
.btn-link::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,
.btn-link:hover {
  background: transparent !important;
  color: var(--magtek-red-dark) !important;
  transform: none !important;
  box-shadow: none !important;
}

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

/* Small text button for tight spaces */
.btn-text.btn-sm,
.btn-link.btn-sm {
  font-size: 1.3rem !important;
  padding: 0 !important;
  padding-bottom: 0.1rem !important;
}

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

/* Auto white buttons on dark sections */
.on-dark .btn-primary,
.on-dark .cta-button,
.hero-dark .cta-button,
.hero-gradient .cta-button,
.hero-image .cta-button,
.cta-gradient-primary .cta-button,
.cta-dark-pattern .cta-button {
  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,
.on-dark .cta-button:hover,
.hero-dark .cta-button:hover,
.hero-gradient .cta-button:hover,
.hero-image .cta-button:hover,
.cta-gradient-primary .cta-button:hover,
.cta-dark-pattern .cta-button: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;
}

/* ============================================
   SIZE VARIANTS
   ============================================ */

.btn-sm,
.btn-small {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 1.5rem !important;
  font-size: 1.4rem !important;
}

.btn-lg,
.btn-large {
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 3rem !important;
  font-size: 1.8rem !important;
}

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

.btn-block,
.btn-full {
  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-outline-primary:disabled,
.btn-text:disabled,
.btn-link:disabled,
.cta-button: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-outline-primary:focus,
.btn-text:focus,
.btn-link:focus,
.cta-button: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-outline-primary:focus,
.on-dark .btn-text:focus,
.on-dark .btn-link:focus,
.on-dark .cta-button: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),
.cta-button: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;
}

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

@media (max-width: 768px) {
  .btn:not(.copy-btn):not(.audience-tab),
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-outline-primary,
  .btn-text,
  .btn-link,
  .cta-button {
    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-outline-primary,
  .cta-buttons .cta-button,
  .btn-group .btn:not(.copy-btn):not(.audience-tab),
  .btn-group .btn-primary,
  .btn-group .btn-secondary,
  .btn-group .btn-outline,
  .btn-group .btn-outline-primary {
    width: 100% !important;
    max-width: 400px !important;
  }

  .btn-sm {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 1.3rem !important;
  }

  .btn-lg {
    height: 58px !important;
    min-height: 58px !important;
    font-size: 1.6rem !important;
  }
}

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

  .btn-text,
  .btn-link {
    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-outline-primary,
  .btn-text,
  .btn-link,
  .cta-button {
    transition: none !important;
  }

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

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

/* ============================================
   IMPLEMENTATION NOTES
   ============================================
   
   PRIMARY BUTTON (for standard actions):
   <a href="#" class="btn-primary">Get Started</a>
   
   CTA BUTTON (for major conversions, optionally add arrow):
   <a href="#" class="cta-button">Contact Sales</a>
   <a href="#" class="cta-button">Get Started &rarr;</a>
   
   SECONDARY BUTTON:
   <a href="#" class="btn-secondary">Learn More</a>
   
   OUTLINE BUTTON:
   <a href="#" class="btn-outline">View Details</a>
   
   TEXT BUTTON (minimal, link-style):
   <a href="#" class="btn-text">Read More</a>
   <a href="#" class="btn-link">View All Products</a>
   
   SIZES:
   <a href="#" class="btn-primary btn-sm">Small</a>
   <a href="#" class="btn-primary btn-lg">Large</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>
   
   ============================================ */