/* ======================================================================
   STOREFRONT SEEPOS — LAPISAN v3
   ======================================================================
   Arah: aplikasi bersih. Baris menu horizontal, kartu membulat, bayangan
   halus, bilah keranjang lengket di bawah pada ponsel.

   MENGAPA LAPISAN PENIMPA, BUKAN BERKAS PENGGANTI
   frontend-v2.css berisi 4.071 baris yang memegang STRUKTUR seluruh
   storefront: autentikasi, checkout, riwayat pesanan, footer, dan
   selusin halaman lain. Berhenti memuatnya berarti halaman-halaman itu
   kehilangan tata letaknya sekaligus, dan menulis ulang semuanya dalam
   satu langkah adalah cara tercepat untuk merusak apa yang sekarang
   bekerja.

   Yang dilakukan berkas ini justru lebih tuntas dengan risiko jauh
   lebih kecil: v2 memakai token 417 kali dan hanya punya 55 warna keras
   di luar blok :root — rasio 7,6 banding 1. Karena itu MENDEFINISIKAN
   ULANG TOKENNYA mengubah bahasa visual di SELURUH storefront sekaligus,
   termasuk halaman yang tidak disebut namanya di sini. Sisanya ditimpa
   terarah.

   TIGA TUAS YANG MENGUBAH SEGALANYA
     1. Huruf     --fx-serif dipetakan ke Karla. Seluruh judul yang
                  sebelumnya Playfair Display berubah jadi sans dalam
                  satu baris. Ini perubahan yang paling terasa.
     2. Permukaan kertas hangat #faf9f7 menjadi abu dingin #f4f5f7,
                  radius naik, bayangan dilembutkan.
     3. Irama     --fx-gap dari clamp(56px,9vw,132px) menjadi
                  clamp(28px,4vw,56px). Jarak seksi menyusut separuh dan
                  halaman berhenti terasa editorial.

   AKSEN TETAP MILIK TENANT
   --fe-primary tetap diturunkan dari --primary-color yang ditulis
   main.js dari palet White Label. Basis data skill UI menyarankan merah
   #DC2626 tetap; itu TIDAK dipakai karena akan mematikan pilihan warna
   per-tenant.

   KONTRAS — dihitung, angkanya diverifikasi skrip:
     ink   #101318  18,61:1 kartu · 17,06:1 paper
     body  #464c57   8,64:1 kartu ·  7,92:1 paper
     muted #656b76   5,36:1 kartu ·  4,91:1 paper
     star  #b45309   5,02:1 kartu ·  4,60:1 paper
     ok    #15803d   5,02:1 kartu ·  4,60:1 paper
     bad   #b42318   6,57:1 kartu ·  6,03:1 paper
   --fx-rule (#e5e7eb, 1,24:1) hanya pemisah dekoratif.
   Catatan: #6b7280 — nilai abu yang lazim dipakai — sengaja TIDAK
   dipakai karena hanya 4,43:1 di atas paper, gagal AA.
   ====================================================================== */

