/* ==========================================================================
   La Lonchería Oax — Pedido (catálogo + carrito + checkout por WhatsApp)
   Hoja de estilos exclusiva de pedido.html — no toca styles.css
   Reutiliza los tokens y componentes definidos en css/styles.css
   ========================================================================== */

/* ---------- Hero ---------- */
.pedido-hero{
  background:var(--olive-800);
  color:var(--cream-50);
  padding-block:var(--space-8) var(--space-6);
  text-align:center;
}
.pedido-hero .eyebrow{color:var(--gold-500);}
.pedido-hero .eyebrow::before{background:var(--gold-500);}
.pedido-hero h1{color:var(--cream-50);margin-block:var(--space-2) var(--space-2);}
.pedido-hero p{color:var(--olive-100);max-width:56ch;margin-inline:auto;}

/* ---------- Favoritos con botón agregar ---------- */
.favorite-card-body{display:flex;flex-direction:column;}
.favorite-card-body .menu-item-add{margin-top:var(--space-3);align-self:flex-start;}

/* ---------- Filas de platillo: nombre + (precio + agregar) ---------- */
.pedido-catalog .menu-item{align-items:center;flex-wrap:wrap;row-gap:.6rem;}
.pedido-catalog .menu-item-name{min-width:0;flex:1 1 220px;}
.pedido-catalog .menu-item-name p{overflow-wrap:break-word;}
.menu-item-trail{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  flex-shrink:0;
  margin-left:auto;
}
.menu-item-add{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem .95rem;
  border-radius:var(--radius-full);
  border:1.5px solid var(--olive-700);
  background:var(--olive-50);
  color:var(--olive-800);
  font-size:.8rem;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--transition), color var(--transition), transform var(--transition), border-color var(--transition);
}
.menu-item-add svg{width:15px;height:15px;flex-shrink:0;}
.menu-item-add:hover{background:var(--olive-800);color:var(--cream-50);border-color:var(--olive-800);transform:translateY(-1px);}
.menu-item-add.is-added{background:var(--gold-600);border-color:var(--gold-600);color:#fff;}

/* ---------- Diálogo de personalización ---------- */
.pedido-dialog{
  border:none;
  border-radius:var(--radius-lg);
  padding:0;
  width:min(520px, calc(100vw - 2rem));
  max-height:min(88vh, 720px);
  box-shadow:var(--shadow-lg);
  background:var(--color-surface);
  color:var(--color-text);
}
.pedido-dialog::backdrop{
  background:rgba(42,33,22,0.55);
  backdrop-filter:blur(2px);
}
.pedido-dialog-form{display:flex;flex-direction:column;max-height:min(88vh, 720px);}
.pedido-dialog-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-4) var(--space-4) var(--space-3);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.pedido-dialog-cat{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-600);margin-bottom:.25rem;
}
.pedido-dialog-head h3{font-size:var(--fs-lg);}
.pedido-dialog-price{color:var(--color-text-muted);font-size:var(--fs-sm);margin-top:.2rem;}
.pedido-dialog-close{
  width:36px;height:36px;flex-shrink:0;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--olive-50);color:var(--olive-800);
  font-size:1.3rem;line-height:1;
  cursor:pointer;
  transition:background-color var(--transition);
}
.pedido-dialog-close:hover{background:var(--olive-100);}

.pedido-dialog-body{
  padding:var(--space-3) var(--space-4);
  overflow-y:auto;
  flex:1 1 auto;
}
.pedido-dialog-section{margin-bottom:var(--space-4);}
.pedido-dialog-section:last-child{margin-bottom:0;}
.pedido-dialog-label{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--olive-900);margin-bottom:.6rem;display:block;
}
.pedido-check-grid, .pedido-radio-grid{
  display:flex;flex-wrap:wrap;gap:.5rem;
}
.pedido-check-grid label, .pedido-radio-grid label{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .8rem;
  border-radius:var(--radius-full);
  border:1.5px solid var(--border-strong);
  font-size:.85rem;
  cursor:pointer;
  transition:border-color var(--transition), background-color var(--transition);
}
.pedido-check-grid label:has(input:checked){
  border-color:var(--olive-700);
  background:var(--olive-50);
}
.pedido-radio-grid label:has(input:checked){
  border-color:var(--gold-600);
  background:var(--gold-100);
}
.pedido-check-grid input, .pedido-radio-grid input{accent-color:var(--gold-600);}
.pedido-extra-price{color:var(--gold-600);font-weight:700;font-size:.78rem;}

.pedido-dialog-body textarea{width:100%;}

.pedido-dialog-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  border-top:1px solid var(--border);
  flex-shrink:0;
  background:var(--color-surface);
}

.pedido-qty{
  display:inline-flex;align-items:center;gap:.7rem;
  border:1.5px solid var(--border-strong);
  border-radius:var(--radius-full);
  padding:.3rem .5rem;
}
.pedido-qty button{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--olive-50);color:var(--olive-800);
  font-size:1.1rem;font-weight:700;line-height:1;
  cursor:pointer;
  transition:background-color var(--transition);
}
.pedido-qty button:hover{background:var(--olive-100);}
.pedido-qty span{min-width:1.2rem;text-align:center;font-weight:700;}

