/* ============================================================
   Personalizador Meeks v1.7.0
   ============================================================ */

/* ----- Wrap del botón ----- */
.meeks-personalizador-wrap{
  display:block;
  width:100%;
  margin:0 0 10px 0;
  padding:0;
  position:static !important;
  float:none;
  clear:both;
}

/* ----- Botón Personalizar ----- */
.meeks-open-personalizador,
.single-product .meeks-open-personalizador,
body .single-product .meeks-open-personalizador.button{
  display:block !important;
  width:100% !important;
  max-width:420px;
  min-height:44px;
  border-radius:8px;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  box-sizing:border-box;
  white-space:normal;
}

/* ----- Modal overlay (se mueve al body por JS) ----- */
.meeks-personalizador-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:99999999 !important;
  display:none;
  padding:0;
}
.meeks-personalizador-modal.is-open{
  display:flex !important;
  align-items:center;
  justify-content:center;
}

/* Backdrop */
.meeks-personalizador-backdrop{
  position:absolute !important;
  inset:0 !important;
  background:rgba(0,0,0,.55);
}

/* Caja del modal — desktop */
.meeks-personalizador-box{
  position:relative !important;
  z-index:2 !important;
  background:#fff;
  max-width:1050px;
  width:94%;
  max-height:90vh;
  overflow:auto;
  margin:auto;
  padding:22px;
  border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.22);
}

/* Botón cerrar */
.meeks-close-personalizador{
  position:absolute;
  top:10px;
  right:14px;
  border:0;
  background:transparent;
  font-size:32px;
  line-height:1;
  cursor:pointer;
  z-index:10;
}

/* Grid interior */
.meeks-personalizador-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  align-items:start;
}
@media (max-width:900px){
  .meeks-personalizador-grid{grid-template-columns:1fr}
  .meeks-personalizador-box{padding:18px}
}

/* Stage de vista previa */
.meeks-preview-panel h3,.meeks-controls-panel h3{margin:0 0 14px}
.meeks-preview-stage{
  position:relative;
  background:#f7f7f7;
  border:1px solid #e6e6e6;
  border-radius:14px;
  padding:12px;
  overflow:hidden;
}
.meeks-preview-product{display:block;width:100%;height:auto;border-radius:10px}

