/* Neon Rush — high-energy late-night bento interface */

.menu-layout-neon {
  background-color: var(--bg-color);
  background-image:
    linear-gradient(rgb(56 189 248 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(56 189 248 / 0.035) 1px, transparent 1px),
    radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--primary) 17%, transparent), transparent 28rem);
  background-size: 32px 32px, 32px 32px, auto;
}

.menu-layout-neon .menu-hero {
  min-height: 16rem;
  border-bottom: 1px solid var(--primary);
  background-color: #070a11;
}

.menu-layout-neon .menu-hero-empty {
  background:
    linear-gradient(115deg, transparent 0 44%, color-mix(in srgb, var(--primary) 28%, transparent) 44.2% 45%, transparent 45.2%),
    linear-gradient(25deg, transparent 0 68%, rgb(168 85 247 / 0.18) 68.2% 69%, transparent 69.2%),
    #070a11;
}

.menu-layout-neon .menu-hero-overlay {
  background: linear-gradient(90deg, rgb(3 5 10 / 0.92), rgb(3 5 10 / 0.2), rgb(3 5 10 / 0.8));
}

.menu-layout-neon .menu-hero-content {
  width: min(78rem, calc(100% - 2rem));
  padding-bottom: 5rem;
}

.menu-layout-neon .menu-hero-line {
  width: 4rem;
  height: 0.2rem;
  background: var(--primary);
  box-shadow: 0 0 16px color-mix(in srgb, var(--primary) 80%, transparent);
}

.menu-layout-neon .menu-hero-kicker {
  color: var(--primary);
  font-family: Outfit, sans-serif;
  letter-spacing: 0.34em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--primary) 65%, transparent);
}

.menu-layout-neon .menu-brand-shell {
  width: min(78rem, calc(100% - 2rem));
  margin-top: -3.25rem;
}

.menu-layout-neon .menu-brand-panel {
  position: relative;
  padding: 1rem 1.2rem;
  border-color: color-mix(in srgb, var(--primary) 62%, #263247);
  background: rgb(9 13 22 / 0.94);
  box-shadow: 10px 10px 0 color-mix(in srgb, var(--primary) 13%, transparent);
}

.menu-layout-neon .menu-brand-panel::before,
.menu-layout-neon .menu-brand-panel::after,
.menu-layout-neon .menu-item-card::before,
.menu-layout-neon .menu-item-card::after {
  content: '';
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
}

.menu-layout-neon .menu-brand-panel::before,
.menu-layout-neon .menu-item-card::before {
  top: -1px;
  inset-inline-start: -1px;
  border-top: 2px solid var(--primary);
  border-inline-start: 2px solid var(--primary);
}

.menu-layout-neon .menu-brand-panel::after,
.menu-layout-neon .menu-item-card::after {
  right: -1px;
  bottom: -1px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
}

.menu-layout-neon .menu-logo {
  width: 5.6rem;
  height: 5.6rem;
  border-color: var(--primary);
  clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%);
  box-shadow: 0 0 24px color-mix(in srgb, var(--primary) 22%, transparent);
}

.menu-layout-neon .menu-brand-eyebrow {
  color: var(--primary);
  font-family: Outfit, sans-serif;
  letter-spacing: 0.24em;
}

.menu-layout-neon .menu-title {
  color: #f8fafc;
  font-family: Outfit, var(--menu-font);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.menu-layout-neon .menu-tool-button,
.menu-layout-neon .menu-status,
.menu-layout-neon .menu-branch-link {
  border-radius: 0;
  border-color: #263247;
  background: #0c1220;
  color: #cbd5e1;
  font-family: Outfit, var(--menu-font);
}

.menu-layout-neon .menu-review-button,
.menu-layout-neon .menu-status.is-open {
  border-color: color-mix(in srgb, var(--primary) 55%, #263247);
  color: var(--primary);
}

.menu-layout-neon .menu-branch-link.is-current {
  border-color: var(--primary);
  background: var(--primary);
  color: #06101a;
}

.menu-layout-neon .table-welcome-card,
.menu-layout-neon .table-welcome-action {
  border-radius: 0;
}

.menu-layout-neon .menu-discovery {
  top: 0.5rem;
  margin-top: 1rem;
}

.menu-layout-neon .menu-discovery-inner {
  width: min(78rem, calc(100% - 2rem));
  display: grid;
  grid-template-columns: minmax(17rem, 0.8fr) minmax(0, 1.2fr);
  grid-template-areas:
    'search categories'
    'filters filters';
  gap: 0.55rem 1rem;
  padding: 0.75rem;
  border-color: #263247;
  background: rgb(9 13 22 / 0.94);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.35);
  backdrop-filter: none;
}

.menu-layout-neon .menu-search {
  grid-area: search;
}

.menu-layout-neon .menu-search input {
  border-radius: 0;
  border-color: #263247;
  background: #070b13;
  color: #f8fafc;
  font-family: Outfit, var(--menu-font);
}

.menu-layout-neon .menu-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 0 22px color-mix(in srgb, var(--primary) 15%, transparent);
}

