/**
 * ZD Cantidad en Listado - front.css
 *
 * Todos los valores configurables llegan como variables CSS (--zdlq-*) que el
 * modulo inyecta en el <head>. Aqui solo se define la estructura y los cinco
 * disenos disponibles.
 */

.zdlq-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--zdlq-gap, 8px);
  margin: 10px 0 4px;
  position: relative;
  font-family: var(--zdlq-font-family, inherit);
}

.zdlq-wrap.zdlq-layout-stacked {
  flex-direction: column;
  align-items: stretch;
}

.zdlq-wrap.zdlq-align-center { justify-content: center; }
.zdlq-wrap.zdlq-align-right { justify-content: flex-end; }
.zdlq-wrap.zdlq-layout-stacked.zdlq-align-center { align-items: center; }
.zdlq-wrap.zdlq-layout-stacked.zdlq-align-right { align-items: flex-end; }

/* En vertical el control mantiene su ancho natural; el boton puede ir a 100%. */
.zdlq-layout-stacked .zdlq-qty { align-self: flex-start; }
.zdlq-layout-stacked.zdlq-align-center .zdlq-qty { align-self: center; }
.zdlq-layout-stacked.zdlq-align-right .zdlq-qty { align-self: flex-end; }

.zdlq-hidden { display: none !important; }

