/* =========================================================
   PEDIDO — Formulario estilo "comanda" + lateral oscuro
   ---------------------------------------------------------
   Estructura:
     .deco           → manchas de color y dibujitos (ver components.css)
     .ticket-wrap    → comanda (formulario) + sticker de promo
     .order__side    → "¿Cómo sigue?" + links de contacto
     .order-success  → pantalla de éxito (la arma js/order-form.js)
   ========================================================= */

.pedido {
  --pd-dark: #161712;   /* mismo tono que la sección Pizza Vakna */
  --pd-cut:  92px;      /* alto del encabezado del ticket (ahí van los "agujeritos") */

  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--section-y);
  background: var(--c-bg-deco);
}

/* =========================================================
   LAYOUT
   ========================================================= */
.order {
  display: grid;
  gap: 32px;
  align-items: start;
  max-width: 1040px;
  margin-inline: auto;
}
@media (min-width: 940px) { .order { grid-template-columns: 1.55fr 1fr; gap: 36px; } }

/* =========================================================
   COMANDA (ticket)
   ========================================================= */
.ticket-wrap {
  position: relative;
  /* La sombra va acá (y no en el ticket) para que también siga el borde recortado */
  filter: drop-shadow(0 18px 30px rgba(30, 60, 25, .14)) drop-shadow(0 2px 4px rgba(30, 60, 25, .08));
}