.menu-layout-neon .menu-category-nav {
  grid-area: categories;
  justify-content: flex-end;
  padding-top: 0;
}

.menu-layout-neon .menu-filter-row {
  grid-area: filters;
  padding-top: 0;
}

.menu-layout-neon .dietary-chip,
.menu-layout-neon .cat-tab {
  border-radius: 0;
  border-color: #263247;
  background: #0c1220;
  color: #8ea0b8;
  font-family: Outfit, var(--menu-font);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.menu-layout-neon .dietary-chip.active,
.menu-layout-neon .cat-tab.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #05101a;
  box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 22%, transparent);
}

.menu-layout-neon .menu-catalog {
  width: min(78rem, calc(100% - 2rem));
  margin-top: 3.5rem;
}

.menu-layout-neon .category-section + .category-section {
  margin-top: 5rem;
}

.menu-layout-neon .category-heading {
  align-items: center;
  border-bottom: 2px solid #263247;
}

.menu-layout-neon .category-number {
  display: block;
  color: var(--primary);
  font-family: Outfit, sans-serif;
  font-size: 0.85rem;
}

.menu-layout-neon .category-icon {
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, #0c1220);
  color: var(--primary);
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--primary) 12%, transparent);
}

.menu-layout-neon .category-heading h2 {
  color: #f8fafc;
  font-family: Outfit, var(--menu-font);
  font-size: 1.35rem;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.menu-layout-neon .category-heading p,
.menu-layout-neon .category-count {
  color: #718198;
  font-family: Outfit, var(--menu-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-layout-neon .menu-items-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 0.85rem;
}

.menu-layout-neon .menu-item-card {
  min-height: 23rem;
  border-color: #263247;
  border-radius: 0;
  background: #0c1220;
  box-shadow: 0 16px 35px rgb(0 0 0 / 0.22);
}

.menu-layout-neon .menu-item-card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent), 0 0 30px color-mix(in srgb, var(--primary) 13%, transparent);
  transform: translateY(-3px);
}

.menu-layout-neon .item-card-media {
  height: 11rem;
  border-bottom: 1px solid #263247;
}

.menu-layout-neon .item-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, #0c1220);
  pointer-events: none;
}

.menu-layout-neon .item-card-placeholder {
  background:
    linear-gradient(135deg, transparent 0 48%, color-mix(in srgb, var(--primary) 18%, transparent) 48.5% 50%, transparent 50.5%),
    #101827;
}

.menu-layout-neon .item-card-placeholder svg {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--primary) 70%, transparent));
}

.menu-layout-neon .item-card-ribbon {
  top: 0.65rem;
  inset-inline-start: 0.65rem;
  color: #05101a;
  font-family: Outfit, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-layout-neon .item-card-body {
  display: flex;
  min-height: 12rem;
  flex-direction: column;
  padding: 0.9rem;
}

.menu-layout-neon .item-card-title {
  color: #f8fafc;
  font-family: Outfit, var(--menu-font);
  font-size: 1rem;
  text-transform: uppercase;
}

.menu-layout-neon .item-card-subtitle,
.menu-layout-neon .item-card-description,
.menu-layout-neon .item-card-prep {
  color: #8291a7;
}

.menu-layout-neon .item-icon-button {
  border-radius: 0;
  border-color: #263247;
  background: #070b13;
  color: #8ea0b8;
}

.menu-layout-neon .item-icon-button:hover {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 20%, transparent);
}

.menu-layout-neon .item-badge {
  border-radius: 0;
  border-color: #263247;
  background: #070b13;
  color: #8ea0b8;
}

.menu-layout-neon .item-card-meta {
  margin-top: auto;
}

.menu-layout-neon .item-card-price strong {
  font-family: Outfit, sans-serif;
  font-size: 1.15rem;
  text-shadow: 0 0 14px color-mix(in srgb, var(--primary) 45%, transparent);
}