/* Zona de impresión */
.meeks-print-zone{position:absolute;border:2px dashed rgba(24,143,99,.75);background:rgba(24,143,99,.08);border-radius:10px;overflow:hidden}
.meeks-zone-move-handle{position:absolute;top:4px;left:6px;background:rgba(24,143,99,.92);color:#fff;font-size:11px;padding:3px 7px;border-radius:999px;cursor:move;z-index:6}
.meeks-zone-resize-handle{position:absolute;right:-8px;bottom:-8px;width:18px;height:18px;background:#138f63;border-radius:50%;cursor:nwse-resize;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);z-index:6}

/* Capas arrastrables */
.meeks-draggable{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);cursor:move;user-select:none;touch-action:none}
.meeks-text-layer{padding:4px 8px;white-space:nowrap;width:max-content}
.meeks-preview-text{font-weight:700;font-size:18px;line-height:1.15;color:#1f2937;white-space:nowrap;text-align:center}
.meeks-image-layer{width:120px;min-width:50px;min-height:50px}
.meeks-preview-upload{display:block;width:100%;height:auto;object-fit:contain;border-radius:8px}
.meeks-resize-handle{position:absolute;right:-8px;bottom:-8px;width:16px;height:16px;background:#0f5;border-radius:50%;cursor:nwse-resize;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}

/* Textos auxiliares */
.meeks-preview-tip{margin:10px 0 0;color:#6b7280;font-size:13px}
.meeks-print-info{background:#f7f7f7;padding:14px 16px;border-radius:10px;margin-bottom:16px;line-height:1.6;word-break:break-word}
.meeks-print-info p{margin:0 0 8px}
.meeks-print-info p:last-child{margin-bottom:0}
.meeks-help-text{color:#666}

/* Campos */
.meeks-field{margin-bottom:16px}
.meeks-field label{display:block;font-weight:600;margin-bottom:8px}
.meeks-field input[type="text"],.meeks-field textarea,.meeks-field input[type="file"],.meeks-field input[type="range"]{
  width:100%;border:1px solid #ddd;border-radius:8px;padding:10px 12px;background:#fff;box-sizing:border-box;
}
.meeks-field small{display:block;margin-top:6px;color:#666}
.meeks-image-tools{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.meeks-image-tools .button{margin:0}

/* Swatches */
.meeks-color-swatches{display:flex;flex-wrap:wrap;gap:10px}
button[type="button"].meeks-color-swatch,.meeks-color-swatches .meeks-color-swatch{
  width:28px !important;height:28px !important;min-width:28px !important;min-height:28px !important;
  padding:0 !important;margin:0 !important;border-radius:50% !important;border:2px solid transparent !important;
  cursor:pointer !important;background:none !important;background-image:none !important;
  background-color:transparent !important;position:relative !important;overflow:visible !important;
  appearance:none !important;-webkit-appearance:none !important;box-shadow:none !important;
}
button[type="button"].meeks-color-swatch::before,.meeks-color-swatches .meeks-color-swatch::before{
  content:"" !important;position:absolute !important;inset:0 !important;border-radius:50% !important;
  background:var(--meeks-swatch-color) !important;background-color:var(--meeks-swatch-color) !important;
  border:1px solid rgba(0,0,0,.12) !important;
}
button[type="button"].meeks-color-swatch[data-color="#ffffff"]::before,.meeks-color-swatches .meeks-color-swatch[data-color="#ffffff"]::before{border:1px solid #cfcfcf !important}
.meeks-color-swatch.is-active{outline:2px solid #138f63 !important;outline-offset:2px !important}

/* Guardar */
.meeks-actions{display:flex;justify-content:flex-end}
.meeks-saved-message{margin-top:12px;color:#138f63;font-weight:600}

/* ======================================================
   MÓVIL — modal a pantalla completa
   ====================================================== */
@media (max-width:767px){
  .meeks-open-personalizador,
  .single-product .meeks-open-personalizador,
  body .single-product .meeks-open-personalizador.button{
    max-width:100% !important;
    min-height:44px !important;
    font-size:14px !important;
    padding:12px 16px !important;
  }

  /* Modal pantalla completa */
  .meeks-personalizador-modal.is-open{
    align-items:stretch !important;
    justify-content:stretch !important;
  }
  .meeks-personalizador-box{
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    margin:0 !important;
    border-radius:0 !important;
    padding:12px !important;
    overflow-y:auto !important;
  }
  .meeks-close-personalizador{
    top:8px !important;right:10px !important;font-size:28px !important;
  }
  .meeks-personalizador-grid{
    grid-template-columns:1fr !important;gap:14px !important;
  }
  .meeks-preview-stage{min-height:55vw !important}
  .meeks-preview-tip{font-size:12px !important}
  .meeks-print-info{padding:12px !important;font-size:14px !important}
  .meeks-field{margin-bottom:14px !important}
  .meeks-field label{font-size:14px !important}
  .meeks-field input[type="text"],.meeks-field textarea,.meeks-field input[type="file"]{font-size:16px !important}
  .meeks-actions{justify-content:stretch !important}
  .meeks-save-personalization,body .meeks-save-personalization.button{
    width:100% !important;display:block !important;padding:14px 16px !important;font-size:14px !important;
  }
}

/* ======================================================
   DESKTOP — modal centrado
   ====================================================== */
@media (min-width:768px){
  .meeks-personalizador-modal.is-open{
    align-items:center !important;
    justify-content:center !important;
    padding:16px !important;
  }
}

.meeks-print-zone{transform-origin:center center;will-change:transform}
.meeks-zone-move-handle{user-select:none}
.meeks-zone-rotate-wrap{display:flex;align-items:center;gap:10px}
.meeks-zone-rotate-wrap input[type=range]{flex:1}
.meeks-zone-rotation-value{min-width:52px;font-weight:700;color:#0f172a;text-align:right}

/* Vista del diseño guardado en carrito / mini carrito */
.meeks-cart-design-link{
  display:inline-block;
  color:#2a7fff !important;
  font-weight:600;
  text-decoration:none;
}
.meeks-cart-design-link:hover{text-decoration:underline;}
.meeks-cart-design-lightbox{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(0,0,0,.62);
}
.meeks-cart-design-lightbox.is-open{display:flex;}
.meeks-cart-design-box{
  position:relative;
  max-width:min(92vw,520px);
  max-height:88vh;
  background:#fff;
  border-radius:14px;
  padding:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
}
.meeks-cart-design-box img{
  display:block;
  max-width:100%;
  max-height:72vh;
  height:auto;
  border-radius:10px;
}
.meeks-cart-design-title{
  margin:0 42px 12px 0;
  font-size:18px;
  font-weight:700;
  color:#111827;
}
.meeks-cart-design-close{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border:0;
  border-radius:999px;
  background:#f3f4f6;
  color:#111827;
  font-size:24px;
  line-height:34px;
  cursor:pointer;
}


/* FIX móvil: lightbox de "Ver diseño" con scroll propio y sin cortes en Safari/mini cart */
.meeks-cart-design-lightbox{
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
.meeks-cart-design-box{
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
@media (max-width:767px){
  .meeks-cart-design-lightbox.is-open{
    display:block !important;
    padding:14px !important;
    padding-top:calc(14px + env(safe-area-inset-top)) !important;
    padding-bottom:calc(90px + env(safe-area-inset-bottom)) !important;
  }
  .meeks-cart-design-box{
    width:100% !important;
    max-width:100% !important;
    max-height:none !important;
    margin:0 auto !important;
    padding:14px !important;
  }
  .meeks-cart-design-box img{
    width:100% !important;
    max-width:100% !important;
    max-height:none !important;
    height:auto !important;
  }
}