/* ============================================================
   Kreayotoo — component interaction states & keyframes.
   JSX components stay declarative; hover/active/focus live here.
   ============================================================ */
@keyframes kt-spin { to { transform: rotate(360deg); } }
@keyframes kt-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes kt-toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

/* --- Buttons --------------------------------------------- */
.kt-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.kt-btn:not(:disabled):active { transform: translateY(1px) scale(0.99); }

.kt-btn--primary:not(:disabled):hover  { background: var(--brand-hover); border-color: var(--brand-hover); box-shadow: var(--shadow-sm); }
.kt-btn--primary:not(:disabled):active { background: var(--brand-active); }
.kt-btn--accent:not(:disabled):hover   { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; box-shadow: var(--shadow-sm); }
.kt-btn--secondary:not(:disabled):hover{ border-color: var(--brand); background: var(--brand-soft); }
.kt-btn--ghost:not(:disabled):hover    { background: var(--brand-soft); }
.kt-btn--danger:not(:disabled):hover   { background: var(--danger-600); border-color: var(--danger-600); box-shadow: var(--shadow-sm); }

/* --- Icon button ----------------------------------------- */
.kt-iconbtn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.kt-iconbtn:not(:disabled):hover  { background: var(--slate-100); color: var(--text-strong); }
.kt-iconbtn:not(:disabled):active { transform: scale(0.94); }

/* --- Inputs ---------------------------------------------- */
.kt-field:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.kt-field::placeholder { color: var(--text-faint); }
.kt-field:disabled { background: var(--surface-sunken); cursor: not-allowed; opacity: 0.7; }

/* --- Choice controls (checkbox / radio) ------------------ */
.kt-choice:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.kt-choice:not(:disabled):hover { border-color: var(--brand); }
.kt-choice:checked {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}
input[type="checkbox"].kt-choice:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
input[type="radio"].kt-choice { border-radius: 999px !important; }
input[type="radio"].kt-choice:checked {
  background-image: radial-gradient(circle, #fff 0 30%, transparent 34%);
}
.kt-switch:focus-within { box-shadow: var(--shadow-focus); border-radius: var(--radius-pill); }

/* --- Tabs ------------------------------------------------ */
.kt-tab { transition: color var(--dur-fast) var(--ease-out); }
.kt-tab:hover { color: var(--text-strong); }

/* --- Links / interactive cards --------------------------- */
.kt-card--interactive { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.kt-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }