/**
 * SEEPOS — desain ulang etalase publik (frontend)
 * ==================================================================
 * Dimuat PALING AKHIR, di atas empat stylesheet lama:
 *   assets/website/css/style.css        (5.624 baris)
 *   frequent_changing/frontend/style.css   (2.553)
 *   frequent_changing/frontend/responsive.css (479)
 *   frequent_changing/frontend/rtl.css        (19)
 *
 * Kenapa ditumpuk, bukan menggantikan: 8.675 baris CSS lama itu
 * melayani 22 view dengan tumpukan plugin (bootstrap, slick, owl,
 * isotope, magnific-popup, nice-select2, leaflet). Melepasnya sekaligus
 * berarti menulis ulang semuanya tanpa bisa memastikan satu per satu —
 * pelajaran dari layar POS. Markup dan seluruh kait JS dibiarkan utuh;
 * yang berubah hanya bahasa visualnya.
 *
 * KONTRAK YANG DIJAGA
 * --primary-color ditulis saat runtime oleh assets/website/js/main.js
 * dari #website_theme_color, dan pengunjung bisa menggantinya lewat
 * pemilih warna (.color-list li[data-color]). Berkas ini membangun di
 * atas token itu, bukan menggantinya, supaya pemilih warna tetap
 * berfungsi.
 *
 * Peta isi:
 *   1 Token & dasar      5 Kartu & menu
 *   2 Tipografi          6 Kaki halaman
 *   3 Kepala & navigasi  7 Formulir & keranjang
 *   4 Tombol & seksi     8 Responsif, fokus, motion
 */

/* ==================================================================
   1. TOKEN & DASAR
   ================================================================== */
:root {
  /* --primary-color diset main.js; nilai di sini hanya cadangan bila
     JS belum sempat berjalan. JANGAN diberi !important — pemilih warna
     menulis lewat inline style pada :root. */
  --fe-primary: var(--primary-color, #ff1010);

  /* Turunan gelap untuk teks dan isian tombol.
     Alasannya terukur: #ff1010 hanya 3,94:1 di atas putih, dan teks
     putih di atasnya juga 3,94:1 — gagal AA di KEDUA arah. Karena
     warnanya boleh diganti pengunjung, turunannya dihitung dengan
     color-mix() agar ikut menyesuaikan pilihan apa pun.
     Campuran 65% memberi 7,93:1 untuk merah bawaan. */
  --fe-ink: color-mix(in srgb, var(--fe-primary) 65%, #000);
  --fe-ink-hover: color-mix(in srgb, var(--fe-primary) 52%, #000);
  --fe-soft: color-mix(in srgb, var(--fe-primary) 8%, #fff);

  --fe-canvas: #ffffff;
  --fe-sunken: #f7f8fa;
  --fe-line: #e6e9ef;

  --fe-heading: #16181d;   /* 15,8:1 di atas putih */
  --fe-body: #4a5059;      /*  8,1:1 */
  --fe-muted: #6b7280;     /*  4,8:1 */

  --fe-r: 14px;
  --fe-r-sm: 10px;
  --fe-shadow: 0 1px 2px rgba(16, 20, 30, .04), 0 10px 30px -12px rgba(16, 20, 30, .12);
  --fe-ease: cubic-bezier(.32, .72, 0, 1);
}

/* Peramban tanpa color-mix() tetap mendapat warna yang aman, bukan
   token yang gagal dan mewarisi warna induk. */
@supports not (color: color-mix(in srgb, red 50%, black)) {
  :root {
    --fe-ink: #a50a0a;
    --fe-ink-hover: #8c0808;
    --fe-soft: #fff5f5;
  }
}

body {
  background: var(--fe-canvas);
  color: var(--fe-body);
  -webkit-font-smoothing: antialiased;
}

/* ==================================================================
   2. TIPOGRAFI
   ------------------------------------------------------------------
   Oswald (judul) dan Open Sans (isi) dipertahankan — keduanya sudah
   dimuat dan menjadi identitas visual situs. Yang dirapikan skalanya:
   ukuran lama melompat tidak beraturan sehingga hierarkinya kabur.
   ================================================================== */
h1, h2, h3, h4, h5, h6,
.title, .widget-title {
  color: var(--fe-heading);
  letter-spacing: -0.01em;
}

h1, .h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.12; }
h2, .h2, .section-title-wrap .title { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.18; }
h3, .h3 { font-size: clamp(21px, 2.4vw, 26px); line-height: 1.25; }
h4, .h4 { font-size: 19px; line-height: 1.3; }

p { line-height: 1.7; }

/* Label kecil di atas judul seksi */
.custom-primary {
  color: var(--fe-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.section-title-wrap .title {
  margin-top: 6px;
  font-weight: 700;
}

.section-title-wrap p {
  max-width: 62ch;
  color: var(--fe-muted);
}

.section-header.text-center .section-title-wrap p,
.section-title-wrap.section-header p {
  margin-inline: auto;
}

/* ==================================================================
   3. KEPALA & NAVIGASI
   ================================================================== */
.navbar-brand img {
  max-height: 46px;
  width: auto;
  object-fit: contain;
}

.menu-item > a {
  position: relative;
  font-weight: 600;
  color: var(--fe-heading);
  transition: color 140ms var(--fe-ease);
}

.menu-item > a:hover,
.menu-item.active > a {
  color: var(--fe-ink);
}

/* Penanda halaman aktif berupa garis, bukan hanya beda warna:
   warna saja tidak cukup bagi pengguna buta warna. */
.menu-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--fe-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms var(--fe-ease);
}

.menu-item.active > a::after,
.menu-item > a:hover::after {
  transform: scaleX(1);
}

.menu-item-has-children .submenu {
  border: 1px solid var(--fe-line);
  border-radius: var(--fe-r-sm);
  background: #fff;
  box-shadow: var(--fe-shadow);
  overflow: hidden;
}

.menu-item-has-children .submenu li a {
  padding: 9px 14px;
  font-size: 14px;
  color: var(--fe-body);
}

.menu-item-has-children .submenu li a:hover {
  background: var(--fe-sunken);
  color: var(--fe-ink);
}

/* Tombol keranjang dan menu samping */
.cart-trigger,
.aside-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--fe-r-sm);
  color: var(--fe-heading);
  transition: background-color 140ms var(--fe-ease);
}

.cart-trigger:hover,
.aside-trigger:hover {
  background: var(--fe-sunken);
  color: var(--fe-ink);
}

/* ==================================================================
   4. TOMBOL & SEKSI
   ================================================================== */
.btn-custom,
.btn-custom.primary,
button.btn-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--fe-ink);
  border-radius: 999px;
  background: var(--fe-ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms var(--fe-ease), border-color 140ms var(--fe-ease);
}

.btn-custom:hover,
.btn-custom.primary:hover,
button.btn-custom:hover {
  background: var(--fe-ink-hover);
  border-color: var(--fe-ink-hover);
  color: #fff;
}

/* Jarak antar seksi: dulu bervariasi tanpa pola, sekarang satu skala */
.section-padding {
  padding-top: clamp(48px, 7vw, 92px);
  padding-bottom: clamp(48px, 7vw, 92px);
}

.section-title-wrap {
  margin-bottom: 34px;
}

/* ==================================================================
   5. KARTU & MENU
   ================================================================== */
/* Nama kelas di bawah ini diambil dari markup nyata di menu-page.php
   dan menu-item.php, bukan diperkirakan. */
.product {
  height: 100%;
  border: 1px solid var(--fe-line);
  border-radius: var(--fe-r);
  background: #fff;
  overflow: hidden;
  transition: border-color 160ms var(--fe-ease), box-shadow 160ms var(--fe-ease),
    transform 160ms var(--fe-ease);
}

.product:hover {
  border-color: color-mix(in srgb, var(--fe-primary) 35%, #fff);
  box-shadow: var(--fe-shadow);
  transform: translateY(-2px);
}

.product-thumb {
  overflow: hidden;
  background: var(--fe-sunken);
}

.product-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 320ms var(--fe-ease);
}

.product:hover .product-thumb img {
  transform: scale(1.04);
}

.product-body,
.product-content {
  padding: 14px 16px 16px;
}

.product-body .title,
.product-content .title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.product-desc,
.product_description {
  color: var(--fe-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Harga adalah angka yang paling dicari mata di kartu menu */
.product-price,
.price-wrapper,
.price {
  color: var(--fe-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.product-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Pengatur jumlah: sasaran sentuh penuh, dulu terlalu kecil untuk jari */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--fe-line);
  border-radius: 999px;
  overflow: hidden;
}

.qty-add,
.qty-subtract {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  color: var(--fe-heading);
  cursor: pointer;
  transition: background-color 140ms var(--fe-ease);
}

.qty-add:hover,
.qty-subtract:hover {
  background: var(--fe-soft);
  color: var(--fe-ink);
}

/* Pilihan kategori menu */
.ct-menu-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Kartu di keranjang samping — kelas dibuat order.js */
.sidebar-cart-card {
  padding: 12px 0;
  border-bottom: 1px solid var(--fe-line);
}

.sidebar-cart-card .card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fe-heading);
}

.sidebar-cart-card .card-prices {
  color: var(--fe-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ==================================================================
   6. KAKI HALAMAN
   ------------------------------------------------------------------
   .footer-dark memakai latar gelap; kontras teksnya dinaikkan supaya
   tautan dan alamat tetap terbaca, bukan abu-abu di atas hitam.
   ================================================================== */
.ct-footer.footer-dark {
  background: #14161b;
  color: #c9ced8; /* 9,6:1 di atas latar itu */
}

.ct-footer .footer-middle {
  padding-top: clamp(44px, 6vw, 72px);
  padding-bottom: 28px;
}

.ct-footer .widget-title {
  margin-bottom: 16px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

.ct-footer .footer-widget a {
  color: #c9ced8;
  transition: color 140ms var(--fe-ease);
}

.ct-footer .footer-widget a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.ct-footer .footer-logo img {
  max-height: 52px;
  width: auto;
}

.ct-footer .footer-bottom {
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.ct-footer .footer-copyright {
  font-size: 13.5px;
  color: #9aa1ad; /* 5,3:1 — cukup untuk teks sekunder */
}

/* ==================================================================
   7. FORMULIR & KERANJANG
   ================================================================== */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
select,
textarea {
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid var(--fe-line);
  border-radius: var(--fe-r-sm);
  background: #fff;
  color: var(--fe-heading);
  font-size: 15px;
}

textarea { min-height: 110px; }

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--fe-ink);
  box-shadow: 0 0 0 3px var(--fe-soft);
}

label {
  margin-bottom: 6px;
  color: var(--fe-heading);
  font-size: 14px;
  font-weight: 600;
}

/* Keranjang samping */
.cart-sidebar {
  border-left: 1px solid var(--fe-line);
  background: #fff;
  box-shadow: -12px 0 40px -18px rgba(16, 20, 30, .25);
}

.cart-sidebar .cart-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--fe-line);
}

/* ==================================================================
   8. RESPONSIF, FOKUS, MOTION
   ================================================================== */
@media (max-width: 767px) {
  .section-title-wrap {
    margin-bottom: 24px;
  }

  .btn-custom {
    min-height: 46px;
    padding: 0 18px;
  }

  /* Menu samping di ponsel butuh sasaran sentuh penuh */
  .menu-item > a {
    display: block;
    padding: 12px 0;
  }

  .menu-item > a::after {
    display: none; /* garis bawah tidak masuk akal pada menu bertumpuk */
  }
}

/* Cincin fokus tidak pernah dihilangkan: tanpa ini navigasi papan
   ketik tidak bisa melihat posisinya sendiri. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn-custom:focus-visible {
  outline: 2px solid var(--fe-ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .product,
  .product-thumb img,
  .btn-custom,
  .menu-item > a,
  .menu-item > a::after,
  .cart-trigger,
  .aside-trigger {
    transition-duration: 1ms !important;
  }

  /* animate.css dipakai luas di etalase ini */
  .animated,
  [class*="animate__"] {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==================================================================
   9. STRUKTUR BARU — BAHASA VISUAL "MEWAH & BERSIH"
   ------------------------------------------------------------------
   Bagian ini melayani markup baru di frontend/index.php. Prefiks .fx-
   dipakai supaya tidak ada satu pun aturan lama yang bisa menabraknya,
   dan supaya jelas mana yang baru saat menelusuri kelak.

   Arah desainnya diambil dari pencarian "luxury fine dining editorial":
   palet netral hangat (warm stone) dan pasangan Playfair Display /
   Inter. Gaya "Liquid Glass" yang ikut disarankan sengaja DITOLAK —
   itu bahasa untuk chrome aplikasi Apple, berbiaya blur, dan ditandai
   berisiko aksesibilitas; salah domain untuk etalase restoran.

   Aksen tetap dari --primary-color, bukan dipatok emas: warna itu
   milik pemilik outlet lewat White Label, dan pengunjung pun boleh
   menggantinya lewat pemilih warna.

   Kemewahan di sini dibangun dari ruang kosong, kontras tipografi,
   dan garis tipis — bukan dari bayangan tebal dan gradien.
   ================================================================== */
:root {
  /* Netral hangat; putih murni terasa dingin dan klinis untuk makanan */
  --fx-paper: #faf9f7;
  --fx-card: #ffffff;
  --fx-ink: #17150f;      /* 16,9:1 di atas --fx-paper */
  --fx-body: #4a463e;     /*  8,2:1 */
  --fx-muted: #6f6a60;    /*  4,9:1 */
  --fx-rule: #e4e0d8;

  --fx-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --fx-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Irama vertikal tunggal; seluruh jarak seksi diturunkan dari sini */
  --fx-gap: clamp(56px, 9vw, 132px);
  --fx-ease: cubic-bezier(.22, .61, .36, 1);
}

.fx-story,
.fx-menu,
.fx-gallery {
  padding-block: var(--fx-gap);
  background: var(--fx-paper);
  font-family: var(--fx-sans);
  color: var(--fx-body);
}

.fx-menu {
  padding-top: 0;
}

/* --- Elemen tipografi bersama -------------------------------- */
.fx-eyebrow {
  display: block;
  margin-bottom: 18px;
  color: var(--fe-ink);
  font-family: var(--fx-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.fx-display,
.fx-title {
  margin: 0;
  font-family: var(--fx-serif);
  font-weight: 400;
  color: var(--fx-ink);
  letter-spacing: -0.015em;
}

/* Judul besar sengaja tidak tebal. Pada serif editorial, ukuran besar
   dengan berat normal terbaca lebih mahal daripada huruf tebal. */
.fx-display {
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: 1.08;
}

.fx-title {
  font-size: clamp(29px, 3.8vw, 46px);
  line-height: 1.14;
}

.fx-lede {
  max-width: 46ch;
  margin: 22px 0 0;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--fx-body);
}

.fx-head {
  margin-bottom: clamp(34px, 4vw, 56px);
}

.fx-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* --- Tombol -------------------------------------------------- */
.fx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.fx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: 0; /* sudut siku terbaca lebih formal daripada pil */
  font-family: var(--fx-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms var(--fx-ease), color 200ms var(--fx-ease),
    border-color 200ms var(--fx-ease);
}

.fx-btn-solid {
  background: var(--fx-ink);
  border-color: var(--fx-ink);
  color: #fff;
}

.fx-btn-solid:hover {
  background: var(--fe-ink);
  border-color: var(--fe-ink);
  color: #fff;
}

.fx-btn-quiet {
  background: transparent;
  border-color: var(--fx-rule);
  color: var(--fx-ink);
}

.fx-btn-quiet:hover {
  border-color: var(--fx-ink);
  color: var(--fx-ink);
}

/* ==================================================================
   Pembuka editorial
   ================================================================== */
.fx-story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}

.fx-story-figure {
  position: relative;
  margin: 0;
}

.fx-story-figure img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Bingkai tipis yang bergeser di belakang gambar — dibuat dari CSS,
   tanpa berkas gambar tambahan. */
.fx-story-figure::before {
  content: "";
  position: absolute;
  inset: 20px -20px -20px 20px;
  border: 1px solid var(--fx-rule);
  z-index: 0;
}

/* ==================================================================
   Daftar menu
   ------------------------------------------------------------------
   Bentuknya daftar, bukan kisi kartu. Alasannya bukan selera: kartu
   bergantung pada foto, dan di banyak outlet foto hidangan belum
   diunggah sehingga kisinya penuh kotak kosong. Daftar bergaris titik
   tetap rapi tanpa satu gambar pun, sekaligus itu bentuk kartu menu
   restoran yang sudah dikenal orang.
   ================================================================== */
.fx-dishes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--fx-rule);
}

