/* ============================================================
   BREAKOUT KC - COMPONENT INTERACTION STATES
   Hover / active / focus states the inline component styles
   can't express. Keyed off class + data-attributes.
   ============================================================ */

/* ---- Button ---- */
.bk-btn:hover { transform: translateY(-2px); }
.bk-btn:active { transform: translateY(0); }
.bk-btn[data-variant="primary"]:hover { background: var(--brand-primary-hover); box-shadow: var(--shadow-md); }
.bk-btn[data-variant="primary"]:active { background: var(--brand-primary-active); }
.bk-btn[data-variant="energy"]:hover { background: var(--flame-600); box-shadow: var(--shadow-md); }
.bk-btn[data-variant="outline"]:hover { background: var(--ink-900); border-color: var(--ink-900); color: var(--white); }
.bk-btn[data-variant="dark"]:hover { background: var(--ink-700); }
.bk-btn[data-variant="ghost"]:hover { background: var(--blue-50); }
.bk-btn:disabled, .bk-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---- IconButton ---- */
.bk-iconbtn { transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), color var(--dur-base) var(--ease-out); }
.bk-iconbtn:hover { transform: translateY(-2px); }
.bk-iconbtn[data-variant="solid"]:hover { background: var(--brand-primary-hover); }
.bk-iconbtn[data-variant="ghost"]:hover { background: var(--blue-50); }
.bk-iconbtn[data-variant="onDark"]:hover { background: rgba(255,255,255,0.14); }

/* ---- Card ---- */
.bk-card[data-interactive="true"] { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); cursor: pointer; }
.bk-card[data-interactive="true"]:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ---- RoomCard ---- */
.bk-roomcard { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.bk-roomcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-photo); }
.bk-roomcard:hover .bk-roomcard__img { transform: scale(1.06); }
.bk-roomcard__img { transition: transform var(--dur-slow) var(--ease-out); }

/* ---- Input ---- */
.bk-input { transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.bk-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--focus-ring); }

/* ---- Nav link underline ---- */
.bk-navlink { position: relative; }
.bk-navlink::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--brand-primary); transition: right var(--dur-base) var(--ease-out); }
.bk-navlink:hover::after, .bk-navlink[data-active="true"]::after { right: 0; }