/* ============================================================
   Echando Raíces — checkout, paso 2 "Envío" (antes "Dirección")
   Añadido 2026-07-30, a partir de la propuesta aprobada por Victoria
   (propuesta-envio_v7.html, iterada en 7 rondas de feedback). Cero
   plantillas .tpl tocadas: todo el marcado (selector de dirección,
   formulario, campos) es nativo de PrestaShop — aquí solo se restyla
   y, en custom-checkout-envio.js, se añade el selector de método de
   envío y las validaciones.

   IMPORTANTE — lo que esto NO hace (ver informe completo en el chat):
   No existe todavía un transportista real "Recogida en tienda" dado
   de alta en Transporte → Transportistas. Hasta que Victoria lo cree
   ella misma, elegir "Recogida en tienda" aquí evita pedir dirección
   real (autorrellena los campos con los datos de la tienda) pero NO
   cambia el transportista/coste real aplicado al pedido — eso lo
   decide PrestaShop con el transportista que tenga configurado,
   independientemente de esta elección visual.
   ============================================================ */
:root {
  --hr-color-acento: #581f7c;
  --hr-color-acento-claro: #c79ce2;
  --hr-color-texto-sobre-acento: #e6dacc;
  --hr-color-fondo-oscuro: #221200;
  --hr-color-texto-claro: #e6dacc;
  --hr-color-texto-oscuro: #221200;
  --hr-color-borde-oscuro: rgba(230, 218, 204, 0.25);
  --hr-color-error: #e57468;
  --hr-hover-bg: rgba(230, 218, 204, 0.08);
  --hr-radius-accion: 8px;
  --hr-radius-card: 10px;
}

/* ---- cabecera "Añadir dirección" / "Cancelar" ----
   Fila con el título a la izquierda y el enlace nativo "Cancelar"
   (movido tal cual por JS, misma funcionalidad) a la derecha del todo.
   Antes "Cancelar" solo aparecía debajo del botón "Continuar", al
   final del todo (2026-10-18, ronda 8: se creó esta cabecera, pero
   colocada ARRIBA del todo, encima del selector de método de envío).

   Ronda 9 (2026-10-18): Victoria pidió moverla DEBAJO del selector de
   método de envío, justo encima del formulario de dirección en sí
   ("para que tenga más relación con el formulario") — ver
   custom-checkout-envio.js, donde ahora se inserta con
   selector.insertAdjacentElement('afterend', header) en vez de ir al
   principio de .content. Además pasa a ser condicional: solo se
   muestra cuando de verdad hace falta rellenar una dirección (envío a
   domicilio siempre, o recogida en tienda + "Quiero factura completa")
   — oculta por defecto, con el mismo patrón hr-visible que el resto
   del archivo (ver updateAddressFormHeaderVisibility en el JS). */
body#checkout .hr-address-form-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 20px;
}
body#checkout .hr-address-form-header.hr-visible { display: flex; }
body#checkout .hr-address-form-header .hr-address-form-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--hr-color-texto-claro);
}
body#checkout .hr-address-form-header .js-cancel-address {
  color: var(--hr-color-acento-claro) !important;
  font-size: 13px;
  font-weight: 500;
}
body#checkout .hr-address-form-header .js-cancel-address:hover {
  color: var(--hr-color-texto-claro) !important;
}

/* ---- tarjeta del paso (mismo patrón que "Datos personales") ---- */
body#checkout #checkout-addresses-step.checkout-step {
  background: transparent !important;
}
body#checkout #checkout-addresses-step .content {
  border: 1px solid var(--hr-color-borde-oscuro);
  border-radius: var(--hr-radius-card);
  background: rgba(230, 218, 204, 0.03);
  padding: 28px !important;
  max-width: 620px;
  color: var(--hr-color-texto-claro);
}
/* El título de este paso ("Envío") compartía el mismo h3 nativo que
   los otros 3 pasos, pero aquí se achicaba a 15px/700 — un ajuste
   suelto de cuando este archivo se escribió (2026-07-30), antes de
   que existiera custom-checkout-shell.css con la regla común a los
   4 títulos de paso (24px/500). Quitado el 2026-10-16 porque
   Victoria pidió que los tres títulos midieran lo mismo: al tener
   más especificidad (dos ID en vez de uno), esta regla ganaba
   siempre sobre la del archivo compartido. */

/* ============================================================
   1) Selector de método de envío (inyectado por JS antes del
   formulario de dirección / selector de direcciones guardadas)
   ============================================================ */