.zdlq-label {
  font-size: calc(var(--zdlq-font-size, 15px) - 2px);
  font-weight: 500;
  color: var(--zdlq-text, #111827);
  line-height: 1;
}

/* ------------------------------------------------------------------ */
/* Control de cantidad                                                */
/* ------------------------------------------------------------------ */

.zdlq-qty {
  display: inline-flex;
  align-items: stretch;
  height: var(--zdlq-height, 40px);
  background: var(--zdlq-bg, #fff);
  border: var(--zdlq-border-width, 1px) solid var(--zdlq-border-color, #e2e5ec);
  border-radius: var(--zdlq-radius, 12px);
  box-shadow: var(--zdlq-shadow, none);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.zdlq-qty:focus-within {
  border-color: var(--zdlq-focus, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zdlq-focus, #2563eb) 18%, transparent);
}

.zdlq-btn-sign {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--zdlq-height, 40px);
  min-width: 30px;
  padding: 0;
  margin: 0;
  border: 0;
  background: var(--zdlq-sign-bg, transparent) !important;
  color: var(--zdlq-sign, #111827) !important;
  cursor: pointer;
  line-height: 1;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
  -webkit-appearance: none;
  appearance: none;
}

.zdlq-btn-sign:hover:not(:disabled) {
  background: var(--zdlq-sign-hover-bg, #f3f4f6) !important;
  color: var(--zdlq-sign-hover, #111827) !important;
}

.zdlq-btn-sign:active:not(:disabled) { transform: scale(.94); }

.zdlq-btn-sign:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.zdlq-btn-sign svg { pointer-events: none; }

.zdlq-input {
  width: var(--zdlq-input-width, 46px);
  min-width: 34px;
  height: 100%;
  padding: 0 2px;
  border: 0;
  background: transparent;
  text-align: center;
  color: var(--zdlq-text, #111827) !important;
  font-family: inherit;
  font-size: var(--zdlq-font-size, 15px);
  font-weight: var(--zdlq-font-weight, 600);
  line-height: 1;
  box-shadow: none;
  -moz-appearance: textfield;
}

.zdlq-input:focus { outline: none; box-shadow: none; }
.zdlq-input::-webkit-outer-spin-button,
.zdlq-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ------------------------------------------------------------------ */
/* Disenos                                                            */
/* ------------------------------------------------------------------ */

/* Soft: caja con bordes suaves (es el estilo base definido arriba). */

/* Minimal: sin caja, solo signos y numero. */
.zdlq-design-minimal .zdlq-qty {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.zdlq-design-minimal .zdlq-btn-sign {
  width: calc(var(--zdlq-height, 40px) - 10px);
  border-radius: 50%;
}
.zdlq-design-minimal .zdlq-qty:focus-within { box-shadow: none; }

/* Pill: totalmente redondeado. */
.zdlq-design-pill .zdlq-qty { border-radius: 999px; }
.zdlq-design-pill .zdlq-btn-sign { border-radius: 999px; }

/* Square: esquinas rectas. */
.zdlq-design-square .zdlq-qty { border-radius: 0; }

/* Split: signos separados del numero. */
.zdlq-design-split .zdlq-qty {
  border: 0;
  background: transparent;
  box-shadow: none;
  gap: 6px;
  overflow: visible;
}
.zdlq-design-split .zdlq-btn-sign {
  border: var(--zdlq-border-width, 1px) solid var(--zdlq-border-color, #e2e5ec);
  border-radius: var(--zdlq-radius, 12px);
  background: var(--zdlq-bg, #fff);
  box-shadow: var(--zdlq-shadow, none);
}
.zdlq-design-split .zdlq-input {
  border: var(--zdlq-border-width, 1px) solid var(--zdlq-border-color, #e2e5ec);
  border-radius: var(--zdlq-radius, 12px);
  background: var(--zdlq-bg, #fff);
  box-shadow: var(--zdlq-shadow, none);
  width: calc(var(--zdlq-input-width, 46px) + 8px);
}
.zdlq-design-split .zdlq-qty:focus-within { box-shadow: none; }

/* ------------------------------------------------------------------ */
/* Boton anadir al carro                                              */
/* ------------------------------------------------------------------ */

.zdlq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--zdlq-btn-height, 40px);
  padding: 0 16px;
  border: 0;
  border-radius: var(--zdlq-btn-radius, 12px);
  /* !important: los temas suelen fijar el color de .btn y de los enlaces con
     mas especificidad, y el boton debe tomar el color del modulo. */
  background: var(--zdlq-btn-bg, #2563eb) !important;
  color: var(--zdlq-btn-text, #fff) !important;
  font-family: var(--zdlq-font-family, inherit);
  font-size: var(--zdlq-btn-font-size, 14px);
  font-weight: var(--zdlq-font-weight, 600);
  line-height: 1;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
}

/* Selector mas especifico ademas de !important: algunos temas y Creative
   Elements tambien usan !important sobre .btn o sobre los enlaces. */
.zdlq-wrap a.zdlq-btn,
.zdlq-wrap button.zdlq-btn {
  background: var(--zdlq-btn-bg, #2563eb) !important;
  color: var(--zdlq-btn-text, #fff) !important;
  text-decoration: none !important;
}

.zdlq-btn:hover:not(:disabled),
.zdlq-btn:focus:not(:disabled),
.zdlq-btn:active:not(:disabled),
.zdlq-wrap a.zdlq-btn:hover,
.zdlq-wrap button.zdlq-btn:hover:not(:disabled) {
  background: var(--zdlq-btn-hover-bg, #1d4ed8) !important;
  color: var(--zdlq-btn-hover-text, #fff) !important;
  text-decoration: none !important;
}

.zdlq-btn:active:not(:disabled) { transform: translateY(1px); }

.zdlq-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .30);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zdlq-focus, #2563eb) 30%, transparent);
}

.zdlq-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.zdlq-btn-full {
  width: 100%;
  flex: 1 1 100%;
}

.zdlq-btn .zdlq-ico { flex: 0 0 auto; }

.zdlq-btn.zdlq-loading { opacity: .75; pointer-events: none; }

/* ------------------------------------------------------------------ */
/* Aviso (stock maximo, errores del carro)                            */
/* ------------------------------------------------------------------ */

.zdlq-note {
  flex: 1 1 100%;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
  color: #b42318;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .2s ease, max-height .2s ease;
}

.zdlq-note.zdlq-note-on {
  opacity: 1;
  max-height: 60px;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                         */
/* ------------------------------------------------------------------ */

@media (max-width: 575px) {
  .zdlq-wrap { gap: 6px; }
  .zdlq-btn { padding: 0 12px; }
}

/* ------------------------------------------------------------------ */
/* Sin stock / por debajo de la cantidad minima                       */
/* ------------------------------------------------------------------ */

.zdlq-oos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--zdlq-btn-height, 40px);
  padding: 0 14px;
  border-radius: var(--zdlq-btn-radius, 12px);
  background: var(--zdlq-oos-bg, #f3f4f6) !important;
  color: var(--zdlq-oos-color, #6b7280) !important;
  font-family: var(--zdlq-font-family, inherit);
  font-size: var(--zdlq-btn-font-size, 14px);
  font-weight: var(--zdlq-font-weight, 600);
  line-height: 1;
  white-space: nowrap;
}

.zdlq-oos::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}

/* Modo "selector desactivado": se atenua todo el bloque. */
.zdlq-wrap-oos .zdlq-qty {
  opacity: .55;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Boton "Cotizar por WhatsApp" (estilo de ZD WhatsApp)               */
/* ------------------------------------------------------------------ */

.zdlq-quote,
.zdlq-wrap a.zdlq-quote {
  background: var(--zdlq-quote-bg, #25d366) !important;
  color: var(--zdlq-quote-color, #fff) !important;
  text-decoration: none !important;
}

.zdlq-quote:hover,
.zdlq-quote:focus,
.zdlq-quote:active,
.zdlq-wrap a.zdlq-quote:hover,
.zdlq-wrap a.zdlq-quote:focus {
  background: var(--zdlq-quote-hover-bg, #1da851) !important;
  color: var(--zdlq-quote-hover-color, #fff) !important;
}

/* El icono hereda el color del texto del boton. */
.zdlq-btn .zdlq-ico,
.zdlq-btn .zdlq-ico path,
.zdlq-btn .zdlq-ico circle {
  fill: currentColor;
}

.zdlq-quote .zdlq-ico path { fill: currentColor; }

/* Aviso del editor de Creative Elements cuando no hay producto en contexto. */
.zdlq-slot-empty {
  padding: 10px 12px;
  border: 1px dashed #c7d2fe;
  border-radius: 10px;
  background: #f8faff;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.35;
}

/* Boton de cotizacion de ZD WhatsApp insertado por el widget: su propio CSS
   manda, aqui solo se ajusta al bloque. */
.zdlq-quote-box {
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
}

.zdlq-wrap .zdlq-quote-box .zdwa-stock-btn { margin: 0 !important; }