.fx-dish {
  padding: 26px 0;
  border-bottom: 1px solid var(--fx-rule);
}

.fx-dish-line {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.fx-dish-name {
  margin: 0;
  font-family: var(--fx-serif);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--fx-ink);
}

/* Garis titik penghubung nama dan harga */
.fx-dish-rule {
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  margin-bottom: 5px;
  background-image: linear-gradient(to right, var(--fx-rule) 0 4px, transparent 4px 8px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
}

.fx-dish-price {
  flex: 0 0 auto;
  font-family: var(--fx-serif);
  font-size: clamp(18px, 2vw, 22px);
  color: var(--fx-ink);
  font-variant-numeric: tabular-nums;
}

.fx-dish-desc {
  max-width: 62ch;
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--fx-muted);
}

.fx-dish-order {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--fe-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}

.fx-dish-order svg {
  width: 15px;
  height: 15px;
  transition: transform 200ms var(--fx-ease);
}

.fx-dish-order:hover {
  color: var(--fe-ink-hover);
}

.fx-dish-order:hover svg {
  transform: translateX(4px);
}

.fx-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(38px, 5vw, 64px);
}

/* ==================================================================
   Galeri
   ================================================================== */
.fx-nav {
  display: flex;
  gap: 8px;
}

.fx-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--fx-rule);
  border-radius: 50%;
  color: var(--fx-ink);
  transition: background-color 200ms var(--fx-ease), border-color 200ms var(--fx-ease);
}

.fx-nav-btn:hover {
  border-color: var(--fx-ink);
  background: var(--fx-ink);
  color: #fff;
}

.fx-nav-btn svg {
  width: 19px;
  height: 19px;
}

.fx-shot {
  padding-inline: 6px;
}

.fx-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: saturate(.94);
  transition: filter 320ms var(--fx-ease), transform 320ms var(--fx-ease);
}

.fx-shot a {
  display: block;
  overflow: hidden;
  cursor: zoom-in;
}

.fx-shot a:hover img {
  filter: saturate(1.04);
  transform: scale(1.03);
}

/* ==================================================================
   Peta
   ================================================================== */
.fx-map {
  background: var(--fx-paper);
}

.fx-map iframe {
  display: block;
  width: 100%;
  /* Peta diredam sedikit supaya tidak berteriak lebih keras daripada
     isi halamannya; warnanya kembali penuh saat disentuh. */
  filter: grayscale(.35) contrast(.96);
  transition: filter 320ms var(--fx-ease);
}

.fx-map:hover iframe {
  filter: none;
}

/* ==================================================================
   Responsif & motion
   ================================================================== */
@media (min-width: 992px) {
  .fx-story-grid {
    /* Kolom teks sengaja lebih sempit dari gambar: baris teks yang
       terlalu panjang melelahkan dibaca. */
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  }

  /* Dua kolom hidangan, tetap satu daftar bergaris */
  .fx-dishes {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(40px, 5vw, 84px);
  }
}

@media (max-width: 575px) {
  .fx-btn {
    width: 100%;
  }

  .fx-dish {
    padding: 20px 0;
  }

  .fx-story-figure::before {
    inset: 12px -12px -12px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-btn,
  .fx-nav-btn,
  .fx-shot img,
  .fx-dish-order svg,
  .fx-map iframe {
    transition-duration: 1ms !important;
  }
}

/* ==================================================================
   10. HALAMAN MENU / ONLINE-ORDER — STRUKTUR BARU
   ------------------------------------------------------------------
   Melayani markup baru di frontend/menu-page.php.

   Kontrak isotope tetap: .menu-container adalah wadahnya, dan tiap
   anak langsung membawa .cat-id-<id>. Isotope memosisikan anak-anak
   itu secara absolut, jadi aturan di sini sengaja TIDAK menyentuh
   position, float, atau lebar kolomnya — hanya isi kartunya.
   ================================================================== */

/* --- Kepala halaman --- */
.fx-mp-head {
  padding-block: clamp(44px, 6vw, 84px) clamp(24px, 3vw, 36px);
  background: var(--fx-paper);
  font-family: var(--fx-sans);
}

.fx-mp-count {
  margin: 12px 0 0;
  color: var(--fx-muted);
  font-size: 14.5px;
}

/* --- Chip kategori ------------------------------------------------
   Menempel di atas saat menggulir: di daftar panjang, pengguna sering
   ingin ganti kategori tanpa harus menggulir balik ke atas. */

/* .active dipasang dan dilepas main.js — hanya tampilannya di sini */
/* --- Kisi hidangan --- */
.fx-mp-grid-wrap {
  padding-block: clamp(34px, 5vw, 64px);
  background: var(--fx-paper);
}

.fx-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--fx-rule);
  border-radius: 0; /* sudut siku, senada dengan tombol */
  background: var(--fx-card);
  overflow: hidden;
  transition: border-color 200ms var(--fx-ease), transform 200ms var(--fx-ease);
}

