/*
 * buttons.css
 * SEO Engine Design System — Button Components
 * Tickets: UI-0024 through UI-0035
 *
 * Depends on tokens.css for CSS custom properties:
 *   --color-electric, --color-electric-hover, --color-electric-light,
 *   --shadow-glow, --shadow-inner, --space-* tokens
 */

/* ==========================================================================
   SPINNER KEYFRAMES (UI-0029)
   ========================================================================== */

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

/* ==========================================================================
   BASE BUTTON RESET
   ========================================================================== */

.btn-primary,
.btn-secondary,
.btn-secondary-dark,
.btn-ghost,
.btn-destructive,
.btn-icon,
.btn-icon-sm,
.btn-icon-lg {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              8px;
  font-family:      var(--font-body, 'Inter', sans-serif);
  font-weight:      600;
  font-size:        16px;
  line-height:      1.25;
  border-radius:    12px;
  border:           none;
  cursor:           pointer;
  text-decoration:  none;
  position:         relative;
  transition:
    background-color 200ms ease,
    box-shadow       200ms ease,
    transform        200ms ease,
    border-color     200ms ease,
    opacity          200ms ease;
  /* i18n: default to nowrap; see .btn-wrap modifier below */
  white-space:      nowrap;
  /* Prevent text selection on rapid clicks */
  user-select:      none;
  -webkit-user-select: none;
}

/* ==========================================================================
   PRIMARY BUTTON (UI-0024)
   Sizes: md (default), sm, lg
   ========================================================================== */

