/* ============================================================
   WRD — modal.css  ·  El modal de pedido en «Noche y Día»
   ============================================================
   Construido ENCIMA de css/tienda.css. El DOM lo arma entero
   js/pedido-modal.js (WRDModal.abrir) cada vez que se pide algo y lo
   destruye al cerrar; este archivo SOLO lo viste, sobre sus clases
   (modal-*, pm-*, btn, btn-naranja, btn-borde, btn-enviar).

   La hoja sube desde abajo como un sticker gigante: papel, tinta
   gruesa y una cinta naranja de sombra dura en el borde de arriba.
   El total y el botón quedan siempre a la vista, abajo.

   Qué vive acá:
     1. El velo
     2. La hoja (móvil: sube · >= 48em: centrada)
     3. Cerrar (✕)
     4. La franja de scroll
     5. La banda del producto (foto o dulce sobre el sol)
     6. Nombre / descripción / detalle / precio
     7. El stepper de cantidad
     8. El formulario
     9. El pie (total + botón + copy del domiciliario)
    10. La pantalla de éxito
   ============================================================ */


/* ============================================================
   1 · EL VELO
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--wrd-z-intro) + 10);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgb(30 18 12 / 0.62);
  animation: wrd-modal-velo-entra 200ms ease-out both;
}

@keyframes wrd-modal-velo-entra { from { opacity: 0; } to { opacity: 1; } }

.modal-overlay.modal-cerrando { animation: wrd-modal-velo-sale 220ms ease-in both; }

@keyframes wrd-modal-velo-sale { from { opacity: 1; } to { opacity: 0; } }

@media (min-width: 48em) {
  .modal-overlay { align-items: center; padding: 28px; }
}


/* ============================================================
   2 · LA HOJA  ·  .modal-sheet
   ============================================================ */

.modal-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  max-height: min(90vh, 760px);
  overflow: hidden;
  color: var(--t-choco);
  background: var(--t-papel);
  border: var(--t-borde);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -7px 0 var(--t-naranja);
  animation: wrd-modal-sube 380ms var(--t-rebote) both;
  /* LA CABECERA: una franja de chocolate de 64px que es solo de la ✕
     (y de la manija y el rótulo). El scroll arranca debajo: al bajar,
     nada del pedido pasa por detrás de la ✕. */
  padding-top: 64px;
  background:
    linear-gradient(var(--t-noche), var(--t-noche)) 0 0 / 100% 64px no-repeat,
    var(--t-papel);
}

/* La manija de hoja (arriba al centro) y el rótulo de la cabecera. */
.modal-sheet::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  width: 44px;
  height: 5px;
  margin-left: -22px;
  border-radius: 3px;
  background: var(--t-noche-3);
}

/* Solo la hoja del pedido lleva el rótulo; la de "Mis pedidos" tiene el suyo. */
#pm-overlay .modal-sheet::after {
  content: 'Tu pedido';
  position: absolute;
  top: 19px;
  left: 18px;
  font-family: var(--t-font-chicle);
  font-size: 23px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--t-blanco-choco);
  text-shadow: 2px 2px 0 var(--t-naranja-texto);
  pointer-events: none;
}

@keyframes wrd-modal-sube {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.modal-overlay.modal-cerrando .modal-sheet { animation: wrd-modal-baja 220ms ease-in both; }

@keyframes wrd-modal-baja {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(60px); opacity: 0; }
}

@media (min-width: 48em) {
  .modal-sheet::before { display: none; }

  .modal-sheet {
    max-width: 440px;
    max-height: min(88vh, 720px);
    border-bottom: var(--t-borde);
    border-radius: 26px;
    box-shadow: 8px 8px 0 var(--t-naranja);
    animation-name: wrd-modal-aparece;
  }

  @keyframes wrd-modal-aparece {
    0%   { transform: translateY(20px) rotate(-1.5deg) scale(0.96); opacity: 0; }
    70%  { transform: translateY(-3px) rotate(0.5deg) scale(1.01); opacity: 1; }
    100% { transform: none; opacity: 1; }
  }

  .modal-overlay.modal-cerrando .modal-sheet { animation-name: wrd-modal-baja; }
}


/* ============================================================
   3 · CERRAR  ·  .modal-cerrar
   ============================================================ */

.modal-cerrar {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  color: var(--t-choco);
  background: var(--t-papel);
  border: 2px solid var(--t-noche);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--t-mango);
  cursor: pointer;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}

.modal-cerrar:hover { background: var(--t-mango); }
.modal-cerrar:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--t-mango); }


/* ============================================================
   4 · LA FRANJA DE SCROLL
   Todo lo que crece vive acá y scrollea; el pie (9) es otro hijo
   del flex column y queda siempre fijo abajo.
   ============================================================ */

.modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-block-end: 14px;
  -webkit-overflow-scrolling: touch;
}


/* ============================================================
   5 · LA BANDA DEL PRODUCTO  ·  .modal-foto
   Sin foto, el dulce grande sobre el mismo sol de cartel de la
   vitrina. Baja (132px): la foto acompaña, la acción manda.
   ============================================================ */

.modal-foto {
  position: relative;
  height: 132px;
  overflow: hidden;
  background: var(--t-crema);
  border-bottom: var(--t-borde);
}

.modal-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-foto.sin-foto {
  display: grid;
  place-items: center;
  font-size: 62px;
  line-height: 1;
  background:
    repeating-conic-gradient(from 0deg at 50% 70%, var(--t-mango) 0deg 10deg, var(--t-naranja-2) 10deg 20deg);
  text-shadow: 4px 4px 0 rgb(42 26 18 / 0.25);
}

.modal-foto .producto-icono {
  width: 170px;
  height: auto;
  transform: rotate(-8deg);
}

