/* ============================================================
   Bag&Block Designer — Frontend CSS  v15.4
   Auto-zoom · Preview modal · Elevated visual design
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --bbbd-brand:     #c2002f;
  --bbbd-brand-dk:  #98001f;
  --bbbd-brand-lt:  #fff0f3;
  --bbbd-ink:       #0f172a;
  --bbbd-ink2:      #334155;
  --bbbd-ink3:      #64748b;
  --bbbd-border:    #e2e8f0;
  --bbbd-surface:   #f8fafc;
  --bbbd-white:     #ffffff;
  --bbbd-radius:    14px;
  --bbbd-font:      'DM Sans', system-ui, -apple-system, sans-serif;
}

/* ── Contenedor ── */
.bbbd {
  background: var(--bbbd-white);
  border: 1px solid var(--bbbd-border);
  border-radius: 20px;
  box-shadow: 0 4px 6px -1px rgba(15,23,42,.04), 0 20px 40px -8px rgba(15,23,42,.10);
  overflow: hidden;
  margin: 28px 0;
  font-family: var(--bbbd-font);
  color: var(--bbbd-ink);
}

/* ── Header del editor ── */
.bbbd__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 0;
  gap: 10px;
  flex-wrap: wrap;
}
.bbbd__headerTitle {
  font-size: 13px;
  font-weight: 700;
  color: var(--bbbd-ink3);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ── Tabs: Editor / Previsualización ── */
.bbbd__tabs {
  display: flex;
  background: var(--bbbd-surface);
  border: 1px solid var(--bbbd-border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.bbbd__tab {
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  color: var(--bbbd-ink3);
  transition: all .15s;
  font-family: var(--bbbd-font);
  display: flex;
  align-items: center;
  gap: 5px;
}
.bbbd__tab:hover { background: var(--bbbd-white); color: var(--bbbd-ink); }
.bbbd__tab--active {
  background: var(--bbbd-white);
  color: var(--bbbd-brand);
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.bbbd__tab svg { width:14px; height:14px; flex-shrink:0; }

/* ── Vista activa ── */
.bbbd__view { display:none; }
.bbbd__view--active { display:block; }

/* ── Área del canvas ── */
.bbbd__top { padding: 12px 14px 0; }

.bbbd__canvasWrap {
  background: var(--bbbd-surface);
  border: 1px solid var(--bbbd-border);
  border-radius: 12px 12px 0 0;
  overflow: auto;
  max-height: 70vh;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

/* CRÍTICO: el canvas NO puede tener width:100% — JS gestiona sus dimensiones */
.bbbd__canvas {
  display: block;
  touch-action: none;
  cursor: crosshair;
}

/* ── Leyenda de zonas ── */
.bbbd__zoneLegend {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 6px 12px;
  background: #f1f5f9;
  border: 1px solid var(--bbbd-border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  min-height: 34px;
}
.bbbd__zlegSep { flex: 1; }

.bbbd__zleg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: .02em;
  white-space: nowrap;
  font-family: var(--bbbd-font);
}
.bbbd__zleg--top     { background: #dbeafe; color: #1d4ed8; }
.bbbd__zleg--side    { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.bbbd__zleg--front   { background: #dcfce7; color: #15803d; }
.bbbd__zleg--blocked { background: #e2e8f0; color: #5a6475; border: 1px solid #b0b8c4; }

.bbbd__zleg::before {
  content:''; display:inline-block;
  width:8px; height:8px; border-radius:2px; flex-shrink:0;
}
.bbbd__zleg--top::before     { background:#3b82f6; }
.bbbd__zleg--side::before    { background:#94a3b8; }
.bbbd__zleg--front::before   { background:#22c55e; }
.bbbd__zleg--blocked::before { background:#b0b8c4; border:1px solid rgba(0,0,0,.15); }

.bbbd__zoneHint {
  font-size:11.5px; font-weight:700; color:#94a3b8;
  padding:3px 10px; border-radius:20px;
  background:#fff; border:1px solid var(--bbbd-border);
  min-width:150px; transition:all .18s; font-style:italic;
  font-family: var(--bbbd-font);
}
.bbbd__zoneHint:not(:empty)            { font-style:normal; }
.bbbd__zoneHint[data-zone="top"]       { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.bbbd__zoneHint[data-zone="front"]     { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; }
.bbbd__zoneHint[data-zone="left"],
.bbbd__zoneHint[data-zone="right"]     { background:#f8fafc; color:#475569; border-color:#cbd5e1; }

/* ── ─────────────────────────────────────────────────────
   PANEL DE PREVISUALIZACIÓN DEL BOLSO
───────────────────────────────────────────────────────── */
.bbbd__preview {
  padding: 20px 18px 24px;
}
.bbbd__previewInner {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.bbbd__bagWrap {
  flex: 0 0 auto;
  position: relative;
  width: 320px;
}
.bbbd__bagSvg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(15,23,42,.15));
}
.bbbd__bagCanvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.bbbd__previewInfo {
  flex: 1;
  min-width: 200px;
}
.bbbd__previewTitle {
  font-size: 18px;
  font-weight: 800;
  color: var(--bbbd-ink);
  margin: 0 0 6px;
}
.bbbd__previewSub {
  font-size: 13px;
  color: var(--bbbd-ink3);
  margin: 0 0 20px;
  line-height: 1.5;
}
.bbbd__previewLegend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bbbd__previewRow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
}
.bbbd__previewDot {
  width: 32px; height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.1);
  flex-shrink: 0;
}
.bbbd__previewPct {
  margin-left: auto;
  font-weight: 700;
  color: var(--bbbd-ink3);
  font-size: 12px;
  min-width: 38px;
  text-align: right;
}
.bbbd__previewEmpty {
  text-align: center;
  padding: 40px 20px;
  color: var(--bbbd-ink3);
}
.bbbd__previewEmpty svg {
  width: 48px; height: 48px;
  opacity: .3;
  margin: 0 auto 12px;
  display: block;
}
.bbbd__previewEmpty p {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

/* ── Controles inferiores ── */
.bbbd__bottom { padding: 0 14px 14px; }

/* ══════════════════════════════════════════════════════════
   TOOLBAR — dos filas intencionales
   Fila 1: herramientas de edición (compactas, tono neutro)
   Fila 2: acciones principales (peso visual mayor)
   ══════════════════════════════════════════════════════════ */

/* Fila 1 — tools */
.bbbd__toolRow {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0 7px;
  border-bottom: 1px solid var(--bbbd-border);
}
.bbbd__toolGroup {
  display: flex;
  align-items: center;
  gap: 3px;
}
.bbbd__toolSep {
  width: 1px;
  height: 20px;
  background: var(--bbbd-border);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Fila 2 — actions */
.bbbd__actionRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 4px;
}
.bbbd__actionRight {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Tool buttons — más pequeños, sin borde propio, fondo transparente */
.bbbd__btn--tool {
  background: transparent;
  border-color: transparent;
  color: var(--bbbd-ink2);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
}
.bbbd__btn--tool:hover:not(:disabled) {
  background: var(--bbbd-surface);
  border-color: var(--bbbd-border);
  box-shadow: none;
  transform: none;
}
.bbbd__btn--tool:disabled { opacity: .35; }

/* Save button — outlined with brand accent */
.bbbd__btn--save {
  background: var(--bbbd-white);
  border-color: var(--bbbd-brand);
  color: var(--bbbd-brand);
  font-weight: 700;
}
.bbbd__btn--save:hover:not(:disabled) {
  background: var(--bbbd-brand-lt);
  border-color: var(--bbbd-brand);
  box-shadow: 0 0 0 3px rgba(194,0,47,.08);
  transform: none;
}

/* ── Botones base ── */
.bbbd__btn {
  appearance: none;
  border: 1px solid var(--bbbd-border);
  background: var(--bbbd-white);
  border-radius: 10px;
  padding: 7px 13px;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--bbbd-ink);
  cursor: pointer;
  transition: background .12s, box-shadow .12s, border-color .12s, color .12s, transform .1s;
  white-space: nowrap;
  line-height: 1.3;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--bbbd-font);
}
.bbbd__btn:hover:not(:disabled) {
  background: #f8f9fc;
  box-shadow: 0 2px 8px rgba(15,23,42,.07);
  transform: translateY(-1px);
}
.bbbd__btn:active:not(:disabled) { transform: translateY(0); }
.bbbd__btn:disabled { opacity:.4; cursor:not-allowed; }

/* Botón peligro */
.bbbd__btn--danger {
  background:#fef2f2 !important;
  border-color:#fca5a5 !important;
  color:#b91c1c !important;
  animation: bbbd-shake .3s ease;
}
@keyframes bbbd-shake {
  0%,100%{ transform:translateX(0); }
  25%    { transform:translateX(-3px); }
  75%    { transform:translateX(3px); }
}

/* Primario */
.bbbd__btn--primary {
  background: var(--bbbd-brand);
  border-color: var(--bbbd-brand);
  color: #fff;
  padding: 8px 18px;
  font-size: 13px;
}
.bbbd__btn--primary:hover:not(:disabled) {
  background: var(--bbbd-brand-dk);
  border-color: var(--bbbd-brand-dk);
  filter: none;
}
.bbbd__btn--primary:disabled {
  background: #d1d5db; border-color:#d1d5db;
  color:#9ca3af; opacity:1;
}
.bbbd__btn--cta-ready {
  animation: bbbd-ctaready .6s ease forwards;
}
@keyframes bbbd-ctaready {
  0% { box-shadow:0 0 0 0 rgba(194,0,47,.5); }
  60%{ box-shadow:0 0 0 10px rgba(194,0,47,0); }
  100%{ box-shadow:none; }
}
.bbbd__btn--loading { pointer-events:none; opacity:.85; }
.bbbd__btnSpinner {
  display:inline-block; width:12px; height:12px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%;
  animation:bbbd-spin .65s linear infinite; flex-shrink:0;
}

/* Borrar activo */
.bbbd__btn--active {
  background:#fef2f2; border-color:#fca5a5; color:#b91c1c;
}
.bbbd__btn--active:hover:not(:disabled) { background:#fee2e2; border-color:#f87171; }

/* Unsaved pulse */
.bbbd__btn--unsaved {
  border-color:#f59e0b !important; color:#78350f !important;
  background:#fffbeb !important;
  animation:bbbd-pulse 2s ease-in-out infinite;
}
@keyframes bbbd-pulse {
  0%,100%{ box-shadow:0 0 0 0 rgba(245,158,11,.4); }
  50%    { box-shadow:0 0 0 5px rgba(245,158,11,0); }
}

/* Badge deshacer */
.bbbd__undoBadge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px;
  background:#dbeafe; color:#1d4ed8;
  border-radius:20px; font-size:10px; font-weight:800;
  padding:0 4px; line-height:1;
  transition:all .15s;
}
.bbbd__btn:disabled .bbbd__undoBadge { background:#e2e8f0; color:#9ca3af; }

/* ── Zoom ── */
.bbbd__zoomGroup {
  display:flex; align-items:center;
  border:1px solid var(--bbbd-border); border-radius:10px; overflow:hidden;
}
.bbbd__zoomGroup .bbbd__btn {
  border:none; border-radius:0; padding:7px 10px;
  font-size:15px; line-height:1;
}
.bbbd__zoomGroup .bbbd__btn:first-child { border-right:1px solid var(--bbbd-border); }
.bbbd__zoomGroup .bbbd__btn:last-child  { border-left:1px solid var(--bbbd-border); }
/* Botón fit-width */
.bbbd__zoomFit {
  font-size:11px; padding:7px 9px;
  border-left:1px solid var(--bbbd-border);
}
.bbbd__zoomVal {
  padding:0 9px; font-size:12px; font-weight:800;
  color:var(--bbbd-ink2); min-width:34px; text-align:center;
  user-select:none;
}

/* ── Paneles inferiores ── */
.bbbd__panels {
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap:8px;
}
.bbbd__panel {
  border:1px solid var(--bbbd-border);
  border-radius:12px; padding:10px 12px;
  background:var(--bbbd-white); min-width:0; overflow:hidden;
}
.bbbd__panelTitle {
  font-weight:800; color:var(--bbbd-ink);
  margin-bottom:8px; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.07em;
}

/* ── Colores — swatches grandes ── */
.bbbd__colors {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap:5px;
}
.bbbd__color {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  border:2px solid var(--bbbd-border);
  border-radius:9px; padding:4px 3px 5px;
  cursor:pointer; background:var(--bbbd-white);
  transition:border-color .12s, background .12s, transform .1s, box-shadow .12s;
  outline:none; font-family:var(--bbbd-font);
}
.bbbd__color:hover:not(:disabled) {
  background:#f9fafb; transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(15,23,42,.09);
}
.bbbd__color:focus-visible {
  border-color:#6366f1;
  box-shadow:0 0 0 3px rgba(99,102,241,.2);
}
.bbbd__colorSwatch {
  width:100%; height:32px; border-radius:6px;
  border:1px solid rgba(0,0,0,.10);
  display:flex; align-items:center; justify-content:center;
  position:relative; transition:filter .12s;
}
.bbbd__color:hover .bbbd__colorSwatch { filter:brightness(.92); }
.bbbd__colorCheck {
  color:#fff; font-size:15px; font-weight:900; line-height:1;
  opacity:0; text-shadow:0 1px 3px rgba(0,0,0,.4);
  transition:opacity .12s, transform .12s;
  transform:scale(.5); user-select:none;
}
.bbbd__color--active .bbbd__colorCheck { opacity:1; transform:scale(1); }
.bbbd__colorLabel {
  font-size:9.5px; font-weight:700; color:var(--bbbd-ink2);
  text-align:center; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  width:100%; max-width:100%;
}
.bbbd__color--active {
  border-color:var(--bbbd-brand);
  box-shadow:0 0 0 2px rgba(194,0,47,.15);
  background:var(--bbbd-brand-lt);
}
.bbbd__color--active .bbbd__colorLabel { color:var(--bbbd-brand-dk); }
.bbbd__hint {
  margin-top:7px; color:var(--bbbd-ink3);
  font-size:11px; font-weight:600;
}

/* ── Counts con barra de progreso ── */
.bbbd__counts { color:var(--bbbd-ink2); font-size:12px; }
.bbbd__countsEmpty { color:#9ca3af; font-size:12px; font-style:italic; }
.bbbd__countRow {
  display:flex; align-items:center; gap:6px;
  padding:2.5px 0; white-space:nowrap;
}
.bbbd__countDot {
  width:26px; height:9px; border-radius:3px;
  border:1px solid rgba(0,0,0,.12); flex-shrink:0;
}
.bbbd__countRow span   { flex:1; color:#4b5563; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.bbbd__countRow strong { color:var(--bbbd-ink); font-weight:800; flex-shrink:0; }
.bbbd__countTotal {
  margin-top:7px; padding-top:6px;
  border-top:1px solid #f1f5f9;
}
.bbbd__countBar {
  height:4px; background:#e2e8f0; border-radius:99px;
  overflow:hidden; margin-bottom:5px;
}
.bbbd__countBarFill {
  height:100%;
  background:linear-gradient(90deg, var(--bbbd-brand), #f43f5e);
  border-radius:99px;
  transition:width .4s cubic-bezier(.4,0,.2,1); min-width:2px;
}
.bbbd__countTotalNum { font-size:11px; font-weight:700; color:var(--bbbd-ink2); }
.bbbd__countTotalNum em { font-style:normal; color:#9ca3af; font-weight:600; }

/* ── Status ── */
.bbbd__status {
  display:flex; align-items:center; gap:5px;
  font-weight:700; font-size:12px; line-height:1.4;
  min-height:20px; transition:color .2s;
  font-family:var(--bbbd-font);
}
.bbbd__status--idle    { color:var(--bbbd-ink3); }
.bbbd__status--saving  { color:#7c3aed; }
.bbbd__status--saved   { color:#059669; }
.bbbd__status--unsaved { color:#d97706; }
.bbbd__status--error   { color:#dc2626; }

.bbbd__dot {
  display:inline-flex; width:8px; height:8px;
  border-radius:50%; flex-shrink:0;
}
.bbbd__dot--ok   { background:#10b981; box-shadow:0 0 0 2px rgba(16,185,129,.22); }
.bbbd__dot--warn { background:#f59e0b; box-shadow:0 0 0 2px rgba(245,158,11,.22); }
.bbbd__dot--err  { background:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,.22); }
.bbbd__dot--spin {
  background:transparent; border:2px solid #7c3aed;
  border-top-color:transparent;
  animation:bbbd-spin .7s linear infinite;
}
@keyframes bbbd-spin { to { transform:rotate(360deg); } }

/* ── Responsive ── */
@media (max-width:780px) {
  .bbbd__panels           { grid-template-columns:1fr; }
  .bbbd__toolRow          { flex-wrap: wrap; }
  .bbbd__actionRow        { flex-wrap: wrap; gap: 8px; }
  .bbbd__actionRight      { width: 100%; justify-content: flex-end; }
  .bbbd__btn--primary     { flex:1; justify-content:center; }
  .bbbd__colors           { grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); }
  .bbbd__bagWrap          { width:100%; }
  .bbbd__previewInner     { flex-direction:column; }
}
@media (max-width:480px) {
  .bbbd__colors           { grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); }
  .bbbd__colorSwatch      { height:26px; }
  .bbbd__header           { padding:10px 12px 0; }
}

/* ── Botón Nuevo diseño ── */
.bbbd__btn--new {
  background: var(--bbbd-surface);
  border: 1px solid var(--bbbd-border);
  color: var(--bbbd-ink2);
  font-weight: 700;
}
.bbbd__btn--new:hover {
  background: #f0fdf4;
  border-color: #86efac;
  color: #15803d;
}

/* ══════════════════════════════════════════════════════════
   ICONOS SVG — alineado y refinado
   ══════════════════════════════════════════════════════════ */

/* Todos los SVG dentro de botones */
.bbbd__btn svg,
.bbbd__tab svg {
  display: inline-block;
  vertical-align: -2px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Separación entre icono y texto */
.bbbd__btn svg + *,
.bbbd__btn svg ~ * {
  margin-left: 4px;
}

/* Spinner de carga — reemplaza <span class="bbbd__btnSpinner"> */
.bbbd__spinIcon {
  display: inline-flex;
  align-items: center;
  vertical-align: -2px;
  animation: bbbd-spin 0.7s linear infinite;
  margin-right: 4px;
}
@keyframes bbbd-spin {
  to { transform: rotate(360deg); }
}

/* Quitar el viejo spinner si quedase */
.bbbd__btnSpinner { display: none; }

/* Botón "Nuevo" — más discreto, sin borde */


/* Botón primario (carrito): icono también blanco */
.bbbd__btn--primary svg {
  opacity: 0.9;
}

/* Zona frontal dot */
.bbbd__zleg--front svg {
  vertical-align: -1px;
}

/* Status dots — reemplazar los viejos :before */
.bbbd__status svg {
  vertical-align: -1px;
  margin-right: 5px;
  flex-shrink: 0;
}

/* ── Bag&Block v15.3 — Integración botón nativo WooCommerce ──────────────
   Cuando el designer está presente en la ficha de producto, el botón nativo
   de WooCommerce sigue siendo el único botón de compra.
   El plugin ya no renderiza un botón "Añadir al carrito" propio.

   Si require_design está activo y no hay diseño guardado, el JS bloqueará
   el submit antes de que llegue al servidor y mostrará un aviso en el editor.
   ──────────────────────────────────────────────────────────────────────── */

/* Indicador de estado del diseño visible junto al botón de WC */
.bbbd__wcStatus {
  display: block;
  font-size: 12px;
  margin-top: 6px;
  color: #6b7280;
  min-height: 1.4em;
}
.bbbd__wcStatus--saved   { color: #16a34a; }
.bbbd__wcStatus--unsaved { color: #d97706; }
.bbbd__wcStatus--error   { color: #dc2626; }


/* ════════════════════════════════════════════════════════════════════════
   VISTA 3D  —  Bag&Block v15.4
   ════════════════════════════════════════════════════════════════════════ */

/* Badge "3D" sobre el tab */
.bbbd__tab--3d { position:relative; }
.bbbd__tab--3d::after {
  content:'3D';
  position:absolute; top:-5px; right:-4px;
  font-size:7.5px; font-weight:800; letter-spacing:.04em;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff; border-radius:4px; padding:1px 4px; line-height:1.5;
  pointer-events:none;
}

/* Contenedor principal */
.bbbd__view--view3d {
  display:none;
  flex-direction:column;
  background:#f1f5f9;
  border-radius:0 0 14px 14px;
  overflow:hidden;
}
.bbbd__view--view3d.bbbd__view--active { display:flex; }

.bbbd__3d {
  position:relative;
  width:100%;
  background:linear-gradient(160deg,#e8eef6 0%,#f1f5f9 55%,#dde5f0 100%);
  border-radius:0 0 14px 14px;
  overflow:hidden;
  min-height:260px;
}

/* Canvas Three.js */
.bbbd__3dCanvas {
  display:block;
  width:100% !important;
  border-radius:0 0 14px 14px;
  touch-action:none;
  cursor:grab;
}
.bbbd__3dCanvas:active { cursor:grabbing; }

/* Overlays (loading / vacío) */
.bbbd__3dOverlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(160deg,rgba(232,238,246,.96),rgba(241,245,249,.96));
  border-radius:0 0 14px 14px;
  z-index:4; pointer-events:none;
}
.bbbd__3dOverlay--empty { display:none; }
.bbbd__3dOverlay svg   { opacity:.4; }
.bbbd__3dOverlay p,
.bbbd__3dLoadingText   { font-size:13px; color:#64748b; margin:0; text-align:center; }

/* Spinner */
.bbbd__3dOverlay--loading .bbbd__spinIcon svg {
  animation:bbbd3dSpin .9s linear infinite;
}
@keyframes bbbd3dSpin { to { transform:rotate(360deg); } }

/* Hint */
.bbbd__3dHint {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  font-size:10.5px; color:rgba(255,255,255,.82);
  background:rgba(15,23,42,.48); border-radius:20px;
  padding:4px 12px; pointer-events:none; white-space:nowrap; z-index:3;
  backdrop-filter:blur(4px);
}