/*=============================================
Restaurante — the widgets as they look on the public site.

Loaded as a <link> so the same rules reach the editor's canvas, the preview
and the published page. Injecting them from the script would work on the
published page and nowhere else, because scripts are inert inside the canvas.

Everything is scoped under .rmw-* and inherits the site's own font and colour
where it can: a carta that ignores the theme it was dropped into looks pasted
on, and the whole point of using the page builder is that it can be restyled.

The brand comes in through the tokens below. A site that sets nothing gets a
neutral card menu that reads on light and on dark; a site that sets
--rmw-accent gets its own colour on the buttons, the chips and the prices:

    #wpb-page { --rmw-accent: #09ad95; --rmw-on-accent: #06231f; }
=============================================*/

.rmw {
    /* Hairlines and secondary text, derived so they work on light and dark. */
    --rmw-line: rgba(128, 128, 128, .28);
    /* A single fixed grey cannot pass 4.5:1 on white AND on ink — the old
       rgba(120,120,120) measured 4.42 on white. Mixed from the page's own text
       colour it passes on both by construction; the hex before it is what the
       rare browser without color-mix gets, and that one is measured on white. */
    --rmw-muted: #6b7280;
    --rmw-muted: color-mix(in srgb, currentColor 70%, transparent);
    --rmw-surface: rgba(128, 128, 128, .06);
    /* Brand. Neutral until the site says otherwise. */
    --rmw-accent: #111827;
    --rmw-on-accent: #ffffff;
    --rmw-radius: 14px;
    --rmw-gap: 20px;
}

/* ---------- la barra de categorías ----------
   Pegajosa: en una carta de seis secciones, volver arriba para cambiar de
   sección es el gesto que más se repite. `top` se puede correr desde el sitio
   si su propio header también es pegajoso. */
.rmw-nav {
    position: sticky; top: var(--rmw-nav-top, 0px); z-index: 20;
    display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
    margin: 0 0 2rem; padding: .75rem 0;
    background: var(--rmw-nav-bg, transparent);
    -webkit-overflow-scrolling: touch;
}
.rmw-nav::-webkit-scrollbar { display: none; }
.rmw-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 1rem; border-radius: 999px; border: 1px solid var(--rmw-line);
    font-size: .9rem; font-weight: 600; text-decoration: none; color: inherit;
    white-space: nowrap; transition: background-color .18s ease, border-color .18s ease;
}
.rmw-chip:hover, .rmw-chip:focus-visible {
    background: var(--rmw-accent); border-color: var(--rmw-accent); color: var(--rmw-on-accent);
}

/* ---------- las secciones de la carta ---------- */
.rmw-cat { margin: 0 0 2.75rem; scroll-margin-top: var(--rmw-anchor, 96px); }
.rmw-cat-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; margin: 0 0 1.1rem; padding-bottom: .6rem;
    border-bottom: 1px solid var(--rmw-line);
}
.rmw-cat-name {
    margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: .02em;
}
.rmw-cat-count { font-size: .82rem; color: var(--rmw-muted); white-space: nowrap; }

/* ---------- la rejilla de platos ----------
   Columnas automáticas en vez de un número fijo: la carta se publica dentro de
   la página que el operador armó, y esa puede ser de ancho completo o media
   columna. auto-FIT y no auto-fill: con auto-fill una sección de tres platos en
   un ancho que da para cuatro deja la cuarta pista vacía, y la fila se ve
   cortada a la derecha. auto-fit la colapsa y los tres reparten el ancho. */
