/* ==========================================================================
   EliteBlocc — Button System
   File: assets/css/global/eb-buttons.css
   Version: 2.0

   BUTTON VARIANTS
   .eb-btn                   base (required on all buttons)
   .eb-btn--primary          emerald fill — primary CTA
   .eb-btn--gold             amber fill — secondary CTA
   .eb-btn--outline          transparent + white border
   .eb-btn--outline-gold     transparent + gold border
   .eb-btn--ghost            text only, no border
   .eb-btn--icon             square icon-only button

   SIZE MODIFIERS
   .eb-btn--sm               smaller pill
   .eb-btn--lg               larger pill

   STATES
   .is-loading               spinner replaces label
   :disabled                 muted, cursor not-allowed
   ========================================================================== */

/* ── Base ────────────────────────────────────────────────────────────────── */

.eb-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--eb-space-2);
  padding:         0.75rem 1.75rem;
  font-family:     var(--eb-font-body);
  font-size:       var(--eb-text-sm);
  font-weight:     var(--eb-weight-semibold);
  letter-spacing:  var(--eb-tracking-wide);
  text-transform:  uppercase;
  line-height:     1;
  white-space:     nowrap;
  border-radius:   var(--eb-radius-full);
  border:          1.5px solid transparent;
  cursor:          pointer;
  text-decoration: none;
  position:        relative;
  overflow:        hidden;
  transition:      background var(--eb-duration-normal) var(--eb-ease-out),
                   color var(--eb-duration-normal) var(--eb-ease-out),
                   border-color var(--eb-duration-normal) var(--eb-ease-out),
                   box-shadow var(--eb-duration-normal) var(--eb-ease-out),
                   transform var(--eb-duration-fast) var(--eb-ease-out);
  user-select:     none;
  -webkit-tap-highlight-color: transparent;
}

.eb-btn:focus-visible {
  outline:        2px solid var(--eb-color-emerald-light);
  outline-offset: 3px;
}

.eb-btn:active {
  transform: scale(0.975);
}

/* ── Primary — emerald fill ─────────────────────────────────────────────── */

.eb-btn--primary {
  background:   var(--eb-gradient-emerald-bright);
  color:        var(--eb-color-white);
  border-color: transparent;
  box-shadow:   var(--eb-shadow-emerald);
}

.eb-btn--primary::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: rgba(255, 255, 255, 0.06);
  opacity:    0;
  transition: opacity var(--eb-duration-normal) var(--eb-ease-out);
}

.eb-btn--primary:hover {
  box-shadow: 0 12px 32px rgba(6, 78, 59, 0.55);
}

.eb-btn--primary:hover::after {
  opacity: 1;
}

/* ── Gold — amber fill ──────────────────────────────────────────────────── */

.eb-btn--gold {
  background:   var(--eb-gradient-gold);
  color:        var(--eb-color-black);
  border-color: transparent;
  box-shadow:   var(--eb-shadow-gold-sm);
}

.eb-btn--gold:hover {
  box-shadow: var(--eb-shadow-gold);
}

/* ── Outline — white border ─────────────────────────────────────────────── */

.eb-btn--outline {
  background:   transparent;
  color:        var(--eb-text-primary);
  border-color: var(--eb-border-default);
}

.eb-btn--outline:hover {
  background:   var(--eb-surface-glass);
  border-color: var(--eb-border-strong);
}

/* ── Outline gold ───────────────────────────────────────────────────────── */

.eb-btn--outline-gold {
  background:   transparent;
  color:        var(--eb-color-gold);
  border-color: var(--eb-border-gold);
}

.eb-btn--outline-gold:hover {
  background:   var(--eb-color-gold-subtle);
  border-color: var(--eb-border-gold-strong);
}

/* ── Ghost — text only ──────────────────────────────────────────────────── */

.eb-btn--ghost {
  background:   transparent;
  color:        var(--eb-text-secondary);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

.eb-btn--ghost:hover {
  color: var(--eb-text-primary);
}

/* Arrow indicator on ghost/text CTAs */
.eb-btn--ghost .eb-btn__arrow {
  display:    inline-block;
  transition: transform var(--eb-duration-fast) var(--eb-ease-out);
}

.eb-btn--ghost:hover .eb-btn__arrow {
  transform: translateX(4px);
}

/* ── Icon button ────────────────────────────────────────────────────────── */

.eb-btn--icon {
  padding:       0.75rem;
  aspect-ratio:  1;
  border-radius: var(--eb-radius-md);
}

/* ── Size modifiers ─────────────────────────────────────────────────────── */

.eb-btn--sm {
  padding:       0.5rem 1.25rem;
  font-size:     var(--eb-text-xs);
  letter-spacing: var(--eb-tracking-widest);
}

.eb-btn--lg {
  padding:   1rem 2.5rem;
  font-size: var(--eb-text-base);
}

/* ── Disabled state ─────────────────────────────────────────────────────── */

.eb-btn:disabled,
.eb-btn[aria-disabled='true'] {
  opacity:        0.45;
  cursor:         not-allowed;
  pointer-events: none;
  box-shadow:     none;
}

/* ── Loading state ──────────────────────────────────────────────────────── */

.eb-btn.is-loading {
  cursor:         default;
  pointer-events: none;
}

.eb-btn.is-loading .eb-btn__label {
  opacity: 0;
}

.eb-btn.is-loading::before {
  content:       '';
  position:      absolute;
  width:         16px;
  height:        16px;
  border:        2px solid rgba(255, 255, 255, 0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation:     eb-btn-spin 0.6s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .eb-btn.is-loading::before {
    animation: none;
    content:   '…';
    border:    0;
    width:     auto;
    height:    auto;
  }
}

/* ── CTA group layout ───────────────────────────────────────────────────── */

.eb-cta-group {
  display:     flex;
  align-items: center;
  gap:         var(--eb-space-4);
  flex-wrap:   wrap;
}