.menu-layout-neon .item-card-cta {
  border-color: #263247;
  font-family: Outfit, var(--menu-font);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.menu-layout-neon .menu-footer {
  border-color: #263247;
}

.menu-layout-neon .menu-footer-note,
.menu-layout-neon .menu-footer-review,
.menu-layout-neon .menu-cart-surface,
.menu-layout-neon .menu-cart-count,
.menu-layout-neon .menu-cart-button,
.menu-layout-neon .swal2-popup.menu-item-modal {
  border-radius: 0;
}

.menu-layout-neon .menu-footer-note {
  border: 1px solid #263247;
  background: #0c1220;
}

.menu-layout-neon .menu-cart-surface {
  border: 1px solid var(--primary);
  background: #090d16;
  box-shadow: 0 0 30px color-mix(in srgb, var(--primary) 18%, transparent);
}

.menu-layout-neon .menu-cart-checkout {
  background: var(--primary);
  color: #05101a;
}

/* Item detail — cyber product configurator with sharp bento geometry. */
.menu-layout-neon .swal2-popup.menu-item-modal {
  --swal2-background: #070b13;
  --swal2-color: #e8f7ff;
  width: min(54rem, calc(100vw - 1.5rem));
  border: 1px solid var(--primary);
  border-radius: 0;
  background:
    linear-gradient(rgb(56 189 248 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(56 189 248 / 0.035) 1px, transparent 1px),
    #070b13;
  background-size: 24px 24px;
  box-shadow: 10px 10px 0 color-mix(in srgb, var(--primary) 15%, transparent), 0 0 70px color-mix(in srgb, var(--primary) 15%, transparent);
}

.menu-layout-neon .swal2-popup.menu-item-modal::before,
.menu-layout-neon .swal2-popup.menu-item-modal::after {
  content: '';
  position: absolute;
  z-index: 3;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
}

.menu-layout-neon .swal2-popup.menu-item-modal::before {
  top: 0.45rem;
  left: 0.45rem;
  border-top: 2px solid var(--primary);
  border-left: 2px solid var(--primary);
}

.menu-layout-neon .swal2-popup.menu-item-modal::after {
  right: 0.45rem;
  bottom: 0.45rem;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
}

.menu-layout-neon .menu-item-modal-title {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid #263247;
  color: #f3f8ff;
  font-family: Outfit, var(--menu-font);
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  letter-spacing: 0.025em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--primary) 35%, transparent);
}

.menu-layout-neon .menu-item-modal-title::before {
  content: 'ITEM // CONFIG';
  display: block;
  margin-bottom: 0.2rem;
  color: var(--primary);
  font-family: ui-monospace, monospace;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.menu-layout-neon .menu-item-modal-content {
  padding: 1.15rem 1.5rem 0;
}

.menu-layout-neon .menu-modal-composition {
  grid-template-columns: minmax(14rem, 0.85fr) minmax(0, 1.15fr);
  grid-template-areas:
    'media intro'
    'facts facts'
    'configurator configurator'
    'notes purchase';
  gap: 0.85rem 1rem;
}

.menu-layout-neon .menu-modal-facts {
  grid-area: facts;
  grid-column: 1 / -1;
}

.menu-layout-neon .menu-modal-media {
  grid-area: media;
  min-height: 12.5rem;
  border: 1px solid #263247;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 1.4rem) 0, 100% 1.4rem, 100% 100%, 1.4rem 100%, 0 calc(100% - 1.4rem));
}

.menu-layout-neon .menu-modal-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 4px, rgb(3 8 15 / 0.13) 4px 5px);
  pointer-events: none;
}

.menu-layout-neon .menu-modal-media img {
  min-height: 12.5rem;
  max-height: 12.5rem;
  filter: saturate(1.12) contrast(1.08);
}

