/* Spinal button + Spine Video popup (5 regions) */

.qs-spinal-btn {
  display:block;
  width:100%;
  margin-top:12px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.2);
  background:radial-gradient(circle at top,#1e2635 0%,#070a12 70%);
  color:#e6edf3;
  font-size:14px;
  font-weight:500;
  text-align:center;
  cursor:pointer;
  transition:background 120ms ease-out,box-shadow 120ms ease-out,transform 80ms ease-out;
}

.qs-spinal-btn:hover {
  background:radial-gradient(circle at top,#263148 0%,#080b15 70%);
  box-shadow:0 0 14px rgba(120,150,255,0.45);
  transform:translateY(-1px);
}

.qs-spinal-btn:active {
  transform:translateY(0);
  box-shadow:0 0 8px rgba(120,150,255,0.35);
}

.qs-spine-overlay {
  position:fixed;
  inset:0;
  z-index:9990;
  display:none;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at top,rgba(9,15,30,0.85),rgba(0,0,0,0.9));
  backdrop-filter:blur(6px);
}

/* allow both class-based open and aria-hidden open */
.qs-spine-overlay.is-open,
.qs-spine-overlay[aria-hidden="false"] {
  display:flex;
}

.qs-spine-modal {
  width:min(1100px,92vw);
  max-height:88vh;
  background:radial-gradient(circle at top,#141b29 0%,#050911 60%,#020308 100%);
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 0 70px rgba(0,0,0,0.9),0 0 35px rgba(0,0,0,0.7),0 0 45px rgba(255,255,255,0.06);
  padding:18px 22px 20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.qs-spine-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.qs-spine-title-group {
  display:flex;
  flex-direction:column;
  gap:2px;
}

.qs-spine-title {
  margin:0;
  font-size:22px;
  font-weight:600;
  color:#ffffff;
}

.qs-spine-subtitle {
  font-size:12px;
  color:rgba(220,230,255,0.7);
}

.qs-spine-close {
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:radial-gradient(circle at top,#2a3144 0%,#141824 55%,#05060a 100%);
  color:#ffffff;
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 0 10px rgba(0,0,0,0.6);
  transition:background 120ms ease-out,box-shadow 120ms ease-out,transform 120ms ease-out;
}

.qs-spine-close:hover {
  background:radial-gradient(circle at top,#3c455c 0%,#181c2b 55%,#06060b 100%);
  box-shadow:0 0 18px rgba(120,150,255,0.55);
}

.qs-spine-close:active {
  transform:translateY(1px);
}

.qs-spine-body {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:20px;
  align-items:stretch;
  padding:6px 4px 2px;
}

.qs-spine-video-wrap {
  border-radius:26px;
  background:radial-gradient(circle at top left,#1e2836 0%,#05070c 55%,#020204 100%);
  box-shadow:0 0 45px rgba(0,0,0,0.9),0 0 60px rgba(255,255,255,0.08);
  padding:10px;
}

.qs-spine-video-inner {
  position:relative;
  border-radius:20px;
  overflow:hidden;
}

.qs-spine-video-inner video {
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  object-fit:contain; /* show full frame: man + spine */
}

/* ===== Overlay band positioning (FIX) =====
   The orange rotating spine in RotatingSpine.mp4 sits right-of-center.
   We place a narrow vertical band centered on that spine.
*/
.qs-spine-region {
  position:absolute;
  left:72%;          /* moved right: align over orange spine */
  width:18%;         /* narrower band to match spine column */
  border-radius:14px;
  pointer-events:none;
}

/* translucent RED band (matches your expectation) */
.qs-spine-region::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  background:rgba(255,0,0,0.00);
  box-shadow:none;
  transition:background 120ms ease-out,box-shadow 120ms ease-out;
}

.qs-spine-region.is-hot::before {
  background:rgba(255,0,0,0.18);
  box-shadow:0 0 22px rgba(255,0,0,0.18);
}

/* preserve your existing vertical slices */
.qs-spine-region--cervical       { top: 5%;  height:15%; }
.qs-spine-region--upper-thoracic { top:20%;  height:15%; }
.qs-spine-region--mid-thoracic   { top:35%;  height:18%; }
.qs-spine-region--lower-thoracic { top:53%;  height:16%; }
.qs-spine-region--lumbar-sacral  { top:69%;  height:26%; }

.qs-spine-regions-panel {
  border-radius:26px;
  background:radial-gradient(circle at top right,#1a2233 0%,#070a10 60%,#020305 100%);
  box-shadow:0 0 40px rgba(0,0,0,0.85),0 0 55px rgba(255,255,255,0.06);
  padding:14px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.qs-spine-mode-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.qs-spine-mode-label { font-size:12px; color:rgba(220,230,255,0.78); }
.qs-spine-mode-toggle {
  display:flex; gap:6px; padding:4px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.04);
}
.qs-spine-mode-option {
  padding:6px 10px; border-radius:999px; border:0; background:transparent;
  color:rgba(230,237,243,0.78); font-size:12px; cursor:pointer;
  transition:background 120ms ease-out,color 120ms ease-out,box-shadow 120ms ease-out;
}
.qs-spine-mode-option:hover { background:rgba(255,255,255,0.06); color:#ffffff; }
.qs-spine-mode-option.is-active { background:rgba(120,150,255,0.16); color:#ffffff; box-shadow:0 0 14px rgba(120,150,255,0.25); }

.qs-spine-regions-title { font-size:13px; font-weight:600; color:#ffffff; }

/* chip list: let your v2.html hotfix force a vertical column when desired */
.qs-spine-region-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* ===== Chip theme restore (orangy/red pattern) ===== */
.qs-spine-region-chip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,120,0,0.25);
  background:
    radial-gradient(circle at top, rgba(255,140,0,0.18) 0%, rgba(255,90,0,0.08) 35%, rgba(0,0,0,0.00) 75%),
    linear-gradient(180deg, rgba(25,10,6,0.75), rgba(6,6,10,0.65));
  color:rgba(255,235,225,0.92);
  font-size:12px;
  cursor:pointer;
  box-shadow:0 0 18px rgba(255,90,0,0.10);
  transition:filter 120ms ease-out,box-shadow 120ms ease-out,transform 80ms ease-out,background 120ms ease-out;
}

.qs-spine-region-chip span { opacity:0.9; }

.qs-spine-region-chip:hover {
  filter:brightness(1.06);
  box-shadow:0 0 22px rgba(255,120,0,0.18), 0 0 14px rgba(255,90,0,0.10);
}

.qs-spine-region-chip:active { transform:translateY(1px); }

.qs-spine-region-chip.is-hot {
  border-color:rgba(255,0,0,0.30);
  background:
    radial-gradient(circle at top, rgba(255,0,0,0.20) 0%, rgba(255,90,0,0.10) 40%, rgba(0,0,0,0.00) 80%),
    linear-gradient(180deg, rgba(35,8,8,0.78), rgba(6,6,10,0.65));
  box-shadow:0 0 26px rgba(255,0,0,0.18),0 0 18px rgba(255,90,0,0.12);
}

.qs-spine-footer {
  font-size:11px;
  color:rgba(220,230,255,0.62);
  line-height:1.35;
}

/* Responsive */
@media (max-width: 900px){
  .qs-spine-body { grid-template-columns: 1fr; }
  .qs-spine-modal { width:min(980px,94vw); max-height:92vh; }
  /* keep overlay centered when narrow */
  .qs-spine-region { left:70%; width:20%; }
}