/* =========================================================
   Matrículas Barco - Estudio Sierra (PrestaShop 8.2)  v1.3.0
   Layout: izquierda = diseñar (vista previa + personalización)
           derecha   = comprar (variantes, cantidad, carrito)
   ========================================================= */

:root {
  --mb-accent: #24b9d7;
  --mb-accent-dark: #168ca4;
  --mb-accent-soft: #effafe;
  --mb-border: #e2e6ea;
  --mb-text: #232323;
  --mb-muted: #6b7280;
  --mb-radius: 8px;
  /* Si tu tema tiene cabecera fija, súbelo (p. ej. 64px) para el modo sticky móvil */
  --mb-sticky-top: 0px;
}

/* ---------- Columnas ---------- */
.mb-product-image-area { overflow: visible !important; }
.mb-product-image-area > .product-cover,
.mb-product-image-area .product-cover,
.mb-product-image-area .js-qv-product-images,
.mb-product-image-area .thumb-container,
.mb-product-image-area .product-images,
.mb-product-image-area .images-list {
  display: none !important;
}

@media (min-width: 768px) {
  body.mb-product-preview-layout .product-container > .product-images,
  body.mb-product-preview-layout .product-container > .product-left-column,
  body.mb-product-preview-layout .mb-preview-column {
    flex: 0 0 60% !important;
    max-width: 60% !important;
  }
  body.mb-product-preview-layout .product-container > .product-information,
  body.mb-product-preview-layout .product-container > .product-right-column,
  body.mb-product-preview-layout .mb-preview-info-column {
    flex: 0 0 40% !important;
    max-width: 40% !important;
    min-width: 0;
  }
}
@media (max-width: 767px) {
  body.mb-product-preview-layout .product-container > .product-images,
  body.mb-product-preview-layout .product-container > .product-left-column,
  body.mb-product-preview-layout .product-container > .product-information,
  body.mb-product-preview-layout .product-container > .product-right-column,
  body.mb-product-preview-layout .mb-preview-column,
  body.mb-product-preview-layout .mb-preview-info-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

.mb-customizer-wrapper { width: 100%; min-width: 0; }

.mb-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

/* ---------- Vista previa ---------- */
.mb-stage-container {
  background: #fff;
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  margin-bottom: 14px;
  width: 100%;
  max-width: 100%;
}

.mb-stage-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #eceff1;
}

.mb-stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #363a41;
  text-transform: uppercase;
}

.mb-dot-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mb-accent);
  box-shadow: 0 0 0 3px rgba(36, 185, 215, 0.2);
}

.mb-canvas-pills { display: flex; flex-wrap: wrap; gap: 6px; }

