/* ============================================================================
   AIQ+ — 24sos.in  ·  Virtual Tour / Scripted-Replay Engine styles
   ============================================================================ */

/* ---- Hotspots layered over a replica ---- */
.hotspot {
  position: absolute; z-index: 30;
  border: 2px solid rgb(var(--accent));
  border-radius: 8px;
  background: rgba(99,102,241,.10);
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(99,102,241,.5);
  animation: hs-pulse 2.2s infinite;
  transition: background .15s;
}
.hotspot:hover { background: rgba(99,102,241,.22); }
.hotspot .hs-pin {
  position: absolute; top: -11px; right: -11px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgb(var(--accent)); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
@keyframes hs-pulse {
  0% { box-shadow: 0 0 0 0 rgba(99,102,241,.5); }
  70% { box-shadow: 0 0 0 10px rgba(99,102,241,0); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}
.replica-stage { position: relative; }
.replica-stage.tour-off .hotspot { display: none; }

/* ---- Tour control bar ---- */
.tour-bar {
  display: flex; align-items: center; gap: 12px;
  background: rgb(var(--bg-1)); border: 1px solid rgb(var(--line-2));
  border-radius: var(--r-card); padding: 10px 14px; margin-bottom: 14px;
}
.tour-bar .tb-icon { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, rgb(var(--accent)), rgb(var(--accent-2))); display: grid; place-items: center; color: #fff; flex: none; }
.tour-bar .tb-txt { flex: 1; min-width: 0; }
.tour-bar .tb-txt b { font-size: 13.5px; color: rgb(var(--tx-0)); }
.tour-bar .tb-txt p { font-size: 12px; color: rgb(var(--tx-3)); }
.tour-bar .tb-actions { display: flex; gap: 8px; align-items: center; }
.tour-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: rgb(var(--tx-2)); }
.switch { position: relative; width: 36px; height: 20px; border-radius: 20px; background: rgb(var(--bg-3)); transition: background .15s; flex: none; }
.switch.on { background: rgb(var(--accent)); }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch.on::after { transform: translateX(16px); }

/* ---- Replay modal (the "till last mile" flow) ---- */
.replay-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(2,6,23,.78); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 22px;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.replay-overlay.show { opacity: 1; visibility: visible; }
.replay-modal {
  width: min(880px, 96vw); max-height: 92vh; overflow: hidden;
  background: rgb(var(--bg-1)); border: 1px solid rgb(var(--line-2));
  border-radius: 14px; box-shadow: var(--shadow-elevated);
  display: flex; flex-direction: column;
  transform: scale(.97); transition: transform .2s;
}
.replay-overlay.show .replay-modal { transform: scale(1); }
.replay-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid rgb(var(--line)); }
.replay-head .rh-icon { width: 30px; height: 30px; border-radius: 8px; background: rgba(99,102,241,.16); color: rgb(var(--m-indigo)); display: grid; place-items: center; }
.replay-head h3 { font-size: 15px; }
.replay-head .rh-sub { font-size: 11.5px; color: rgb(var(--tx-3)); }
.replay-head .close { margin-left: auto; background: none; border: 0; color: rgb(var(--tx-3)); padding: 6px; border-radius: 6px; }
.replay-head .close:hover { color: rgb(var(--negative)); background: rgba(255,255,255,.04); }

.replay-stage { padding: 16px 18px; overflow: auto; flex: 1; }

/* a single replay step */
.rstep { display: flex; gap: 13px; padding: 11px 0; opacity: .35; transition: opacity .25s; }
.rstep.active, .rstep.done { opacity: 1; }
.rstep .rs-num { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: var(--font-num); background: rgb(var(--bg-3)); color: rgb(var(--tx-2)); }
.rstep.active .rs-num { background: rgb(var(--accent)); color: #fff; box-shadow: 0 0 0 4px rgba(99,102,241,.2); }
.rstep.done .rs-num { background: rgba(52,211,153,.18); color: rgb(var(--positive)); }
.rstep .rs-body { flex: 1; min-width: 0; }
.rstep .rs-title { font-size: 13.5px; font-weight: 600; color: rgb(var(--tx-0)); }
.rstep .rs-desc { font-size: 12.5px; color: rgb(var(--tx-2)); margin-top: 2px; }
.rstep .rs-panel { margin-top: 9px; background: rgb(var(--bg-0)); border: 1px solid rgb(var(--line)); border-radius: var(--r-btn); padding: 11px 13px; font-size: 12.5px; display: none; }
.rstep.active .rs-panel, .rstep.done .rs-panel { display: block; }

/* the order-confirmation panel (exchange order number) */
.order-conf { display: grid; gap: 7px; }
.order-conf .row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.order-conf .row .k { color: rgb(var(--tx-3)); }
.order-conf .row .v { font-family: var(--font-num); color: rgb(var(--tx-0)); font-weight: 600; }
.order-conf .exch { margin-top: 6px; padding: 10px 12px; border-radius: var(--r-btn); background: rgba(52,211,153,.10); border: 1px solid rgba(52,211,153,.3); }
.order-conf .exch .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: rgb(var(--positive)); font-weight: 700; }
.order-conf .exch .no { font-family: var(--font-num); font-size: 18px; font-weight: 800; color: rgb(var(--positive)); letter-spacing: .04em; margin-top: 2px; }
.real-note { font-size: 11px; color: rgb(var(--tx-3)); margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.real-note .i { width: 13px; height: 13px; color: rgb(var(--info)); }

.replay-foot { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-top: 1px solid rgb(var(--line)); }
.replay-foot .progress { flex: 1; height: 5px; border-radius: 5px; background: rgb(var(--bg-3)); overflow: hidden; }
.replay-foot .progress i { display: block; height: 100%; background: linear-gradient(90deg, rgb(var(--accent)), rgb(var(--accent-2))); width: 0; transition: width .35s; }
.replay-foot .step-count { font-size: 12px; color: rgb(var(--tx-3)); font-family: var(--font-num); }

/* mobile */
@media (max-width: 640px) {
  .tour-bar { flex-direction: column; align-items: stretch; }
  .tour-bar .tb-actions { justify-content: space-between; }
}