body#checkout .hr-shipping-method { margin-bottom: 24px; }
body#checkout .hr-shipping-method .hr-method-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body#checkout .hr-method-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--hr-color-borde-oscuro);
  border-radius: var(--hr-radius-card);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  /* El tema nativo (theme.css) trae una regla global ".label, label {
     text-align: right }" — como este componente es un <label>, el
     título y la descripción heredaban ese "right" y se veían
     desplazados a la derecha (detectado por Victoria con 3 capturas,
     2026-10-18). El precio sí usa flexbox (justify-content:
     space-between en .hr-method-title) para ir a la derecha, así que
     no depende de text-align — se puede forzar "left" aquí sin tocar
     la posición del precio. */
  text-align: left;
}
body#checkout .hr-method-option:hover { border-color: rgba(199, 156, 226, 0.5); }
body#checkout .hr-method-option.hr-selected {
  border-color: var(--hr-color-acento-claro);
  background: rgba(199, 156, 226, 0.08);
}
body#checkout .hr-method-option input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--hr-color-acento-claro);
  flex-shrink: 0;
}
body#checkout .hr-method-option .hr-method-body { flex: 1; }
body#checkout .hr-method-option .hr-method-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--hr-color-texto-claro);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
body#checkout .hr-method-option .hr-method-price {
  font-weight: 700;
  color: var(--hr-color-acento-claro);
  white-space: nowrap;
  font-size: 13.5px;
}
body#checkout .hr-method-option .hr-method-price .hr-desde {
  font-weight: 500;
  font-size: 11.5px;
  color: rgba(199, 156, 226, 0.8);
  margin-right: 6px;
}
body#checkout .hr-method-option .hr-method-desc {
  font-size: 12.5px;
  color: rgba(230, 218, 204, 0.6);
  margin-top: 3px;
  line-height: 1.4;
}
body#checkout .hr-method-option .hr-method-desc.hr-hint {
  font-style: italic;
  color: rgba(230, 218, 204, 0.45);
}

/* ---- tarjeta informativa de recogida en tienda ---- */
body#checkout .hr-pickup-info {
  display: none;
  border: 1px dashed var(--hr-color-borde-oscuro);
  border-radius: var(--hr-radius-card);
  padding: 16px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--hr-color-texto-claro);
}
body#checkout .hr-pickup-info.hr-visible { display: block; }
body#checkout .hr-pickup-info strong { color: var(--hr-color-texto-claro); }
body#checkout .hr-pickup-info .hr-addr-line { color: rgba(230, 218, 204, 0.75); }
body#checkout .hr-pickup-info .hr-hours-block {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--hr-color-borde-oscuro);
  font-size: 12.5px;
  color: rgba(230, 218, 204, 0.7);
}
body#checkout .hr-pickup-info .hr-hours-title {
  font-weight: 600;
  color: var(--hr-color-texto-claro);
  margin-bottom: 2px;
}

/* Campos de dirección ocultos en recogida en tienda (se rellenan por
   detrás con los datos de la propia tienda vía JS, para que PrestaShop
   no bloquee el pedido por falta de dirección).

   Ronda 9 (2026-10-18): excepción — si en recogida se marca "Quiero
   factura completa", Victoria pidió pedir sí o sí una dirección real
   (la de la tienda no vale como dirección fiscal del cliente). En ese
   caso updateRecogidaAddressVisibility (custom-checkout-envio.js)
   quita esta clase y los campos vuelven a verse, vacíos y editables,
   igual que en domicilio. */
body#checkout .hr-address-fields.hr-hidden-for-pickup { display: none; }

/* Campo de teléfono oculto en recogida (2026-10-18): el teléfono se
   marca obligatorio por JS (setupPhone) SOLO para que el repartidor
   pueda contactar en caso de envío a domicilio — en recogida no hay
   repartidor, así que ni tiene sentido pedirlo ni bloquear el
   "Continuar" por él (ver runValidation en custom-checkout-envio.js,
   ahora solo exige teléfono cuando el método es "domicilio"). */
body#checkout .hr-phone-fields.hr-hidden-for-pickup { display: none; }

/* Campos que ya no se piden nunca en este paso, ni en domicilio ni
   en recogida (2026-10-18, ronda "Envío, 2ª vuelta de capturas"):
   Número de IVA (el NIF ya cubre esa necesidad), País (tienda
   España-only) y el checkbox nativo "usar esta dirección para
   facturas también" (sustituido por "Utilizar mi dirección de envío"
   dentro del bloque de factura completa). Alias tampoco se usa — una
   dirección por pedido, sin necesidad de ponerle nombre. País
   conserva su valor por defecto (España) aunque esté oculto. */
body#checkout .hr-always-hidden { display: none !important; }

/* Razón social + Número de identificación fiscal: comunes a los dos
   toggles de factura completa ("Quiero factura" en recogida, "Soy
   empresa y quiero factura completa" en domicilio) — ocultos por
   defecto, revelados por JS (updateCompanyVisibility) según el
   método y el toggle activo en cada caso. Ninguno es obligatorio de
   forma nativa, así que ocultarlos no bloquea el envío. */