/* ---------- Botón flotante del carrito ---------- */
.fab-cart{
  position:fixed;
  left:50%;
  bottom:var(--space-3);
  transform:translateX(-50%) translateY(0);
  z-index:95;
  display:inline-flex;align-items:center;gap:.6rem;
  max-width:calc(100vw - 2rem);
  padding:.9rem 1.5rem;
  border-radius:var(--radius-full);
  background:var(--olive-900);
  color:var(--cream-50);
  font-weight:700;
  font-size:.92rem;
  box-shadow:var(--shadow-lg);
  cursor:pointer;
  transition:transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fab-cart:hover{transform:translateX(-50%) translateY(-3px);}
.fab-cart[hidden]{display:none;}
.fab-cart .fab-badge{
  background:var(--gold-600);
  border-radius:var(--radius-full);
  padding:.15rem .55rem;
  font-size:.8rem;
}

/* ---------- Sección carrito / checkout ---------- */
.pedido-cart-section{background:var(--olive-50);}
.pedido-cart-empty{
  text-align:center;
  color:var(--color-text-muted);
  padding:var(--space-6) var(--space-3);
  background:var(--color-surface);
  border:1px dashed var(--border-strong);
  border-radius:var(--radius-lg);
}

.pedido-cart-wrap{
  display:grid;
  gap:var(--space-5);
}

.pedido-narrow{max-width:640px;}

.pedido-cart-lines{display:flex;flex-direction:column;gap:var(--space-2);}
.cart-line{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-3);
  background:var(--color-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--space-3);
}
.cart-line-main{min-width:0;flex:1 1 220px;}
.cart-line-name{
  font-family:var(--font-display);font-weight:600;color:var(--olive-900);
  display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;
  margin-bottom:.3rem;
  overflow-wrap:break-word;
}
.cart-line-qty-badge{
  font-family:var(--font-body);font-size:.72rem;font-weight:700;
  background:var(--olive-100);color:var(--olive-800);
  padding:.1rem .5rem;border-radius:var(--radius-full);
  white-space:nowrap;
}
.cart-line-specs{font-size:var(--fs-sm);color:var(--color-text-muted);display:flex;flex-direction:column;gap:.15rem;overflow-wrap:break-word;}
.cart-line-actions{
  display:flex;align-items:center;gap:var(--space-3);flex-shrink:0;
}
.cart-line-price{font-weight:700;color:var(--gold-600);white-space:nowrap;}
.cart-line-remove{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--ink-soft);
  transition:background-color var(--transition), color var(--transition);
}
.cart-line-remove:hover{background:#F5DDDD;color:#B23A3A;}
.cart-line-remove svg{width:16px;height:16px;}

.pedido-cart-totals{
  background:var(--color-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);
}
.pedido-cart-totals .row{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-md);}
.pedido-cart-totals .row strong{color:var(--gold-600);font-size:var(--fs-lg);}
.pedido-note{font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:.4rem;}

/* ---------- Flujo por pasos (páginas pedido-pago.html / pedido-datos.html) ---------- */
.pedido-hero--compact{padding-block:var(--space-6) var(--space-5);}
.pedido-hero--compact .eyebrow{margin-bottom:var(--space-2);}
.pedido-hero--compact h1{margin-block:0 var(--space-3);}

.pedido-step-panel{display:flex;flex-direction:column;gap:var(--space-3);}

.pedido-step-bar{
  max-width:280px;margin-inline:auto;
  height:6px;border-radius:var(--radius-full);background:rgba(255,255,255,0.18);overflow:hidden;
}
.pedido-step-bar span{display:block;height:100%;background:var(--gold-500);border-radius:var(--radius-full);}

.pedido-back{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--olive-800);font-weight:700;font-size:var(--fs-sm);
  cursor:pointer;
  align-self:flex-start;
}
.pedido-back:hover{color:var(--gold-600);}

.pedido-mini-total{
  display:flex;justify-content:space-between;align-items:baseline;
  background:var(--olive-50);border:1px solid var(--olive-100);border-radius:var(--radius-md);
  padding:.7rem 1rem;margin-bottom:var(--space-3);
  font-size:var(--fs-sm);font-weight:700;color:var(--olive-900);
}
.pedido-mini-total strong{color:var(--gold-600);font-size:var(--fs-md);}