.menu-layout-neon .menu-modal-media-caption span {
  border: 1px solid var(--primary);
  border-radius: 0;
  background: #070b13;
  color: var(--primary);
  font-family: ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-layout-neon .menu-modal-intro {
  grid-area: intro;
  align-content: center;
  padding: 1rem;
  border: 1px solid #263247;
  background: rgb(9 14 24 / 0.9);
}

.menu-layout-neon .menu-modal-alt-name {
  color: var(--primary);
  font-family: ui-monospace, monospace;
  letter-spacing: 0.15em;
}

.menu-layout-neon .menu-modal-description {
  color: #9baabd;
}

.menu-layout-neon .menu-modal-configurator {
  grid-area: configurator;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.menu-layout-neon .menu-modal-configurator > :only-child,
.menu-layout-neon .menu-modal-modifiers:only-child {
  grid-column: 1 / -1;
}

.menu-layout-neon .menu-modal-notes {
  grid-area: notes;
}

.menu-layout-neon .menu-modal-purchase {
  grid-area: purchase;
}

.menu-layout-neon .menu-modal-section,
.menu-layout-neon .menu-modal-selected-variant {
  border-color: #263247;
  border-radius: 0;
  background: rgb(8 13 23 / 0.92);
}

.menu-layout-neon .menu-modal-section-icon,
.menu-layout-neon .menu-modal-badge,
.menu-layout-neon .menu-modal-variant-option,
.menu-layout-neon .menu-modal-modifier-option,
.menu-layout-neon .menu-modal-notes input,
.menu-layout-neon .menu-modal-quantity {
  border-radius: 0;
}

.menu-layout-neon .menu-modal-section-icon {
  border: 1px solid #263247;
  background: #050910;
}

.menu-layout-neon .menu-modal-badge {
  font-family: ui-monospace, monospace;
  letter-spacing: 0.08em;
}

.menu-layout-neon .menu-modal-variant-option,
.menu-layout-neon .menu-modal-modifier-option {
  border-color: #263247;
  background: #080d17;
  color: #dbe8f5;
}

.menu-layout-neon .menu-modal-variant-option.is-selected,
.menu-layout-neon .menu-modal-modifier-option:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, #080d17);
  box-shadow: inset 3px 0 0 var(--primary);
}

[dir='rtl'] .menu-layout-neon .menu-modal-variant-option.is-selected,
[dir='rtl'] .menu-layout-neon .menu-modal-modifier-option:has(input:checked) {
  box-shadow: inset -3px 0 0 var(--primary);
}

.menu-layout-neon .menu-modal-notes input {
  border-color: #263247;
  background: #050910;
  color: #e8f7ff;
}

.menu-layout-neon .menu-modal-purchase {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, #050910);
}

.menu-layout-neon .menu-modal-total strong {
  text-shadow: 0 0 14px color-mix(in srgb, var(--primary) 50%, transparent);
}

.menu-layout-neon .menu-modal-quantity {
  border-color: #263247;
  background: #050910;
}

.menu-layout-neon .menu-item-modal-actions {
  padding: 0.9rem 1.5rem 1.25rem;
  border-top-color: #263247;
  background: rgb(7 11 19 / 0.96);
}

.menu-layout-neon .menu-item-modal-confirm,
.menu-layout-neon .menu-item-modal-cancel {
  border-radius: 0;
  font-family: Outfit, var(--menu-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.menu-layout-neon .menu-item-modal-confirm {
  color: #041018;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--primary) 24%, transparent);
}

.menu-layout-neon .menu-item-modal-cancel {
  border-color: #334155;
  background: #080d17;
  color: #9baabd;
}

@media (min-width: 1000px) {
  .menu-layout-neon .menu-item-card:nth-child(4n + 1) {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) minmax(0, 1fr);
    min-height: 18rem;
  }

  .menu-layout-neon .menu-item-card:nth-child(4n + 1) .item-card-media {
    height: auto;
    border-bottom: 0;
    border-inline-end: 1px solid #263247;
  }
}

@media (max-width: 980px) {
  .menu-layout-neon .menu-items-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .menu-layout-neon .menu-item-modal-content {
    padding: 0.85rem 0.85rem 0;
  }

  .menu-layout-neon .menu-modal-composition {
    grid-template-columns: 1fr;
    grid-template-areas: 'media' 'intro' 'facts' 'configurator' 'notes' 'purchase';
  }

  .menu-layout-neon .menu-modal-configurator {
    grid-template-columns: 1fr;
  }

  .menu-layout-neon .menu-item-modal-actions {
    padding-inline: 0.85rem;
  }

  .menu-layout-neon .menu-hero {
    min-height: 12.5rem;
  }

  .menu-layout-neon .menu-brand-panel {
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--primary) 13%, transparent);
  }

  .menu-layout-neon .menu-discovery-inner {
    grid-template-columns: 1fr;
    grid-template-areas: 'search' 'categories' 'filters';
  }

  .menu-layout-neon .menu-category-nav {
    justify-content: flex-start;
  }

  .menu-layout-neon .menu-items-grid {
    grid-template-columns: 1fr;
  }

  .menu-layout-neon .menu-item-card {
    min-height: 0;
  }

  .menu-layout-neon .item-card-media {
    height: 10.5rem;
  }
}