body#checkout .hr-company-fields.hr-hidden { display: none; }

/* ---- toggles tipo checkbox ("Quiero factura completa",
   "Utilizar mi dirección de envío") — mismo componente reutilizado
   en los distintos sitios ---- */
body#checkout .hr-toggle-checkbox {
  display: none;
  align-items: center;
  gap: 8px;
  margin: -6px 0 18px;
}
body#checkout .hr-toggle-checkbox.hr-visible { display: flex; }
body#checkout .hr-toggle-checkbox input[type="checkbox"] {
  accent-color: var(--hr-color-acento-claro);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
body#checkout .hr-toggle-checkbox label {
  color: var(--hr-color-acento-claro) !important;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  /* El contenedor ya es flex + align-items:center (ver arriba), pero
     eso centra las CAJAS del checkbox (16px) y del label (20px por el
     line-height nativo) — no el texto en sí dentro de su caja, que por
     la métrica de la fuente queda visualmente más arriba del centro.
     Ajustando el line-height al tamaño del checkbox el texto se
     percibe centrado de verdad con el cuadrado (2026-10-18, ronda 8,
     a petición de Victoria: "los checkboxes quedarían mejor si el
     texto está centrado con respecto al checkbox"). */
  line-height: 16px;
  /* El <label> nativo del tema trae "margin-bottom: 8px" (herencia de
     Bootstrap) — en un flex con align-items:center eso cuenta como
     parte de la caja del elemento, así que el centrado se calculaba
     sobre caja+margen y el texto quedaba 4px por encima del centro
     real del checkbox. Sin margen propio, ya centra de verdad. */
  margin: 0;
}

/* ---- radios "Soy particular" / "Soy empresa" (2026-10-18, ronda 7)
   ---- mismo componente "píldora" que "Masculino"/"Femenino" del
   paso 1 (.radio-inline en custom-checkout-personal.css), reproducido
   aquí porque esos son radios NATIVOS de PrestaShop y estos son
   marcado propio insertado por JS — mismo criterio visual, selector
   distinto. ---- */
body#checkout .hr-tipo-factura-radios {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}
body#checkout .hr-tipo-factura-radios.hr-visible { display: flex; }
body#checkout .hr-pill-radio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--hr-color-borde-oscuro);
  border-radius: var(--hr-radius-accion);
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  color: rgba(230, 218, 204, 0.75);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
body#checkout .hr-pill-radio:has(input:checked) {
  border-color: var(--hr-color-acento-claro);
  color: var(--hr-color-texto-claro);
  background: rgba(199, 156, 226, 0.08);
}
body#checkout .hr-pill-radio input[type="radio"] {
  accent-color: var(--hr-color-acento-claro);
  width: 15px;
  height: 15px;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}
/* Error "obligatorio elegir uno" — mismo rojo que el resto de errores
   del paso, pero aplicado a las dos píldoras a la vez en vez de a un
   .form-group (este bloque no es un form-group nativo). */
body#checkout .hr-tipo-factura-radios.hr-has-error .hr-pill-radio {
  border-color: var(--hr-color-error);
}

/* ---- bloque "Dirección fiscal" (solo domicilio, dentro de "Soy
   empresa y quiero factura completa") ---- */
body#checkout .hr-fiscal-block {
  display: none;
  margin: 4px 0 18px;
  padding: 16px;
  border: 1px dashed var(--hr-color-borde-oscuro);
  border-radius: var(--hr-radius-card);
}
body#checkout .hr-fiscal-block.hr-visible { display: block; }
body#checkout .hr-fiscal-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--hr-color-texto-claro);
  margin: 0 0 12px;
}
body#checkout .hr-fiscal-block .hr-toggle-checkbox {
  margin: 0 0 14px;
}
body#checkout .hr-fiscal-fields { display: none; }
body#checkout .hr-fiscal-fields.hr-visible { display: block; }
body#checkout .hr-fiscal-fields .form-group:last-child { margin-bottom: 0 !important; }

/* ============================================================
   2) Campos de texto / selects nativos (mismo tratamiento que
   "Datos personales")
   ============================================================ */