.rmw-grid {
    display: grid; gap: var(--rmw-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.rmw-dish {
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--rmw-line); border-radius: var(--rmw-radius);
    background: var(--rmw-surface);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.rmw-dish:hover {
    border-color: var(--rmw-accent);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .10);
    transform: translateY(-2px);
}
/* The photo carries the card: a menu is looked at before it is read. The fixed
   ratio is what keeps a row of cards level when the kitchen uploads portraits
   and landscapes on the same day; the max-height is the other half of auto-fit,
   or a section with only two dishes turns its photos into billboards. */
.rmw-dish-media {
    position: relative; aspect-ratio: 4 / 3; max-height: 260px;
    background: rgba(128, 128, 128, .12);
}
.rmw-dish-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.rmw-dish-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.rmw-dish-body { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem 1.15rem; }
.rmw-dish-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.rmw-dish-name { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.rmw-dish-price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rmw-dish-desc { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--rmw-muted); }
.rmw-dish-foot { margin-top: auto; padding: 0 1.1rem 1.15rem; }

/* Agotado: se dice con palabras y con la foto apagada, no sólo tachando. */
.rmw-out .rmw-dish-photo { filter: grayscale(1); opacity: .5; }
.rmw-out .rmw-dish-price { text-decoration: line-through; opacity: .6; }
.rmw-tag {
    position: absolute; left: .6rem; top: .6rem;
    display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px;
    background: rgba(17, 24, 39, .9); color: #fff;
}

/* ---------- botones y formularios ---------- */
.rmw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    cursor: pointer; font: inherit; font-size: .92rem; font-weight: 600;
    min-height: 44px; padding: 0 1.1rem; border-radius: 10px;
    border: 1px solid var(--rmw-line); background: transparent; color: inherit;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.rmw-btn:hover { border-color: var(--rmw-accent); background: var(--rmw-surface); }
.rmw-add { width: 100%; }
.rmw-btn-main {
    background: var(--rmw-accent); border-color: var(--rmw-accent); color: var(--rmw-on-accent);
    min-height: 48px; padding: 0 1.6rem; font-size: 1rem;
}
.rmw-btn-main:hover { background: var(--rmw-accent); border-color: var(--rmw-accent); filter: brightness(1.12); }
.rmw-btn[disabled] { opacity: .45; cursor: default; }

.rmw-form { display: grid; gap: 1.15rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rmw-form .rmw-wide { grid-column: 1 / -1; }
.rmw-field { display: flex; flex-direction: column; gap: .4rem; }
.rmw-field label { font-size: .85rem; font-weight: 600; }
.rmw-field small { font-weight: 400; color: var(--rmw-muted); }
.rmw-field input, .rmw-field select, .rmw-field textarea {
    font: inherit; min-height: 46px; padding: .6rem .8rem; border-radius: 10px;
    border: 1px solid var(--rmw-line); background: transparent; color: inherit;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.rmw-field input:focus, .rmw-field select:focus, .rmw-field textarea:focus {
    outline: none; border-color: var(--rmw-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rmw-accent) 22%, transparent);
}
.rmw-note { font-size: .85rem; line-height: 1.55; color: var(--rmw-muted); margin: .6rem 0 0; }
.rmw-msg { margin: 1rem 0 0; padding: .9rem 1.1rem; border-radius: 10px; border: 1px solid var(--rmw-line); }
.rmw-msg.is-bad { border-color: #d9534f; color: #d9534f; }
.rmw-msg.is-good { border-color: #2e7d32; color: #2e7d32; }
.rmw-empty { color: var(--rmw-muted); }

/* ---------- una tarjeta con título, para el pedido y la reserva ---------- */
.rmw-panel {
    border: 1px solid var(--rmw-line); border-radius: var(--rmw-radius);
    padding: clamp(1.2rem, 3vw, 1.8rem); background: var(--rmw-surface);
}
/* Un formulario de seis campos estirado a todo el ancho de la página obliga a
   recorrer medio metro entre la etiqueta y lo que se escribe. Se acota, pero
   alineado a la izquierda: centrarlo lo sacaría de la línea en que arrancan el
   header, el título y el pie. */
.rmw-panel-narrow { max-width: 780px; }
.rmw-panel-head { margin: 0 0 1.25rem; }
.rmw-panel-title { margin: 0; font-size: 1.15rem; font-weight: 700; }
.rmw-panel-sub { margin: .35rem 0 0; font-size: .9rem; color: var(--rmw-muted); }

/* ---------- el carrito ---------- */
.rmw-cart { margin-top: 2.5rem; }
.rmw-cart-line {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem 0; border-bottom: 1px solid var(--rmw-line);
}
.rmw-cart-line:last-of-type { border-bottom: 0; }
.rmw-cart-name { flex: 1 1 auto; min-width: 0; }
.rmw-cart-sum { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rmw-cart-total {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 1.1rem; font-weight: 700; padding-top: .9rem; margin-top: .5rem;
    border-top: 2px solid var(--rmw-line);
}
.rmw-qty { display: inline-flex; align-items: center; gap: .1rem; margin-right: .7rem; }
.rmw-qty button {
    font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
    width: 44px; height: 44px; border-radius: 8px;
    border: 1px solid var(--rmw-line); background: transparent; color: inherit;
}
.rmw-qty button:hover { border-color: var(--rmw-accent); }
.rmw-qty-n { display: inline-block; min-width: 28px; text-align: center; font-weight: 600; }

/* Las opciones de entrega son una elección entre dos, no dos puntos sueltos
   (regla #6 del proyecto: la elegida se pinta entera). */
.rmw-kinds { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rmw-kind { position: relative; display: block; cursor: pointer; }
.rmw-kind input { position: absolute; opacity: 0; width: 0; height: 0; }
.rmw-kind-body {
    display: block; padding: .85rem 1rem; border-radius: 10px;
    border: 1px solid var(--rmw-line); transition: border-color .18s ease, background-color .18s ease;
}
.rmw-kind input:checked + .rmw-kind-body {
    border-color: var(--rmw-accent);
    background: color-mix(in srgb, var(--rmw-accent) 10%, transparent);
}
.rmw-kind input:focus-visible + .rmw-kind-body { outline: 3px solid var(--rmw-accent); outline-offset: 2px; }
.rmw-kind-title { display: block; font-weight: 600; font-size: .95rem; }
.rmw-kind-help { display: block; font-size: .82rem; color: var(--rmw-muted); margin-top: .15rem; }

/* La barra que sigue al pedido. Aparece sólo con algo dentro, y su único
   trabajo es llevar a la parte de abajo sin obligar a buscarla. */
.rmw-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .8rem clamp(1rem, 5vw, 2rem);
    background: var(--rmw-accent); color: var(--rmw-on-accent);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .22);
}
.rmw-bar[hidden] { display: none; }
.rmw-bar-txt { font-size: .95rem; font-weight: 600; }
.rmw-bar .rmw-btn {
    background: var(--rmw-on-accent); color: var(--rmw-accent);
    border-color: var(--rmw-on-accent); min-height: 40px;
}

@media (max-width: 640px) {
    .rmw-form, .rmw-kinds { grid-template-columns: 1fr; }
    .rmw-grid { grid-template-columns: 1fr; }
    /* Lista compacta: la foto a la izquierda, y el texto con su botón apilados
       a la derecha. La foto no lleva alto: el estirado propio de la fila la
       lleva hasta el borde de la tarjeta, y fijarle uno se lo quitaría. */
    .rmw-dish { flex-direction: row; }
    .rmw-dish-media { flex: 0 0 116px; aspect-ratio: auto; max-height: none; }
    .rmw-dish-body { padding: .85rem .95rem; }
    .rmw-dish-foot { padding: 0 .95rem .85rem; }
    .rmw-dish-name { font-size: .95rem; }
    .rmw-dish-desc { font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .rmw-dish, .rmw-btn, .rmw-chip { transition: none; }
    .rmw-dish:hover { transform: none; }
}