/* =====================================
   eBuy Button Component – FULL STATES
===================================== */

.eb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;

  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.05s ease;
}

/* ---------- Sizes ---------- */

.eb-btn-sm {
  padding: 6px 12px;
  font-size: 0.85rem;
  border-radius: var(--eb-radius-sm);
}

.eb-btn-lg {
  padding: 12px 20px;
  font-size: 1rem;
  border-radius: var(--radius-lg);
}

/* ---------- Variants ---------- */

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

.eb-btn-secondary {
  background: var(--eb-btn-secondary-bg);
  color: var(--eb-btn-secondary-text);
  border-color: var(--eb-btn-secondary-border);
}

.eb-btn-white {
  background: var(--eb-btn-white-bg);
  color: var(--eb-btn-white-text);
  border-color: var(--eb-btn-white-border);
}

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

.eb-btn-ghost {
  background: transparent;
  color: var(--eb-btn-ghost-text);
}

.eb-btn-success {
  background: var(--eb-btn-success-bg);
  color: var(--eb-btn-success-text);
  border-color: var(--eb-btn-success-border);
}

.eb-btn-warning {
  background: var(--eb-btn-warning-bg);
  color: var(--eb-btn-warning-text);
  border-color: var(--eb-btn-warning-border);
}

.eb-btn-info {
  background: var(--eb-btn-info-bg);
  color: var(--eb-btn-info-text);
  border-color: var(--eb-btn-info-border);
}

.eb-btn-light {
  background: var(--eb-btn-light-bg);
  color: var(--eb-btn-light-text);
  border-color: var(--eb-btn-light-border);
}

.eb-btn-dark {
  background: var(--eb-btn-dark-bg);
  color: var(--eb-btn-dark-text);
  border-color: var(--eb-btn-dark-border);
}

.eb-btn-danger {
  background: var(--eb-btn-danger-bg);
  color: var(--eb-btn-danger-text);
  border-color: var(--eb-btn-danger-border);
}

.eb-btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--eb-btn-link-text);
  padding: 0;
}

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

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

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

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

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

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

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

/* ---------- Hover ---------- */

.eb-btn:not(:disabled):hover {
  box-shadow: var(--eb-shadow-sm);
}

.eb-btn-primary:hover {
  background: var(--eb-btn-primary-hover-bg);
}

.eb-btn-secondary:hover {
  background: var(--eb-btn-secondary-hover-bg);
}

.eb-btn-white:hover {
  background: var(--eb-btn-white-hover-bg);
}

.eb-btn-outline:hover,
.eb-btn-outline-primary:hover {
  background: var(--eb-btn-outline-primary-hover-bg);
}

.eb-btn-ghost:hover {
  background: var(--eb-btn-ghost-hover-bg);
}

.eb-btn-success:hover {
  background: var(--eb-btn-success-hover-bg);
}

.eb-btn-warning:hover {
  background: var(--eb-btn-warning-hover-bg);
}

.eb-btn-info:hover {
  background: var(--eb-btn-info-hover-bg);
}

.eb-btn-light:hover {
  background: var(--eb-btn-light-hover-bg);
}

.eb-btn-dark:hover {
  background: var(--eb-btn-dark-hover-bg);
}

.eb-btn-danger:hover {
  background: var(--eb-btn-danger-hover-bg);
}

.eb-btn-link:hover {
  background: transparent;
  box-shadow: none;
  color: var(--eb-btn-link-hover-text);
  text-decoration: underline;
}

.eb-btn-outline-secondary:hover {
  background: var(--eb-btn-outline-secondary-hover-bg);
}

.eb-btn-outline-success:hover {
  background: var(--eb-btn-outline-success-hover-bg);
}

.eb-btn-outline-warning:hover {
  background: var(--eb-btn-outline-warning-hover-bg);
}

.eb-btn-outline-info:hover {
  background: var(--eb-btn-outline-info-hover-bg);
}

.eb-btn-outline-danger:hover {
  background: var(--eb-btn-outline-danger-hover-bg);
}

.eb-btn-outline-light:hover {
  background: var(--eb-btn-outline-light-hover-bg);
}

.eb-btn-outline-dark:hover {
  background: var(--eb-btn-outline-dark-hover-bg);
}

/* ---------- Active / Pressed ---------- */

.eb-btn:not(:disabled):active {
  transform: translateY(1px);
}

/* ---------- Focus (Accessibility) ---------- */

.eb-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--eb-btn-focus-ring-inner),
    0 0 0 4px var(--eb-border-focus);
}

/* ---------- Icon Button ---------- */

.eb-btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Full Width ---------- */

.eb-btn-block {
  width: 100%;
}

/* ---------- Loading State ---------- */

.eb-btn-loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}

.eb-btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--eb-btn-spinner-border);
  border-top-color: var(--eb-btn-spinner-top);
  border-radius: 50%;
  animation: eb-btn-spin 0.6s linear infinite;
}

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

/* ---------- Disabled ---------- */

.eb-btn:disabled,
.eb-btn.disabled {
  background: var(--eb-disabled-bg);
  color: var(--eb-disabled-text);
  border-color: var(--eb-disabled-border);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}