body#checkout #checkout-addresses-step .form-control-label {
  color: var(--hr-color-texto-claro) !important;
  font-size: 13px;
  font-weight: 600;
  padding-top: 0;
}
body#checkout #checkout-addresses-step .form-control,
body#checkout #checkout-addresses-step select.form-control {
  background: rgba(230, 218, 204, 0.05) !important;
  border: 1px solid var(--hr-color-borde-oscuro) !important;
  border-radius: var(--hr-radius-accion) !important;
  color: var(--hr-color-texto-claro) !important;
  font-size: 14px;
  box-shadow: none !important;
}
body#checkout #checkout-addresses-step .form-control::placeholder {
  color: rgba(230, 218, 204, 0.35);
}
body#checkout #checkout-addresses-step .form-control:focus {
  border-color: var(--hr-color-acento-claro) !important;
  background: rgba(230, 218, 204, 0.08) !important;
  /* El borde violeta de arriba ya es el indicador de foco: sin esto,
     Chrome sigue dibujando además su anillo azul de accesibilidad por
     defecto alrededor del campo (2026-10-18, ronda 7 — "el estado
     seleccionado debería ser violeta, no azul"). Mismo criterio ya
     usado en el selector de prefijo de teléfono
     (.hr-phone-country:focus, custom-checkout-shell.css). */
  outline: none;
}
body#checkout #checkout-addresses-step .form-control-comment {
  color: rgba(230, 218, 204, 0.5) !important;
  font-size: 12px;
}
body#checkout #checkout-addresses-step .form-group {
  margin-bottom: 18px !important;
}
body#checkout #checkout-addresses-step .custom-checkbox label {
  color: rgba(230, 218, 204, 0.8) !important;
  font-size: 13px;
}

/* "Utilizar esta dirección para facturas también" — checkbox nativo
   SIN envoltorio .custom-checkbox (a diferencia de los términos y
   condiciones del paso 1), así que no había recibido ningún arreglo
   de color todavía: etiqueta en rgb(35,35,35) casi negra, invisible
   sobre el fondo oscuro, y checkbox con el azul nativo del navegador
   en vez del acento de marca (capturado por Victoria, 2026-10-18). */
body#checkout #checkout-addresses-step label[for="use_same_address"] {
  color: rgba(230, 218, 204, 0.8) !important;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}
body#checkout #checkout-addresses-step input#use_same_address {
  accent-color: var(--hr-color-acento-claro);
  width: 16px;
  height: 16px;
  cursor: pointer;
  vertical-align: middle;
  margin-right: 4px;
}

/* ---- teléfono: prefijo país + número en una fila ---- */
body#checkout .hr-phone-row { display: flex; gap: 8px; }
body#checkout .hr-phone-row select.hr-phone-country { flex: 0 0 138px; }
body#checkout .hr-phone-row input { flex: 1; min-width: 0; }

/* ---- pista de provincia deducida del CP (no bloqueante) ---- */
body#checkout .hr-field-hint-province {
  display: none;
  font-size: 11.5px;
  color: rgba(199, 156, 226, 0.85);
  font-weight: 600;
  margin-top: 4px;
}
body#checkout .hr-field-hint-province.hr-visible { display: block; }

/* ---- autocompletado de ciudad ---- */
body#checkout #checkout-addresses-step input.hr-autofilled { color: var(--hr-color-acento-claro) !important; }
body#checkout .hr-city-picker {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
body#checkout .hr-city-picker.hr-visible { display: flex; }
body#checkout .hr-city-picker .hr-city-chip {
  border: 1px solid var(--hr-color-acento-claro);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hr-color-acento-claro);
  background: rgba(199, 156, 226, 0.08);
  cursor: pointer;
}
body#checkout .hr-city-picker .hr-city-chip:hover,
body#checkout .hr-city-picker .hr-city-chip.hr-picked {
  background: var(--hr-color-acento-claro);
  color: var(--hr-color-texto-oscuro);
}
body#checkout .hr-city-picker-label {
  display: none;
  font-size: 11.5px;
  color: rgba(230, 218, 204, 0.6);
  margin-top: 8px;
}
body#checkout .hr-city-picker-label.hr-visible { display: block; }

/* ============================================================
   3) Errores por campo (mismo patrón que "Datos personales":
   oculto hasta fallar la validación al pulsar "Continuar")
   ============================================================ */
body#checkout .hr-field-error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--hr-color-error);
  margin-top: 6px;
  font-weight: 600;
}
body#checkout .hr-field-error svg { width: 14px; height: 14px; flex-shrink: 0; }
body#checkout #checkout-addresses-step .form-group.hr-has-error .form-control {
  border-color: var(--hr-color-error) !important;
  background: rgba(229, 116, 104, 0.08) !important;
}
body#checkout .form-group.hr-has-error .hr-field-error.hr-active { display: flex; }

/* ---- botón continuar (mismo tratamiento que "Datos personales") ---- */
body#checkout #checkout-addresses-step .form-footer .btn-primary,
body#checkout #checkout-addresses-step button.continue {
  background: var(--hr-color-acento-claro) !important;
  color: var(--hr-color-texto-oscuro) !important;
  border: none !important;
  font-weight: 600;
  padding: 14px !important;
  float: none !important;
  width: 100%;
  margin-top: 8px;
}
body#checkout #checkout-addresses-step .form-footer .btn-primary:hover,
body#checkout #checkout-addresses-step button.continue:hover {
  background: var(--hr-color-acento) !important;
  color: var(--hr-color-texto-sobre-acento) !important;
}