.fx-card:hover {
  border-color: var(--fx-ink);
  transform: translateY(-3px);
}

.fx-card-thumb {
  display: block;
  overflow: hidden;
  background: color-mix(in srgb, var(--fx-paper) 70%, #000 3%);
}

.fx-card-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 420ms var(--fx-ease);
}

.fx-card:hover .fx-card-thumb img {
  transform: scale(1.05);
}

.fx-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 4px;
  padding: 18px;
}

.fx-card-name {
  margin: 0;
  font-family: var(--fx-serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.32;
}

.fx-card-name a {
  color: var(--fx-ink);
  text-decoration: none;
}

.fx-card-name a:hover {
  color: var(--fe-ink);
}

.fx-card-price {
  margin: 2px 0 0;
  font-family: var(--fx-serif);
  font-size: 19px;
  color: var(--fx-ink);
  font-variant-numeric: tabular-nums;
}

/* Rating diredam: informasi pendukung, bukan judul kartu */
.fx-card-rating {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--fx-muted);
}

.fx-card-rating .rating {
  display: inline-flex;
  gap: 2px;
  cursor: pointer;
}

.fx-card-rating .fa-star {
  font-size: 12px;
  color: #c9a227; /* emas redup; 3,1:1 di atas kartu, cukup untuk ikon */
}

.fx-card-rating .far.fa-star {
  color: var(--fx-rule);
}

.fx-card-rating .rating-num {
  font-variant-numeric: tabular-nums;
}

/* Tombol pesan: berlabel, didorong ke dasar kartu supaya semua kartu
   dalam satu baris punya garis tombol yang sejajar */
.fx-card-controls {
  margin-top: auto;
  padding-top: 14px;
}

.fx-card-order {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--fe-ink);
  font-family: var(--fx-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}

.fx-card-order svg {
  width: 15px;
  height: 15px;
  transition: transform 200ms var(--fx-ease);
}

.fx-card-order:hover {
  color: var(--fe-ink-hover);
}

.fx-card-order:hover svg {
  transform: translateX(4px);
}

.fx-empty {
  padding: 64px 0;
  color: var(--fx-muted);
  font-family: var(--fx-sans);
  font-size: 16px;
  text-align: center;
}

@media (max-width: 575px) {
  .fx-card-body { padding: 14px; }
  .fx-card-name,
  .fx-card-price { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-card,
  .fx-card-thumb img,
  .fx-card-order svg {
    transition-duration: 1ms !important;
  }
}

/* ==================================================================
   11. DETAIL HIDANGAN — STRUKTUR BARU
   ------------------------------------------------------------------
   Melayani markup baru di frontend/menu-item.php.
   ================================================================== */
.fx-item {
  padding-block: clamp(36px, 5vw, 72px);
  background: var(--fx-paper);
  font-family: var(--fx-sans);
}

.fx-item-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.fx-item-figure {
  margin: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--fx-paper) 70%, #000 3%);
}

.fx-item-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.fx-item-panel {
  display: flex;
  flex-direction: column;
}

.fx-item-name {
  margin: 0;
  font-family: var(--fx-serif);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--fx-ink);
}

.fx-item-pricerow {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 14px 0 0;
}

.fx-item-price {
  margin: 0;
  font-family: var(--fx-serif);
  font-size: clamp(24px, 2.8vw, 32px);
  color: var(--fx-ink);
  font-variant-numeric: tabular-nums;
}

/* Kalori: keterangan pendukung, jadi diredam dan diberi pembatas */
.fx-item-cal {
  padding-left: 14px;
  border-left: 1px solid var(--fx-rule);
  color: var(--fx-muted);
  font-size: 13.5px;
}

.fx-item-desc {
  max-width: 58ch;
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--fx-body);
}

/* --- Ruas isian --- */
.fx-field {
  margin-top: 24px;
}

.fx-field > label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fx-muted);
}

.fx-item .form-control {
  border-radius: 0;
  border-color: var(--fx-rule);
}

.fx-item textarea.form-control {
  min-height: 88px;
}

/* --- Modifier ------------------------------------------------------
   Dulu dibungkus kolom col-lg-6 di dalam baris bersarang, jadi
   lebarnya separuh tanpa alasan. Sekarang daftar penuh dengan baris
   yang bisa diklik seluruhnya. */
.fx-mods {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--fx-rule);
}

.fx-mods-title {
  margin: 0 0 12px;
  font-family: var(--fx-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fx-muted);
}

.fx-mod {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--fx-rule);
}

.fx-mod:last-child {
  border-bottom: 0;
}

.fx-mod-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
}

.fx-mod-check .custom-control-label {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--fx-ink);
  cursor: pointer;
}

.fx-mod-price {
  flex: 0 0 auto;
  color: var(--fx-muted);
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}

/* --- Baris beli --- */
.fx-buyrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--fx-rule);
}

.fx-qtyfield {
  margin-top: 0;
}

.fx-item .qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--fx-rule);
  border-radius: 0;
  overflow: hidden;
}

.fx-item .qty .call_qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: var(--fx-ink);
  cursor: pointer;
  user-select: none;
  transition: background-color 160ms var(--fx-ease);
}

.fx-item .qty .call_qty:hover {
  background: color-mix(in srgb, var(--fx-paper) 60%, #000 5%);
}

.fx-item .qty input {
  width: 56px;
  height: 46px;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--fx-rule);
  background: transparent;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--fx-ink);
  font-variant-numeric: tabular-nums;
}

/* Total: baris teks, bukan kotak yang menyerupai ruas isian */
.fx-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.fx-total-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fx-muted);
}

.fx-total .show_total_amount {
  font-family: var(--fx-serif);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 400;
  color: var(--fx-ink);
  font-variant-numeric: tabular-nums;
}

.fx-atc-btn {
  width: 100%;
  margin-top: 20px;
}

/* Aksi lanjutan: tautan, bukan tombol sewarna. Hanya satu aksi utama. */
.fx-after {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.fx-link {
  color: var(--fe-ink);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.fx-link:hover {
  color: var(--fe-ink-hover);
  text-decoration: underline;
}

.fx-after-sep {
  color: var(--fx-rule);
}

/* --- Hidangan terkait --- */
.fx-related {
  padding-block: clamp(36px, 5vw, 72px);
  background: var(--fx-paper);
}

.fx-related-title {
  margin: 0 0 clamp(24px, 3vw, 40px);
  font-size: clamp(24px, 3vw, 34px);
}

/* --- Responsif --- */
@media (min-width: 992px) {
  .fx-item-grid {
    /* Gambar diberi porsi lebih besar daripada 5/7 lama: hidangan
       dijual lewat rupanya, dan panel pesan tidak butuh selebar itu. */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }

  /* Panel menempel saat digulir — daftar modifier bisa panjang dan
     dulu tombol pesannya ikut hilang ke bawah layar. */
  .fx-item-panel {
    position: sticky;
    top: 24px;
  }
}

@media (max-width: 575px) {
  .fx-buyrow {
    align-items: stretch;
  }

  .fx-total {
    align-items: flex-start;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-item .qty .call_qty {
    transition-duration: 1ms !important;
  }
}

/* ==================================================================
   12. KERANJANG & CHECKOUT — STRUKTUR BARU
   ------------------------------------------------------------------
   Melayani frontend/cart_sidebar.php dan frontend/check_out.php.
   ================================================================== */

/* --- Baris ringkasan, dipakai kedua halaman --- */
.fx-sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-family: var(--fx-sans);
  font-size: 14.5px;
  color: var(--fx-body);
}

.fx-sum-row > :last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Total dibedakan lewat garis dan tipografi, bukan deretan <hr>
   di antara setiap baris seperti sebelumnya */
.fx-sum-total {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--fx-rule);
  font-family: var(--fx-serif);
  font-size: clamp(19px, 2vw, 23px);
  color: var(--fx-ink);
}

/* ==================================================================
   Panel keranjang
   ================================================================== */
.fx-cart {
  display: flex;
  flex-direction: column;
  background: var(--fx-card);
  font-family: var(--fx-sans);
}

.fx-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex: 0 0 auto;
  padding: 18px 20px;
  border-bottom: 1px solid var(--fx-rule);
}

.fx-cart-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-family: var(--fx-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--fx-ink);
}

.fx-cart-title .cart-item-total {
  font-family: var(--fx-sans);
  font-size: 13px;
  color: var(--fx-muted);
  font-variant-numeric: tabular-nums;
}

.fx-cart-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--fx-rule);
  border-radius: 50%;
  background: transparent;
  color: var(--fx-ink);
  cursor: pointer;
  transition: background-color 180ms var(--fx-ease);
}

.fx-cart-close:hover {
  background: color-mix(in srgb, var(--fx-paper) 60%, #000 5%);
}

.fx-cart-close svg { width: 17px; height: 17px; }

/* Badan panel jadi kolom flex supaya hanya daftar item yang menggulir
   dan ringkasan tetap terlihat. Sebelumnya ringkasan dan tombol ikut
   tergulir, jadi pada keranjang panjang tombolnya hilang ke bawah. */
.fx-cart-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
}

.fx-cart-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 20px;
}

/* Keadaan kosong tanpa JS: teksnya dititipkan view lewat
   --fx-cart-empty, dan order.js mengosongkan wadah ini sendiri saat
   item terakhir dihapus. */
.fx-cart-scroll:empty::before {
  content: var(--fx-cart-empty, "");
  display: block;
  padding: 52px 8px;
  color: var(--fx-muted);
  font-size: 14.5px;
  text-align: center;
}

.fx-cart-foot {
  flex: 0 0 auto;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--fx-rule);
  background: var(--fx-card);
}

.fx-cart-cta {
  width: 100%;
  margin-top: 14px;
}

/* ==================================================================
   Checkout
   ================================================================== */
.fx-checkout {
  padding-block: clamp(36px, 5vw, 76px);
  background: var(--fx-paper);
  font-family: var(--fx-sans);
}

.fx-co-head {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.fx-co-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.fx-co-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.fx-checkout .fx-field {
  margin-top: 0;
}

.fx-checkout .fx-field > label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fx-muted);
}

.fx-req {
  color: var(--fe-ink);
}

.fx-checkout .form-control {
  border-radius: 0;
  border-color: var(--fx-rule);
}

/* Panel ringkasan */
.fx-co-panel {
  padding: 24px;
  border: 1px solid var(--fx-rule);
  background: var(--fx-card);
}