.mb-pill {
  background: #f4f6f8;
  color: #363a41;
  border: 1px solid var(--mb-border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}

.mb-canvas-box {
  position: relative;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow: hidden;
  transition: background 0.25s ease;
}

.mb-canvas-box.is-hull {
  background: linear-gradient(175deg, #d7e8f2 0%, #eef5f9 30%, #f5f2eb 30.5%, #e6dfd3 78%, #d5ccb9 79%, #174c6b 79.5%, #0e354d 100%);
}
.mb-canvas-box.is-hull.is-dark-hull {
  background: linear-gradient(175deg, #c4dae8 0%, #e1edf5 30%, #13293d 30.5%, #0c1c2b 78%, #08131e 79%, #174c6b 79.5%, #0e354d 100%);
}

.mb-vinyl-wrapper {
  /* Centrado vertical sobre la franja del casco (30%–79% del lienzo → centro ≈ 55%).
     El translateY(-50%) lo aplica front.js junto con la escala. */
  position: absolute;
  top: 55%;
  left: 20px;
  right: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}
.mb-vinyl-row { display: flex; align-items: center; gap: 12px; max-width: 100%; width: 100%; }
.mb-vinyl-text {
  width: 100%;
  max-width: 100%;
  font-size: clamp(20px, 4.6vw, 56px);
  line-height: 1.08;
  letter-spacing: 0.04em;
  color: #111;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  padding: 2px 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: color 0.2s ease;
}

.mb-stage-footer {
  padding: 8px 14px;
  background: #fafafa;
  border-top: 1px solid #eceff1;
  font-size: 11px;
  color: #7a7a7a;
}

/* ---------- Panel de personalización ---------- */
.mb-controls-card {
  background: #fff;
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius);
  padding: 18px 20px 20px;
  margin: 0 0 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.mb-controls-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.mb-step-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--mb-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mb-controls-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mb-text);
}

.mb-field { margin-bottom: 18px; min-width: 0; }
.mb-field:last-of-type { margin-bottom: 0; }

.mb-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.mb-controls-card label {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #363a41;
}
.mb-req { color: var(--mb-accent); }
.mb-counter { font-size: 12px; font-weight: 600; color: var(--mb-muted); white-space: nowrap; }
.mb-font-current { font-size: 12px; font-weight: 600; color: var(--mb-accent-dark); }
.mb-hint { margin: 6px 0 0; font-size: 12px; color: var(--mb-muted); }

/* Campo de texto con botón MAYÚSCULAS integrado */
.mb-input-wrap { position: relative; }
.mb-controls-card input[type="text"] {
  width: 100%;
  min-height: 48px;
  padding: 10px 104px 10px 14px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--mb-text);
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mb-controls-card input[type="text"]:focus {
  outline: none;
  border-color: var(--mb-accent);
  box-shadow: 0 0 0 3px rgba(36, 185, 215, 0.18);
}
.mb-controls-card input[type="text"].is-invalid {
  border-color: #d93025;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12);
}
.mb-caps-btn {
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  background: #f4f4f4;
  border: 1px solid #dcdcdc;
  color: #444;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.mb-caps-btn:hover { border-color: var(--mb-accent); color: var(--mb-accent); }

/* Pestañas (control segmentado) */
.mb-font-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: #f1f3f5;
  border-radius: 6px;
}
.mb-font-tab {
  flex: 1;
  background: transparent;
  border: 0;
  color: #555;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.mb-font-tab small { font-weight: 600; opacity: 0.7; }
.mb-font-tab.is-active {
  background: #fff;
  color: var(--mb-accent-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Muestras de tipografía */
.mb-font-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.mb-font-chips.is-hidden { display: none; }
.mb-font-chip {
  min-width: 0;
  background: #f8f9fa;
  border: 1px solid #dfe3e8;
  color: var(--mb-text);
  border-radius: 6px;
  padding: 9px 6px;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mb-font-chip:hover { border-color: var(--mb-accent); color: var(--mb-accent); background: #fff; }
.mb-font-chip.is-active {
  background: var(--mb-accent-soft);
  border-color: var(--mb-accent);
  color: var(--mb-accent-dark);
  box-shadow: inset 0 0 0 1px var(--mb-accent);
}
.mb-font-chip:focus-visible,
.mb-font-tab:focus-visible,
.mb-caps-btn:focus-visible {
  outline: 2px solid var(--mb-accent);
  outline-offset: 2px;
}

.mb-error {
  margin: 14px 0 0;
  padding: 9px 12px;
  background: #fff2f2;
  border-left: 3px solid #d93025;
  color: #b02a37;
  font-size: 13px;
  font-weight: 600;
  border-radius: 3px;
}
.mb-error[hidden] { display: none; }

/* ---------- Móvil: la vista previa queda fija mientras se edita ---------- */
@media (max-width: 767px) {
  .mb-stage-container {
    position: sticky;
    top: var(--mb-sticky-top);
    z-index: 20;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  }
  .mb-stage-toolbar { padding: 8px 10px; }
  .mb-canvas-pills { display: none; }
  .mb-canvas-box { min-height: 170px; padding: 20px 10px; }
  .mb-vinyl-wrapper { left: 10px; right: 10px; }
  .mb-stage-footer { display: none; }
  .mb-controls-card { padding: 16px; }
  .mb-font-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mb-controls-card input[type="text"] { font-size: 16px; } /* evita zoom en iOS */
}

/* ---------- Detalle de pedido (order-detail.tpl) ---------- */
.mb-order-customizations {
  margin: 18px 0;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--mb-border);
  border-radius: 6px;
}
.mb-order-customizations h3 { font-size: 16px; margin: 0 0 12px; color: var(--mb-text); }
.mb-order-line { padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
.mb-order-line:last-child { border-bottom: 0; }

/* ---------- v1.3.3: ocultar "Customer reassurance" (blockreassurance) ----------
   Este CSS solo se carga en los productos de las categorías configuradas en el
   módulo (ver hookDisplayHeader), por lo que el resto de la tienda no se ve afectado.
   Si tu tema usa otro contenedor, añade aquí su selector. */
.blockreassurance_product,
#block-reassurance,
.block-reassurance,
.blockreassurance,
.product-information .reassurance,
.product-additional-info .blockreassurance_product {
  display: none !important;
}