@charset "UTF-8";
/* =========================================================
   BYR Club — Pedidos online (pedir.html)
   Estilo arcade: bordes redondeados, sombras duras, acento amarillo.
   Reutiliza las variables de color de styles.css (:root).
========================================================= */

.order-main { max-width: 1160px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 32px) 90px; }

/* --- Hero --- */
.order-hero { margin-bottom: 22px; }
.order-kicker { display: inline-block; background: var(--yellow); color: #071342; font-weight: 900; text-transform: uppercase; padding: 7px 16px; border-radius: 999px; transform: rotate(-2deg); box-shadow: 0 6px 0 #b98700; font-size: .82rem; }
.order-hero h1 { font-family: "Lilita One"; font-size: clamp(2.2rem, 6vw, 3.4rem); text-transform: uppercase; margin: 14px 0 6px; line-height: 1; }
.order-hero h1 strong { color: var(--yellow); text-shadow: 0 5px 0 #8c6500; }
.order-hero p { color: #bfe0ff; font-weight: 700; margin: 0; max-width: 640px; }
.order-hero p b { color: #fff; }

/* --- Layout de dos columnas --- */
.order-layout { display: grid; grid-template-columns: 1fr 380px; gap: 26px; align-items: start; }
/* Sin esto, los hijos del grid no encogen (min-width:auto) y el contenido
   desborda el ancho en mobile. */
.order-menu, .order-cart { min-width: 0; }
@media (max-width: 900px) { .order-layout { grid-template-columns: 1fr; } }

.order-loading, .order-error { color: #9bd1ff; font-weight: 800; padding: 20px 4px; }
.order-error { color: #ffb0b0; }

/* --- Navegación de categorías (tipo Que Resto) --- */
.menu-nav { position: sticky; top: 8px; z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 8px; margin: 0 0 20px; background: rgba(4,18,58,.92); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; box-shadow: 0 10px 24px rgba(0,0,0,.28); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.menu-nav::-webkit-scrollbar { display: none; }
.menu-nav-pill { flex: 0 0 auto; border: 0; background: transparent; color: #cfe4ff; font-weight: 800; font-size: .9rem; padding: 8px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.menu-nav-pill:hover { background: rgba(255,255,255,.1); }
.menu-nav-pill.is-active { background: var(--yellow); color: #071342; }

/* --- Categorías y productos --- */
.menu-category { margin-bottom: 30px; scroll-margin-top: 72px; }
.menu-category h2 { font-family: "Lilita One"; font-size: 1.5rem; text-transform: uppercase; margin: 0 0 14px; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

.product-card { display: flex; flex-direction: column; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; overflow: hidden; transition: transform .15s, border-color .15s; }
.product-card:hover { transform: translateY(-3px); border-color: rgba(255,213,31,.5); }
.product-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; flex: 1; }
.product-name { font-family: "Lilita One"; font-size: 1.15rem; line-height: 1.05; }
.product-desc { color: #9bd1ff; font-weight: 700; font-size: .86rem; line-height: 1.25; flex: 1; }
.product-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.product-price { font-family: "Lilita One"; font-size: 1.3rem; color: var(--yellow); }

/* Stepper +/- */
.qty-stepper { display: inline-flex; align-items: center; gap: 2px; }
.qty-add { border: 0; border-radius: 14px; padding: 10px 16px; background: var(--blue-600); color: #fff; font-weight: 900; box-shadow: 0 5px 0 #0438a0; cursor: pointer; white-space: nowrap; }
.qty-add:hover { transform: translateY(-2px); }
.qty-btn { width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--blue-600); color: #fff; font-size: 1.3rem; font-weight: 900; line-height: 1; box-shadow: 0 4px 0 #0438a0; cursor: pointer; display: grid; place-items: center; }
.qty-btn:hover { transform: translateY(-1px); }
.qty-num { min-width: 34px; text-align: center; font-family: "Lilita One"; font-size: 1.25rem; }

/* --- Carrito --- */
.order-cart { position: sticky; top: 18px; }
@media (max-width: 900px) { .order-cart { position: static; } }
.cart-inner { background: rgba(4,18,58,.86); border: 1px solid rgba(255,255,255,.16); border-radius: 24px; padding: 20px 20px 22px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.cart-title { font-family: "Lilita One"; font-size: 1.4rem; text-transform: uppercase; margin: 0 0 14px; }

.cart-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cart-empty { color: #9bd1ff; font-weight: 700; margin: 8px 0; }
.cart-line { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border-radius: 14px; padding: 8px 10px; }
.cart-line .cl-info { flex: 1; min-width: 0; }
.cart-line .cl-name { font-weight: 800; font-size: .92rem; line-height: 1.1; }
.cart-line .cl-options { color: #ffe79a; font-weight: 700; font-size: .76rem; line-height: 1.2; margin: 2px 0; }
.cart-line .cl-note { color: #cfe0ff; font-weight: 700; font-size: .74rem; line-height: 1.2; margin: 2px 0; }
.cart-line .cl-price { color: #9bd1ff; font-weight: 700; font-size: .82rem; }
.cart-line .cl-edit { margin-top: 5px; border: 0; background: rgba(255,213,31,.14); color: #ffe79a; font-weight: 800; font-size: .76rem; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.cart-line .cl-edit:hover { background: rgba(255,213,31,.24); }
.cart-line .qty-btn { width: 30px; height: 30px; font-size: 1.05rem; border-radius: 9px; box-shadow: 0 3px 0 #0438a0; }
.cart-line .qty-num { min-width: 22px; font-size: 1rem; }

.cart-total-row { display: flex; align-items: baseline; justify-content: space-between; border-top: 2px dashed rgba(255,255,255,.2); padding-top: 12px; margin-top: 4px; }
.cart-total-row span { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #cfe4ff; }
.cart-total-row strong { font-family: "Lilita One"; font-size: 1.7rem; color: var(--yellow); }
/* Subtotal y envío: renglones chicos arriba del Total. Solo aparecen en delivery,
   por eso le sacamos la línea de arriba: la separación la marca el Total. */
.cart-sub-row { border-top: 0; padding-top: 0; margin-top: 0; }
.cart-sub-row + .cart-sub-row { margin-top: 2px; }
.cart-sub-row span { font-size: .84rem; }
.cart-sub-row strong { font-family: inherit; font-size: 1.05rem; color: #cfe4ff; }
.cart-points-hint { margin: 8px 0 0; background: rgba(78,230,109,.12); border: 1px solid rgba(78,230,109,.34); border-radius: 12px; padding: 8px 12px; color: #b8ffcb; font-weight: 800; font-size: .86rem; }

/* --- Checkout --- */
.cart-checkout { margin-top: 16px; display: flex; flex-direction: column; }
.checkout-block { margin-bottom: 12px; }
.checkout-label { display: block; font-weight: 800; color: #cfe4ff; margin-bottom: 8px; font-size: .9rem; }
/* Aviso del alias de transferencia (solo si el local lo configuró). */
.checkout-pay-hint { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(155,209,255,.12); border: 1px solid rgba(155,209,255,.3); color: #cfe4ff; font-weight: 700; font-size: .85rem; }
.checkout-pay-hint b { color: #fff; user-select: all; }
.fulfillment-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fulfill-opt { position: relative; cursor: pointer; text-align: center; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); border-radius: 14px; padding: 12px 8px; font-weight: 800; font-size: .9rem; transition: .12s; }
.fulfill-opt input { position: absolute; opacity: 0; pointer-events: none; }
.fulfill-opt.is-active { background: var(--yellow); color: #071342; border-color: var(--yellow); box-shadow: 0 5px 0 #9d7300; }

.checkout-guest-hint { background: rgba(78,230,109,.1); border: 1px solid rgba(78,230,109,.32); border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; color: #b8ffcb; font-weight: 700; font-size: .86rem; }
.checkout-guest-hint a { color: #fff; font-weight: 800; }
.cart-checkout .auth-field { margin-bottom: 12px; }
/* El textarea vive dentro de una .auth-field (caja blanca), igual que los
   inputs: fondo transparente y texto oscuro para que se lea lo que se escribe. */
.cart-checkout textarea { width: 100%; box-sizing: border-box; border: 0; outline: 0; background: transparent; color: #07164d; font: inherit; font-weight: 800; padding: 4px 0; resize: vertical; }
.cart-checkout textarea::placeholder { color: #9fb0d6; }
.cart-checkout select { width: 100%; box-sizing: border-box; }
.coupon-hint { display: block; color: #36549e; font-weight: 700; font-size: .78rem; margin-top: 6px; }

.cart-checkout .auth-form-status { margin: 10px 0 0; font-weight: 800; min-height: 1.2em; }
.cart-checkout .auth-form-status.is-error { color: #ffb0b0; }
.cart-checkout .auth-form-status.is-ok { color: #b8ffcb; }

.order-secondary-btn { border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.08); color: #fff; font-weight: 800; border-radius: 16px; padding: 13px 20px; cursor: pointer; }
.order-secondary-btn:hover { background: rgba(255,255,255,.16); }

/* --- Barra flotante + bottom sheet del carrito (solo mobile) --- */
.cart-fab { display: none; }
.cart-sheet-handle, .cart-sheet-close, .cart-sheet-overlay { display: none; }

@media (max-width: 900px) {
  .order-main { padding-bottom: 92px; }             /* lugar para la barra */
  .menu-grid { grid-template-columns: 1fr; }        /* una columna, sin desborde */
  .cart-line { flex-wrap: wrap; }
  .cart-line .cl-name, .cart-line .cl-options, .cart-line .cl-note, .cart-line .cl-price { overflow-wrap: anywhere; }

  /* Barra flotante */
  .cart-fab { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
    display: flex; align-items: center; gap: 12px; border: 0; border-radius: 18px;
    padding: 15px 18px; background: var(--yellow); color: #071342; font-weight: 900;
    box-shadow: 0 12px 30px rgba(0,0,0,.45); cursor: pointer; }
  .cart-fab[hidden] { display: none; }
  .cart-fab-count { flex: 0 0 auto; background: #071342; color: #fff; min-width: 28px; height: 28px;
    border-radius: 999px; display: grid; place-items: center; font-size: .95rem; padding: 0 7px; }
  .cart-fab-label { flex: 1; text-align: left; font-size: 1.05rem; }
  .cart-fab-total { flex: 0 0 auto; font-size: 1.15rem; }

  /* Fondo oscuro detrás del sheet */
  .cart-sheet-overlay { position: fixed; inset: 0; z-index: 55; background: rgba(2,10,40,.62); backdrop-filter: blur(2px); }
  .cart-sheet-overlay[hidden] { display: none; }

  /* El carrito se vuelve una ventana que sube desde abajo */
  .order-cart { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 65;
    max-height: 88vh; overflow-y: auto; transform: translateY(100%);
    transition: transform .28s ease; -webkit-overflow-scrolling: touch; }
  .order-cart.is-open { transform: translateY(0); }
  .cart-inner { position: relative; border-radius: 24px 24px 0 0; padding-bottom: 26px; }

  .cart-sheet-handle { display: block; width: 44px; height: 5px; border-radius: 999px;
    background: rgba(255,255,255,.3); margin: -6px auto 12px; }
  .cart-sheet-close { display: grid; place-items: center; position: absolute; top: 12px; right: 14px;
    width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12);
    color: #fff; font-size: 1rem; cursor: pointer; }
}

/* --- Éxito: panel que aparece POR ENCIMA de todo ------------------------
   Antes era una sección más, al final de la página: el cliente mandaba el
   pedido y la confirmación le quedaba abajo del menú, donde había que ir a
   buscarla. Ahora flota sobre la carta, con el mismo movimiento que el
   carrito: en el celular sube desde abajo, en la compu aparece centrado.

   Se sale con los dos botones de adentro ("Ver mis pedidos" / "Hacer otro
   pedido"). No cierra al tocar el fondo a propósito: es una confirmación,
   conviene que se lea antes de sacarla. */
.order-success { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(2,10,40,.66); backdrop-filter: blur(3px); overflow-y: auto; animation: successFade .22s ease; }
.success-card { max-width: 560px; width: 100%; text-align: center; background: rgba(4,18,58,.97); border: 1px solid rgba(255,255,255,.16); border-radius: 26px; padding: 34px 26px; box-shadow: 0 24px 60px rgba(0,0,0,.55); max-height: calc(100vh - 40px); overflow-y: auto; animation: successPop .3s cubic-bezier(.2,.9,.3,1.15); }

@keyframes successFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes successPop { from { transform: translateY(16px) scale(.97); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes successSheet { from { transform: translateY(100%) } to { transform: none } }

/* En el celular sube desde abajo, pegado al borde, igual que el carrito. */
@media (max-width: 900px) {
  .order-success { place-items: end center; padding: 0; }
  .success-card { border-radius: 24px 24px 0 0; max-height: 92vh; padding: 26px 20px 24px; animation: successSheet .3s ease; }
}

/* Quien prefiera no ver animaciones, no las ve. */
@media (prefers-reduced-motion: reduce) {
  .order-success, .success-card { animation: none; }
}
/* Aviso de "te escribimos por WhatsApp": es lo que el cliente necesita
   saber apenas manda el pedido, así que va destacado y no como un renglón
   más de texto. */
.success-contact { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; padding: 12px 16px; border-radius: 14px; background: rgba(78,230,109,.12); border: 1px solid rgba(78,230,109,.34); color: #b8ffcb; font-weight: 800; font-size: .92rem; line-height: 1.35; }
.success-contact b { color: #fff; }
.success-contact-icon { font-size: 1.15rem; }

.success-emoji { font-size: 3.6rem; }
.success-card h2 { font-family: "Lilita One"; font-size: 2rem; text-transform: uppercase; margin: 8px 0 10px; }
.success-card p { color: #bfe0ff; font-weight: 700; }
.success-card p strong { color: var(--yellow); }
.success-state { display: inline-block; margin: 6px 0 4px; padding: 9px 18px; border-radius: 999px; background: rgba(255,213,31,.14); border: 1px solid rgba(255,213,31,.4); color: #ffe79a; font-weight: 900; font-size: 1.05rem; }
.success-summary { text-align: left; background: rgba(255,255,255,.06); border-radius: 16px; padding: 14px 16px; margin: 16px 0; font-weight: 700; }
.success-summary .ss-line { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.success-summary .ss-total { border-top: 2px dashed rgba(255,255,255,.2); margin-top: 6px; padding-top: 8px; font-family: "Lilita One"; }
.success-summary .ss-total b { color: var(--yellow); }
.success-actions { display: flex; flex-direction: column; gap: 10px; }
.success-actions .auth-submit { text-decoration: none; text-align: center; }

/* --- Popup de opciones (papas / bebida / adicionales) --- */
.opt-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(2,10,40,.72); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; }
.opt-modal { width: min(520px, 100%); max-height: 90vh; display: flex; flex-direction: column; background: var(--blue-950); border: 1px solid rgba(255,255,255,.18); border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.5); overflow: hidden; }
.opt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
.opt-head b { font-family: "Lilita One"; font-size: 1.4rem; }
.opt-close { border: 0; background: rgba(255,255,255,.1); color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 1rem; cursor: pointer; flex: 0 0 auto; }
.opt-close:hover { background: rgba(255,255,255,.2); }
.opt-groups { overflow-y: auto; padding: 6px 20px 10px; }
.opt-group { padding: 14px 0; border-bottom: 1px dashed rgba(255,255,255,.14); }
.opt-group:last-child { border-bottom: 0; }
.opt-group-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.opt-group-title span { font-family: "Lilita One"; font-size: 1.05rem; }
.opt-req { font-style: normal; font-weight: 900; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; background: var(--yellow); color: #071342; padding: 3px 9px; border-radius: 999px; }
.opt-opt { font-style: normal; font-weight: 800; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #9bd1ff; }
/* Caja clara dentro del modal oscuro, para que se lea lo que se escribe. */
.opt-note-input { width: 100%; box-sizing: border-box; border: 0; border-radius: 12px; background: rgba(255,255,255,.95); color: #07164d; font: inherit; font-weight: 700; padding: 10px 12px; resize: vertical; outline: 0; }
.opt-note-input::placeholder { color: #8296bf; font-weight: 600; }
.opt-note-input:focus { box-shadow: 0 0 0 3px var(--yellow); }
.opt-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; cursor: pointer; transition: background .12s; }
.opt-row:hover { background: rgba(255,255,255,.06); }
.opt-row input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--yellow); cursor: pointer; }
.opt-row-name { flex: 1; font-weight: 700; }
.opt-row-price { color: #9bd1ff; font-weight: 800; font-size: .9rem; white-space: nowrap; }
.opt-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.2); }
.opt-total { display: flex; flex-direction: column; line-height: 1.1; }
.opt-total span { font-weight: 800; text-transform: uppercase; font-size: .72rem; color: #9bd1ff; }
.opt-total-value { font-family: "Lilita One"; font-size: 1.5rem; color: var(--yellow); }
.opt-add-btn { flex: 1; max-width: 260px; border: 0; border-radius: 16px; padding: 14px 20px; background: var(--yellow); color: #071342; font-weight: 900; box-shadow: 0 6px 0 #b98700; cursor: pointer; }
.opt-add-btn:hover { transform: translateY(-2px); }

/* --- 2x1 de socio (miércoles) ---------------------------------------------
   La tarjeta del beneficio se distingue del resto de la carta: es de socio,
   está sólo hoy, y es lo que muchos vienen a buscar. */
.product-card.is-perk { border-color: rgba(255,213,31,.75); background: linear-gradient(160deg, rgba(255,213,31,.16), rgba(255,255,255,.07) 60%); box-shadow: 0 0 0 1px rgba(255,213,31,.25), 0 10px 30px rgba(0,0,0,.28); }
.product-card.is-perk:hover { border-color: rgba(255,213,31,1); }
.product-perk-tag { display: inline-block; align-self: flex-start; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: #ffd51f; color: #07164d; font-size: .72rem; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; }

/* =========================================================
   TEMA CLARO — solo la página de pedidos
   ---------------------------------------------------------
   Todo lo de arriba está escrito para el fondo azul oscuro del resto del
   sitio. Acá abajo se da vuelta, y SOLO dentro de `body.order-light`: pedir
   comida se lee mejor sobre blanco, y el resto del club sigue igual.

   OJO con el gancho: `order-page` NO sirve, porque mostrador.html usa esa
   misma clase — aclarar por ahí le cambiaría la pantalla al cajero. Por eso
   pedir.html lleva `order-light` aparte.

   Para volver atrás: borrar este bloque. No hay nada más que tocar.

   Dos cosas que no son blanco puro, a propósito:
     - la página es un blanco apenas grisado, para que las tarjetas
       (esas sí blancas) tengan dónde apoyarse y no se fundan;
     - el amarillo de la marca NO se usa para texto sobre claro (no se
       lee). Queda para fondos de píldoras y botones, donde brilla.
========================================================= */

body.order-light {
  --ord-bg:      #f4f6fb;   /* la página */
  --ord-surface: #ffffff;   /* tarjetas, carrito, modales */
  --ord-line:    #e2e7f2;   /* bordes */
  --ord-ink:     #0b1f52;   /* texto principal */
  --ord-muted:   #5f6f96;   /* texto secundario */
  --ord-accent:  #0a42d8;   /* el azul de la marca, ahora para texto */
  --ord-shadow:  0 6px 20px rgba(11, 31, 82, .07);

  background: var(--ord-bg);
  color: var(--ord-ink);
}

/* El punteado blanco del fondo es para el tema oscuro: sobre claro ensucia. */
body.order-light .page-noise { display: none; }

/* --- Hero --- */
body.order-light .order-hero h1 { color: var(--ord-ink); }
body.order-light .order-hero h1 strong { color: var(--ord-accent); text-shadow: none; }
body.order-light .order-hero p { color: var(--ord-muted); }
body.order-light .order-hero p b { color: var(--ord-ink); }
body.order-light .order-kicker { box-shadow: 0 4px 0 #d9ab00; }

body.order-light .order-loading { color: var(--ord-muted); }
body.order-light .order-error { color: #c0392b; }

/* --- Navegación de categorías --- */
body.order-light .menu-nav {
  background: rgba(255, 255, 255, .94);
  border-color: var(--ord-line);
  box-shadow: var(--ord-shadow);
  backdrop-filter: blur(8px);
}
body.order-light .menu-nav-pill { color: var(--ord-muted); }
body.order-light .menu-nav-pill:hover { background: #eef2fa; color: var(--ord-ink); }
body.order-light .menu-nav-pill.is-active { background: var(--ord-accent); color: #fff; }

/* --- Productos --- */
body.order-light .menu-category h2 { color: var(--ord-ink); }
body.order-light .product-card {
  background: var(--ord-surface);
  border-color: var(--ord-line);
  box-shadow: var(--ord-shadow);
}
body.order-light .product-card:hover {
  border-color: var(--ord-accent);
  box-shadow: 0 10px 26px rgba(11, 31, 82, .12);
}
body.order-light .product-name { color: var(--ord-ink); }
body.order-light .product-desc { color: var(--ord-muted); }
body.order-light .product-price { color: var(--ord-ink); }

/* --- Carrito --- */
body.order-light .cart-inner {
  background: var(--ord-surface);
  border-color: var(--ord-line);
  box-shadow: 0 10px 30px rgba(11, 31, 82, .10);
}
body.order-light .cart-title { color: var(--ord-ink); }
body.order-light .cart-empty { color: var(--ord-muted); }
body.order-light .cart-line { background: #f4f6fb; }
body.order-light .cart-line .cl-name { color: var(--ord-ink); }
body.order-light .cart-line .cl-options { color: #8a6a00; }
body.order-light .cart-line .cl-note { color: var(--ord-muted); }
body.order-light .cart-line .cl-price { color: var(--ord-muted); }
body.order-light .cart-line .cl-edit { background: #fff5cc; color: #7a5c00; }
body.order-light .cart-line .cl-edit:hover { background: #ffeaa0; }

body.order-light .cart-total-row { border-top-color: var(--ord-line); }
body.order-light .cart-total-row span { color: var(--ord-muted); }
body.order-light .cart-total-row strong { color: var(--ord-ink); }
body.order-light .cart-sub-row strong { color: var(--ord-muted); }
body.order-light .cart-points-hint {
  background: #e8f9ed; border-color: #b6e7c4; color: #1d6b39;
}

/* --- Checkout --- */
body.order-light .checkout-label { color: var(--ord-ink); }
body.order-light .checkout-pay-hint {
  background: #eef4ff; border-color: #c9dcff; color: #2b4a8a;
}
body.order-light .checkout-pay-hint b { color: var(--ord-ink); }
body.order-light .fulfill-opt {
  background: #f4f6fb; border-color: var(--ord-line); color: var(--ord-ink);
}
body.order-light .fulfill-opt.is-active {
  background: var(--yellow); color: #071342; border-color: var(--yellow);
  box-shadow: 0 4px 0 #d9ab00;
}
body.order-light .checkout-guest-hint {
  background: #e8f9ed; border-color: #b6e7c4; color: #1d6b39;
}
body.order-light .checkout-guest-hint a { color: #14532d; }
body.order-light .cart-checkout .auth-form-status.is-error { color: #c0392b; }
body.order-light .cart-checkout .auth-form-status.is-ok { color: #1d6b39; }

body.order-light .order-secondary-btn {
  background: #fff; border-color: var(--ord-line); color: var(--ord-ink);
}
body.order-light .order-secondary-btn:hover { background: #eef2fa; }

/* --- Bottom sheet (mobile) --- */
body.order-light .cart-sheet-handle { background: #d7dded; }
body.order-light .cart-sheet-close { background: #eef2fa; color: var(--ord-ink); }

/* --- Éxito --- */
body.order-light .success-card {
  background: var(--ord-surface);
  border-color: var(--ord-line);
  box-shadow: 0 14px 36px rgba(11, 31, 82, .12);
}
body.order-light .success-card h2 { color: var(--ord-ink); }
body.order-light .success-card p { color: var(--ord-muted); }
body.order-light .success-card p strong { color: var(--ord-accent); }
body.order-light .success-state {
  background: #fff5cc; border-color: #ffd51f; color: #7a5c00;
}
body.order-light .success-summary { background: #f4f6fb; color: var(--ord-ink); }
body.order-light .success-summary .ss-total { border-top-color: var(--ord-line); }
body.order-light .success-summary .ss-total b { color: var(--ord-ink); }

/* --- Popup de opciones --- */
body.order-light .opt-overlay { background: rgba(11, 31, 82, .42); }
body.order-light .opt-modal {
  background: var(--ord-surface);
  border-color: var(--ord-line);
  color: var(--ord-ink);
  box-shadow: 0 24px 60px rgba(11, 31, 82, .25);
}
body.order-light .opt-head { border-bottom-color: var(--ord-line); }
body.order-light .opt-close { background: #eef2fa; color: var(--ord-ink); }
body.order-light .opt-close:hover { background: #dfe6f5; }
body.order-light .opt-group { border-bottom-color: var(--ord-line); }
body.order-light .opt-opt { color: var(--ord-muted); }
body.order-light .opt-note-input { background: #f4f6fb; }
body.order-light .opt-row:hover { background: #f4f6fb; }
body.order-light .opt-row-price { color: var(--ord-muted); }
body.order-light .opt-foot { border-top-color: var(--ord-line); background: #f9fafd; }
body.order-light .opt-total span { color: var(--ord-muted); }
body.order-light .opt-total-value { color: var(--ord-ink); }

/* --- 2x1 de socio: sobre claro, la cinta dorada resalta sola --- */
body.order-light .product-card.is-perk {
  background: linear-gradient(160deg, #fffae0, #fff 62%);
  border-color: #ffd51f;
  box-shadow: 0 0 0 1px rgba(255, 213, 31, .5), 0 10px 26px rgba(180, 140, 0, .16);
}
body.order-light .product-card.is-perk:hover { border-color: #e8b800; }

/* El amarillo como color de control (tildes, radios) se pierde sobre blanco:
   sirve para fondos, no para trazos finos. */
body.order-light .opt-row input { accent-color: var(--ord-accent); }

/* El aviso de WhatsApp en claro: verde legible sobre blanco. */
body.order-light .success-contact { background: #e8f9ed; border-color: #b6e7c4; color: #1d6b39; }
body.order-light .success-contact b { color: #14532d; }

/* El velo del panel de éxito, en claro. */
body.order-light .order-success { background: rgba(11, 31, 82, .45); }

/* --- Aviso de horario ---------------------------------------------------
   Cuando el local no está tomando pedidos, la carta se sigue viendo pero no
   se puede enviar. El aviso va arriba de todo para que el cliente no arme el
   pedido entero y recién ahí se entere. */
.order-closed { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; margin: 0 0 20px; padding: 16px 20px; border-radius: 16px; font-weight: 800; font-size: .96rem; line-height: 1.35; background: rgba(255,159,64,.14); border: 1px solid rgba(255,159,64,.4); color: #ffd0a1; }
.order-closed b { color: #fff; }
.order-closed.is-soon { background: rgba(78,230,109,.12); border-color: rgba(78,230,109,.34); color: #b8ffcb; }

/* En claro */
body.order-light .order-closed { background: #fff3e6; border-color: #ffcf9a; color: #8a4b12; }
body.order-light .order-closed b { color: #5c300a; }
body.order-light .order-closed.is-soon { background: #e8f9ed; border-color: #b6e7c4; color: #1d6b39; }
body.order-light .order-closed.is-soon b { color: #14532d; }

/* --- Aviso de cambio de WhatsApp (TEMPORAL) -----------------------------
   El componente .wa-alert vive en styles.css, escrito para el fondo oscuro.
   Acá solo se da vuelta para esta página, igual que el resto del bloque claro.
   Va arriba del todo, incluso antes del aviso de horario, porque el cliente lo
   tiene que ver aunque el local esté cerrado. */
body.order-light .wa-alert { background: #e8f9ed; border-color: #b6e7c4; }
body.order-light .wa-alert__copy strong { color: #14532d; }
body.order-light .wa-alert__copy p { color: #1d6b39; }