/* =====================================================================
   Barquecon IoT — Interactive Simulator component
   Data-driven "phone-beside-a-scene" demo. Styling + all animation
   keyframes live here; behavior lives in js/sim/engine.js.
   ===================================================================== */

.bqt-sim-section { padding: 70px 0; background: var(--bg-soft, #f6f8fb); }

.bqt-sim {
  --sim-gold: #f1b621;
  --sim-navy: #0d1b2a;
  --sim-navy-2: #1a2a3d;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 36px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  background: linear-gradient(160deg, #16263a 0%, #0d1b2a 100%);
  border: 1px solid rgba(241, 182, 33, .18);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 30px 70px -36px rgba(13, 27, 42, .7);
}
@media (max-width: 820px) {
  .bqt-sim { grid-template-columns: 1fr; gap: 24px; justify-items: center; }
}

/* ---- Phone ---------------------------------------------------------- */
.bqt-sim__phone {
  width: 280px;
  background: #05101c;
  border-radius: 36px;
  padding: 14px;
  box-shadow: 0 0 0 2px rgba(241,182,33,.25), 0 24px 48px -18px rgba(0,0,0,.7);
  position: relative;
}
.bqt-sim__phone::before { /* notch */
  content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 18px; background: #05101c; border-radius: 0 0 12px 12px; z-index: 3;
}
.bqt-sim__screen {
  background: linear-gradient(180deg, #11243a 0%, #0a1726 100%);
  border-radius: 26px; overflow: hidden; min-height: 460px; display: flex; flex-direction: column;
}
.bqt-sim__statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 22px 8px; font-size: .72rem; color: #9fb4cc; font-weight: 600;
}
.bqt-sim__statusbar i { margin-left: 5px; }
.bqt-sim__apphead {
  padding: 6px 20px 16px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.bqt-sim__apphead .logo-dot {
  width: 30px; height: 30px; border-radius: 8px; background: var(--sim-gold);
  display: flex; align-items: center; justify-content: center; color: var(--sim-navy);
}
.bqt-sim__apphead h5 { margin: 0; color: #fff; font-size: .95rem; font-weight: 600; }
.bqt-sim__apphead .live { font-size: .6rem; color: #2ecc71; display: flex; align-items: center; gap: 4px; margin-left: auto; }
.bqt-sim__apphead .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2ecc71; animation: bqtPulse 1.4s infinite; }

.bqt-sim__controls { padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }

/* control row */
.sim-ctl {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; padding: 12px 14px; color: #e6eef7;
}
.sim-ctl__top { display: flex; align-items: center; gap: 10px; }
.sim-ctl__icon { width: 34px; height: 34px; border-radius: 10px; background: rgba(241,182,33,.15); color: var(--sim-gold); display: flex; align-items: center; justify-content: center; font-size: .9rem; flex: none; }
.sim-ctl__label { flex: 1; font-size: .82rem; font-weight: 500; }
.sim-ctl__val { font-size: .82rem; font-weight: 700; color: var(--sim-gold); }

/* toggle switch */
.sim-switch { width: 46px; height: 26px; border-radius: 20px; background: #2a3b4f; position: relative; cursor: pointer; transition: background .25s ease; flex: none; }
.sim-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .25s ease; }
.sim-switch.is-on { background: var(--sim-gold); }
.sim-switch.is-on::after { transform: translateX(20px); }

/* slider */
.sim-range { width: 100%; margin-top: 10px; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 4px; background: #2a3b4f; outline: none; }
.sim-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--sim-gold); cursor: pointer; border: 3px solid #0a1726; }
.sim-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--sim-gold); cursor: pointer; border: 3px solid #0a1726; }

/* button */
.sim-btn { margin-top: 10px; width: 100%; border: 0; border-radius: 10px; padding: .6rem; background: var(--sim-gold); color: var(--sim-navy); font-weight: 700; font-size: .82rem; cursor: pointer; transition: filter .2s ease, transform .1s ease; }
.sim-btn:hover { filter: brightness(1.08); }
.sim-btn:active { transform: scale(.97); }

/* event feed (inside phone) */
.sim-feed { margin-top: 4px; display: flex; flex-direction: column; gap: 8px; max-height: 150px; overflow-y: auto; }
.sim-feed__item { font-size: .72rem; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.05); border-left: 3px solid var(--sim-gold); color: #cdd9e6; animation: bqtFadeIn .3s ease; }
.sim-feed__item.alert { border-left-color: #ff5c5c; color: #ffd4d4; background: rgba(255,92,92,.1); }
.sim-feed__time { color: #7d90a6; font-size: .64rem; }

/* ---- Scene ---------------------------------------------------------- */
.bqt-sim__scene { width: 100%; }
.bqt-sim__scene svg { width: 100%; height: auto; display: block; }
.bqt-sim__caption { margin-top: 14px; color: #9fb4cc; font-size: .82rem; text-align: center; }
.bqt-sim__caption strong { color: var(--sim-gold); }

/* ---- Animation primitives (toggled by the engine) ------------------ */
@keyframes bqtSpin { to { transform: rotate(360deg); } }
@keyframes bqtPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes bqtFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bqtAlertGlow { 0%,100% { opacity: .25; } 50% { opacity: .9; } }

/* spinning element (fan) — transform-box keeps SVG groups centered */
.is-spinning { transform-box: fill-box; transform-origin: center; animation: bqtSpin 1.1s linear infinite; }
.is-spinning.fast { animation-duration: .55s; }

/* lit element (bulb) */
.is-lit { filter: drop-shadow(0 0 10px rgba(241,182,33,.95)); }

/* alert pulsing (gauge ring, fire glow) */
.pulse-alert { animation: bqtAlertGlow 1s ease-in-out infinite; }