/* ---------------------------------------------------------------- 1. TOKEN */
:root {
  /* --- Permukaan: dingin, bukan hangat --- */
  --fx-paper: #f4f5f7;
  --fx-card: #ffffff;
  --fx-ink: #101318;
  --fx-body: #464c57;
  --fx-muted: #656b76;
  --fx-rule: #e5e7eb;

  /* --- Huruf: satu keluarga sans untuk semuanya --- */
  /* --fx-serif DIPETAKAN ke sans dengan sengaja. v2 memakai token ini
     untuk seluruh judulnya, jadi satu baris ini yang membalik nada
     halaman dari editorial menjadi aplikasi. */
  --fx-sans: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fx-serif: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- Irama: padat --- */
  --fx-gap: clamp(28px, 4vw, 56px);
  --fx-ease: cubic-bezier(.32, .72, 0, 1);

  /* --- Geometri --- */
  --fe-r: 16px;
  --fe-r-sm: 12px;
  --fe3-r-pill: 999px;

  /* --- Bayangan: halus, bertumpuk dua lapis --- */
  --fe-shadow: 0 1px 2px rgba(16, 19, 24, .05), 0 6px 16px -8px rgba(16, 19, 24, .14);
  --fe3-shadow-up: 0 -2px 14px -4px rgba(16, 19, 24, .16);

  /* --- Selaraskan sistem --fe-* dengan yang di atas --- */
  --fe-canvas: #ffffff;
  --fe-sunken: #f4f5f7;
  --fe-line: #e5e7eb;
  --fe-heading: #101318;
  --fe-body: #464c57;
  --fe-muted: #656b76;

  /* --- Semantik: warna status TIDAK memakai aksen merek --- */
  --fe3-ok: #15803d;
  --fe3-bad: #b42318;
  --fe3-star: #b45309;

  /* Tinggi bilah keranjang lengket, dipakai juga sebagai padding
     kompensasi di body supaya bilahnya tidak menutupi isi halaman. */
  --fe3-cartbar-h: 64px;

  /* Tinggi bilah tab bawah. Nilainya DISELARASKAN dengan angka yang
     sudah dipakai v2 untuk kompensasi padding body
     (padding-bottom: calc(62px + safe-area) di dalam max-width 991px),
     bukan dihitung ulang dari .fx-tab min-height 58px + border 1px = 59.
     Memakai 59 akan membuat bilah keranjang duduk 3px lebih rendah dari
     tepi atas bilah tab dan menutupi garisnya. Kalau tinggi bilah tab
     diubah, kedua tempat itu harus diubah bersamaan. */
  --fx-tabbar-h: 62px;
}

/* ---------------------------------------------------------- 2. DASAR */
body {
  background: var(--fx-paper);
  font-family: var(--fx-sans);
  -webkit-font-smoothing: antialiased;
}

/* Judul kehilangan gaya editorialnya: bobot naik, jarak huruf rapat.

   Kelas di bawah adalah kelas judul yang BENAR-BENAR ada di markup —
   diambil dari hasil audit pemilih, bukan dikira. Versi sebelumnya
   menyebut .fx-story-title, .fx-menu-title, dan .fx-about-title, dan
   tidak satu pun dari ketiganya pernah ada di view mana pun.

   Aturan "matikan italic" yang semula menyertai ini juga dibuang:
   sudah diperiksa, v2 tidak memakai font-style: italic sama sekali dan
   tidak ada satu <em> pun di seluruh view frontend. Aturan itu
   menyelesaikan masalah yang tidak ada. */
h1, h2, h3, h4, h5,
.fx-title,
.fx-info-title,
.fx-mods-title,
.fx-od-card-title,
.fx-cart-title,
.fx-related-title,
.fx-auth-title {
  font-family: var(--fx-sans);
  font-weight: 700;
  letter-spacing: -0.015em;
}

a { transition: color 130ms var(--fx-ease); }

/* Fokus papan tuntas terlihat di SELURUH storefront. Tanpa aturan ini
   penimpaan radius di bawah bisa memotong cincin fokus bawaan. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--fe-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------- 3. BILAH PROMO */
/* Dikendalikan halaman Setelan Storefront: teks, tautan, rentang
   tanggal. Diletakkan di atas navbar dan ikut bergulir keluar — bilah
   promo yang lengket memakan tinggi layar ponsel untuk informasi yang
   hanya perlu dibaca sekali. */
.fe3-promo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 16px;
  background: var(--fe-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}

