/* ========================================
   BIVA V2 — PREMIUM BUTTON SYSTEM
======================================== */

.btn {
  width: 100%;
  min-height: 52px;
  padding: 0 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border:
    1px solid transparent;

  border-radius:
    var(--biva-radius-md);

  appearance: none;
  -webkit-appearance: none;

  font: inherit;
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.01em;

  text-align: center;
  text-decoration: none;

  cursor: pointer;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    opacity 180ms ease;
}

.btn:hover {
  transform:
    translateY(-2px);
}

.btn:active {
  transform:
    translateY(0);
}

.btn:focus-visible {
  outline: none;

  box-shadow:
    var(--biva-focus-ring);
}

.btn:disabled {
  opacity: 0.55;

  cursor: not-allowed;
  pointer-events: none;

  transform: none;
  box-shadow: none;
}


/* ========================================
   PRIMARY — MODERN BLACK + BLUE
======================================== */

.btn-primary {
  color:
    var(--biva-white);

  background:
    linear-gradient(
      135deg,
      var(--biva-black) 0%,
      var(--biva-black-soft) 60%,
      #12244a 100%
    );

  border-color:
    rgba(53, 112, 243, 0.22);

  box-shadow:
    0 15px 34px
    rgba(7, 11, 20, 0.24),
    0 5px 16px
    rgba(36, 87, 230, 0.12),
    inset 0 1px 0
    rgba(255, 255, 255, 0.12);
}

.btn-primary:hover {
  background:
    linear-gradient(
      135deg,
      var(--biva-black-hover) 0%,
      #14203a 58%,
      var(--biva-blue-700) 135%
    );

  box-shadow:
    0 21px 44px
    rgba(7, 11, 20, 0.28),
    0 8px 22px
    rgba(36, 87, 230, 0.18),
    inset 0 1px 0
    rgba(255, 255, 255, 0.14);
}


/* ========================================
   SECONDARY — ROYAL YELLOW
======================================== */

.btn-secondary {
  color:
    #211700;

  background:
    linear-gradient(
      135deg,
      var(--biva-yellow-400) 0%,
      var(--biva-yellow-500) 65%,
      var(--biva-yellow-600) 100%
    );

  border-color:
    rgba(217, 155, 0, 0.28);

  box-shadow:
    0 14px 30px
    rgba(217, 155, 0, 0.22),
    inset 0 1px 0
    rgba(255, 255, 255, 0.36);
}

.btn-secondary:hover {
  background:
    linear-gradient(
      135deg,
      #ffd458 0%,
      var(--biva-yellow-400) 55%,
      var(--biva-yellow-600) 100%
    );

  box-shadow:
    0 20px 40px
    rgba(217, 155, 0, 0.28),
    inset 0 1px 0
    rgba(255, 255, 255, 0.42);
}


/* ========================================
   OUTLINE — CLEAN WHITE
======================================== */

.btn-outline {
  color:
    var(--biva-ink);

  background:
    rgba(255, 255, 255, 0.92);

  border-color:
    var(--biva-line);

  box-shadow:
    var(--biva-shadow-sm),
    inset 0 1px 0
    rgba(255, 255, 255, 0.8);

  backdrop-filter:
    blur(12px);
}

.btn-outline:hover {
  color:
    var(--biva-blue-700);

  background:
    var(--biva-blue-50);

  border-color:
    rgba(53, 112, 243, 0.25);

  box-shadow:
    0 15px 34px
    rgba(15, 23, 42, 0.11);
}


/* ========================================
   SUCCESS
======================================== */

.btn-success {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #0aa366,
      var(--biva-success)
    );

  box-shadow:
    0 14px 30px
    rgba(7, 148, 85, 0.22);
}


/* ========================================
   DANGER
======================================== */

.btn-danger {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #ed4a3d,
      var(--biva-danger)
    );

  box-shadow:
    0 14px 30px
    rgba(217, 45, 32, 0.22);
}


/* ========================================
   SIZES
======================================== */

.btn-small {
  width: auto;
  min-height: 42px;
  padding: 0 17px;

  border-radius:
    var(--biva-radius-sm);

  font-size: 0.86rem;
}

.btn-large {
  min-height: 58px;
  padding: 0 26px;

  border-radius:
    var(--biva-radius-lg);

  font-size: 0.98rem;
}

.btn-icon {
  width: 44px;
  min-width: 44px;
  min-height: 44px;

  padding: 0;

  border-radius:
    var(--biva-radius-sm);
}

.btn svg {
  width: 18px;
  height: 18px;

  flex: 0 0 auto;
}


/* ========================================
   UTILITIES
======================================== */

.btn-block {
  width: 100%;
}

.btn-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-group .btn {
  width: auto;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 520px) {
  .btn {
    min-height: 50px;
    padding: 0 18px;
  }

  .btn-small {
    width: auto;
    min-height: 40px;
    padding: 0 14px;
  }

  .btn-group {
    align-items: stretch;
    flex-direction: column;
  }

  .btn-group .btn {
    width: 100%;
  }
}

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