/* --- Size: md (default) --- */
.btn-primary {
  min-height:        44px;
  padding:           10px 24px; /* 20px top/bottom visual space with line-height */
  background:        linear-gradient(135deg, #2F80ED 0%, #1A6ED8 100%);
  color:             #ffffff;
  border-radius:     10px;
}

/* --- Size: sm --- */
.btn-primary.btn-sm {
  min-height:  36px;
  padding:     6px 16px;
  font-size:   14px;
}

/* --- Size: lg --- */
.btn-primary.btn-lg {
  min-height:  52px;
  padding:     16px 36px;
  font-size:   1.125rem;
}

/* --- Hover (UI-0025) --- */
.btn-primary:hover:not(:disabled):not(.is-loading) {
  background:  linear-gradient(135deg, #4A9AF5 0%, #2F80ED 100%);
  box-shadow:  0 0 0 3px rgba(47, 128, 237, 0.25), 0 8px 20px -4px rgba(47, 128, 237, 0.30);
  transform:   translateY(-1px);
}

/* --- Active / Pressed (UI-0026) --- */
.btn-primary:active:not(:disabled):not(.is-loading) {
  background-color: #1A6ED8;
  box-shadow:       var(--shadow-inner, inset 0 2px 4px rgba(0, 0, 0, 0.15));
  transform:        translateY(0);
}

/* --- Focus (UI-0027) --- */
.btn-primary:focus-visible {
  outline:        2px solid var(--color-electric, #2F80ED);
  outline-offset: 2px;
}

/* --- Disabled (UI-0028) --- */
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  background-color: var(--color-gray, #B0BAC5);
  color:            rgba(255, 255, 255, 0.8);
  cursor:           not-allowed;
  transform:        none;
  box-shadow:       none;
  pointer-events:   none;
}

/* --- Loading (UI-0029) --- */
.btn-primary.is-loading {
  opacity:        0.70;
  cursor:         wait;
  pointer-events: none;
}

.btn-primary.is-loading .btn-text {
  visibility: hidden;
  width:      0;
  overflow:   hidden;
}

.btn-primary.is-loading::after {
  content:      '';
  display:      block;
  width:        18px;
  height:       18px;
  border:       2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation:    btn-spin 600ms linear infinite;
  position:     absolute;
  top:          50%;
  left:         50%;
  margin-top:   -9px;
  margin-left:  -9px;
}

/* ==========================================================================
   SECONDARY BUTTON (UI-0030)
   Transparent background, blue border + text
   ========================================================================== */

.btn-secondary {
  min-height:        44px;
  padding:           10px 24px;
  background-color:  transparent;
  color:             var(--color-electric, #2F80ED);
  border:            1.5px solid var(--color-electric, #2F80ED);
  border-radius:     10px;
}

.btn-secondary.btn-sm {
  min-height:  36px;
  padding:     6px 16px;
  font-size:   14px;
}

.btn-secondary.btn-lg {
  min-height:  52px;
  padding:     14px 32px;
  font-size:   18px;
}

.btn-secondary:hover:not(:disabled):not(.is-loading) {
  background-color: var(--color-electric-10, rgba(47, 128, 237, 0.08));
  box-shadow:       var(--shadow-glow, 0 0 0 4px rgba(47, 128, 237, 0.15));
  transform:        translateY(-1px);
}

.btn-secondary:active:not(:disabled):not(.is-loading) {
  background-color: var(--color-electric-20, rgba(47, 128, 237, 0.14));
  transform:        translateY(0);
}

.btn-secondary:focus-visible {
  outline:        2px solid var(--color-electric, #2F80ED);
  outline-offset: 2px;
}

.btn-secondary:disabled,
.btn-secondary[aria-disabled="true"] {
  border-color:   var(--color-gray, #B0BAC5);
  color:          var(--color-gray, #B0BAC5);
  cursor:         not-allowed;
  transform:      none;
  box-shadow:     none;
  pointer-events: none;
}

.btn-secondary.is-loading {
  opacity:        0.70;
  cursor:         wait;
  pointer-events: none;
}

.btn-secondary.is-loading::after {
  content:          '';
  display:          block;
  width:            18px;
  height:           18px;
  border:           2px solid rgba(47, 128, 237, 0.30);
  border-top-color: var(--color-electric, #2F80ED);
  border-radius:    50%;
  animation:        btn-spin 600ms linear infinite;
  position:         absolute;
  top:              50%;
  left:             50%;
  margin-top:       -9px;
  margin-left:      -9px;
}

/* ==========================================================================
   SECONDARY DARK BUTTON (UI-0031)
   For use on dark (#0A2540) backgrounds
   ========================================================================== */

.btn-secondary-dark {
  min-height:        44px;
  padding:           10px 24px;
  background-color:  transparent;
  color:             #ffffff;
  border:            1.5px solid rgba(255, 255, 255, 0.30);
  border-radius:     10px;
}

.btn-secondary-dark.btn-sm {
  min-height:  36px;
  padding:     6px 16px;
  font-size:   14px;
}

.btn-secondary-dark.btn-lg {
  min-height:  52px;
  padding:     14px 32px;
  font-size:   18px;
}

.btn-secondary-dark:hover:not(:disabled):not(.is-loading) {
  background-color: rgba(255, 255, 255, 0.08);
  border-color:     rgba(255, 255, 255, 0.50);
  transform:        translateY(-1px);
}

.btn-secondary-dark:active:not(:disabled):not(.is-loading) {
  background-color: rgba(255, 255, 255, 0.12);
  transform:        translateY(0);
}

.btn-secondary-dark:focus-visible {
  outline:        2px solid rgba(255, 255, 255, 0.80);
  outline-offset: 2px;
}

.btn-secondary-dark:disabled,
.btn-secondary-dark[aria-disabled="true"] {
  border-color:   rgba(255, 255, 255, 0.15);
  color:          rgba(255, 255, 255, 0.35);
  cursor:         not-allowed;
  transform:      none;
  box-shadow:     none;
  pointer-events: none;
}

/* ==========================================================================
   GHOST BUTTON (UI-0032)
   No border, blue text, subtle hover background
   ========================================================================== */

.btn-ghost {
  min-height:       44px;
  padding:          10px 16px;
  background-color: transparent;
  color:            var(--color-electric, #2F80ED);
  border:           none;
  border-radius:    8px;
}

.btn-ghost.btn-sm {
  min-height:  36px;
  padding:     6px 12px;
  font-size:   14px;
}

.btn-ghost.btn-lg {
  min-height:  52px;
  padding:     14px 20px;
  font-size:   18px;
}

.btn-ghost:hover:not(:disabled):not(.is-loading) {
  background-color: var(--color-electric-10, rgba(47, 128, 237, 0.08));
}

.btn-ghost:active:not(:disabled):not(.is-loading) {
  background-color: var(--color-electric-20, rgba(47, 128, 237, 0.14));
}

/* Focus ring (Finding #6 from spec) */
.btn-ghost:focus-visible {
  outline:        2px solid var(--color-electric, #2F80ED);
  outline-offset: 2px;
}

.btn-ghost:disabled,
.btn-ghost[aria-disabled="true"] {
  color:          var(--color-gray, #B0BAC5);
  cursor:         not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   DESTRUCTIVE BUTTON (UI-0033)
   Red background, white text, red focus ring
   ========================================================================== */

.btn-destructive {
  min-height:        44px;
  padding:           10px 24px;
  background-color:  var(--color-error, #EF4444);
  color:             #ffffff;
  border:            none;
  border-radius:     12px;
}

.btn-destructive.btn-sm {
  min-height:  36px;
  padding:     6px 16px;
  font-size:   14px;
}

.btn-destructive.btn-lg {
  min-height:  52px;
  padding:     14px 32px;
  font-size:   18px;
}

.btn-destructive:hover:not(:disabled):not(.is-loading) {
  background-color: #DC2626;
  box-shadow:       0 0 0 4px rgba(239, 68, 68, 0.25);
  transform:        translateY(-1px);
}

.btn-destructive:active:not(:disabled):not(.is-loading) {
  background-color: #B91C1C;
  box-shadow:       inset 0 2px 4px rgba(0, 0, 0, 0.15);
  transform:        translateY(0);
}

/* Red focus outline (Finding #8 from spec) */
.btn-destructive:focus-visible {
  outline:        2px solid var(--color-error, #EF4444);
  outline-offset: 2px;
}

.btn-destructive:disabled,
.btn-destructive[aria-disabled="true"] {
  background-color: var(--color-gray, #B0BAC5);
  cursor:           not-allowed;
  transform:        none;
  box-shadow:       none;
  pointer-events:   none;
}

.btn-destructive.is-loading {
  opacity:        0.70;
  cursor:         wait;
  pointer-events: none;
}

.btn-destructive.is-loading::after {
  content:          '';
  display:          block;
  width:            18px;
  height:           18px;
  border:           2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius:    50%;
  animation:        btn-spin 600ms linear infinite;
  position:         absolute;
  top:              50%;
  left:             50%;
  margin-top:       -9px;
  margin-left:      -9px;
}

/* ==========================================================================
   ICON BUTTON (UI-0034)
   Square buttons with centered icon; three sizes
   ========================================================================== */

/* --- Size: sm (36px) --- */
.btn-icon-sm {
  width:            36px;
  height:           36px;
  min-height:       36px;
  padding:          0;
  background-color: transparent;
  color:            var(--text-secondary, #4A5568);
  border:           none;
  border-radius:    8px;
  flex-shrink:      0;
}

.btn-icon-sm svg,
.btn-icon-sm .icon {
  width:  16px;
  height: 16px;
}

/* --- Size: md (default, 44px) --- */
.btn-icon {
  width:            44px;
  height:           44px;
  min-height:       44px;
  padding:          0;
  background-color: transparent;
  color:            var(--text-secondary, #4A5568);
  border:           none;
  border-radius:    8px;
  flex-shrink:      0;
}

.btn-icon svg,
.btn-icon .icon {
  width:  20px;
  height: 20px;
}

/* --- Size: lg (52px) --- */
.btn-icon-lg {
  width:            52px;
  height:           52px;
  min-height:       52px;
  padding:          0;
  background-color: transparent;
  color:            var(--text-secondary, #4A5568);
  border:           none;
  border-radius:    8px;
  flex-shrink:      0;
}

.btn-icon-lg svg,
.btn-icon-lg .icon {
  width:  24px;
  height: 24px;
}

/* Shared hover/active/focus for all icon button sizes */
.btn-icon-sm:hover:not(:disabled),
.btn-icon:hover:not(:disabled),
.btn-icon-lg:hover:not(:disabled) {
  background-color: var(--color-electric-10, rgba(47, 128, 237, 0.08));
  color:            var(--color-electric, #2F80ED);
}

.btn-icon-sm:active:not(:disabled),
.btn-icon:active:not(:disabled),
.btn-icon-lg:active:not(:disabled) {
  background-color: var(--color-electric-20, rgba(47, 128, 237, 0.14));
}

/* Focus: light background (Finding #7) */
.btn-icon-sm:focus-visible,
.btn-icon:focus-visible,
.btn-icon-lg:focus-visible {
  outline:        2px solid var(--color-electric, #2F80ED);
  outline-offset: 2px;
}

/* Variant: dark background */
.btn-icon-sm.on-dark,
.btn-icon.on-dark,
.btn-icon-lg.on-dark {
  color: rgba(255, 255, 255, 0.70);
}

.btn-icon-sm.on-dark:hover:not(:disabled),
.btn-icon.on-dark:hover:not(:disabled),
.btn-icon-lg.on-dark:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.10);
  color:            #ffffff;
}

/* Focus on dark: white outline (Finding #7) */
.btn-icon-sm.on-dark:focus-visible,
.btn-icon.on-dark:focus-visible,
.btn-icon-lg.on-dark:focus-visible {
  outline-color: rgba(255, 255, 255, 0.80);
}

.btn-icon-sm:disabled,
.btn-icon:disabled,
.btn-icon-lg:disabled {
  color:          var(--color-gray, #B0BAC5);
  cursor:         not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   i18n OVERFLOW HANDLING (UI-0035)
   Default: nowrap (already set on base)
   Modifier: allow wrapping with min-height guard for long labels
   ========================================================================== */

/*
 * Apply .btn-wrap to any button when long translated text (e.g., German, Finnish)
 * would overflow at narrow widths (tested at 280px mobile).
 * The explicit min-height for each variant ensures the button stays tappable.
 */
.btn-primary.btn-wrap,
.btn-secondary.btn-wrap,
.btn-secondary-dark.btn-wrap,
.btn-ghost.btn-wrap,
.btn-destructive.btn-wrap {
  white-space: normal;
  text-align:  center;
}

/* Guarantee min-heights are preserved when text wraps */
.btn-primary.btn-wrap         { min-height: 44px; }
.btn-primary.btn-sm.btn-wrap  { min-height: 36px; }
.btn-primary.btn-lg.btn-wrap  { min-height: 52px; }

.btn-secondary.btn-wrap         { min-height: 44px; }
.btn-secondary.btn-sm.btn-wrap  { min-height: 36px; }
.btn-secondary.btn-lg.btn-wrap  { min-height: 52px; }

.btn-secondary-dark.btn-wrap         { min-height: 44px; }
.btn-secondary-dark.btn-sm.btn-wrap  { min-height: 36px; }
.btn-secondary-dark.btn-lg.btn-wrap  { min-height: 52px; }

.btn-ghost.btn-wrap         { min-height: 44px; }
.btn-ghost.btn-sm.btn-wrap  { min-height: 36px; }
.btn-ghost.btn-lg.btn-wrap  { min-height: 52px; }

.btn-destructive.btn-wrap         { min-height: 44px; }
.btn-destructive.btn-sm.btn-wrap  { min-height: 36px; }
.btn-destructive.btn-lg.btn-wrap  { min-height: 52px; }

/* Full-width button utility */
.btn-full {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Buttons — Mobile Responsive Fixes
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Large buttons slightly smaller on mobile */
  .btn-primary.btn-lg {
    min-height: 48px;
    padding: 14px 28px;
    font-size: 1rem;
  }

  .btn-secondary.btn-lg,
  .btn-secondary-dark.btn-lg {
    min-height: 48px;
    padding: 12px 24px;
    font-size: 1rem;
  }

  /* Default buttons tighter padding */
  .btn-primary,
  .btn-secondary,
  .btn-secondary-dark {
    font-size: 0.9375rem;
  }
}

@media (max-width: 374px) {
  .btn-primary.btn-lg {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 0.9375rem;
  }

  .btn-secondary.btn-lg,
  .btn-secondary-dark.btn-lg {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 0.9375rem;
  }
}

/* --------------------------------------------------------------------------
   Buttons — Enhanced Mobile Touch Targets
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  /* Ensure all buttons meet 44px min touch target on mobile */
  .btn-primary,
  .btn-secondary,
  .btn-secondary-dark,
  .btn-ghost,
  .btn-destructive {
    min-height: 44px;
    min-width: 44px;
  }

  /* Small buttons bump up to 44px touch target on mobile */
  .btn-primary.btn-sm,
  .btn-secondary.btn-sm,
  .btn-secondary-dark.btn-sm,
  .btn-ghost.btn-sm,
  .btn-destructive.btn-sm {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Icon buttons: ensure 44px minimum */
  .btn-icon-sm {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  /* Full-width stacked buttons in narrow containers */
  .btn-stack-mobile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .btn-stack-mobile .btn-primary,
  .btn-stack-mobile .btn-secondary,
  .btn-stack-mobile .btn-secondary-dark,
  .btn-stack-mobile .btn-ghost,
  .btn-stack-mobile .btn-destructive {
    width: 100%;
  }
}