.fe3-promo a,
a.fe3-promo {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fe3-promo a:hover,
a.fe3-promo:hover { color: #fff; }

.fe3-promo-i {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

/* ------------------------------- 4. KEPING KATEGORI (.od-cat) */
/* KOREKSI DESAIN.
   Bagian ini semula menulis keluarga kelas .fe3-chip / .fe3-row /
   .fe3-list / .fe3-add sebagai kosakata baru untuk daftar menu.
   Itu salah: menu-page.php SUDAH memakai .od-* dan v2 sudah punya 52
   aturan untuknya, jadi kelas .fe3-* itu tidak pernah dipakai satu
   markup pun — 150 baris CSS mati. Yang benar adalah menimpa kelas
   yang memang ada, dan itulah isi bagian ini sekarang.

   v2 menampilkan kategori sebagai kotak gambar 76px. Arah aplikasi
   yang dipilih memakai bentuk PIL, jadi kotaknya diperkecil menjadi
   gambar bulat 24px di dalam pil bersama namanya — bentuk pil didapat
   tanpa kehilangan pengenalan lewat gambar, yang untuk makanan lebih
   cepat dibaca daripada teks. */
.od-cats {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 10px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.od-cat {
  --od-tile: 24px;
  flex: 0 0 auto;
  /* v2 memakai --od-tile untuk lebar SELURUH keping, bukan hanya
     gambarnya. Karena v3 mengecilkan variabel itu menjadi 24px demi
     lingkaran gambar, lebar kepingnya harus dikembalikan ke isi. */
  width: auto;
  height: auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--fx-rule);
  border-radius: var(--fe3-r-pill);
  background: var(--fx-card);
  color: var(--fx-body);
  transition: border-color 130ms var(--fx-ease), background-color 130ms var(--fx-ease);
}

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

.od-cat-box {
  width: var(--od-tile);
  height: var(--od-tile);
  border-radius: 50%;
  overflow: hidden;
  background: var(--fx-paper);
}

.od-cat-name {
  /* `width: 100%` milik v2 dibuat untuk keping bersusun KOLOM. Di
     dalam pil mendatar, persentase itu diukur terhadap induk yang
     lebarnya sendiri berasal dari isi -- hasilnya nol. */
  width: auto;
  text-align: left;
  text-overflow: clip;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* Kategori aktif: isian pekat DAN bobot huruf, bukan warna saja (1.4.1).
   main.js yang memasang .active — tidak ada kait baru. */
.od-cat.active {
  background: var(--fe-ink);
  border-color: var(--fe-ink);
  color: #fff;
}

.od-cat.active .od-cat-name { font-weight: 700; }

/* Penanda garis bawah milik v2 dimatikan: pada bentuk pil berisian
   pekat, garis itu menggantung di luar bentuknya. */
.od-cat::after,
.od-cat.active::after { display: none; }

/* --------------------------------- 5. BARIS MENU (.od-item) */
/* v2 memberi baris latar transparan sehingga daftarnya menyatu dengan
   halaman. Arah aplikasi menuntut kartu yang terpisah: masing-masing
   punya permukaan sendiri, dan batasnya melunak jadi bayangan saat
   disentuh kursor. */
.od-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.od-item {
  padding: 12px;
  border: 1px solid var(--fx-rule);
  border-radius: var(--fe-r);
  background: var(--fx-card);
  transition: box-shadow 160ms var(--fx-ease), border-color 160ms var(--fx-ease);
}

.od-item:hover {
  border-color: transparent;
  box-shadow: var(--fe-shadow);
}

.od-item-img {
  width: 84px;
  height: 84px;
  border-radius: var(--fe-r-sm);
}

.od-item-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--fx-ink);
}

.od-item-name a { color: inherit; }

/* Harga memakai --fx-ink, bukan --fe-ink: aksen merek dipakai hemat
   untuk TINDAKAN, dan harga di setiap baris membuat seluruh kolom
   berwarna aksen sehingga tombolnya kehilangan penekanan. */
.od-item-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--fx-ink);
}

.od-item-rate-n { color: var(--fx-muted); }

/* Tombol tambah: isian pekat, bukan bergaris. Ini tindakan utama tiap
   baris dan harus menang atas segalanya di dalam baris itu. */