.fx-co-panel-title {
  margin: 0 0 16px;
  font-family: var(--fx-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--fx-ink);
}

.fx-co-paytitle {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--fx-rule);
  font-size: 19px;
}

.fx-co-items:not(:empty) {
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--fx-rule);
}

/* --- Metode pembayaran ---
   Dulu radio polos berjajar tanpa bentuk. Kini tiap pilihan adalah
   baris penuh yang bisa diklik di mana saja, dengan penanda terpilih
   yang tidak hanya bergantung warna. */
.fx-pays {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fx-pay {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid var(--fx-rule);
  background: var(--fx-card);
  cursor: pointer;
  transition: border-color 180ms var(--fx-ease), background-color 180ms var(--fx-ease);
}

.fx-pay:hover {
  border-color: var(--fx-ink);
}

/* Radio aslinya disembunyikan dari pandangan tapi TETAP di alur fokus,
   supaya navigasi papan ketik dan pembaca layar tidak kehilangannya. */
.fx-pay input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.fx-pay-dot {
  display: inline-flex;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid var(--fx-rule);
  border-radius: 50%;
  background: var(--fx-card);
}

.fx-pay input:checked ~ .fx-pay-dot {
  border-color: var(--fx-ink);
  border-width: 5px;
}

.fx-pay:has(input:checked) {
  border-color: var(--fx-ink);
  background: color-mix(in srgb, var(--fx-paper) 55%, #000 3%);
}

/* Cadangan untuk peramban tanpa :has() — penanda titiknya sudah
   cukup menunjukkan pilihan, hanya latar barisnya yang tidak berubah. */
.fx-pay input:focus-visible ~ .fx-pay-dot {
  outline: 2px solid var(--fe-ink);
  outline-offset: 2px;
}

.fx-pay-label {
  font-size: 15px;
  color: var(--fx-ink);
}

.fx-pay-btn {
  width: 100%;
  margin-top: 20px;
}

/* --- Peringatan --- */
.fx-alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 26px;
  padding: 14px 16px;
  border: 1px solid transparent;
  font-size: 14.5px;
  line-height: 1.5;
}

.fx-alert svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.fx-alert-error {
  border-color: #f3c4c0;
  background: #fdf3f2;
  color: #8c1d18; /* 8,1:1 di atas latarnya */
}

/* --- Responsif --- */
@media (min-width: 768px) {
  .fx-co-fields {
    grid-template-columns: 1fr 1fr;
  }

  .fx-col-2 {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1200px) {
  .fx-co-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }

  /* Total dan tombol bayar tetap terlihat sambil mengisi formulir */
  .fx-co-aside {
    position: sticky;
    top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-cart-close,
  .fx-pay {
    transition-duration: 1ms !important;
  }
}

/* ==================================================================
   13. AKUN PELANGGAN & RESERVASI — STRUKTUR BARU
   ------------------------------------------------------------------
   Melayani login, register, forgot_password (lewat partial bersama),
   old_orders, order_details, dan reservations.
   ================================================================== */

/* --- Kerangka akun (split-screen) --- */
.fx-auth {
  padding-block: clamp(32px, 5vw, 72px);
  background: var(--fx-paper);
  font-family: var(--fx-sans);
}

.fx-auth-wrap {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border: 1px solid var(--fx-rule);
  background: var(--fx-card);
}

/* Panel kiri: bidang warna aksen, bukan foto stok bertumpuk dua
   lapisan gelap seperti sebelumnya. Tidak ada berkas gambar yang
   perlu diunduh, dan warnanya ikut White Label. */
.fx-auth-aside {
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  padding: 44px 38px;
  background: linear-gradient(150deg, var(--fe-ink), var(--fe-ink-hover));
  color: #fff;
  position: relative;
  overflow: hidden;
}

.fx-auth-aside::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -130px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  pointer-events: none;
}

.fx-auth-aside-inner { position: relative; }

.fx-auth-aside-title {
  margin: 0 0 10px;
  font-family: var(--fx-serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
}

/* Tanpa opacity: di atas bidang berwarna, teks yang diredupkan
   jatuh di bawah ambang keterbacaan. */
.fx-auth-aside-text {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  max-width: 34ch;
}

.fx-auth-form {
  padding: clamp(28px, 4vw, 46px);
}

.fx-auth-title {
  margin: 0;
  font-family: var(--fx-serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  color: var(--fx-ink);
}

.fx-auth-sub {
  margin: 6px 0 26px;
  color: var(--fx-muted);
  font-size: 14.5px;
}

.fx-auth .form-control,
.fx-resv .form-control {
  border-radius: 0;
  border-color: var(--fx-rule);
}

.fx-auth .fx-field,
.fx-resv .fx-field {
  margin-top: 0;
  margin-bottom: 18px;
}

.fx-auth .fx-field > label,
.fx-resv .fx-field > label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fx-muted);
}

.fx-err {
  display: block;
  margin-top: 5px;
  color: var(--fe-ink);
  font-size: 12.5px;
  font-weight: 500;
}

.fx-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 16px;
}

/* Ruas sandi: ruang untuk tombol mata */
.fx-pw { position: relative; }

.fx-pw .form-control { padding-right: 46px; }

/* .set_hide_icon diikat order.js; hanya penempatannya yang diatur */
.fx-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--fx-muted);
  cursor: pointer;
}

.fx-eye:hover { color: var(--fx-ink); }

.fx-eye svg { width: 18px; height: 18px; }

/* Kelas yang ditukar order.js untuk menyembunyikan salah satu mata */
.fx-eye .display_none { display: none; }

.fx-auth-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 18px;
}

.fx-auth-btn { width: 100%; }

.fx-auth-foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--fx-rule);
  font-size: 14px;
  color: var(--fx-muted);
  text-align: center;
}

/* Pemisah "atau" */
.fx-sep {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 16px;
  color: var(--fx-muted);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fx-sep::before,
.fx-sep::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--fx-rule);
}

/* Masuk lewat media sosial */
.fx-social {
  display: grid;
  gap: 8px;
}

.fx-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--fx-rule);
  background: var(--fx-card);
  color: var(--fx-ink);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 180ms var(--fx-ease), background-color 180ms var(--fx-ease);
}

.fx-social-btn:hover {
  border-color: var(--fx-ink);
  background: color-mix(in srgb, var(--fx-paper) 60%, #000 3%);
  color: var(--fx-ink);
}

.fx-social-btn svg { width: 18px; height: 18px; }

/* ==================================================================
   Riwayat pesanan & rincian
   ================================================================== */
.fx-orders,
.fx-od {
  padding-block: clamp(32px, 5vw, 72px);
  background: var(--fx-paper);
  font-family: var(--fx-sans);
}

.fx-orders-head,
.fx-od-head,
.fx-resv-head {
  margin-bottom: clamp(22px, 3vw, 36px);
}

.fx-orders-card {
  border: 1px solid var(--fx-rule);
  border-radius: 0;
  background: var(--fx-card);
}

.fx-orders-body { padding: clamp(16px, 2.5vw, 28px); }

.fx-orders-table {
  width: 100%;
  border-collapse: collapse;
}

.fx-orders-table th {
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--fx-rule);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fx-muted);
  text-align: left;
}

.fx-orders-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--fx-rule);
  font-size: 14.5px;
  color: var(--fx-body);
  vertical-align: middle;
}

.fx-orders-table .fx-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fx-order-no {
  font-weight: 600;
  color: var(--fx-ink);
  font-variant-numeric: tabular-nums;
}

/* Status: teks + latar, tidak pernah warna saja */
.fx-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.fx-status.approved { background: #edf7ee; color: #1b5e20; } /* 7,4:1 */
.fx-status.pending  { background: #fdf4e3; color: #8a5300; } /* 5,4:1 */
.fx-status.decline  { background: #fdf0ef; color: #8c1d18; } /* 8,1:1 */

.fx-order-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Penomoran halaman */
.fx-pager { margin-top: 26px; }

.fx-pager ul {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-pager-n,
.fx-pager-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--fx-rule);
  color: var(--fx-ink);
  font-size: 14px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.fx-pager-n:hover,
.fx-pager-arrow:hover { border-color: var(--fx-ink); }

.fx-pager-n.active {
  border-color: var(--fx-ink);
  background: var(--fx-ink);
  color: #fff;
}

.fx-pager-arrow.disabled {
  opacity: .4;
  pointer-events: none;
}

.fx-pager-arrow svg { width: 17px; height: 17px; }

/* Rincian pesanan */
.fx-od-meta {
  display: flex;
  gap: 16px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--fx-muted);
  font-size: 14px;
}

.fx-od-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.fx-od-head .back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fx-od-head .back-link svg { width: 16px; height: 16px; }

.fx-od-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.fx-od-card {
  padding: 22px;
  border: 1px solid var(--fx-rule);
  background: var(--fx-card);
}

.fx-od-card-title {
  margin: 0 0 14px;
  font-family: var(--fx-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--fx-ink);
}

.fx-od-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14.5px;
  line-height: 1.6;
}

.fx-od-list .paragraph-color { color: var(--fx-muted); }

.fx-od-pair {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--fx-rule);
}

.fx-od-k {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fx-muted);
}

.fx-od-v {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  color: var(--fx-ink);
}

.fx-od-products {
  padding: clamp(16px, 2.5vw, 26px);
  border: 1px solid var(--fx-rule);
  background: var(--fx-card);
}

/* ==================================================================
   Reservasi
   ================================================================== */
.fx-resv {
  padding-block: clamp(32px, 5vw, 72px);
  background: var(--fx-paper);
  font-family: var(--fx-sans);
}

.fx-resv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

.fx-resv-form {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--fx-rule);
  background: var(--fx-card);
}

.fx-resv-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 18px;
}

.fx-resv-err:not(.d-none) {
  display: block;
  margin-bottom: 16px;
  padding: 11px 14px;
  border: 1px solid #f3c4c0;
  background: #fdf3f2;
  color: #8c1d18;
  font-size: 14px;
}

.fx-resv-btn { width: 100%; }

.fx-info-box {
  padding: 22px;
  border: 1px solid var(--fx-rule);
  background: var(--fx-card);
}

.fx-info-box + .fx-info-box { margin-top: 14px; }

.fx-info-title {
  margin: 0 0 10px;
  font-family: var(--fx-serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--fx-ink);
}

.fx-info-body p {
  margin: 0 0 6px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fx-body);
}

/* ==================================================================
   Responsif
   ================================================================== */
