/**
 * Telecom Voucher — Button rug (Tabler-adjacent)
 * Extends Bootstrap .btn under .tv-theme: solid / outline / ghost / shapes / extra palette / icon / social.
 * Pair with: design-system.css (.tv-btn-* for non-Bootstrap controls).
 */

.tv-theme {
  /* Extra palette (solid + outline pairs) — Tabler-style named hues */
  --tv-btn-blue: #206bc4;
  --tv-btn-azure: #4299e1;
  --tv-btn-indigo: #4263eb;
  --tv-btn-purple: #ae3ec9;
  --tv-btn-pink: #d6336c;
  --tv-btn-red: #d63939;
  --tv-btn-orange: #f76707;
  --tv-btn-yellow: #f59f00;
  --tv-btn-lime: #74b816;
  --tv-btn-green: #2fb344;
  --tv-btn-teal: #0ca678;
  --tv-btn-cyan: #17a2b8;
}

.tv-theme .btn {
  padding: 0.5rem 1.125rem;
  font-weight: 600;
  border-radius: var(--tv-radius-md);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* ----- Solid semantic (Bootstrap names, flat + token-aware) ----- */
.tv-theme .btn-success {
  background: var(--tv-success, #16a34a);
  border-color: var(--tv-success, #16a34a);
  color: #fff;
  font-weight: 500;
  box-shadow: none;
}

.tv-theme .btn-success:hover,
.tv-theme .btn-success:focus {
  background: color-mix(in srgb, var(--tv-success, #16a34a) 88%, #000);
  border-color: color-mix(in srgb, var(--tv-success, #16a34a) 88%, #000);
  color: #fff;
}

.tv-theme .btn-warning {
  background: var(--tv-warning, #f59e0b);
  border-color: var(--tv-warning, #f59e0b);
  color: var(--tv-slate-900, #0f172a);
  font-weight: 500;
  box-shadow: none;
}

.tv-theme .btn-warning:hover,
.tv-theme .btn-warning:focus {
  background: color-mix(in srgb, var(--tv-warning) 90%, #000);
  border-color: color-mix(in srgb, var(--tv-warning) 90%, #000);
  color: var(--tv-slate-900, #0f172a);
}

.tv-theme .btn-info {
  background: var(--tv-info, #0ea5e9);
  border-color: var(--tv-info, #0ea5e9);
  color: #fff;
  font-weight: 500;
  box-shadow: none;
}

.tv-theme .btn-info:hover,
.tv-theme .btn-info:focus {
  background: color-mix(in srgb, var(--tv-info, #0ea5e9) 85%, #000);
  border-color: color-mix(in srgb, var(--tv-info, #0ea5e9) 85%, #000);
  color: #fff;
}

.tv-theme .btn-light {
  background: var(--tv-slate-100, #f1f5f9);
  border: 1px solid var(--tv-border, #e2e8f0);
  color: var(--tv-text, #0f172a);
  font-weight: 500;
  box-shadow: none;
}

.tv-theme .btn-light:hover,
.tv-theme .btn-light:focus {
  background: var(--tv-slate-200, #e2e8f0);
  border-color: var(--tv-border-strong, #cbd5e1);
  color: var(--tv-text, #0f172a);
}

.tv-theme .btn-dark {
  background: var(--tv-slate-800, #1e293b);
  border-color: var(--tv-slate-800, #1e293b);
  color: #fff;
  font-weight: 500;
  box-shadow: none;
}

.tv-theme .btn-dark:hover,
.tv-theme .btn-dark:focus {
  background: var(--tv-slate-900, #0f172a);
  border-color: var(--tv-slate-900, #0f172a);
  color: #fff;
}

html[data-theme="dark"] .tv-theme .btn-light {
  background: color-mix(in srgb, var(--tv-surface-elevated) 85%, #fff 15%);
  border-color: var(--tv-border-strong);
  color: var(--tv-text);
}

html[data-theme="dark"] .tv-theme .btn-light:hover,
html[data-theme="dark"] .tv-theme .btn-light:focus {
  background: color-mix(in srgb, var(--tv-surface-elevated) 75%, #fff 25%);
  color: var(--tv-text);
}

/* ----- Outline refinements (1px, no heavy shadow) ----- */
.tv-theme .btn-outline-primary {
  color: var(--tv-primary);
  border-color: color-mix(in srgb, var(--tv-primary) 55%, var(--tv-border));
  background: transparent;
}

.tv-theme .btn-outline-primary:hover,
.tv-theme .btn-outline-primary:focus {
  background: var(--tv-primary-soft);
  color: var(--tv-primary-deep, var(--tv-primary));
  border-color: var(--tv-primary);
}

.tv-theme .btn-outline-secondary {
  color: var(--tv-text-secondary);
  border-color: var(--tv-border-strong);
  background: transparent;
}

.tv-theme .btn-outline-secondary:hover,
.tv-theme .btn-outline-secondary:focus {
  background: var(--tv-bg-muted);
  color: var(--tv-text);
  border-color: var(--tv-text-secondary);
}

.tv-theme .btn-outline-success {
  color: var(--tv-success-text, #166534);
  border-color: color-mix(in srgb, var(--tv-success) 45%, var(--tv-border));
  background: transparent;
}

.tv-theme .btn-outline-success:hover,
.tv-theme .btn-outline-success:focus {
  background: var(--tv-success-soft);
  color: var(--tv-success-text, #14532d);
  border-color: var(--tv-success);
}

.tv-theme .btn-outline-danger {
  color: var(--tv-danger);
  border-color: color-mix(in srgb, var(--tv-danger) 50%, var(--tv-border));
  background: transparent;
}

.tv-theme .btn-outline-danger:hover,
.tv-theme .btn-outline-danger:focus {
  background: var(--tv-danger-soft);
  color: var(--tv-danger-text, #b91c1c);
  border-color: var(--tv-danger);
}

.tv-theme .btn-outline-warning {
  color: color-mix(in srgb, var(--tv-warning) 85%, #000);
  border-color: color-mix(in srgb, var(--tv-warning) 55%, var(--tv-border));
  background: transparent;
}

.tv-theme .btn-outline-warning:hover,
.tv-theme .btn-outline-warning:focus {
  background: var(--tv-warning-soft);
  border-color: var(--tv-warning);
}

.tv-theme .btn-outline-info {
  color: var(--tv-info);
  border-color: color-mix(in srgb, var(--tv-info) 50%, var(--tv-border));
  background: transparent;
}

.tv-theme .btn-outline-info:hover,
.tv-theme .btn-outline-info:focus {
  background: var(--tv-info-soft);
  border-color: var(--tv-info);
}

.tv-theme .btn-outline-dark {
  color: var(--tv-slate-800);
  border-color: var(--tv-slate-600);
  background: transparent;
}

.tv-theme .btn-outline-dark:hover,
.tv-theme .btn-outline-dark:focus {
  background: var(--tv-slate-800);
  color: #fff;
  border-color: var(--tv-slate-800);
}

.tv-theme .btn-outline-light {
  color: var(--tv-text);
  border-color: var(--tv-border-strong);
  background: transparent;
}

.tv-theme .btn-outline-light:hover,
.tv-theme .btn-outline-light:focus {
  background: var(--tv-bg-muted);
  color: var(--tv-text);
}

html[data-theme="dark"] .tv-theme .btn-outline-light {
  color: var(--tv-text);
  border-color: rgba(255, 255, 255, 0.28);
}

/* ----- Ghost (text-only + hover wash) ----- */
.tv-theme .btn.btn-tv-ghost-primary,
.tv-theme .btn.btn-tv-ghost-secondary,
.tv-theme .btn.btn-tv-ghost-success,
.tv-theme .btn.btn-tv-ghost-danger,
.tv-theme .btn.btn-tv-ghost-warning,
.tv-theme .btn.btn-tv-ghost-info,
.tv-theme .btn.btn-tv-ghost-dark {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.tv-theme .btn.btn-tv-ghost-primary {
  color: var(--tv-primary);
}
.tv-theme .btn.btn-tv-ghost-primary:hover,
.tv-theme .btn.btn-tv-ghost-primary:focus {
  background: var(--tv-primary-soft);
  color: var(--tv-primary-deep);
}

.tv-theme .btn.btn-tv-ghost-secondary {
  color: var(--tv-text-secondary);
}
.tv-theme .btn.btn-tv-ghost-secondary:hover,
.tv-theme .btn.btn-tv-ghost-secondary:focus {
  background: var(--tv-bg-muted);
  color: var(--tv-text);
}

.tv-theme .btn.btn-tv-ghost-success {
  color: var(--tv-success-text, #166534);
}
.tv-theme .btn.btn-tv-ghost-success:hover,
.tv-theme .btn.btn-tv-ghost-success:focus {
  background: var(--tv-success-soft);
}

.tv-theme .btn.btn-tv-ghost-danger {
  color: var(--tv-danger);
}
.tv-theme .btn.btn-tv-ghost-danger:hover,
.tv-theme .btn.btn-tv-ghost-danger:focus {
  background: var(--tv-danger-soft);
}

.tv-theme .btn.btn-tv-ghost-warning {
  color: color-mix(in srgb, var(--tv-warning) 90%, #000);
}
.tv-theme .btn.btn-tv-ghost-warning:hover,
.tv-theme .btn.btn-tv-ghost-warning:focus {
  background: var(--tv-warning-soft);
}

.tv-theme .btn.btn-tv-ghost-info {
  color: var(--tv-info);
}
.tv-theme .btn.btn-tv-ghost-info:hover,
.tv-theme .btn.btn-tv-ghost-info:focus {
  background: var(--tv-info-soft);
}

.tv-theme .btn.btn-tv-ghost-dark {
  color: var(--tv-slate-700);
}
.tv-theme .btn.btn-tv-ghost-dark:hover,
.tv-theme .btn.btn-tv-ghost-dark:focus {
  background: var(--tv-slate-200);
  color: var(--tv-slate-900);
}

html[data-theme="dark"] .tv-theme .btn.btn-tv-ghost-dark:hover,
html[data-theme="dark"] .tv-theme .btn.btn-tv-ghost-dark:focus {
  background: rgba(255, 255, 255, 0.08);
  color: var(--tv-text);
}

.tv-theme .btn[class*="btn-tv-ghost"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tv-surface, #fff), 0 0 0 4px rgba(var(--tv-primary-rgb, 58, 90, 156), 0.3);
}

/* ----- Shapes ----- */
.tv-theme .btn.btn-tv-square {
  border-radius: 0;
}

.tv-theme .btn.btn-tv-pill {
  border-radius: var(--tv-radius-full, 9999px);
}

/* ----- Extra solid colors ----- */
.tv-theme .btn[class*="btn-tv-"]:not([class*="btn-tv-social"]):not(.btn-tv-icon):not([class*="btn-tv-ghost"]) {
  border: 1px solid transparent;
  color: #fff;
  font-weight: 500;
  box-shadow: none;
}

.tv-theme .btn.btn-tv-blue {
  background: var(--tv-btn-blue);
  border-color: var(--tv-btn-blue);
}
.tv-theme .btn.btn-tv-azure {
  background: var(--tv-btn-azure);
  border-color: var(--tv-btn-azure);
}
.tv-theme .btn.btn-tv-indigo {
  background: var(--tv-btn-indigo);
  border-color: var(--tv-btn-indigo);
}
.tv-theme .btn.btn-tv-purple {
  background: var(--tv-btn-purple);
  border-color: var(--tv-btn-purple);
}
.tv-theme .btn.btn-tv-pink {
  background: var(--tv-btn-pink);
  border-color: var(--tv-btn-pink);
}
.tv-theme .btn.btn-tv-red {
  background: var(--tv-btn-red);
  border-color: var(--tv-btn-red);
}
.tv-theme .btn.btn-tv-orange {
  background: var(--tv-btn-orange);
  border-color: var(--tv-btn-orange);
}
.tv-theme .btn.btn-tv-yellow {
  background: var(--tv-btn-yellow);
  border-color: var(--tv-btn-yellow);
  color: var(--tv-slate-900);
}
.tv-theme .btn.btn-tv-lime {
  background: var(--tv-btn-lime);
  border-color: var(--tv-btn-lime);
  color: var(--tv-slate-900);
}
.tv-theme .btn.btn-tv-green {
  background: var(--tv-btn-green);
  border-color: var(--tv-btn-green);
}
.tv-theme .btn.btn-tv-teal {
  background: var(--tv-btn-teal);
  border-color: var(--tv-btn-teal);
}
.tv-theme .btn.btn-tv-cyan {
  background: var(--tv-btn-cyan);
  border-color: var(--tv-btn-cyan);
}

.tv-theme .btn.btn-tv-blue:hover,
.tv-theme .btn.btn-tv-azure:hover,
.tv-theme .btn.btn-tv-indigo:hover,
.tv-theme .btn.btn-tv-purple:hover,
.tv-theme .btn.btn-tv-pink:hover,
.tv-theme .btn.btn-tv-red:hover,
.tv-theme .btn.btn-tv-orange:hover,
.tv-theme .btn.btn-tv-yellow:hover,
.tv-theme .btn.btn-tv-lime:hover,
.tv-theme .btn.btn-tv-green:hover,
.tv-theme .btn.btn-tv-teal:hover,
.tv-theme .btn.btn-tv-cyan:hover {
  filter: brightness(0.95);
  color: inherit;
}

/* ----- Icon button ----- */
.tv-theme .btn.btn-tv-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border-radius: var(--tv-radius-md, 6px);
}

.tv-theme .btn.btn-tv-icon.btn-sm {
  width: 2rem;
  height: 2rem;
}

/* ----- Social (flat brand blocks) ----- */
.tv-theme .btn.btn-tv-social {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  max-width: 20rem;
  font-weight: 500;
  border: none;
  color: #fff;
  box-shadow: none;
  border-radius: var(--tv-radius-md, 6px);
}

.tv-theme .btn.btn-tv-social svg,
.tv-theme .btn.btn-tv-social .tv-social-icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
}

.tv-theme .btn.btn-tv-social--facebook {
  background: #1877f2;
}
.tv-theme .btn.btn-tv-social--twitter {
  background: #1d9bf0;
}
.tv-theme .btn.btn-tv-social--github {
  background: #24292f;
}
.tv-theme .btn.btn-tv-social--linkedin {
  background: #0a66c2;
}
.tv-theme .btn.btn-tv-social--instagram {
  background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af);
}

.tv-theme .btn.btn-tv-social:hover {
  filter: brightness(1.06);
  color: #fff;
}

/* ----- Focus parity ----- */
.tv-theme .btn-success:focus-visible,
.tv-theme .btn-warning:focus-visible,
.tv-theme .btn-info:focus-visible,
.tv-theme .btn-light:focus-visible,
.tv-theme .btn-dark:focus-visible,
.tv-theme .btn[class*="btn-tv-"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tv-surface, #fff), 0 0 0 4px rgba(var(--tv-primary-rgb, 58, 90, 156), 0.35);
}

html[data-theme="dark"] .tv-theme .btn-success:focus-visible,
html[data-theme="dark"] .tv-theme .btn[class*="btn-tv-"]:focus-visible {
  box-shadow: 0 0 0 2px var(--tv-slate-900), 0 0 0 4px rgba(var(--tv-primary-rgb, 96, 165, 250), 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .tv-theme .btn {
    transition: none !important;
  }
}