/* =========================================================
   Dewandaru — BUTTON SYSTEM (override layer)
   Language visual button sama: radius, weight, transition,
   hover, active, focus, disabled. Ukuran per-komponen dipertahankan
   sebagai variant (height 51px template vs 44px Book Now vs 52px
   submit), karena merubah tinggi = merubah layout.
   Hanya Design Token — tanpa hardcode.
   ========================================================= */

/* ---------- BASE: bahasa visual sama untuk semua button ---------- */
:is(
  .btn1,
  .btn2,
  .btn-default,
  .view-btn,
  .banner-search .btn,
  .btn-outline-primary
) {
  font-family: var(--ab-font-body);
  font-weight: 600;
  border-radius: var(--ab-radius-pill);
  transition: background-color var(--ab-transition), color var(--ab-transition),
    border-color var(--ab-transition), box-shadow var(--ab-transition),
    transform var(--ab-transition);
}

/* ---------- VARIANT: solid (accent penuh, teks putih) ---------- */
:is(
  .banner-search .btn,
  .btn2,
  .btn-default.st1
) {
  background-color: var(--ab-accent);
  border-color: transparent;
  color: var(--ab-white);
}

/* ---------- VARIANT: outline (transparan, border + teks accent) ---------- */
:is(
  .btn1,
  .btn-default,
  .view-btn,
  .btn-outline-primary
) {
  background-color: transparent;
  border: 1px solid var(--ab-accent);
  color: var(--ab-accent);
}

/* ---------- HOVER: konsisten untuk semua variant ---------- */
:is(
  .btn1,
  .btn2,
  .btn-default,
  .view-btn,
  .banner-search .btn,
  .btn-outline-primary
):hover,
.view-btn:focus,
.view-btn.active {
  background-color: color-mix(in srgb, var(--ab-accent) 85%, transparent);
  border-color: transparent;
  color: var(--ab-white);
  box-shadow: var(--ab-shadow-sm);
}

/* ---------- ACTIVE ---------- */
:is(
  .btn1,
  .btn2,
  .btn-default,
  .view-btn,
  .banner-search .btn,
  .btn-outline-primary
):active {
  transform: translateY(1px);
}

/* ---------- FOCUS ---------- */
:is(
  .btn1,
  .btn2,
  .btn-default,
  .view-btn,
  .banner-search .btn,
  .btn-outline-primary
):focus-visible {
  outline: 2px solid var(--ab-accent);
  outline-offset: 2px;
}

/* ---------- DISABLED ---------- */
:is(
  .btn1,
  .btn2,
  .btn-default,
  .view-btn,
  .banner-search .btn,
  .btn-outline-primary
):disabled,
.btn.disabled,
.btn-default.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}