/* assets/customizer.css - Ajustado: bolas más cercanas y responsive móvil mejorado
   + reglas extra para integrar hilo como imagen SVG (pattern) y mejorar visual y accesibilidad */

/* fallback relative @font-face (opcional) */
@font-face {
  font-family: 'Agright';
  src: url('agright regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ElMessiriVar';
  src: url('ElMessiri-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Root variables y fuente global */
:root{
  --primary: #0B4D3F;
  --secondary: #01211C;
  --text: #142B21;
  --gold: #d4af37;
  --card: #f2f2f2;
  --radius: 14px;
  font-family: 'Agright', 'ElMessiriVar', 'ElMessiri', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* OVERRIDE local: eliminar gaps/margins/paddings dentro del personalizador */
#bracelet-customizer-root .bc-beads-palette,
#bracelet-customizer-root .bc-beads-palette * {
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
#bracelet-customizer-root .bc-beads-palette { grid-gap:0 !important; grid-column-gap:0 !important; grid-row-gap:0 !important; justify-items:center !important; }
#bracelet-customizer-root .bc-bead-item { margin:0 !important; padding:6px 4px !important; }
#bracelet-customizer-root .bc-meta { margin-top:2px !important; gap:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; }
#bracelet-customizer-root .bc-charms-palette { gap: 0 !important; column-gap: 0 !important; }
#bracelet-customizer-root h3, #bracelet-customizer-root h4 { margin:6px 0 !important; padding:0 !important; }
#bracelet-customizer-root { --wp--style--block-gap: 0 !important; }

/* Layout */
.bc-container{
  display:flex;
  gap:28px; /* reducido para mejor compactación */
  align-items:flex-start;
  padding:20px;
  max-width:1200px;
  margin:0 auto;
  color:var(--text);
  box-sizing: border-box;
}
.bc-preview{ flex:1; display:flex; flex-direction:column; gap:12px; }
.bc-title{ font-size:30px; text-align:center; margin:6px 0 8px; color:var(--secondary); font-weight:700 }

/* Canvas */
.bc-canvas-wrap{
  background:var(--card);
  border-radius:var(--radius);
  padding:18px;
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:visible;
  -webkit-user-select:none; user-select:none;
  touch-action: none;
}

/* Make SVG fully responsive inside canvas but keep aspect ratio via viewBox (JS handles VB) */
.bc-canvas-wrap svg, #bc-svg {
  width: 100%;
  height: auto;
  display: block;
  /* allow overflow for delete overlay */
  overflow: visible;
}

/* Ensure the SVG thread rect renders crisply and images inside patterns are not pixelated */
#bc-svg image {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimizeQuality;
  /* preserve aspect is handled in JS (preserveAspectRatio="none") */
}

/* Preview controls (centered under canvas) */
.bc-preview-controls{ display:flex; flex-direction:column; gap:12px; align-items:center; width:100%; max-width:760px; margin:0 auto; }

/* Panel */
.bc-panel{ width:480px; display:flex; flex-direction:column; gap:12px; }
.bc-section{ background:transparent; padding:6px 0; width:100% }
.bc-section h4{ font-size:18px; margin:6px 0 8px; color:var(--secondary); font-weight:700; text-align:left }

/* BEADS GRID: 3 columnas desktop - más compacta */
.bc-beads-palette{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items:start;
  width:100%;
  justify-items:center; /* centra cada item para que se vean más pegados */
  grid-auto-flow: dense;
  box-sizing: border-box;
}

body .bc-beads-palette {
    gap: 0 !important;
}

/* bead item (compacto) */
.bc-bead-item{
  display:flex;
  align-items:center;
  cursor:pointer;
  user-select:none;
  flex-direction:column;
  text-align:center;
  outline:none;
  touch-action: none;
  background: transparent !important;
  border-radius:8px;
  transition: transform .12s, box-shadow .12s;
  width: 100%;
  max-width: 160px;
  box-sizing: border-box;
}
.bc-bead-item:focus,
.bc-bead-item:hover{ transform: translateY(-4px); }

/* thumbnails circular - usar clamp para evitar demasiada reducción */
.bc-bead-thumb{
  width: 100%;
  max-width: 134px;
  /* clamp(min, preferred, max) para adaptarse suavemente */
  max-width: clamp(72px, 18vw, 134px);
  aspect-ratio: 1 / 1;
  border-radius:50% !important;
  object-fit:cover !important;
  box-shadow:0 18px 30px rgba(0,0,0,0.14);
  transition: transform .14s;
  background: transparent !important;
  display:block;
  -webkit-mask-image: radial-gradient(circle, #000 100%, transparent 100%);
  mask-image: radial-gradient(circle, #000 100%, transparent 100%);
}
.bc-bead-thumb.tiny{ max-width: clamp(64px, 12vw, 88px); }
.bc-bead-thumb.small{ max-width: clamp(76px, 14vw, 98px); }
.bc-bead-thumb.medium{ max-width: clamp(86px, 15.5vw, 110px); }
.bc-bead-thumb.large{ max-width: clamp(96px, 17.5vw, 122px); }
.bc-bead-thumb.xlarge{ max-width: clamp(110px, 20vw, 134px); }
.bc-bead-thumb.xxlarge{ max-width: 144px; }

/* ajustes: pegar el texto inferior a la bola y separar tamaño / precio */
.bc-meta{
  font-size:13px;
  color:#333;
  margin-top:4px;           /* <- reducido para pegar el texto a la bola */
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  display:flex;             /* <- facilita separación vertical entre líneas */
  flex-direction:column;
  align-items:center;
  gap:0px;                  /* <- espacio entre "6MM" y el precio */
  padding:0;                /* asegurar sin padding que empuje fuera */
  box-sizing: border-box;
}
.bc-meta b, .bc-meta strong { font-weight:700; }
.bc-price{
  font-weight:800;
  color:var(--text);
  display:block;
  margin:0;
}

/* thread colors centered */
.bc-thread-section h4{ text-align:center; text-transform:none; margin-bottom:6px; }
.bc-thread-colors{ display:flex; gap:10px; align-items:center; justify-content:center; }

/* Thread buttons: visual de selección (se añadirá/clasifica .active desde JS si quieres) */
.bc-thread-btn{
  width:44px;
  height:34px;
  border:2px solid rgba(0,0,0,0.06);
  border-radius:10px;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,0.06);
  transition: transform .12s, box-shadow .12s, border-color .12s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background-clip: padding-box;
}
.bc-thread-btn:focus, .bc-thread-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.08); outline: none; border-color: rgba(0,0,0,0.12); }

/* estado visual cuando está activo (JS puede añadir .active) */
.bc-thread-btn.active{
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(0,0,0,0.18);
}

/* charms */
.bc-herrajes-section h4{ text-align:center; }
.bc-charms-wrap{ display:flex; align-items:center; gap:8px; position:relative; width:100%; justify-content:center; }
.bc-charms-arrow{ width:40px; height:40px; border-radius:10px; border:1px solid #ddd; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:700; }
.bc-charms-arrow.disabled{ opacity:0.45; cursor:default; }
.bc-charms-palette{ display:flex; gap:12px; align-items:center; overflow-x:auto; padding:8px; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; width:100%; max-width:680px; justify-content:flex-start; }
.bc-charm-item{ background:transparent; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; padding:6px; min-width:100px; }
.bc-charm-item svg{ fill:var(--gold); filter:drop-shadow(0 4px 6px rgba(0,0,0,0.12)); width:72px; height:72px; }

/* svg beads */
.bc-svg-bead{
  cursor:grab !important;
  transition: transform 120ms cubic-bezier(.2,.9,.2,1), filter 120ms, opacity 120ms;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.14));
  touch-action: none;
  transform-origin:center;
  will-change: transform, opacity;
}
.bc-svg-bead.pressing{ transform: scale(1.04); filter: drop-shadow(0 16px 22px rgba(0,0,0,0.20)); }
.bc-svg-bead.dragging{ transform: scale(1.22); filter: drop-shadow(0 28px 36px rgba(0,0,0,0.24)); opacity: 0.98; z-index: 9999; }
@keyframes beadDrop { 0%{transform:scale(1.22)} 60%{transform:scale(.96)} 100%{transform:scale(1)} }
.bc-svg-bead.pulse{ animation: beadDrop 260ms cubic-bezier(.2,.9,.2,1); }