@media (min-width: 576px) {
  .fx-grid-2 { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .fx-resv-fields { grid-template-columns: 1fr 1fr; }
  .fx-resv-fields .fx-col-2 { grid-column: 1 / -1; }
  .fx-od-body { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 992px) {
  .fx-auth-wrap { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
  .fx-auth-aside { display: flex; }
  .fx-resv-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

/* Tabel dilipat jadi kartu di layar sempit. Tanpa ini riwayat pesanan
   memaksa gulir mendatar di ponsel; judul kolomnya dibawa lewat
   atribut data-label pada tiap sel. */
@media (max-width: 767px) {
  .fx-orders-table thead { display: none; }

  .fx-orders-table tr {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--fx-rule);
  }

  .fx-orders-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 0;
    border: 0;
  }

  .fx-orders-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fx-muted);
  }

  .fx-orders-table td.fx-num { text-align: right; }

  .fx-order-actions {
    justify-content: flex-start;
    padding-top: 10px;
  }

  .fx-order-actions::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-social-btn { transition-duration: 1ms !important; }
}

/* Jam buka pada halaman reservasi */
.fx-hours {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-hours li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14.5px;
  color: var(--fx-body);
}

.fx-hours li > :first-child { font-weight: 600; color: var(--fx-ink); }
.fx-hours li > :last-child { font-variant-numeric: tabular-nums; }

/* ==================================================================
   14. TENTANG, KONTAK, & PESANAN BERHASIL — STRUKTUR BARU
   ================================================================== */

/* --- Tentang kami --- */
.fx-about {
  padding-block: var(--fx-gap);
  background: var(--fx-paper);
  font-family: var(--fx-sans);
}

.fx-about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.fx-about-figure {
  margin: 0;
  position: relative;
}

.fx-about-figure img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Bingkai tipis bergeser, senada dengan pembuka di beranda */
.fx-about-figure::before {
  content: "";
  position: absolute;
  inset: 20px -20px -20px 20px;
  border: 1px solid var(--fx-rule);
  z-index: 0;
}

/* --- Hubungi kami --- */
.fx-contact {
  padding-block: clamp(32px, 5vw, 72px);
  background: var(--fx-paper);
  font-family: var(--fx-sans);
}

.fx-contact-head { margin-bottom: clamp(22px, 3vw, 38px); }

.fx-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

.fx-contact-form {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--fx-rule);
  background: var(--fx-card);
}

.fx-contact-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 18px;
}

.fx-contact .fx-field { margin-top: 0; margin-bottom: 18px; }

.fx-contact .fx-field > label,
.fx-about .fx-field > label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fx-muted);
}

.fx-contact .form-control {
  border-radius: 0;
  border-color: var(--fx-rule);
}

.fx-contact textarea.form-control { min-height: 130px; }

.fx-contact-btn { width: 100%; }

/* Galat validasi: .callout dipertahankan karena dipakai gaya lama */
.fx-contact .callout.fx-err {
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fe-ink);
  font-size: 12.5px;
  font-weight: 500;
}

/* Kartu informasi kontak */
.fx-contact-info {
  display: grid;
  gap: 14px;
}

.fx-contact-info .card {
  border: 1px solid var(--fx-rule);
  border-radius: 0;
  background: var(--fx-card);
}

.fx-contact-info .card-body { padding: 22px; }

.fx-info-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fe-primary) 8%, #fff);
  color: var(--fe-ink);
}

.fx-info-mark svg { width: 19px; height: 19px; }

.fx-info-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fx-body);
  overflow-wrap: anywhere;
}

.fx-info-text a {
  color: var(--fx-body);
  text-decoration: none;
}

.fx-info-text a:hover {
  color: var(--fe-ink);
  text-decoration: underline;
}

/* --- Pesanan berhasil --- */
.fx-success {
  padding-block: clamp(40px, 6vw, 88px);
  background: var(--fx-paper);
  font-family: var(--fx-sans);
}

.fx-success-col {
  max-width: 520px;
  margin-inline: auto;
}

.fx-success-card {
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--fx-rule);
  background: var(--fx-card);
  text-align: center;
}

.fx-success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #edf7ee;
  color: #1b5e20; /* 7,4:1 di atas latarnya */
}

.fx-success-mark svg { width: 30px; height: 30px; }

.fx-success-msg {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--fx-muted);
}

.fx-success-amt {
  margin: 0;
  font-family: var(--fx-serif);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 400;
  color: var(--fx-ink);
  font-variant-numeric: tabular-nums;
}

/* Daftar rincian: <dl> dengan tiap pasangan sebaris */
.fx-success-list {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--fx-rule);
  text-align: left;
}

.fx-success-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
}

.fx-success-row dt {
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--fx-muted);
}

.fx-success-row dd {
  margin: 0;
  font-size: 14.5px;
  color: var(--fx-ink);
  text-align: right;
  overflow-wrap: anywhere;
}

.fx-success-total {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--fx-rule);
}

.fx-success-total dt,
.fx-success-total dd {
  font-family: var(--fx-serif);
  font-size: clamp(18px, 2vw, 21px);
  color: var(--fx-ink);
}

.fx-success-total dd { font-variant-numeric: tabular-nums; }

.fx-success-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.fx-success-actions > * { flex: 1 1 180px; }

/* --- Responsif --- */
@media (min-width: 768px) {
  .fx-contact-fields { grid-template-columns: 1fr 1fr; }
  .fx-contact-fields .fx-col-2 { grid-column: 1 / -1; }
}

@media (min-width: 992px) {
  .fx-about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); }
  .fx-contact-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

@media (max-width: 575px) {
  .fx-about-figure::before { inset: 12px -12px -12px 12px; }
  .fx-success-actions > * { flex: 1 1 100%; }
}

/* ==================================================================
   15. KEPALA HALAMAN ETALASE — STRUKTUR BARU
   ------------------------------------------------------------------
   Melayani _fe_header.php, yang kini dipakai header_section_menu.php
   dan header_section_menu2.php.
   ================================================================== */
.main-header .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
  font-family: var(--fx-sans);
}

.fx-hd-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Tombol laci: <button> sungguhan, bukan <div> berikon. Sebelumnya
   tidak bisa dijangkau papan ketik sama sekali. */
.fx-hd-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fx-ink);
  cursor: pointer;
}

.fx-hd-burger svg { width: 22px; height: 22px; }

.main-header .header-controls-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-hd-item,
.fx-hd-cart {
  position: relative;
}

.fx-hd-trigger,
.fx-hd-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--fx-ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 160ms var(--fx-ease);
}

.fx-hd-trigger:hover,
.fx-hd-cart:hover {
  background: color-mix(in srgb, var(--fx-paper) 55%, #000 4%);
}

.fx-hd-trigger svg,
.fx-hd-cart svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* Jumlah item keranjang; nilainya ditulis order.js */
.main-header .cart-item-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--fe-ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 575px) {
  .fx-hd-cart-label { display: none; }
}

/* Laci navigasi ponsel */
.main-aside .navbar-brand img {
  max-height: 42px;
  width: auto;
}

.main-aside .aside-scroll ul {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.main-aside .aside-scroll .menu-item a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--fx-rule);
  color: var(--fx-ink);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.main-aside .aside-scroll .menu-item a.active {
  color: var(--fe-ink);
}

@media (prefers-reduced-motion: reduce) {
  .fx-hd-trigger,
  .fx-hd-cart {
    transition-duration: 1ms !important;
  }
}

/* ==================================================================
   16. RASA APLIKASI — BILAH TAB & PENCARIAN
   ================================================================== */

/* --- Bilah tab bawah --------------------------------------------
   Disembunyikan di layar lebar: di sana navigasi kepala halaman sudah
   cukup, dan bilah tab justru memakan tinggi tanpa memberi apa pun. */
.fx-tabbar { display: none; }

@media (max-width: 991px) {
  .fx-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--fx-card);
    border-top: 1px solid var(--fx-rule);
    font-family: var(--fx-sans);
    /* Ruang untuk bilah gestur iPhone; nol di peranti tanpa itu */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Halaman diberi jarak bawah supaya isi terakhir tidak tertutup
     bilah tab — termasuk tombol di kaki halaman. */
  body {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  }
}

.fx-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* 56px + label: nyaman ditekan ibu jari tanpa membidik */
  min-height: 58px;
  padding: 7px 4px;
  color: var(--fx-muted);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  /* Tanpa ini peramban menunda ~300ms tiap ketukan untuk memastikan
     bukan awal dobel-ketuk zoom */
  touch-action: manipulation;
}

.fx-tab:hover { color: var(--fx-ink); }

/* Tab aktif dibedakan warna DAN ketebalan huruf — warna saja tidak
   cukup bagi pengguna buta warna. */
.fx-tab.is-active {
  color: var(--fe-ink);
}

.fx-tab.is-active .fx-tab-teks { font-weight: 600; }

.fx-tab-ico {
  position: relative;
  display: inline-flex;
}

.fx-tab-ico svg { width: 22px; height: 22px; }

.fx-tab-teks {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .01em;
}

/* Jumlah item keranjang; nilainya ditulis order.js ke
   .cart-item-count-static */
.fx-tab-badge {
  position: absolute;
  top: -5px;
  right: -9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--fe-ink);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Tombol & kotak pencarian ------------------------------------ */
.fx-mp-headrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.fx-searchbtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--fx-rule);
  border-radius: 999px;
  background: var(--fx-card);
  color: var(--fx-ink);
  font-family: var(--fx-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 180ms var(--fx-ease), background-color 180ms var(--fx-ease);
}

.fx-searchbtn:hover {
  border-color: var(--fx-ink);
}

.fx-searchbtn svg { width: 17px; height: 17px; }

/* Kotak pencarian tertutup secara bawaan; main.js menambahkan .open
   lewat handler .search-trigger yang sudah ada. Dianimasikan dengan
   grid-template-rows agar bisa dari nol ke tinggi isinya tanpa harus
   menebak angka tinggi. */
.fx-searchbox {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  transition: grid-template-rows 220ms var(--fx-ease), margin-top 220ms var(--fx-ease);
}

.fx-searchbox.open {
  grid-template-rows: 1fr;
  margin-top: 16px;
}

.fx-searchbox > * { min-height: 0; }

/* Pembungkus dalam supaya isinya benar-benar terpotong saat tertutup */
.fx-searchbox {
  position: relative;
  overflow: hidden;
}

.fx-searchbox input[type="search"] {
  width: 100%;
  height: 52px;
  padding: 0 44px 0 46px;
  border: 1px solid var(--fx-rule);
  border-radius: 0;
  background: var(--fx-card);
  color: var(--fx-ink);
  font-family: var(--fx-sans);
  font-size: 16px; /* 16px mencegah iOS memperbesar halaman saat fokus */
  -webkit-appearance: none;
  appearance: none;
}

.fx-searchbox input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.fx-searchbox input[type="search"]:focus {
  outline: none;
  border-color: var(--fx-ink);
}