.ticket {
  position: relative;
  padding-bottom: 14px;
  border-radius: 20px 20px 0 0;
  background: #fff;
  /* Máscara: 2 agujeritos a los costados + borde de abajo serruchado, como una comanda */
  -webkit-mask:
    radial-gradient(circle 13px at 0 var(--pd-cut), #0000 97%, #000) ,
    radial-gradient(circle 13px at 100% var(--pd-cut), #0000 97%, #000),
    radial-gradient(circle 9px at 50% 100%, #0000 97%, #000) bottom / 22px 100% repeat-x;
  -webkit-mask-composite: source-in, source-in;
  mask:
    radial-gradient(circle 13px at 0 var(--pd-cut), #0000 97%, #000) ,
    radial-gradient(circle 13px at 100% var(--pd-cut), #0000 97%, #000),
    radial-gradient(circle 9px at 50% 100%, #0000 97%, #000) bottom / 22px 100% repeat-x;
  mask-composite: intersect;
}

.ticket__head {
  height: var(--pd-cut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(22px, 4vw, 40px);
  border-bottom: 2px dashed #D5E2D0;
  background: linear-gradient(135deg, #F5FBF2, #fff 60%);
}
.ticket__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-green-dark);
}
.ticket__title {
  font-family: var(--ff-title);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--c-title);
}

/* Progreso: "Faltan 3 datos" → "¡Listo para enviar!" */
.ticket__progress { display: grid; gap: 6px; justify-items: end; min-width: 150px; }
.ticket__progress-text { font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); transition: color var(--t); }
.ticket__bar { width: 150px; height: 8px; border-radius: 99px; background: #E6EDE3; overflow: hidden; }
.ticket__bar span {
  display: block;
  width: 0; height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-green), #8BD66F);
  transition: width .45s var(--ease);
}
.ticket.is-ready .ticket__progress-text { color: var(--c-green-dark); }
/* En pantallas grandes dejamos lugar a la derecha para el sticker de 10% OFF */
@media (min-width: 561px) { .ticket__head { padding-right: 104px; } }

.ticket__body { padding: 26px clamp(22px, 4vw, 40px) 30px; }

/* Sticker de promo girando suave */
.ticket__sticker {
  position: absolute;
  z-index: 2;
  top: -30px; right: -14px;
  width: 92px; height: 92px;
  display: grid;
  place-content: center;
  justify-items: center;
  border-radius: 50%;
  font-family: var(--ff-title);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #10240C;
  background: #FFD25E;
  box-shadow: 0 0 0 4px #fff, 0 10px 20px rgba(0, 0, 0, .15);
  transform: rotate(12deg);
  animation: pd-wiggle 4s ease-in-out infinite;
}
.ticket__sticker strong { font-size: 1.7rem; font-weight: 700; }
.ticket__sticker small { margin-top: 3px; font-family: var(--ff-body); font-size: .6rem; font-weight: 700; letter-spacing: .04em; }

/* "Consulta por: Pack 5 viandas" (cuando viene desde una card) */
.order__selected {
  margin-bottom: 20px;
  padding: 10px 14px;
  border-left: 4px solid var(--c-green);
  border-radius: 8px;
  font-size: var(--fs-sm);
  color: var(--c-green-dark);
  background: var(--c-green-soft);
}

/* =========================================================
   BLOQUES QUE APARECEN SEGÚN EL PRODUCTO
   (sabores de la promo y cantidad) — ver js/order-form.js
   ========================================================= */
.order-extra {
  margin: 0 0 18px;
  padding: 16px;
  border: 1.5px dashed #CFE3C7;
  border-radius: 14px;
  background: #F6FBF3;
  animation: fade-up .35s var(--ease);
}
.order-extra__title {
  display: block;
  margin-bottom: 10px;
  padding: 0;
  font-family: var(--ff-title);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--c-title);
}

/* En un <fieldset>, el <legend> se dibuja encima del borde: con float
   lo metemos adentro del recuadro como un título normal */
legend.order-extra__title { float: left; width: 100%; }
legend.order-extra__title + * { clear: both; }

/* --- Sabores de la promo: número redondo + selector --- */
.flavor-list { display: grid; gap: 8px; }
.flavor {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  column-gap: 10px;
  margin: 0;
}
.flavor__num {
  display: grid; place-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-family: var(--ff-title);
  font-size: 1rem !important;
  color: #fff !important;
  background: var(--c-green);
}
.flavor select { padding: 10px 36px 10px 12px; background-color: #fff; }
.flavor .field__error { grid-column: 2; }

/* Renglón amarillo "+ 1 Pizza Margarita de regalo" */
.order-extra__gift {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: var(--fs-sm);
  color: #5A3D00;
  background: #FFE59A;
}
.order-extra__gift svg { flex: none; width: 22px; height: 22px; color: #7A4D00; }

/* --- Cantidad: botón − · número · botón + --- */
.qty { display: flex; align-items: center; gap: 10px; }
.qty__btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 1.5rem; font-weight: 600; line-height: 1;
  color: var(--c-green-dark);
  background: #fff;
  border: 1.5px solid var(--c-green);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.qty__btn:hover { background: var(--c-green); color: #fff; }
.qty__btn:active { transform: scale(.92); }
.qty__value {
  min-width: 34px;
  text-align: center;
  font-family: var(--ff-title);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--c-title);
}
.qty__unit { font-weight: 600; color: var(--c-muted); }

/* Invitación a la promo cuando eligen 3 pizzas o más */
.order-extra__upsell {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
  font-size: var(--fs-sm);
  color: #5A3D00;
  background: #FFE59A;
  animation: fade-up .35s var(--ease);
}
.order-extra__upsell:hover { background: #FFD25E; }

/* Total calculado */
.order-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: -6px 0 18px;
  padding: 0 4px 12px;
  border-bottom: 2px dashed #D5E2D0;
  font-weight: 700;
  color: var(--c-title);
}
.order-total strong { font-family: var(--ff-title); font-size: 1.6rem; color: var(--c-green-dark); }

/* Inputs con ícono */
.input-icon { position: relative; }
.input-icon > svg {
  position: absolute;
  left: 14px; top: 50%;
  width: 20px; height: 20px;
  color: #9AA897;
  transform: translateY(-50%);
  pointer-events: none;
  transition: color var(--t-fast);
}
.input-icon input { padding-left: 44px !important; background: #FAFCF9 !important; }
.input-icon input:focus { background: #fff !important; }
.input-icon:focus-within > svg { color: var(--c-green); }
.field.is-invalid .input-icon > svg { color: var(--c-error); }

/* Botón WhatsApp con brillo que pasa */
.btn--wa {
  position: relative;
  overflow: hidden;
  margin-top: 6px;
  color: #fff;
  background: linear-gradient(135deg, #25D366, #4CB33D);
  box-shadow: 0 10px 22px rgba(37, 211, 102, .35);
}
.btn--wa:hover { background: linear-gradient(135deg, #1EBE5A, #2E7D32); }
.btn--wa::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
  transform: translateX(-150%) skewX(-20deg);
  animation: pd-shine 3.6s ease-in-out infinite;
  pointer-events: none;
}
.btn__arrow { transition: transform var(--t-fast); }
.btn--wa:hover .btn__arrow { transform: translateX(4px); }
/* Cuando están todos los datos, el botón "late" */
.ticket.is-ready .btn--wa { animation: pd-ready 1.8s ease-in-out infinite; }

.order__note { margin-top: 12px; text-align: center; font-size: var(--fs-xs); color: var(--c-muted); }

/* =========================================================
   LATERAL OSCURO
   ========================================================= */
.order__side {
  position: relative;
  overflow: hidden;
  padding: 30px 28px;
  border-radius: 20px;
  color: rgba(255, 255, 255, .74);
  background:
    radial-gradient(circle at 100% 0, rgba(91, 185, 71, .25), transparent 55%),
    var(--pd-dark);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}
.order__side-sprig {
  position: absolute;
  right: -26px; bottom: -30px;
  width: 110px; height: 200px;
  color: var(--c-green);
  opacity: .14;
  transform: rotate(-20deg);
}

.side__status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .08);
}
.side__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #25D366;
  animation: pd-dot 1.8s ease-out infinite;
}
.side__title {
  margin-top: 16px;
  font-family: var(--ff-title);
  font-size: 1.9rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

/* Pasos con línea punteada que los une */
.side__steps { position: relative; display: grid; gap: 18px; margin-top: 20px; }
.side__steps::before {
  content: '';
  position: absolute;
  left: 15px; top: 10px; bottom: 10px;
  border-left: 2px dashed rgba(91, 185, 71, .45);
}
.side__steps li { position: relative; display: flex; gap: 14px; align-items: flex-start; }
.side__num {
  flex: none;
  display: grid; place-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-family: var(--ff-title);
  font-weight: 700;
  color: #10240C;
  background: var(--c-green);
  box-shadow: 0 0 0 5px var(--pd-dark);
}
.side__steps strong { display: block; color: #fff; font-size: var(--fs-sm); }
.side__steps p { margin-top: 2px; font-size: var(--fs-xs); line-height: 1.5; }

.side__links { display: grid; gap: 10px; margin-top: 26px; }
.side__link {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: #fff;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.side__link svg { width: 22px; height: 22px; color: var(--c-green); flex: none; }
.side__link:hover { transform: translateX(4px); border-color: var(--c-green); background: rgba(91, 185, 71, .1); }
.side__link--wa { border-color: transparent; background: #25D366; color: #fff; }
.side__link--wa svg { color: #fff; }
.side__link--wa:hover { background: #1EBE5A; border-color: transparent; }

/* =========================================================
   PANTALLA DE ÉXITO (reemplaza a la comanda al enviar)
   ========================================================= */
.order-success {
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  background: #fff;
  border-radius: 20px;
  animation: fade-up .45s var(--ease);
}
.order-success__icon {
  width: 72px; height: 72px; margin: 0 auto 18px;
  padding: 16px; border-radius: 50%;
  color: #fff; background: var(--c-green);
}
.order-success h3 { font-family: var(--ff-title); font-size: 1.9rem; text-transform: uppercase; color: var(--c-title); }
.order-success p { margin-top: 10px; color: var(--c-muted); }
.order-success .btn { margin-top: 22px; }
.order-success__back { font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
.order-success__back:hover { color: var(--c-green-dark); }

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 560px) {
  .pedido { --pd-cut: 112px; }
  .ticket__head { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding-right: 96px; }
  .ticket__progress { justify-items: start; }
  .ticket__sticker { width: 82px; height: 82px; top: -24px; right: -4px; font-size: .85rem; }
  .ticket__sticker strong { font-size: 1.4rem; }
  .ticket__sticker small { font-size: .5rem; letter-spacing: 0; }
  .order__side { padding: 26px 22px; }
}
@media (max-width: 400px) {
  .btn--wa { padding-inline: 16px; font-size: .9rem; white-space: nowrap; }
  .btn--wa .btn__arrow { display: none; }
}

/* =========================================================
   KEYFRAMES
   ========================================================= */
@keyframes pd-wiggle  { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(4deg) scale(1.05); } }
/* El brillo se mueve con transform (y no con "left"): así el navegador no
   recalcula la página en cada cuadro y la animación no traba el scroll */
@keyframes pd-shine   { 0%, 55% { transform: translateX(-150%) skewX(-20deg); } 100% { transform: translateX(330%) skewX(-20deg); } }
@keyframes pd-ready {
  0%, 100% { box-shadow: 0 10px 22px rgba(37, 211, 102, .35), 0 0 0 0 rgba(37, 211, 102, .45); }
  50%      { box-shadow: 0 10px 22px rgba(37, 211, 102, .35), 0 0 0 10px rgba(37, 211, 102, 0); }
}
@keyframes pd-dot {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .7); }
  100% { box-shadow: 0 0 0 9px rgba(37, 211, 102, 0); }
}
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }