/* Shared left-side navigation extracted from the restaurant menu. */
:root {
  --foodev-side-navigation-surface: var(--foodev-floating-capsule-background, rgb(255 255 255 / 85%));
  --foodev-side-navigation-text: #262626;
  --foodev-side-navigation-selection: var(--foodev-interaction-selector, rgb(0 0 0 / 8%));
  --foodev-side-navigation-muted: #666666;
}

:root[data-theme="dark"] {
  --foodev-side-navigation-text: #fff;
  /* Lo que cuelga de una fila va más apagado que ella, y «más apagado» no es el
     mismo color en los dos temas: sobre oscuro hay que SUBIR el gris, no
     bajarlo. Con el #666 del tema claro las subcategorías se hundían en el
     fondo y casi no se leían. */
  --foodev-side-navigation-muted: #a8a8a8;
}
/* El fondo no se oscurece ni el cajon proyecta sombra: se comporta como el
   desplegable de Servicios de la landing, que solo desenfoca lo que queda
   detras. La capa sigue existiendo porque es la que recoge el clic que cierra
   el cajon. */
.foodev-side-navigation-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--foodev-side-navigation-backdrop-layer, 90);
  background: transparent;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

.foodev-side-navigation-backdrop:is(.open, .is-open) {
  opacity: 1;
  pointer-events: auto;
}

.foodev-side-navigation {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--foodev-side-navigation-layer, 91);
  width: min(76vw, 312px);
  box-sizing: border-box;
  padding: calc(76px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--foodev-side-navigation-surface);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--foodev-side-navigation-text);
  border: 0;
  outline: 0;
  box-shadow: none;
  transform: translate3d(-100%, 0, 0);
  transition: transform .38s cubic-bezier(.22, .9, .32, 1), background-color .3s ease;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
}

.foodev-side-navigation:is(.open, .is-open) {
  transform: translate3d(0, 0, 0);
}

.foodev-side-navigation-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Special actions stay in the navigation flow and reuse the same row metrics.
   They are never pinned to the viewport edge. */
.foodev-side-navigation-row.foodev-side-navigation-special-action {
  width: 100%;
  min-height: 54px;
  margin-top: 8px;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  color: #ffffff;
  text-align: center;
}

.foodev-side-navigation-row {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  min-height: 54px;
  padding: 0 18px 0 20px;
  border: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.foodev-side-navigation-row:is(.active, .is-active) {
  background: var(--foodev-side-navigation-selection);
}

/* A special action is already its own selected surface. Marking its target as
   current must never replace the black action colour with the row selector. */
.foodev-side-navigation-row.foodev-side-navigation-special-action:is(.active, .is-active) {
  background: #000000;
  color: #ffffff;
}

.foodev-side-navigation-trigger {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* Private products render this shared trigger only at the same mobile
   breakpoint used by their navigation drawer. Keeping the visibility rule
   beside the trigger prevents stylesheet order from exposing it on desktop. */
.private-mobile-navigation-trigger.foodev-side-navigation-trigger {
  display: none;
}

.foodev-side-navigation-trigger > .icon,
.foodev-side-navigation-trigger > svg,
.foodev-side-navigation-trigger > .icon > svg {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  margin: 0;
  padding: 0;
}

.foodev-side-navigation-trigger > .icon {
  display: grid;
  place-items: center;
  line-height: 0;
}

.foodev-side-navigation-trigger svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* EL ESTÁNDAR de una fila que despliega otras dentro del cajón lateral.
   Cualquier producto que necesite agrupar entradas usa esto y no dibuja su
   propia versión: la fila es una fila normal, la flecha va pegada al borde
   derecho y gira al abrirse, y lo que cuelga se abre en alto con una animación,
   nunca apareciendo de golpe.

   El alto se anima con `grid-template-rows: 0fr → 1fr` y no con un `max-height`
   inventado: un tope a ojo o se queda corto y recorta las opciones, o se pasa y
   la animación arranca con un tramo muerto en el que no se mueve nada. */
.foodev-side-navigation-group-toggle .foodev-side-navigation-group-arrow {
  flex: 0 0 auto;
  margin-left: auto;
  display: grid;
  place-items: center;
  line-height: 0;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}

.foodev-side-navigation-group-toggle .foodev-side-navigation-group-arrow svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  /* Los 2 px son el grosor de esta flecha, no el del icono estándar: en el
     cajón se mira de lejos y con el trazo fino de 1,75 no se leía. */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.foodev-side-navigation-group-toggle[aria-expanded="true"] .foodev-side-navigation-group-arrow {
  transform: rotate(180deg);
}

.foodev-side-navigation-group-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s cubic-bezier(.2, .8, .2, 1);
}

.foodev-side-navigation-group-panel > * {
  min-height: 0;
  overflow: hidden;
}

.foodev-side-navigation-group-panel.is-open { grid-template-rows: 1fr; }

/* Las opciones de dentro se distinguen de las de fuera por el color, más
   apagado, y por la sangría; no por una línea ni por un fondo propio. */
.foodev-side-navigation-group-panel .foodev-side-navigation-row {
  min-height: 46px;
  padding-left: 34px;
  color: var(--foodev-side-navigation-muted, #666666);
  font-size: .95rem;
}

@media (max-width: 760px) {
  .private-mobile-navigation-trigger.foodev-side-navigation-trigger {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .foodev-side-navigation-group-panel,
  .foodev-side-navigation-group-toggle .foodev-side-navigation-group-arrow {
    transition-duration: .01ms !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .foodev-side-navigation,
  .foodev-side-navigation-backdrop {
    transition-duration: .01ms !important;
  }
}