.pedido-cambio-hint{font-size:var(--fs-xs);min-height:1.2em;}
.pedido-cambio-hint.is-ok{color:var(--olive-700);font-weight:700;}
.pedido-cambio-hint.is-error{color:#C0453F;}

/* ---------- Banner de confirmación (toast) ---------- */
.pedido-toast{
  position:fixed;
  top:var(--space-3);
  left:50%;
  transform:translateX(-50%) translateY(-140%);
  z-index:110;
  max-width:calc(100vw - 2rem);
  background:var(--olive-900);
  color:var(--cream-50);
  font-size:var(--fs-sm);
  font-weight:600;
  padding:.8rem 1.3rem;
  border-radius:var(--radius-full);
  box-shadow:var(--shadow-lg);
  opacity:0;
  transition:transform var(--transition), opacity var(--transition);
  pointer-events:none;
  text-align:center;
}
.pedido-toast.is-visible{transform:translateX(-50%) translateY(0);opacity:1;}

/* ---------- Formulario de checkout ---------- */
.pedido-checkout{
  background:var(--color-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  display:flex;flex-direction:column;gap:var(--space-3);
}
.pedido-checkout h3{margin-bottom:.2rem;}

.pedido-field{display:flex;flex-direction:column;gap:.4rem;}
.pedido-field label{font-size:var(--fs-sm);font-weight:700;color:var(--olive-900);}
.pedido-field input[type="text"],
.pedido-field input[type="tel"],
.pedido-field input[type="time"],
.pedido-field input[type="number"],
.pedido-field textarea{
  width:100%;
  border:1.5px solid var(--border-strong);
  border-radius:var(--radius-sm);
  padding:.75rem .9rem;
  font:inherit;
  font-size:var(--fs-sm);
  color:var(--color-text);
  background:var(--cream-50);
  transition:border-color var(--transition), background-color var(--transition);
}
.pedido-field textarea{resize:vertical;min-height:2.6rem;}
.pedido-field input:focus, .pedido-field textarea:focus{
  border-color:var(--olive-700);
  background:var(--white);
  outline:none;
}
.pedido-field.has-error input, .pedido-field.has-error textarea{border-color:#C0453F;}
.pedido-field.has-error .pedido-segmented label{border-color:#C0453F;}
.pedido-form-error{
  font-size:var(--fs-sm);font-weight:700;color:#C0453F;
  background:#FBEAEA;border:1px solid #E9C6C4;border-radius:var(--radius-sm);
  padding:.7rem 1rem;
}
.pedido-form-error[hidden]{display:none;}

.pedido-field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);}
@media (max-width:560px){ .pedido-field-row{grid-template-columns:1fr;} }

.pedido-segmented{display:flex;flex-wrap:wrap;gap:.5rem;}
.pedido-segmented label{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.6rem .9rem;
  border-radius:var(--radius-full);
  border:1.5px solid var(--border-strong);
  font-size:.85rem;font-weight:600;
  cursor:pointer;
  transition:border-color var(--transition), background-color var(--transition);
}
.pedido-segmented label:has(input:checked){border-color:var(--olive-700);background:var(--olive-50);}
.pedido-segmented input{accent-color:var(--olive-700);}

.pedido-address{
  display:flex;flex-direction:column;gap:var(--space-3);
  background:var(--olive-50);
  border:1px solid var(--olive-100);
  border-radius:var(--radius-md);
  padding:var(--space-3);
}
.pedido-address[hidden]{display:none;}
.pedido-fixed-location{
  font-size:var(--fs-sm);font-weight:700;color:var(--olive-800);
}
.pedido-geo-status{font-size:var(--fs-xs);color:var(--color-text-muted);min-height:1.2em;}
.pedido-geo-status.is-ok{color:var(--olive-700);font-weight:700;}
.pedido-geo-status.is-error{color:#C0453F;}

.btn-sm{padding:.6rem 1.1rem;min-height:40px;font-size:var(--fs-xs);}

/* ---------- Confirmación de envío ---------- */
.pedido-cart-success{
  text-align:center;
  background:var(--olive-800);
  color:var(--cream-50);
  border-radius:var(--radius-lg);
  padding:var(--space-6) var(--space-4);
}
.pedido-cart-success h2{color:var(--cream-50);margin-bottom:var(--space-2);}
.pedido-cart-success p{color:var(--olive-100);max-width:48ch;margin-inline:auto;margin-bottom:var(--space-4);}

/* ---------- Footer ligero (igual patrón que promocion.html) ---------- */
.pedido-footer{
  border-top:1px solid var(--border);
  padding-block:var(--space-4);
  text-align:center;
  color:var(--color-text-muted);
  font-size:var(--fs-xs);
}
.pedido-footer a{color:var(--olive-800);font-weight:700;}

/* ---------- Responsive: pantallas pequeñas ---------- */
.pedido-dialog-foot{flex-wrap:wrap;}

@media (max-width:600px){
  .pedido-checkout{padding:var(--space-4);}
  .favorite-card-media{aspect-ratio:4/3;}
}

@media (max-width:480px){
  .pedido-checkout{padding:var(--space-3);}
  .pedido-hero{padding-block:var(--space-6) var(--space-5);}
  .fab-cart{padding:.75rem 1.1rem;font-size:.85rem;gap:.4rem;}
  .pedido-toast{font-size:var(--fs-xs);padding:.7rem 1rem;}
  .menu-item-trail{width:100%;justify-content:space-between;margin-left:0;}
  .cart-line-actions{width:100%;justify-content:space-between;}
  .pedido-dialog-body{padding:var(--space-2) var(--space-3);}
}