.fx-searchbox-ico {
  position: absolute;
  left: 16px;
  bottom: 18px;
  width: 18px;
  height: 18px;
  color: var(--fx-muted);
  pointer-events: none;
}

.fx-searchbox-clear {
  position: absolute;
  right: 8px;
  bottom: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fx-muted);
  cursor: pointer;
}

.fx-searchbox-clear:hover { color: var(--fx-ink); }

.fx-searchbox-clear svg { width: 16px; height: 16px; }

/* Label khusus pembaca layar */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Penyesuaian rasa aplikasi di layar sempit -------------------- */
@media (max-width: 767px) {
  /* Chip kategori menempel tepat di bawah kepala yang juga menempel,
     jadi kategori selalu terjangkau saat menggulir daftar panjang. */

  .fx-mp-headrow { align-items: stretch; }

  .fx-searchbtn { width: 100%; justify-content: center; }

  /* Kartu menu dua kolom di ponsel: cukup besar untuk dilihat, cukup
     padat untuk memindai banyak hidangan sekaligus. */
  .fx-mp-grid-wrap .menu-container > [class*="col-"] {
    width: 50%;
    max-width: 50%;
    flex: 0 0 50%;
    padding-inline: 6px;
  }

  .fx-card-body { padding: 12px; }
  .fx-card-name { font-size: 15px; }
  .fx-card-price { font-size: 15px; }
  .fx-card-rating { display: none; } /* ruang di ponsel dipakai nama dan harga */
}

@media (prefers-reduced-motion: reduce) {
  .fx-searchbox,
  .fx-searchbtn {
    transition-duration: 1ms !important;
  }
}

/* ==================================================================
   17. KOREKSI KEPALA HALAMAN & LAPISAN
   ------------------------------------------------------------------
   Tiga masalah yang muncul karena desain ulang ini membuat seluruh
   halaman berlatar terang, sementara gaya kepala halaman bawaan
   template dirancang untuk menumpuk di atas hero bergambar GELAP.

   Spesifisitas ditulis persis menyamai aturan lama supaya menang
   lewat urutan muat (berkas ini dimuat paling akhir), bukan dengan
   !important yang akan menyulitkan penyesuaian berikutnya.
   ================================================================== */

/* --- 1. Kepala halaman kembali ke aliran normal --------------------
   .main-header.header-absolute memakai position:absolute dengan latar
   transparan supaya menumpuk di atas hero gelap. Tanpa hero gelap,
   ia melayang di atas isi halaman dan menutupinya. */
.main-header.header-absolute {
  position: relative;
}

.main-header {
  background-color: var(--fx-paper);
  border-bottom: 1px solid var(--fx-rule);
}

/* --- 2. Teks kepala jadi gelap -------------------------------------
   .header-light mewarnai tautan navigasi putih — tak terbaca di atas
   latar terang. Selektor disamakan persis dengan aturan lama. */
.main-header.header-light .navbar > ul > .menu-item > a,
.main-header.header-light .navbar > ul > .menu-item > a:hover {
  color: var(--fx-ink);
}

.main-header.header-light .navbar > ul > .menu-item > a.active {
  color: var(--fe-ink);
}

.main-header.header-light .aside-toggler span {
  background-color: var(--fx-ink);
}

.main-header.header-light .header-controls-inner li span {
  color: var(--fx-ink);
}

/* --- 3. Tombol keranjang kembali mendatar --------------------------
   .header-controls-inner .cart-trigger (0,2,0) memaksa
   flex-direction: column dan mengalahkan .fx-hd-cart (0,1,0), jadi
   ikon, angka, dan label tertumpuk vertikal. Kelas ditambahkan di
   selektor agar spesifisitasnya cukup. */
.header-controls-inner .cart-trigger.fx-hd-cart,
.header-controls-inner .menu-item-has-children.fx-hd-item {
  flex-direction: row;
  gap: 0;
}

.header-controls-inner .cart-trigger.fx-hd-cart {
  gap: 8px;
}

/* Jarak antar kontrol 30px terlalu longgar setelah tiap kontrol
   punya bidang sentuhnya sendiri */
.main-header .header-controls-inner {
  gap: 4px;
}

/* Angka keranjang: menempel pada ikon, bukan berdiri sebagai baris
   sendiri seperti pada susunan kolom sebelumnya */
.main-header .cart-item-count {
  order: 3;
}

/* --- 4. Urutan lapisan ---------------------------------------------
   Panel keranjang ber-z-index 1000, sedangkan bilah tab yang
   ditambahkan di sini 1040 — akibatnya bilah tab menutupi bagian
   bawah panel, tepat di tempat tombol checkout berada. Panel dan
   lapisan gelapnya dinaikkan ke atas bilah tab. */
.cart-sidebar {
  z-index: 1060;
}

.cart-sidebar-overlay {
  z-index: 1050;
}

/* Laci navigasi ponsel juga harus di atas bilah tab */
.main-aside {
  z-index: 1060;
}

.aside-overlay {
  z-index: 1050;
}

/* ==================================================================
   18. NAVBAR ETALASE — DIBANGUN ULANG
   ------------------------------------------------------------------
   Melayani _fe_navbar.php, satu navbar untuk seluruh frontend.

   Tiga zona: merek | tautan | aksi. Di ponsel zona tengah disembunyikan
   dan laci mengambil alih, jadi baris navbar tetap satu tinggi berapa
   pun panjang menunya.
   ================================================================== */
.fx-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 74px;
  font-family: var(--fx-sans);
}

/* --- Zona merek --- */
.fx-nav-brandzone {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Tombol laci kini <button> sungguhan, bukan <div> berikon seperti
   sebelumnya — yang lama tidak bisa dijangkau papan ketik sama sekali. */
.fx-nav-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fx-ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 160ms var(--fx-ease);
}

.fx-nav-burger:hover {
  background: color-mix(in srgb, var(--fx-paper) 55%, #000 5%);
}

.fx-nav-burger svg { width: 22px; height: 22px; }

.fx-nav-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
}

.fx-nav-brand img {
  max-height: 44px;
  width: auto;
  object-fit: contain;
}

/* Cadangan bila White Label belum punya logo */
.fx-nav-wordmark {
  font-family: var(--fx-serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--fx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Zona tautan --- */
.fx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--fx-body);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms var(--fx-ease), color 160ms var(--fx-ease);
}

