/* =========================================================
   BodyShapers — Body Visualizer  v5.4
   Fixes applied vs v5.3:
     • Grid ratio 30/40/30
     • Full-viewport height, zero internal scroll
     • Measurement mirror badges styled
     • Loader[hidden] explicit hide
   ========================================================= */

/* ── Root ────────────────────────────────────────────────── */
.bs-3d-visualizer {
  font-family: var(--bs-font, system-ui, sans-serif);
  color: var(--bs-text, #2d1f3d);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px 24px;
  box-sizing: border-box;
}

/* ── Top bar ─────────────────────────────────────────────── */
.bs-bv__topbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: center;
}

.bs-bv__toggle-group {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--bs-pink-100, #ffe0ee);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.bs-bv__toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  font-size: 0.84rem;
  font-weight: 700;
  font-family: inherit;
  background: transparent;
  color: var(--bs-muted, #6b6480);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
  white-space: nowrap;
  line-height: 1.4;
}

/* JS toggles .is-active — never .active */
.bs-bv__toggle-btn.is-active {
  background: var(--bs-pink-500, #ff5fa2);
  color: #fff;
  box-shadow: 0 3px 10px rgba(255,95,162,.35);
}

.bs-bv__toggle-btn:not(.is-active):hover {
  background: var(--bs-bg-soft, #fff8fb);
  color: var(--bs-pink-500, #ff5fa2);
}

/* ── 3-column grid — 30 / 40 / 30 ───────────────────────── */
/*
 * FIX 4 + 6: exact 30/40/30 split; height fills available
 * viewport height minus topbar (~52px) so the whole tool
 * fits on screen without page scroll.
 * Use CSS custom property --bv-height so hosts can override.
 */
.bs-bv__layout {
  display: grid;
  grid-template-columns: 30% 40% 30%;
  /* Full-fit height: viewport minus header/topbar/padding.
     calc(100vh - Xpx) — adjust X to match your theme's header height.
     Default assumes ~120px of page chrome above the tool. */
  height: calc(100vh - 200px);
  min-height: 480px;
  max-height: 820px;
  border: 1px solid var(--bs-line, #f0e1ea);
  border-radius: var(--bs-radius, 14px);
  overflow: hidden;          /* NO external scroll */
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.07);
}

.bs-bv__col {
  display: flex;
  flex-direction: column;
  height: 100%;              /* fill grid row */
  overflow: hidden;          /* clip, don't scroll the column itself */
  box-sizing: border-box;
}

/* ── Col 1: Sliders ──────────────────────────────────────── */
.bs-bv__col--sliders {
  border-right: 1px solid var(--bs-line, #f0e1ea);
  background: #fff;
  padding: 16px 16px 12px;
  overflow-y: auto;          /* sliders can scroll if viewport very short */
  gap: 0;
}

/* Scrollbar — thin pink */
.bs-bv__col--sliders::-webkit-scrollbar { width: 4px; }
.bs-bv__col--sliders::-webkit-scrollbar-track { background: transparent; }
.bs-bv__col--sliders::-webkit-scrollbar-thumb { background: var(--bs-pink-200, #ffb3d5); border-radius: 4px; }

.bs-bv__slider-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bs-line, #f0e1ea);
  flex-shrink: 0;
}
.bs-bv__slider-row:last-of-type { border-bottom: none; }

.bs-bv__slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.bs-bv__slider-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--bs-ink, #1f1430);
  cursor: pointer;
}

.bs-bv__slider-val {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--bs-pink-500, #ff5fa2);
  background: var(--bs-pink-50, #fff1f7);
  padding: 1px 7px;
  border-radius: 20px;
  white-space: nowrap;
  min-width: 52px;
  text-align: right;
}

/* Range input */
.bs-bv__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(
    to right,
    var(--bs-pink-500, #ff5fa2) 0%,
    var(--bs-pink-500, #ff5fa2) var(--bv-pct, 50%),
    var(--bs-line, #f0e1ea) var(--bv-pct, 50%),
    var(--bs-line, #f0e1ea) 100%
  );
  transition: background .1s;
}
.bs-bv__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bs-pink-500, #ff5fa2);
  border: 2.5px solid #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.2);
  cursor: pointer;
  transition: transform .15s;
}
.bs-bv__range::-webkit-slider-thumb:hover { transform: scale(1.25); }
.bs-bv__range::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bs-pink-500, #ff5fa2);
  border: 2.5px solid #fff;
  cursor: pointer;
}
.bs-bv__range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(255,95,162,.25);
}

/* Suggest button */
.bs-bv__suggest {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 9px 14px;
  background: var(--bs-pink-50, #fff1f7);
  border: 1.5px solid var(--bs-pink-200, #ffb3d5);
  border-radius: 999px;
  color: var(--bs-pink-500, #ff5fa2);
  font-size: 0.76rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .18s, transform .15s;
  text-align: center;
  flex-shrink: 0;
}
.bs-bv__suggest:hover { background: var(--bs-pink-100, #ffe0ee); transform: translateY(-1px); }

.bs-bv__trust {
  font-size: 0.6rem;
  color: var(--bs-muted, #6b6480);
  text-align: center;
  margin: 8px 0 0;
  line-height: 1.5;
  flex-shrink: 0;
}

/* ── Col 2: Canvas — fills remaining height ──────────────── */
.bs-bv__col--canvas {
  border-left: 1px solid var(--bs-line, #f0e1ea);
  border-right: 1px solid var(--bs-line, #f0e1ea);
  background: linear-gradient(180deg, #fff9fc 0%, #fdf1f7 100%);
  flex: 1;
  position: relative;
}

/* Canvas wrapper fills the entire column */
.bs-vizer__canvas-wrap {
  position: relative;
  flex: 1;
  width: 100%;
  /* Height = column height minus hint bar (~30px) */
  height: calc(100% - 30px);
  overflow: hidden;
}

/* JS queries .bs-vizer__canvas exactly */
.bs-vizer__canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  cursor: grab;
}
.bs-vizer__canvas:active { cursor: grabbing; }

/* ── Loader overlay ──────────────────────────────────────── */
.bs-vizer__loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 17, .88);
  backdrop-filter: blur(4px);
  z-index: 10;
}
.bs-vizer__loader[hidden] { display: none !important; }

.bs-vizer__loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 180px;
}

.bs-vizer__loader-track {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,.12);
  border-radius: 6px;
  overflow: hidden;
}
.bs-vizer__loader-bar {
  height: 100%;
  background: var(--bs-pink-500, #ff5fa2);
  border-radius: 6px;
  transition: width .2s ease;
}
.bs-vizer__loader-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 8px;
}
.bs-vizer__loader-msg {
  font-size: 0.74rem;
  color: rgba(255,255,255,.7);
  flex: 1;
}
.bs-vizer__loader-pct {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--bs-pink-300, #ffaad4);
  white-space: nowrap;
}

.bs-bv__canvas-hint {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  color: var(--bs-muted, #6b6480);
  border-top: 1px solid var(--bs-line, #f0e1ea);
  margin: 0;
  background: #fff;
  flex-shrink: 0;
}

/* ── Col 3: Stats ────────────────────────────────────────── */
.bs-bv__col--stats {
  padding: 16px 14px;
  background: #fff;
  overflow-y: auto;          /* stats can scroll if many rows */
  gap: 0;
}
.bs-bv__col--stats::-webkit-scrollbar { width: 4px; }
.bs-bv__col--stats::-webkit-scrollbar-track { background: transparent; }
.bs-bv__col--stats::-webkit-scrollbar-thumb { background: var(--bs-pink-200, #ffb3d5); border-radius: 4px; }

.bs-bv__stat-block { padding: 10px 0; }

.bs-bv__stat-label {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bs-muted, #6b6480);
  margin-bottom: 5px;
}

/* Large number: BMI value */
.bs-bv__stat-big {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--bs-ink, #1f1430);
  line-height: 1;
  margin-bottom: 5px;
}
.bs-bv__stat-big--sm { font-size: 1.5rem; }

/* BMI category badge — JS overwrites entire className */
.bs-vizer__bmi-cat {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
  background: var(--bs-bg-soft, #fff8fb);
  color: var(--bs-muted, #6b6480);
}
.bs-vizer__bmi-cat--under  { background: rgba(96,165,250,.14); color: #2563eb; }
.bs-vizer__bmi-cat--normal { background: rgba(74,222,128,.14); color: #16a34a; }
.bs-vizer__bmi-cat--over   { background: rgba(251,191, 36,.14); color: #d97706; }
.bs-vizer__bmi-cat--obese  { background: rgba(248,113,113,.14); color: #dc2626; }

/* BMI colour bar */
.bs-bv__bmi-bar-wrap { padding: 2px 0; }
.bs-bv__bmi-track {
  display: flex;
  height: 8px;
  border-radius: 8px;
  overflow: hidden;
}
.bs-bv__bmi-seg { flex: 1; height: 100%; }
.bs-bv__bmi-seg--under  { background: #60a5fa; }
.bs-bv__bmi-seg--normal { background: #6dbf8a; }
.bs-bv__bmi-seg--over   { background: #f59e0b; }
.bs-bv__bmi-seg--obese  { background: #ef4444; }
.bs-bv__bmi-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.56rem;
  color: var(--bs-muted, #6b6480);
  margin-top: 3px;
}
.bs-bv__bmi-labels span { flex:1; text-align:center; white-space:nowrap; }

.bs-bv__stat-divider {
  height: 1px;
  background: var(--bs-line, #f0e1ea);
  flex-shrink: 0;
}

/* Body fat bar */
.bs-bv__bf-track {
  height: 5px;
  background: var(--bs-line, #f0e1ea);
  border-radius: 5px;
  overflow: hidden;
  margin: 5px 0 3px;
}
.bs-bv__bf-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--bs-pink-300, #ffaad4), var(--bs-pink-500, #ff5fa2));
  border-radius: 5px;
  transition: width .3s ease;
}

/* Measurement rows — used for whr, ideal, AND mirror badges */
.bs-bv__meas-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--bs-line, #f0e1ea);
  font-size: 0.78rem;
  gap: 8px;
}
.bs-bv__meas-row:last-child { border-bottom: none; }

.bs-bv__meas-label {
  color: var(--bs-muted, #6b6480);
  font-weight: 500;
  flex: 1;
}

/* Value badges — [data-stat] and [data-mirror] targets */
.bs-bv__meas-val {
  font-weight: 700;
  color: var(--bs-ink, #1f1430);
  background: var(--bs-bg-soft, #fff8fb);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.72rem;
  white-space: nowrap;
  min-width: 48px;
  text-align: right;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .bs-bv__layout {
    grid-template-columns: 28% 44% 28%;
  }
}

@media (max-width: 900px) {
  .bs-bv__layout {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .bs-bv__col { height: auto; overflow: visible; }
  .bs-bv__col--canvas {
    order: -1;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--bs-line, #f0e1ea);
    height: 50vw;
    min-height: 300px;
    max-height: 420px;
  }
  .bs-vizer__canvas-wrap { height: calc(100% - 30px); }
  .bs-bv__col--sliders {
    order: 1;
    border-right: none;
    border-top: 1px solid var(--bs-line, #f0e1ea);
    max-height: 400px;
  }
  .bs-bv__col--stats {
    order: 2;
    border-top: 1px solid var(--bs-line, #f0e1ea);
    max-height: 600px;
  }
}

@media (max-width: 580px) {
  .bs-3d-visualizer { padding: 0 8px 16px; }
  .bs-bv__topbar    { flex-direction: column; gap: 8px; }
  .bs-bv__toggle-group { width: 100%; }
  .bs-bv__toggle-btn   { flex: 1; justify-content: center; }
  .bs-bv__col--canvas  { height: 60vw; min-height: 260px; }
  .bs-bv__stat-big     { font-size: 1.8rem; }
}

@media (max-width: 420px) {
  .bs-bv__col--sliders,
  .bs-bv__col--stats { padding: 12px 10px; }
  .bs-bv__slider-val { font-size: 0.72rem; padding: 1px 5px; }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .bs-bv__topbar, .bs-bv__col--sliders, .bs-bv__canvas-hint, .bs-bv__suggest { display: none; }
  .bs-bv__layout { display: block; height: auto; }
  .bs-bv__col--stats { break-inside: avoid; overflow: visible; }
}

/* ── Reset + Suggest actions ─────────────────────────────── */
.bs-bv__action-row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 10px;
  margin-top: 12px;
  flex-shrink: 0;
}

.bs-bv__reset,
.bs-bv__suggest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .15s;
  text-align: center;
}

.bs-bv__reset {
  background: #fff;
  border: 1.5px solid var(--bs-line, #f0e1ea);
  color: var(--bs-muted, #6b6480);
}

.bs-bv__reset:hover {
  background: var(--bs-bg-soft, #fff8fb);
  border-color: var(--bs-pink-200, #ffb3d5);
  color: var(--bs-pink-500, #ff5fa2);
  transform: translateY(-1px);
}

/* Existing suggest class stays compatible, this only makes it fit beside reset. */
.bs-bv__action-row .bs-bv__suggest {
  width: 100%;
  margin-top: 0;
}

/* ── Body Shape panel ───────────────────────────────────── */
.bs-bv__shape-card {
  padding-top: 14px;
}

.bs-bv__shape-name {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.15;
  color: var(--bs-ink, #1f1430);
  margin: 4px 0 8px;
}

.bs-bv__shape-copy {
  margin: 0 0 12px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--bs-muted, #6b6480);
}

.bs-bv__shape-ratio {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  padding: 10px 12px;
  background: var(--bs-bg-soft, #fff8fb);
  border: 1px solid var(--bs-line, #f0e1ea);
  border-radius: 14px;
  font-size: 0.74rem;
}

.bs-bv__shape-ratio span {
  color: var(--bs-muted, #6b6480);
  font-weight: 700;
}

.bs-bv__shape-ratio strong {
  color: var(--bs-pink-500, #ff5fa2);
  font-weight: 900;
}

@media (max-width: 580px) {
  .bs-bv__action-row { grid-template-columns: 1fr; }
}


/* ── Single reset action after removing Suggest button ───────── */
.bs-bv__action-row--single {
  display: block;
  margin-top: 12px;
}

.bs-bv__action-row--single .bs-bv__reset {
  display: flex;
  width: 100%;
  min-height: 42px;
  padding: 10px 16px;
  background: var(--bs-pink-50, #fff1f7);
  border: 1.5px solid var(--bs-pink-200, #ffb3d5);
  border-radius: 999px;
  color: var(--bs-pink-500, #ff5fa2);
  font-size: 0.76rem;
  font-weight: 800;
  align-items: center;
  justify-content: center;
}

.bs-bv__action-row--single .bs-bv__reset:hover {
  background: var(--bs-pink-100, #ffe0ee);
  border-color: var(--bs-pink-400, #ff7eb5);
  color: var(--bs-pink-600, #e93f88);
  transform: translateY(-1px);
}