.od-add {
  border: 0;
  border-radius: var(--fe3-r-pill);
  background: var(--fe-ink);
  color: #fff;
  transition: background-color 130ms var(--fx-ease), transform 130ms var(--fx-ease);
}

.od-add:hover { background: var(--fe-ink-hover); color: #fff; }
.od-add:active { transform: scale(.94); }
.od-add svg { width: 18px; height: 18px; }

/* ------------------------------------------- 6. BILAH KERANJANG LENGKET */
/* Hanya di ponsel. Di layar lebar keranjang samping sudah selalu
   terlihat, jadi bilah ini akan jadi pengulangan. */
.fe3-cartbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--fe3-cartbar-h);
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--fx-card);
  border-top: 1px solid var(--fx-rule);
  box-shadow: var(--fe3-shadow-up);
}

.fe3-cartbar-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.fe3-cartbar-n {
  font-size: 12px;
  font-weight: 600;
  color: var(--fx-muted);
}

.fe3-cartbar-t {
  font-size: 16px;
  font-weight: 700;
  color: var(--fx-ink);
  font-variant-numeric: tabular-nums;
}

.fe3-cartbar-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border: 0;
  border-radius: var(--fe3-r-pill);
  background: var(--fe-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.fe3-cartbar-btn:hover { background: var(--fe-ink-hover); color: #fff; text-decoration: none; }

/* Tampil hanya ketika keranjang berisi. Kelas .has-items dipasang oleh
   satu baris tambahan di cartItemCalculate() pada order.js — fungsi itu
   satu-satunya tempat yang tahu panjang keranjang dan sudah dipanggil
   sesudah setiap perubahan, jadi tidak ada pemicu baru yang dibuat.
   Tambahan murni: tidak ada perilaku lama yang berubah. */
@media (max-width: 991.98px) {
  .fe3-cartbar.has-items { display: flex; }

  /* Kompensasi UNTUK BILAH TAB SUDAH DIKERJAKAN v2:
       @media (max-width: 991px) { body { padding-bottom: calc(62px + safe-area) } }
     Jadi di sini hanya ditambahkan selisihnya, yaitu tinggi bilah
     keranjang, dan hanya ketika bilah itu memang tampil. Menulis ulang
     aturan dasarnya akan MENGURANGI jarak yang sudah ada — versi
     pertama aturan ini memakai 59px dan justru memotong 3px milik v2. */
  body.fe3-cart-filled {
    padding-bottom: calc(var(--fx-tabbar-h) + var(--fe3-cartbar-h)
                         + env(safe-area-inset-bottom, 0px));
  }
}

/* ------------------------------- 6b. MENGURANGI TOMBOL KERANJANG */
/* MASALAHNYA: ada LIMA titik masuk keranjang yang terlihat pengguna —
   ikon di navbar, tombol mengambang, tab keranjang di bilah tab,
   tautan di footer, dan bilah lengket ini. Bilah lengket adalah yang
   kelima, dan saya yang menambahkannya.

   1. TOMBOL MENGAMBANG DISEMBUNYIKAN.
      Markupnya ada di website_layout.php dengan kelas .color-picker —
      nama sisa dari template asalnya; isinya sebenarnya ikon keranjang
      dan .cart-item-count-static. Ia menduplikasi ikon navbar di layar
      lebar dan tab keranjang di ponsel, mengambang menutupi isi
      halaman, dan tidak punya nama yang bisa dibaca pembaca layar.
      Disembunyikan lewat CSS, bukan dihapus dari markup, supaya bisa
      dibalik dengan menghapus satu aturan ini saja. */
.color-picker { display: none !important; }

/* 2. TAB KERANJANG DAN BILAH LENGKET SALING MENGGANTIKAN.
      Keduanya menempel di tepi bawah layar, jadi ketika keranjang
      berisi mereka bertumpuk. Bilah lengket yang menang karena ia
      menampilkan TOTAL dan jumlah item, bukan cuma ikon; tab keranjang
      tetap ada selama keranjang kosong, sehingga panel keranjang tidak
      pernah kehilangan jalan masuk.

      Tab navigasi lain (Beranda, Makanan, Akun) TIDAK disembunyikan —
      menyembunyikan seluruh tabbar akan mengambil navigasi hanya karena
      ada barang di keranjang. */
body.fe3-cart-filled .fx-tab.cart-trigger { display: none; }

/* Bilah lengket duduk DI ATAS bilah tab, tidak menutupinya. Tanpa ini
   keduanya memakai bottom:0 dan z-index 1040 yang sama, dan yang
   dirender belakangan menang — bilah tab jadi tidak bisa ditekan. */
@media (max-width: 991.98px) {
  .fe3-cartbar {
    bottom: calc(var(--fx-tabbar-h) + env(safe-area-inset-bottom, 0px));
    z-index: 1041;
    padding-bottom: 10px;
  }
}

/* ------------------------------------------------- 7. STATUS BUKA */
/* Diisi jam buka dari Setelan Storefront. Teksnya yang membawa arti,
   bukan warna titiknya (1.4.1). */
.fe3-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--fe3-r-pill);
  font-size: 12px;
  font-weight: 600;
}