.fx-nav-link:hover {
  background: color-mix(in srgb, var(--fx-paper) 55%, #000 4%);
  color: var(--fx-ink);
}

/* Halaman aktif ditandai warna DAN latar — warna saja tidak cukup bagi
   pengguna buta warna. Selektor pertama menyamai spesifisitas aturan
   header-light lama supaya menang lewat urutan muat. */
.main-header.header-light .navbar .fx-nav-link.active,
.fx-nav-link.active {
  background: color-mix(in srgb, var(--fe-primary) 10%, #fff);
  color: var(--fe-ink);
  font-weight: 600;
}

/* Garis-bawah animasi bawaan template dimatikan: sudah ada penanda
   latar, dan dua penanda sekaligus terasa berisik. */
.fx-nav .menu-item a::before { display: none; }

/* --- Zona aksi --- */
.fx-nav-actions .header-controls-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Aturan lama .header-controls-inner .cart-trigger memaksa
   flex-direction: column dengan spesifisitas (0,2,0); kelas
   ditambahkan di selektor agar aturan ini menang. */
.header-controls-inner .cart-trigger.fx-nav-cart {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--fx-ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 160ms var(--fx-ease);
}

.header-controls-inner .cart-trigger.fx-nav-cart:hover {
  background: color-mix(in srgb, var(--fx-paper) 55%, #000 4%);
}

.fx-nav-cart-ico {
  position: relative;
  display: inline-flex;
}

.fx-nav-cart-ico svg { width: 20px; height: 20px; }

/* Jumlah item keranjang; nilainya ditulis order.js */
.fx-nav .cart-item-count {
  position: absolute;
  top: -6px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--fe-ink);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.main-header.header-light .fx-nav-cart-txt,
.fx-nav-cart-txt {
  font-size: 14px;
  font-weight: 500;
  color: var(--fx-ink);
}

/* --- Dropdown -------------------------------------------------------
   Pemicunya kini <button>; sebelumnya <span>, yang tidak bisa
   difokuskan maupun ditekan dengan papan ketik. */
.header-controls-inner .menu-item-has-children.fx-nav-drop {
  position: relative;
  display: inline-flex;
  flex-direction: row;
}

.fx-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fx-ink);
  font-family: var(--fx-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 160ms var(--fx-ease);
}

.fx-nav-trigger:hover,
.fx-nav-drop.is-open .fx-nav-trigger {
  background: color-mix(in srgb, var(--fx-paper) 55%, #000 5%);
}

.fx-nav-trigger > svg:first-child {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.fx-nav-trigger-txt {
  max-width: 12ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fx-nav-caret {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  transition: transform 180ms var(--fx-ease);
}

.fx-nav-drop.is-open .fx-nav-caret { transform: rotate(180deg); }

/* Panel. Aturan hover lama tetap berlaku di peranti bertetikus;
   .is-open dari navbar.js adalah jalur kedua untuk layar sentuh. */
.fx-nav .submenu.fx-nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--fx-rule);
  border-radius: 12px;
  background: var(--fx-card);
  box-shadow: 0 16px 40px -16px rgba(16, 20, 30, .28);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms var(--fx-ease);
  z-index: 30;
}

.fx-nav-drop.is-open > .submenu.fx-nav-menu,
.fx-nav .menu-item:hover > .submenu.fx-nav-menu {
  opacity: 1;
  visibility: visible;
}

.fx-nav .submenu.fx-nav-menu .menu-item a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--fx-body);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

.fx-nav .submenu.fx-nav-menu .menu-item a:hover {
  background: var(--fx-paper);
  color: var(--fe-ink);
}

.fx-nav .submenu.fx-nav-menu .menu-item a.active {
  color: var(--fe-ink);
  font-weight: 600;
}

/* --- Responsif --- */
@media (min-width: 992px) {
  .fx-nav-burger { display: none; }
}

@media (max-width: 991px) {
  /* Tautan utama pindah ke laci; navbar tetap satu baris rapi */
  .fx-nav-links { display: none; }
  .fx-nav { min-height: 64px; gap: 10px; }
  .fx-nav-brand img { max-height: 38px; }
}

@media (max-width: 575px) {
  /* Teks pemicu disembunyikan, ikonnya cukup — nama pelanggan yang
     panjang akan mendorong navbar meluber di layar sempit. */
  .fx-nav-cart-txt,
  .fx-nav-trigger-txt,
  .fx-nav-caret { display: none; }

  .fx-nav-trigger,
  .header-controls-inner .cart-trigger.fx-nav-cart {
    padding: 0 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-nav-link,
  .fx-nav-trigger,
  .fx-nav-burger,
  .fx-nav-caret,
  .fx-nav .submenu.fx-nav-menu,
  .header-controls-inner .cart-trigger.fx-nav-cart {
    transition-duration: 1ms !important;
  }
}

/* ==================================================================
   19. KOREKSI NAVBAR — TINGGI & JARAK ANTAR ITEM
   ================================================================== */

/* --- 1. Tinggi kepala halaman dipatok 200px -----------------------
   responsive.css berisi:
     @media only screen and (min-width: 320px) {
       .main-header.header-4 { height: 200px; }
     }
   Kelas header-4 ada di kepala halaman ini, dan media query-nya
   berlaku dari 320px ke atas — jadi praktis di semua layar. Navbar
   hanya setinggi 74px, sisanya sekitar 126px ruang kosong.

   Dulu tidak terlihat karena kepala halaman memakai position:absolute
   dan menumpuk di atas isi halaman; begitu ia kembali ke aliran normal,
   200px itu mulai memakan ruang sungguhan.

   Spesifisitas disamakan (0,2,0) — menang lewat urutan muat. */
.main-header.header-4 {
  height: auto;
}

/* --- 2. Jarak antar item menu -------------------------------------
   frontend/style.css berisi .navbar .menu-item a { padding: 0 }
   dengan spesifisitas (0,2,1). Aturan .fx-nav-link sebelumnya hanya
   (0,1,0), jadi padding-nya tidak pernah berlaku — sementara
   gap: 32px milik .navbar-nav justru tertimpa menjadi 2px. Hasilnya
   item menu berhimpitan tanpa jarak.

   Selektor di bawah (0,3,1) menang atas keduanya. */
.navbar .fx-nav-links .menu-item > a.fx-nav-link {
  padding: 0 16px;
}

.fx-nav .navbar-nav.fx-nav-links {
  gap: 6px;
}

/* Item terakhir: aturan lama menghapus padding kanannya, yang membuat
   penanda latar halaman aktif terpotong sebelah. */
.navbar .fx-nav-links > .menu-item:last-child > a.fx-nav-link {
  padding-right: 16px;
}

/* --- 3. Tinggi navbar dirapatkan ---------------------------------- */
.fx-nav {
  min-height: 68px;
}

@media (max-width: 991px) {
  /* Di ponsel yang tersisa hanya merek dan tombol aksi, jadi tidak
     perlu setinggi versi desktop. */
  .fx-nav {
    min-height: 56px;
  }

  .fx-nav-brand img {
    max-height: 34px;
  }

  .fx-nav-burger {
    width: 40px;
    height: 40px;
  }

  .fx-nav-burger svg {
    width: 20px;
    height: 20px;
  }

  .header-controls-inner .cart-trigger.fx-nav-cart,
  .fx-nav-trigger {
    min-height: 40px;
  }
}

/* ==================================================================
   20. HALAMAN ONLINE-ORDER — DITULIS ULANG
   ------------------------------------------------------------------
   Melayani markup baru di frontend/menu-page.php.

   Bagian 5 dan 10 (kartu .fx-card dan kepala .fx-mp-*) TIDAK dibuang:
   .fx-card masih dipakai kartu hidangan terkait di halaman detail.
   Halaman ini sekadar berhenti memakainya.

   Kontrak isotope: .menu-container adalah wadahnya dan tiap anak
   langsung membawa .cat-id-<id>. Isotope memosisikan anak-anak itu
   secara ABSOLUT, jadi aturan di sini tidak menyentuh position, float,
   maupun display anak langsungnya — hanya lebar dan isi barisnya.
   ================================================================== */
.od-page {
  background: var(--fx-paper);
  font-family: var(--fx-sans);
}

/* --- Bilah pencarian + kategori ------------------------------------
   Keduanya menempel bersama: di daftar panjang, mencari dan berganti
   kategori adalah dua aksi yang paling sering dipakai, dan keduanya
   tidak boleh menuntut gulir balik ke atas. */
.od-bar {
  position: sticky;
  top: 0;
  z-index: 25;
  padding: 10px 0 8px;
  background: color-mix(in srgb, var(--fx-paper) 94%, transparent);
  border-bottom: 1px solid var(--fx-rule);
  backdrop-filter: saturate(1.4) blur(10px);
}

@supports not (backdrop-filter: blur(10px)) {
  .od-bar { background: var(--fx-paper); }
}

/* --- Ruas pencarian, selalu terlihat --- */
.od-search {
  position: relative;
  display: flex;
  align-items: center;
}

.od-search input[type="search"] {
  width: 100%;
  height: 46px;
  padding: 0 42px 0 42px;
  border: 1px solid var(--fx-rule);
  border-radius: 999px;
  background: var(--fx-card);
  color: var(--fx-ink);
  font-family: var(--fx-sans);
  /* 16px mencegah iOS memperbesar halaman saat ruas difokuskan */
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}

.od-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.od-search input[type="search"]:focus {
  outline: none;
  border-color: var(--fx-ink);
}

.od-search-ico {
  position: absolute;
  left: 15px;
  width: 18px;
  height: 18px;
  color: var(--fx-muted);
  pointer-events: none;
}

.od-search-clear {
  position: absolute;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fx-muted);
  cursor: pointer;
}

.od-search-clear:hover {
  background: var(--fx-paper);
  color: var(--fx-ink);
}

.od-search-clear svg { width: 15px; height: 15px; }

/* --- Kategori: tab teks bergaris bawah -----------------------------
   Bentuk pil berbingkai diganti tab teks. Alasannya: pil menggambar
   satu kotak penuh di sekeliling SETIAP kategori, jadi sederet delapan
   kategori berarti delapan kotak bersaing dengan daftar hidangan di
   bawahnya. Tab hanya menggambar satu penanda — di bawah kategori yang
   sedang dipilih — sehingga bilahnya jauh lebih tenang dan yang aktif
   langsung ketahuan.

   Ini juga bentuk yang sudah dikenal orang dari aplikasi pesan
   makanan, jadi tidak perlu dipelajari lagi.

   Rel tipis di bawah seluruh bilah memberi garis bawah itu tempat
   berpijak; tanpa rel, penanda aktif terlihat menggantung. */
.od-cats {
  position: relative;
  display: flex;
  gap: 4px;
  margin-top: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}

.od-cats::-webkit-scrollbar { display: none; }

/* Tiap kategori: kotak gambar 1:1 dengan nama di bawahnya.
   --od-tile adalah SATU sumber ukuran untuk lebar tab, lebar kotak,
   dan tinggi kotak sekaligus — jadi persegi tidak mungkin meleset
   saat ukurannya diubah di breakpoint. */
.od-cat {
  --od-tile: 76px;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  width: var(--od-tile);
  /* height WAJIB ditimpa. frontend/style.css memberi
     .ct-menu-category-item height:122px dan border 1px; tanpa baris
     ini bidang tab menjadi 76x122 — persegi panjang, dan bingkai di
     sekelilingnya ikut terlihat lonjong. border-radius-nya juga
     dinolkan supaya tidak ada sudut membulat yang menggantung. */
  height: auto;
  padding: 2px 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fx-muted);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  scroll-snap-align: start;
  touch-action: manipulation;
  transition: color 160ms var(--fx-ease);
}

/* Kotak 1:1. Lebar DAN tinggi diambil dari variabel yang sama, jadi
   perseginya tidak bergantung pada dukungan aspect-ratio; aspect-ratio
   tetap disertakan sebagai penegas. */
.od-cat-box {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--od-tile);
  height: var(--od-tile);
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--fx-paper) 70%, #000 4%);
  /* Cincin dari box-shadow inset, bukan border: border ikut dihitung
     ke dalam ukuran kotak, sehingga cincin yang menebal saat aktif
     membuat persegi berubah jadi sedikit lonjong. */
  box-shadow: inset 0 0 0 1px var(--fx-rule);
  transition: box-shadow 180ms var(--fx-ease);
}

/* Gambar mengisi kotak persis; cover memotong sisi terpanjang alih-alih
   menggepengkan gambar aslinya. */
.od-cat-box img {
  display: block;
  width: var(--od-tile);
  height: var(--od-tile);
  object-fit: cover;
  border-radius: 0;
}

.od-cat-name {
  display: block;
  width: 100%;
  line-height: 1.3;
  text-align: center;
  /* Nama panjang dipotong satu baris — kalau dibiarkan membungkus,
     tinggi tiap tab jadi berbeda dan barisnya bergerigi. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.od-cat:hover {
  color: var(--fx-ink);
}

.od-cat:hover .od-cat-box {
  box-shadow: inset 0 0 0 1px var(--fx-ink);
}

/* .active dipasang dan dilepas main.js.
   Dibedakan lewat cincin tebal berwarna DAN tebal huruf — warna saja
   tidak cukup bagi pengguna buta warna. */
.od-cat.active {
  color: var(--fe-ink);
  font-weight: 700;
}

.od-cat.active .od-cat-box {
  box-shadow: inset 0 0 0 2px var(--fe-ink);
}

/* --- Daftar hidangan --------------------------------------------- */
.od-body {
  padding: 14px 0 24px;
}

/* Anak langsung .menu-container diposisikan absolut oleh isotope;
   yang diatur di sini hanya lebarnya. */
.od-cell {
  width: 100%;
  padding: 0;
}

/* Baris hidangan. Garis pemisah keras diganti kartu bersudut lembut
   dengan latar yang muncul saat disentuh — pemisah setebal satu piksel
   selebar layar membuat daftar terasa seperti tabel, bukan menu. */
.od-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  transition: background-color 160ms var(--fx-ease);
}

.od-item:hover {
  background: color-mix(in srgb, var(--fx-paper) 55%, #000 4%);
}

/* Gambar kecil: hidangan dikenali dari namanya lebih dulu, dan di
   banyak outlet fotonya belum diunggah. Gambar besar hanya akan
   memperbanyak kotak kosong. */
.od-item-img {
  flex: 0 0 auto;
  display: block;
  width: 74px;
  height: 74px;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--fx-paper) 70%, #000 4%);
}

.od-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.od-item-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

.od-item-text { min-width: 0; }

.od-item-name {
  margin: 0;
  font-family: var(--fx-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.od-item-name a {
  color: var(--fx-ink);
  text-decoration: none;
}

.od-item-name a:hover { color: var(--fe-ink); }

.od-item-price {
  margin: 3px 0 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fe-ink);
  font-variant-numeric: tabular-nums;
}

/* Rating diredam menjadi baris kecil — informasi pendukung, bukan
   judul barisnya */
.od-item-rate {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--fx-muted);
}