@media (min-width: 48em) {
  .modal-foto { height: 150px; }
}


/* ============================================================
   6 · NOMBRE / DESCRIPCIÓN / DETALLE / PRECIO
   ============================================================ */

.modal-info {
  padding: 16px 18px 0;
}

.modal-etiqueta { margin-block-end: 10px; }
.modal-etiqueta[hidden] { display: none; }

.modal-nombre {
  margin: 0;
  padding-inline-end: 8px;
  font-family: var(--t-font-display);
  font-size: 28px;
  font-weight: 700;
  font-stretch: 100%;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--t-choco);
}

.modal-desc {
  margin-block-start: 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--t-choco-2);
}

/* La línea chica (el detalle premium, "Paquete de 3 unidades"): un
   sello verde, no una nota al pie. */
.modal-detalle {
  --giro: -2deg;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-block-start: 10px;
  padding: 3px 10px 4px;
  font-family: var(--t-font-chicle);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #fff;
  background: var(--t-verde-boton);
  border: var(--t-borde-fino);
  border-radius: var(--t-r-1);
  transform: rotate(-2deg);
}

.modal-detalle::before { content: '✦'; font-size: 0.8em; }
.modal-detalle[hidden] { display: none; }

.modal-precio-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-block-start: 12px;
}

.modal-precio {
  font-family: var(--t-font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--t-choco);
}

.modal-precio-antes {
  font-family: var(--t-font-display);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--t-choco-3);
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--t-rojo);
}


/* ============================================================
   7 · EL STEPPER DE CANTIDAD
   ============================================================ */

.modal-stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 18px 0;
  padding: 10px 12px;
  background: var(--t-crema);
  border: var(--t-borde);
  border-radius: var(--t-r-2);
}

.modal-stepper-label {
  font-family: var(--t-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t-choco);
}

.modal-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-stepper-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-family: var(--t-font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--t-choco);
  background: var(--t-naranja);
  border: var(--t-borde);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--t-choco);
  cursor: pointer;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}

.modal-stepper-btn:hover { background: var(--t-naranja-2); }
.modal-stepper-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--t-choco); }

.modal-stepper-btn:disabled {
  color: var(--t-choco-3);
  background: var(--t-papel);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.modal-stepper-valor {
  min-width: 3ch;
  font-family: var(--t-font-display);
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--t-choco);
}

.modal-stepper-quedan {
  margin: 8px 18px 0;
  font-family: var(--t-font-chicle);
  font-size: 16px;
  color: var(--t-rojo-boton);
}

.modal-stepper-quedan:empty { display: none; }


/* ============================================================
   8 · EL FORMULARIO
   Campos y etiquetas vienen del puente de tienda.css (papel, tinta
   gruesa, 16px, 52px). Acá: el ritmo y las dos piezas propias.
   ============================================================ */

.modal-form {
  margin: 0;
  max-width: none;
  padding: 0 18px;
}

.modal-form label { margin-block: 16px 6px; }
.modal-form label:first-of-type { margin-block-start: 18px; }

.modal-sublabel {
  display: block;
  margin-block: -2px 8px;
  font-family: var(--t-font-cuerpo);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t-choco-3);
}

.modal-cambiaste {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-block-start: 6px;
  font-family: var(--t-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--t-choco);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--t-naranja);
}

.modal-cambiaste:hover { color: var(--t-naranja-texto); }
.modal-cambiaste[hidden] { display: none; }

.modal-error-envio { margin-block-start: 12px; }


/* ============================================================
   9 · EL PIE  ·  siempre visible
   ============================================================ */

.modal-pie {
  flex-shrink: 0;
  padding: 12px 18px;
  padding-block-end: max(14px, env(safe-area-inset-bottom, 0px));
  background: var(--t-crema);
  border-top: var(--t-borde);
}

.modal-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 10px;
  padding: 0;
  border: 0;
  box-shadow: none;
  font-family: var(--t-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--t-choco-2);
}

.modal-total-row[hidden] { display: none; }

.modal-total-label {
  font-family: var(--t-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t-choco);
}

.modal-total-valor {
  font-family: var(--t-font-display);
  font-size: 34px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--t-choco);
}

#pm-descuento-row { color: var(--t-verde-boton); font-weight: 700; }

#pm-enviar.btn-enviar {
  min-height: 60px;
  margin-block-start: 0;
  font-size: 22px;
}

.modal-pie-copy {
  margin-block-start: 10px;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  color: var(--t-choco-3);
}


/* ============================================================
   10 · LA PANTALLA DE ÉXITO
   ============================================================ */

.modal-exito {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 56px 20px 28px;
  text-align: center;
  background-color: var(--t-papel);
  background-image: var(--t-chispitas);
  background-size: 160px 160px;
}

.modal-exito[hidden] { display: none; }

.modal-exito-titulo {
  --giro: -3deg;
  margin: 0;
  padding: 8px 18px 10px;
  font-family: var(--t-font-display);
  font-size: 32px;
  font-weight: 700;
  font-stretch: 100%;
  line-height: 1.05;
  color: var(--t-choco);
  background: var(--t-mango);
  border: var(--t-borde);
  border-radius: 18px;
  box-shadow: 5px 5px 0 var(--t-verde);
  transform: rotate(-3deg);
  animation: t-estampa 600ms var(--t-rebote) both;
}

.modal-exito-sub {
  max-width: 30ch;
  margin-block-start: 8px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--t-choco-2);
}

.modal-exito .btn { min-width: 220px; }
.modal-exito-btn { margin-block-start: 8px; }


@media (prefers-reduced-motion: reduce) {
  .modal-overlay,
  .modal-sheet,
  .modal-exito-titulo { animation: none !important; }
  .modal-stepper-btn,
  .modal-cerrar { transition: none; }
}