/* thread: remover filtros y dejar render limpio */
#bc-thread{ filter:none; shape-rendering:geometricPrecision; }

/* Si quieres que el hilo tenga un borde sutil (opcional), descomenta:
/* #bc-thread { stroke: rgba(0,0,0,0.05); stroke-width: 0.5; } */

/* floating drag wrapper */
#bc-floating-drag{
  position:fixed;
  pointer-events:none;
  z-index:220000;
  will-change:transform,opacity;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  transform: translate3d(-9999px,-9999px,0) scale(1);
  transition: transform 100ms cubic-bezier(.2,.9,.2,1), opacity 120ms;
}
#bc-floating-drag .bc-floating-img{
  width:100%;
  height:auto;
  border-radius:50%;
  display:block;
  box-shadow:0 22px 36px rgba(0,0,0,0.22);
  border: 2px solid rgba(255,255,255,0.12);
  background: transparent !important;
}
#bc-floating-drag .bc-floating-caption{
  background: rgba(255,255,255,0.98);
  padding:6px 10px;
  border-radius:12px;
  font-size:13px;
  font-weight:700;
  color:#222;
  box-shadow: 0 6px 12px rgba(0,0,0,0.06);
  white-space:nowrap;
  transform: translateY(2px);
}

/* summary */
.bc-summary{ margin-top:6px; display:flex; flex-direction:column; gap:12px }
.bc-price-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 8px }
.bc-total-label{ font-weight:800; color:var(--secondary) }
.bc-total-amount{ font-size:32px; font-weight:900; color:var(--secondary) }
.bc-add-btn{ background:var(--primary); color:#fff; padding:12px; border-radius:30px; border:0; font-size:18px; cursor:pointer; box-shadow:0 6px 0 rgba(0,0,0,0.06) }
.bc-help{ font-size:13px; color:#666; margin-top:6px }

/* TOAST (top-right) */
#bc-toast-wrap{
  position:fixed;
  top:18px;
  right:18px;
  z-index:999999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.bc-toast {
  pointer-events:auto;
  min-width:220px;
  max-width:420px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding:12px 14px;
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  font-weight:700;
  font-family: inherit;
  transform: translateY(-8px);
  opacity:0;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .22s;
}
.bc-toast.show { transform: translateY(0); opacity:1; }
.bc-toast.error { background: rgba(200,40,40,0.95); }

/* responsive adjustments */

/* 1200px and down: change to column layout and move beads below canvas (no shrinking) */
@media (max-width:1200px){
  .bc-container{
    flex-direction:column;
    gap:16px;
    padding:18px;
  }
  .bc-preview{ order:1; width:100%; }
  .bc-panel{ order:2; width:100%; }
  .bc-beads-palette{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .bc-bead-thumb.tiny{ max-width: clamp(68px, 14vw, 94px); }
  .bc-bead-thumb.small{ max-width: clamp(80px, 15.5vw, 104px); }
  .bc-bead-thumb.medium{ max-width: clamp(92px, 16.5vw, 116px); }
  .bc-bead-thumb.large{ max-width: clamp(100px, 17.5vw, 122px); }
  .bc-bead-thumb.xlarge{ max-width: clamp(112px, 20vw, 134px); }
  .bc-meta{ margin-top:3px; line-height:1.01; }
  .bc-canvas-wrap{ min-height:360px; padding:12px; }
}

/* smaller screens (tablet/phone landscape) */
@media (max-width:780px){
  .bc-container{ padding:12px; gap:12px; }
  .bc-panel{ width:100%; order:2; }
  .bc-canvas-wrap{ min-height:420px; padding:12px; }
  .bc-beads-palette{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .bc-bead-thumb{ max-width: clamp(82px, 24vw, 98px); }
  .bc-charm-item svg{ width:82px; height:82px; }
  .bc-title{ font-size:24px; }
  .bc-preview-controls{ max-width:100%; padding:0 6px; box-sizing:border-box; }
  .bc-add-btn{ padding:12px; }
}

/* very small (phone portrait) */
@media (max-width:420px){
  .bc-beads-palette{ grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .bc-canvas-wrap{ min-height:320px; padding:10px; }
  .bc-bead-thumb{ max-width: clamp(84px, 36vw, 92px); }
  .bc-charm-item svg{ width:72px; height:72px; }
  .bc-title{ font-size:20px; }
  .bc-thread-colors{ gap:8px; }
  .bc-thread-btn{ width:40px; height:36px; border-radius:8px; }
  .bc-meta{ font-size:12px; }
  .bc-add-btn{ font-size:16px; padding:10px; }
}

/* ensure floating draggable image keeps aspect */
#bc-floating-drag .bc-floating-img{ aspect-ratio:1/1; object-fit:cover; border-radius:50%; }

/* Accessibility: increase touch target slightly without visual change */
.bc-thread-btn, .bc-charms-arrow, .bc-charm-item, .bc-bead-item { -webkit-tap-highlight-color: rgba(0,0,0,0.05); }

/* Small helper: ensure delete overlay text uses plugin font when available */
#bc-svg text { font-family: 'Agright', 'ElMessiriVar', Arial, Helvetica, sans-serif; font-size:12px; fill:#111; }

/* END */


/* Fix: miniaturas no sean "icons", pulido visual */
#bracelet-customizer-root .bc-bead-item img,
#bracelet-customizer-root .bc-bead-item .bc-bead-thumb,
#bracelet-customizer-root .bc-bead-item .bc-bead-thumb img {
  display: block;
  width: auto;
  max-width: 64px; /* ajusta según tu diseño */
  height: auto;
  object-fit: contain;
  image-rendering: auto;
  vertical-align: middle;
  -webkit-user-drag: none;
  user-select: none;
}

/* Floating drag (estética) */
#bc-floating-drag {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  opacity: 0.98;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
#bc-floating-drag .bc-floating-img {
  display:block;
  width:100%;
  height:auto;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Quitar bordes/rectángulos legacy que puedan aparecer en el hilo */
#bracelet-customizer-root svg image#bc-thread-image {
  shape-rendering: crispEdges;
  image-rendering: auto;
}

/* Permitir que el <image> SVG use el tamaño que asigna JS */
#bc-svg .bc-svg-charm-image {
  max-width: none !important;
  max-height: none !important;
  width: auto !important;
  height: auto !important;
  image-rendering: auto;
}