.od-item-rate .rating {
  display: inline-flex;
  gap: 1px;
  cursor: pointer;
}

.od-item-rate .fa-star { font-size: 10.5px; color: #c9a227; }
.od-item-rate .far.fa-star { color: var(--fx-rule); }
.od-item-rate-n { font-variant-numeric: tabular-nums; }

/* Tombol tambah: bulat, satu ikon, 40px — bentuk yang sudah dikenal
   dari aplikasi pesan makanan */
.od-item-add { flex: 0 0 auto; }

.od-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--fe-ink);
  border-radius: 50%;
  background: var(--fx-card);
  color: var(--fe-ink);
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color 160ms var(--fx-ease), color 160ms var(--fx-ease);
}

.od-add:hover {
  background: var(--fe-ink);
  color: #fff;
}

.od-add svg { width: 18px; height: 18px; }

.od-empty {
  padding: 48px 0;
  color: var(--fx-muted);
  font-size: 15px;
  text-align: center;
}

/* --- Responsif ----------------------------------------------------
   Dua kolom mulai tablet, tiga di layar lebar. Lebar diatur lewat
   persen karena isotope memosisikan anaknya secara absolut dan tidak
   mengikuti grid CSS. */
@media (min-width: 768px) {
  .od-cell {
    width: 50%;
    padding-right: 24px;
  }
}

@media (min-width: 1200px) {
  .od-cell {
    width: 33.3333%;
  }
}

@media (max-width: 575px) {
  .od-item-img { width: 64px; height: 64px; }
  .od-item-name { font-size: 14.5px; }
  .od-bar { padding: 8px 0 6px; }

  /* Kotak kategori mengecil di layar sempit supaya satu layar tetap
     memuat empat kategori sekaligus. Cukup mengubah satu variabel —
     lebar tab, lebar kotak, dan tinggi kotak ikut menyesuaikan
     bersamaan, jadi perseginya tetap terjaga. */
  .od-cat {
    --od-tile: 66px;
    font-size: 11.5px;
  }

  .od-cat-box { border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .od-cat,
  .od-cat-box,
  .od-add {
    transition-duration: 1ms !important;
  }
}

/* ==================================================================
   21. KOREKSI TOMBOL KATEGORI & RUANG ATAS HALAMAN
   ================================================================== */

/* --- 1. Ruang kosong 220px di atas halaman -------------------------
   frontend/style.css berisi .menu_page, .about-us-page { padding-top: 220px }
   (didahului aturan 180px). Halaman ini memakai kelas menu_page, jadi
   ada 220px kosong sebelum bilah pencarian — sisa dari tata letak lama
   yang kepala halamannya menumpuk di atas isi. */
.menu_page.od-page {
  padding-top: 0;
  background-color: var(--fx-paper);
}

/* --- 2. Warna teks kategori ---------------------------------------
   Diberi spesifisitas berlebih dengan sengaja (0,3,0 dan 0,2,0).
   Elemen ini membawa kelas .ct-menu-category-item yang disasar banyak
   aturan lama di dua stylesheet berbeda, dan menyamakan spesifisitas
   saja ternyata tidak cukup dapat diandalkan di sini.

   Warnanya juga dinaikkan dari --fx-muted (4,9:1, sengaja redup untuk
   teks pendukung) ke --fx-body (8,2:1). Nama kategori adalah label
   yang harus terbaca sekilas, bukan keterangan tambahan. */
.od-cats .od-cat,
.od-cats .od-cat .od-cat-name {
  color: var(--fx-body);
}

.od-cats .od-cat:hover,
.od-cats .od-cat:hover .od-cat-name {
  color: var(--fx-ink);
}

/* Kategori terpilih: warna aksen gelap yang sudah dikoreksi kontras,
   bukan --primary-color mentah. */
.od-cats .od-cat.active,
.od-cats .od-cat.active .od-cat-name {
  color: var(--fe-ink);
  font-weight: 700;
}

/* --- 3. Bingkai dilunakkan ----------------------------------------
   Cincin abu-abu penuh di sekeliling setiap kotak membuat sederet
   kategori terlihat seperti kisi tabel. Diganti: kotak tak terpilih
   tanpa cincin sama sekali — hanya bidang warna lembut sebagai alas
   gambar — dan cincin hanya digambar pada yang sedang dipilih. */
.od-cats .od-cat .od-cat-box {
  border-radius: 18px;
  background: color-mix(in srgb, var(--fx-paper) 60%, #000 5%);
  box-shadow: none;
}

.od-cats .od-cat:hover .od-cat-box {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-ink) 25%, transparent);
}

.od-cats .od-cat.active .od-cat-box {
  box-shadow: inset 0 0 0 2px var(--fe-ink);
}

/* Sudut gambar mengikuti sudut kotaknya supaya tidak ada siku tajam
   yang menyembul di balik lengkungan. */
.od-cats .od-cat .od-cat-box img {
  border-radius: inherit;
}

@media (max-width: 575px) {
  .od-cats .od-cat .od-cat-box { border-radius: 16px; }
}

/* ==================================================================
   22. KOREKSI WARNA & PENANDA TAUTAN NAVBAR
   ------------------------------------------------------------------
   Gejala yang dilaporkan: navbar terlihat berantakan saat berada di
   halaman reservasi.

   Markup navbar sudah diperiksa dan IDENTIK di semua halaman (dirender
   ulang untuk beranda, about-us, reservasi, dan contact-us: keempatnya
   5.756 byte, tag seimbang, tiap kait muncul tepat sekali). Satu-satunya
   perbedaan adalah tautan mana yang membawa kelas .active. Jadi
   penyebabnya ada pada penataan .active dan :hover — bukan pada
   struktur halamannya.

   PENYEBAB
   frequent_changing/frontend/style.css memuat tiga deklarasi
   !important yang menguasai seluruh warna tautan navbar:

     baris   36  .navbar .menu-item a        color: var(--heading-color) !important
     baris  135  .navbar .menu-item a:hover  color: var(--primary-color) !important
     baris 2474  .main-header li > a.active  color: var(--primary-color) !important

   Karena !important, ketiganya mengalahkan seluruh aturan warna di
   berkas ini betapapun tinggi spesifisitasnya. Akibatnya warna yang
   sudah dihitung untuk kontras tidak pernah berlaku, dan yang tampil
   adalah --primary-color mentah:

     tunjuk  #ff1010 di atas latar tunjuk = 3,22:1   GAGAL (ambang 4,5:1)
     aktif   #ff1010 di atas latar pil    = 3,35:1   GAGAL

   Ditambah lagi, style.css baris 2459 menggambar garis bawah kedua:

     .main-header .menu-item a::before  { height:1px; margin-top:20px;
                                          background: var(--primary-color) }
     .main-header li > a.active::before,
     .main-header li > a:hover::before  { width: 100% }

   Bagian 3 berkas ini sudah punya penanda garis sendiri
   (.menu-item > a::after, 2px, --fe-ink, di dasar tautan). Jadi saat
   tautan ditunjuk, DUA garis muncul sekaligus dengan warna, tebal, dan
   posisi vertikal berbeda — 1px merah mentah di +20px dan 2px --fe-ink
   di dasar. Itulah tampilan berantakan yang dimaksud.

   Catatan: .menu-item.active > a::after di bagian 3 tidak pernah aktif,
   karena kelas .active dipasang pada elemen <a>, bukan pada <li>-nya.
   Jadi selama ini hanya garis milik template yang tergambar.

   CARA MEMPERBAIKI
   !important hanya bisa dikalahkan !important, jadi di sini terpaksa
   dipakai. Ini satu-satunya tempat di berkas ini yang memakainya untuk
   WARNA; dua belas !important lainnya semuanya penimpa gerak
   (transition-duration, animation-duration, animation-iteration-count)
   di dalam blok prefers-reduced-motion. Spesifisitas tetap dinaikkan
   supaya menang telak, bukan bergantung urutan muat saja:

     .navbar .menu-item a               (0,2,1)  <  (0,4,1) milik kita
     .navbar .menu-item a:hover         (0,3,1)  <  (0,5,1) milik kita
     .main-header li > a.active         (0,2,2)  <  (0,5,1) milik kita

   Untuk ::before tidak perlu !important — spesifisitas saja cukup:
     .main-header .menu-item a::before      (0,2,2)
     .main-header li > a.active::before     (0,2,3)
     .main-header li > a:hover::before      (0,2,3)  <  (0,3,2) milik kita
   ================================================================== */

/* --- 1. Warna tautan navigasi utama --- */
.main-header .navbar .menu-item a.fx-nav-link {
  color: var(--fx-body) !important;            /* 8,92:1 di atas kertas */
}

.main-header .navbar .menu-item a.fx-nav-link:hover {
  color: var(--fx-ink) !important;             /* 14,92:1 */
}

.main-header .navbar .menu-item a.fx-nav-link.active {
  color: var(--fe-ink) !important;             /* 6,70:1 di atas latar pil */
}

/* --- 2. Warna tautan di dalam dropdown bahasa & akun ---
   Ketiga aturan !important itu juga mengenai tautan submenu, karena
   semuanya .navbar .menu-item a. */
.main-header .navbar .submenu .menu-item a {
  color: var(--fx-body) !important;
}

.main-header .navbar .submenu .menu-item a:hover,
.main-header .navbar .submenu .menu-item a.active {
  color: var(--fe-ink) !important;
}

/* --- 3. Garis bawah ganda ---
   Garis milik template dimatikan seluruhnya di dalam navbar. Yang
   dipertahankan adalah penanda di bagian 3 berkas ini, yang warnanya
   sudah diuji kontras dan posisinya menempel di dasar tautan.
   content:none mencegah pseudo-element-nya dibuat sama sekali. */
.main-header .navbar .menu-item a::before {
  content: none;
}

/* Tautan navigasi utama memakai latar pil sebagai penanda halaman
   aktif, jadi garis di bawahnya justru menumpuk penanda. Penanda garis
   tetap dipakai di laci ponsel (.main-aside), yang berada di luar
   .main-header sehingga tidak tersentuh aturan ini. */
.main-header .navbar .menu-item a.fx-nav-link::after {
  content: none;
}

/* --- 4. Penanda aktif yang tidak pernah tergambar ---
   Bagian 3 menulis .menu-item.active > a::after, padahal .active ada
   pada <a>. Diperbaiki di sini supaya tautan submenu yang sedang aktif
   tetap punya penanda selain warna — warna saja tidak cukup bagi
   pengguna buta warna. */
.main-header .navbar .submenu .menu-item > a.active::after {
  transform: scaleX(1);
}