/* ═══════════════════════════════════════════════════════
   Build Your Own Demo — Residual Styles
   Only keyframes, light-theme cascades, JS-toggled states,
   and rules that can't be expressed in Tailwind utilities.
   ═══════════════════════════════════════════════════════ */

/* ── Step enter animation ── */
@keyframes bw-step-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Active option-card desc color (parent .active cascades to child) ── */
.bw-option-card.active .bw-option-desc { color: #a5b4fc; }

/* ── Widget card enter animation ── */
@keyframes bw-card-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── FAB / Card position: left variant (JS toggles .left) ── */
.bw-widget-fab.left {
  right: auto;
  left: 1.25rem;
}
.bw-widget-card.left {
  right: auto;
  left: 1rem;
}
.bw-screenshot-fab.left {
  right: auto;
  left: 1.25rem;
}
.bw-screenshot-card.left {
  right: auto;
  left: 1rem;
}

/* ── Light theme (cascades to many children) ── */
.bw-widget-card.light {
  background: #fff;
  color: #1e293b;
}
.bw-widget-card.light .bw-widget-card-close {
  background: rgba(0,0,0,0.1);
  color: #fff;
}
.bw-widget-card.light .bw-widget-card-title { color: #fff; }
.bw-widget-card.light .bw-widget-card-subtitle { color: rgba(255,255,255,0.8); }
.bw-widget-card.light .bw-widget-card-option {
  border-color: rgba(0,0,0,0.1);
  background: rgba(0,0,0,0.02);
  color: #1e293b;
}
.bw-widget-card.light .bw-widget-card-option:hover {
  background: rgba(0,0,0,0.04);
}
.bw-widget-card.light .bw-widget-card-footer { color: rgba(0,0,0,0.35); }

/* ── Widget card option: disabled state (JS toggles .disabled) ── */
.bw-widget-card-option.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.bw-widget-card-option.disabled:hover {
  background: rgba(255,255,255,0.03);
}
.bw-widget-card-option .bw-talk-hint-disabled { display: none; }
.bw-widget-card-option .bw-talk-hint-ready { display: block; }
.bw-widget-card-option.disabled .bw-talk-hint-disabled { display: block; }
.bw-widget-card-option.disabled .bw-talk-hint-ready { display: none; }

/* ── Browser content images ── */
.bw-browser-content img { width: 100%; }
.bw-browser-content img.hidden { display: none; }

/* ── Countdown bar visibility (JS toggles via style.display) ── */
.bw-countdown-bar { display: none; }
.bw-countdown-bar.visible { display: flex; }

/* ── FAB glow animation ── */
.bw-fab-glow {
  box-shadow: 0 0 20px rgba(59,130,246,0.5), 0 0 40px rgba(59,130,246,0.3), 0 0 60px rgba(59,130,246,0.15);
  animation: fab-glow 2.5s ease-in-out infinite;
}
@keyframes fab-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(59,130,246,0.5), 0 0 40px rgba(59,130,246,0.3), 0 0 60px rgba(59,130,246,0.15); }
  50% { box-shadow: 0 0 25px rgba(59,130,246,0.7), 0 0 50px rgba(59,130,246,0.4), 0 0 80px rgba(59,130,246,0.2); }
}

/* ── Success icon animation ── */
@keyframes bw-success-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Spinner animation ── */
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Validation modal animation ── */
@keyframes bw-modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Validation modal (dynamically created in JS, can't use Tailwind) ── */
.bw-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  animation: bw-modal-fade-in 0.2s ease-out;
}
.bw-modal-card {
  background: #1e293b;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1rem;
  padding: 2rem 2rem 1.5rem;
  max-width: 360px;
  width: 90%;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  animation: bw-card-enter 0.25s ease-out;
}
.bw-modal-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(251,191,36,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bw-modal-message {
  color: #d1d5db;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.bw-modal-btn {
  display: inline-block;
  padding: 0.625rem 2rem;
  background: linear-gradient(to right, #6366f1, #0ea5e9);
  color: #fff;
  font-weight: 500;
  font-size: 0.875rem;
  border: none;
  border-radius: 0.625rem;
  cursor: pointer;
  transition: opacity 0.15s;
}
.bw-modal-btn:hover { opacity: 0.9; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .bw-step,
  .bw-widget-card,
  .bw-success-icon,
  .bw-modal-overlay,
  .bw-modal-card { animation: none; }
}