.fe3-open-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.fe3-open-yes { background: rgba(21, 128, 61, .10); color: var(--fe3-ok); }
.fe3-open-yes .fe3-open-dot { background: var(--fe3-ok); }
.fe3-open-no { background: rgba(180, 35, 24, .09); color: var(--fe3-bad); }
.fe3-open-no .fe3-open-dot { background: var(--fe3-bad); }

/* -------------------------------------- 8. PENIMPAAN KOMPONEN v2 */
/* Kartu produk v2 tetap dipakai di beberapa halaman. Bentuknya
   diselaraskan supaya tidak ada dua bahasa visual berdampingan. */
.fx-card,
.product,
.cart-sidebar,
.fx-auth-form,
.fx-about-figure {
  border-radius: var(--fe-r);
}

.fx-card { box-shadow: none; border: 1px solid var(--fx-rule); }
.fx-card:hover { box-shadow: var(--fe-shadow); border-color: transparent; }

/* Tombol: pil, bukan persegi. */
.btn-custom,
.fx-btn-solid,
.fx-atc-btn,
.fx-auth-btn {
  border-radius: var(--fe3-r-pill);
  font-weight: 700;
  letter-spacing: 0;
}

/* Ruas isian: radius selaras dan tinggi sentuh terjaga. */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
  border-radius: var(--fe-r-sm);
  min-height: 44px;
}

textarea { min-height: 88px; }

/* Bintang penilaian: emas v2 (#c9a227) hanya 2,4:1 di atas putih.
   Diganti nilai yang lolos 4,5:1 supaya angka di sebelahnya terbaca. */
/* .od-item-rate memakai .rating > span > i.fa-star dari main.js.
   .fe3-row-star sebelumnya disebut di sini padahal kelasnya tidak
   pernah ada di markup mana pun. */
.fx-card-rating .fa-star,
.od-item-rate .fa-star { color: var(--fe3-star); }

/* Jarak seksi mengikuti irama padat yang baru. */
.fx-story, .fx-menu, .fx-gallery, .fx-map, .fx-about {
  padding-top: var(--fx-gap);
  padding-bottom: var(--fx-gap);
}

/* ------------------------------------------------- 9. GERAK */
@media (prefers-reduced-motion: reduce) {
  .od-cat,
  .od-item,
  .od-add,
  a { transition-duration: 1ms !important; }
  .od-add:active { transform: none; }
}

/* ------------------------------------------------- 10. CETAK */
@media print {
  .fe3-promo,
  .fe3-cartbar,
  .od-cats { display: none !important; }
}