/* ===== Jembatan ke Bootstrap 5 =====
   Bootstrap dimuat lebih dulu di header, berkas ini sesudahnya. Blok di bawah
   memetakan warna merek Sonokembang ke variabel Bootstrap, sehingga komponen
   Bootstrap (.btn-primary, .badge, .form-control, ...) langsung tampil dengan
   warna merek -- bukan biru bawaan -- tanpa perlu kelas tambahan di tiap view. */
:root {
  --bs-primary: #db6262;
  --bs-primary-rgb: 219, 98, 98;
  --bs-body-bg: #fffaf7;
  --bs-body-color: #3d3733;
  --bs-border-color: #e7e0d9;
  --bs-body-font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --bs-border-radius: .625rem;
}
.btn-primary {
  --bs-btn-bg: #db6262; --bs-btn-border-color: #db6262;
  --bs-btn-hover-bg: #db1f28; --bs-btn-hover-border-color: #db1f28;
  --bs-btn-active-bg: #c6040d; --bs-btn-active-border-color: #c6040d;
  --bs-btn-disabled-bg: #e58787; --bs-btn-disabled-border-color: #e58787;
}
.btn-outline-primary {
  --bs-btn-color: #c6040d; --bs-btn-border-color: #db6262;
  --bs-btn-hover-bg: #db6262; --bs-btn-hover-border-color: #db6262;
  --bs-btn-active-bg: #c6040d; --bs-btn-active-border-color: #c6040d;
}
.form-control:focus, .form-select:focus {
  border-color: #e58787;
  box-shadow: 0 0 0 .2rem rgba(219, 98, 98, .18);
}
.text-bg-primary { background-color: #db6262 !important; }
h1, h2, h3, .card-title { font-family: 'Playfair Display', Georgia, serif; }

/* ===== Design tokens (Sonokembang Catering design system) ===== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,600&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  --red-700: #a3040c; --red-600: #c6040d; --red-500: #db1f28;
  --rose-500: #db6262; --rose-400: #e58787; --rose-100: #fbeaea;
  --olive-800: #4f6a2a; --olive-700: #5f7d33; --olive-600: #6c8f3a; --olive-100: #eef3e4;
  --gold-600: #a97a3c; --gold-400: #c9a06a; --gold-100: #f4e9d8;
  --cream-050: #fffaf7; --cream-100: #fdf5ee; --cream-200: #f7ead9;
  --charcoal-900: #201c1a; --charcoal-700: #3d3733; --charcoal-500: #6b625c; --charcoal-300: #a49a92; --charcoal-100: #e7e0d9;
  --white: #ffffff;

  --color-brand-primary: var(--red-600);
  --color-brand-accent: var(--rose-500);
  --color-brand-accent-hover: var(--red-500);
  --color-brand-secondary: var(--olive-600);

  --surface-page: var(--cream-050);
  --surface-card: var(--white);
  --surface-sunken: var(--cream-200);

  --text-heading: var(--charcoal-900);
  --text-body: var(--charcoal-700);
  --text-muted: var(--charcoal-500);
  --text-on-accent: var(--white);
  --text-link: var(--red-600);
  --text-link-hover: var(--rose-500);

  --border-subtle: var(--charcoal-100);
  --border-strong: var(--charcoal-300);
  --border-accent: var(--rose-400);
  --focus-ring: var(--rose-500);

  --text-display-md: 600 30px/1.2 var(--font-display);
  --text-heading-lg: 700 24px/1.3 var(--font-body);
  --text-heading-md: 700 20px/1.35 var(--font-body);
  --text-heading-sm: 600 16px/1.4 var(--font-body);
  --text-body-lg: 400 18px/1.6 var(--font-body);
  --text-body-sm: 400 14px/1.5 var(--font-body);
  --text-label: 600 12px/1.3 var(--font-body);
  --text-caption: 500 12px/1.4 var(--font-body);
  --tracking-label: 0.08em;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { margin: 0; background: var(--cream-050); font-family: var(--font-body); }
a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }
button, input, textarea, select { font-family: inherit; }

/* ===== Atomic utility classes ===== */
.fx { display: flex; }
.col { flex-direction: column; }
.jb { justify-content: space-between; }
.jc { justify-content: center; }
.ac { align-items: center; }
.f1 { flex: 1; }
.tc { text-align: center; }
.m0 { margin: 0; }
.gap4 { gap: 4px; } .gap6 { gap: 6px; } .gap8 { gap: 8px; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; }
.fs11 { font-size: 11px; } .fs12 { font-size: 12px; } .fs13 { font-size: 13px; }
.fs14 { font-size: 14px; } .fs15 { font-size: 15px; } .fs16 { font-size: 16px; }
.fw6 { font-weight: 600; }

/* ===== Page shell ===== */
.site { max-width: 1200px; margin: 0 auto; background: #fff; min-height: 100vh; }
.flash { padding: 12px 16px; font: var(--text-body-sm); }
.flash-success { background: var(--olive-100); color: var(--olive-800); }
.flash-error { background: var(--rose-100); color: var(--red-700); }

/* ===== Nav ===== */
.topbar { padding: 14px 16px; border-bottom: 1px solid var(--charcoal-300); position: sticky; top: 0; background: #fff; z-index: 20; }
.logoimg { height: 28px; display: block; }
.navicon { width: 36px; height: 36px; border: 1px solid var(--charcoal-300); border-radius: 50%; font-size: 15px; position: relative; cursor: pointer; background: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; text-decoration: none; color: var(--charcoal-900); }
.navicon:hover { background: var(--charcoal-100); }
.badge-count { position: absolute; top: -6px; right: -6px; background: var(--color-brand-accent); color: #fff; font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 3px; display: flex; align-items: center; justify-content: center; }
.catchips { padding: 10px 16px; overflow-x: auto; border-bottom: 1px solid var(--charcoal-100); display: flex; gap: 8px; }
.chip { flex: none; font: var(--text-label); padding: 6px 12px; border: 1px solid var(--charcoal-300); border-radius: 999px; background: #fff; cursor: pointer; color: var(--charcoal-700); text-decoration: none; transition: background .15s ease, border-color .15s ease; }
.chip:hover, .chip.active { background: var(--rose-100); border-color: var(--color-brand-accent); color: var(--charcoal-900); }

.sidebar-overlay { position: fixed; inset: 0; background: rgba(32,28,26,.4); z-index: 40; display: none; }
#sidebar-toggle:checked ~ .sidebar-overlay { display: flex; }
.sidebar-panel { width: 240px; height: 100%; background: #fff; box-shadow: 2px 0 12px rgba(0,0,0,.12); padding: 16px; display: flex; flex-direction: column; gap: 4px; box-sizing: border-box; overflow-y: auto; }
.sidebar-title { font: var(--text-heading-sm); color: var(--charcoal-900); margin: 0 0 8px; }
.sidebar-sub { font: var(--text-label); color: var(--charcoal-500); margin: 10px 0 2px; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.sidebar-item { text-align: left; background: none; border: none; padding: 10px 6px; border-radius: 6px; font: var(--text-body-sm); color: var(--charcoal-900); cursor: pointer; text-decoration: none; display: block; }
.sidebar-item:hover { background: var(--charcoal-100); }

/* ===== Layout sections ===== */
.section { padding: 18px 16px; border-bottom: 8px solid var(--charcoal-100); }
.section:last-child { border-bottom: none; }
.sectitle { font: var(--text-heading-sm); color: var(--charcoal-900); text-transform: uppercase; letter-spacing: var(--tracking-label); margin: 0 0 12px; }
.ph { background: var(--charcoal-100); border: 1px dashed var(--charcoal-300); color: var(--charcoal-500); font: var(--text-caption); text-align: center; border-radius: 8px; }
.hero { height: 180px; }
.hero-title { font: var(--text-display-md); color: var(--charcoal-900); margin: 0 0 4px; }
.hero-sub { font: var(--text-body-sm); color: var(--charcoal-500); margin: 0 0 12px; }
.catgrid, .prodgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.catcard { border: 1px solid var(--charcoal-300); border-radius: 10px; overflow: hidden; cursor: pointer; background: #fff; text-decoration: none; display: block; transition: box-shadow .15s ease, border-color .15s ease; }
.catcard:hover { box-shadow: 0 6px 16px rgba(32,28,26,.1); border-color: var(--color-brand-accent); }
.catcard .ph { height: 80px; border-radius: 0; }
.catname { padding: 8px; font: var(--text-label); text-align: center; color: var(--charcoal-900); }
.prodcard { border: 1px solid var(--charcoal-300); border-radius: 10px; overflow: hidden; background: #fff; position: relative; transition: box-shadow .15s ease; }
.prodcard:hover { box-shadow: 0 6px 16px rgba(32,28,26,.1); }
.prodcard .ph { height: 110px; border-radius: 0; }
.prodcard img.prodphoto { width: 100%; height: 110px; object-fit: cover; display: block; }
.badge-bestseller { position: absolute; top: 6px; left: 6px; background: var(--color-brand-accent); color: #fff; font: 700 10px var(--font-body); padding: 2px 7px; border-radius: 999px; z-index: 1; }
.prodbody { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.prodname { font: var(--text-body-sm); font-weight: 600; color: var(--charcoal-900); }
.prodname a { color: inherit; text-decoration: none; }
.prodprice { font: var(--text-caption); color: var(--charcoal-500); }

.btn { border-radius: 999px; font: var(--text-label); padding: 10px 16px; border: 1px solid var(--charcoal-300); background: #fff; color: var(--charcoal-900); cursor: pointer; text-align: center; text-decoration: none; display: inline-block; transition: background .15s ease, border-color .15s ease; }
.btn:hover { background: var(--charcoal-100); }
.btn-primary { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: #fff; }
.btn-primary:hover { background: var(--color-brand-accent-hover); border-color: var(--color-brand-accent-hover); }
.btn-block { width: 100%; display: block; } .btn-sm { padding: 6px 10px; font-size: 11px; }
/* Varian outline Bootstrap mengatur warnanya lewat variabel --bs-btn-*, yang
   kalah oleh nilai langsung di .btn di atas. Ditulis ulang di sini supaya
   tombol sekunder (Edit/Hapus) tetap terbaca sebagai outline. */
.btn-outline-secondary { border-color: var(--charcoal-300); color: var(--charcoal-700); }
.btn-outline-secondary:hover { background: var(--charcoal-100); }
.btn-outline-primary { border-color: var(--color-brand-accent); color: var(--color-brand-accent); }
.btn-outline-primary:hover { background: var(--color-brand-accent); color: #fff; }
.btn-outline-danger { border-color: #db1f28; color: #c6040d; }
.btn-outline-danger:hover { background: #c6040d; border-color: #c6040d; color: #fff; }
.formfield { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.formfield label { font: var(--text-caption); color: var(--charcoal-700); }
.forminput { border: 1px solid var(--charcoal-300); border-radius: 8px; padding: 10px 12px; font: var(--text-body-sm); color: var(--charcoal-900); background: #fff; width: 100%; box-sizing: border-box; }
.forminput:focus { outline: none; border-color: var(--color-brand-accent); }
.linktext { font: var(--text-body-sm); color: var(--text-link); text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; }
.linktext:hover { color: var(--text-link-hover); }
.backrow { padding: 14px 16px; border-bottom: 1px solid var(--charcoal-300); display: flex; align-items: center; gap: 8px; }
.backbtn { cursor: pointer; font-size: 18px; color: var(--charcoal-900); background: none; border: none; text-decoration: none; }
.backbtn:hover { opacity: .55; }
.screentitle { font: var(--text-heading-md); color: var(--charcoal-900); margin: 0; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepbtn { width: 30px; height: 30px; border: 1px solid var(--charcoal-300); border-radius: 6px; background: #fff; cursor: pointer; font-size: 16px; }
.stepbtn:hover { background: var(--charcoal-100); }
.radiorow { display: flex; gap: 8px; flex-wrap: wrap; }
.radiopill { border: 1px solid var(--charcoal-300); border-radius: 999px; padding: 8px 14px; font: var(--text-caption); cursor: pointer; background: #fff; text-decoration: none; display: inline-block; color: var(--charcoal-900); }
.radiopill:hover { border-color: var(--color-brand-accent); }
.radiopill.selected { background: var(--charcoal-900); color: #fff; border-color: var(--charcoal-900); }
.cartitem { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--charcoal-100); }
.cartitem .ph { width: 56px; height: 56px; flex: none; }
.notice { background: var(--rose-100); border: 1px solid var(--border-accent); border-radius: 8px; padding: 12px; font: var(--text-body-sm); color: var(--charcoal-900); }
.summary-row { display: flex; justify-content: space-between; font: var(--text-body-sm); color: var(--charcoal-700); padding: 4px 0; }
.summary-total { display: flex; justify-content: space-between; font: var(--text-heading-sm); color: var(--charcoal-900); padding-top: 8px; border-top: 1px solid var(--charcoal-300); margin-top: 6px; }
/* Varian label-nilai: dipakai di detail pesanan, tempat nilainya bisa panjang
   (alamat, catatan) sehingga harus boleh turun baris tanpa menggencet label. */
.summary-row.kv > span:first-child { flex: 0 0 38%; color: var(--charcoal-500); }
.summary-row.kv > span:last-child { flex: 1; text-align: right; word-break: break-word; }
.tabs { display: flex; padding: 10px 16px; overflow-x: auto; border-bottom: 1px solid var(--charcoal-300); gap: 4px; }
.tabbtn { flex: none; font: var(--text-label); padding: 8px 12px; border: none; border-bottom: 2px solid transparent; background: none; cursor: pointer; color: var(--charcoal-500); text-decoration: none; }
.tabbtn:hover { color: var(--charcoal-900); }
.tabbtn.active { color: var(--charcoal-900); border-bottom-color: var(--color-brand-accent); font-weight: 700; }
.progressbar { display: flex; justify-content: space-between; position: relative; padding: 20px 4px; }
.progressbar::before { content: ''; position: absolute; top: 30px; left: 20px; right: 20px; height: 2px; background: var(--charcoal-300); }
.pstep { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; z-index: 1; }
.pdot { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--charcoal-300); }
.pstep.done .pdot { background: var(--olive-600); border-color: var(--olive-600); }
.pstep.current .pdot { background: var(--color-brand-accent); border-color: var(--color-brand-accent); }
.plabel { font: var(--text-caption); text-align: center; color: var(--charcoal-500); font-size: 10px; }
.pstep.done .plabel, .pstep.current .plabel { color: var(--charcoal-900); font-weight: 600; }
.successicon { width: 64px; height: 64px; border-radius: 50%; background: var(--olive-100); border: 2px solid var(--olive-600); color: var(--olive-600); font-size: 32px; margin: 24px auto 12px; display: flex; align-items: center; justify-content: center; }
/* Versi ringkas .progressbar untuk dipakai di dalam kartu riwayat pesanan. */
.progressbar-sm { padding: 14px 2px 2px; }
.progressbar-sm::before { top: 21px; left: 16px; right: 16px; }
.progressbar-sm .pdot { width: 14px; height: 14px; }

/* Tabel admin. Dibungkus .tablewrap agar menggulir sendiri di layar sempit,
   bukan membuat seluruh halaman menggulir ke samping. */
.tablewrap { overflow-x: auto; }
.admintable { width: 100%; border-collapse: collapse; }
.admintable th { text-align: left; font: var(--text-label); color: var(--charcoal-500); text-transform: uppercase; letter-spacing: var(--tracking-label); padding: 8px 10px; border-bottom: 1px solid var(--charcoal-300); white-space: nowrap; }
.admintable td { padding: 10px; border-bottom: 1px solid var(--charcoal-100); vertical-align: top; }
.admintable tr:hover td { background: var(--charcoal-100); }

/* Kartu varian di halaman produk: satu kartu per pilihan, masing-masing
   menampilkan isi paketnya sendiri agar bisa dibandingkan berdampingan.
   auto-fit membuatnya menumpuk sendiri di layar sempit. */
.variantgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.variantcard { border: 1px solid var(--charcoal-300); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.variantcard:hover { border-color: var(--color-brand-accent); box-shadow: 0 4px 12px rgba(32,28,26,.08); }
.variantcard.selected { border-color: var(--color-brand-accent); box-shadow: inset 0 0 0 1px var(--color-brand-accent); }
.variantcheck { width: 20px; height: 20px; border-radius: 50%; background: var(--color-brand-accent); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.variantitems { margin: 0; padding-left: 16px; font: var(--text-caption); color: var(--charcoal-500); }
.variantitems li { margin-bottom: 2px; }

/* Baris isi paket di halaman produk. Komponen yang bisa ditukar dibedakan
   dengan garis tepi supaya jelas mana yang bisa disentuh pelanggan. */
.complist-item { padding: 6px 10px; border-radius: 8px; background: var(--charcoal-100); color: var(--charcoal-700); }
.complist-item:has(select) { background: #fff; border: 1px solid var(--color-brand-accent); }
.complist-item select { margin-top: 4px; }

.statuspill { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 700 11px var(--font-body); }
.statuspill.wait { background: var(--gold-100); color: var(--gold-600); }
.statuspill.active { background: var(--rose-100); color: var(--color-brand-accent); }
.statuspill.done { background: var(--olive-100); color: var(--olive-600); }
.statuspill.dead { background: var(--charcoal-100); color: var(--charcoal-500); }

.orderrow { border: 1px solid var(--charcoal-300); border-radius: 10px; padding: 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.orderrow:hover { box-shadow: 0 4px 12px rgba(32,28,26,.08); }
.selectlike { border: 1px solid var(--charcoal-300); border-radius: 8px; padding: 10px 12px; font: var(--text-body-sm); background: #fff; display: flex; justify-content: space-between; align-items: center; color: var(--charcoal-900); }
.togglewrap { display: flex; justify-content: space-between; align-items: center; }
.toggle { width: 40px; height: 22px; border-radius: 11px; background: var(--charcoal-300); position: relative; cursor: pointer; border: none; padding: 0; }
.toggle.on { background: var(--color-brand-accent); }
.toggle-dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; transition: left .18s ease; }
.toggle.on .toggle-dot { left: 20px; }
.pointsbadge { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 700 11px var(--font-body); background: var(--gold-100); color: var(--gold-600); }
.textarea { min-height: 80px; resize: vertical; width: 100%; box-sizing: border-box; }
.checkboxrow { display: flex; align-items: center; gap: 8px; font: var(--text-body-sm); color: var(--charcoal-700); }
.checkoutgrid { display: flex; flex-direction: column; }
.admin-imgslot { width: 140px; height: 140px; }
.tierbadge { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 700 10px var(--font-body); background: var(--charcoal-100); color: var(--charcoal-700); }
.shiprow { border: 1px solid var(--charcoal-300); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.shipcostrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.shipcostrow .forminput { width: 120px; }
.custtable { width: 100%; border-collapse: collapse; font: var(--text-body-sm); }
.custtable th { text-align: left; font: var(--text-label); color: var(--charcoal-500); text-transform: uppercase; letter-spacing: var(--tracking-label); padding: 8px 10px; border-bottom: 1px solid var(--charcoal-300); white-space: nowrap; }
.custtable td { padding: 10px; border-bottom: 1px solid var(--charcoal-100); color: var(--charcoal-900); white-space: nowrap; }
.custtable tr:hover td { background: var(--charcoal-100); }
.custtable-wrap { overflow-x: auto; }
.idlink { color: var(--text-link); text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; font: inherit; }
.imgslot { border: 1px dashed var(--charcoal-300); border-radius: 10px; background: var(--charcoal-100); color: var(--charcoal-500); font: var(--text-caption); display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; overflow: hidden; position: relative; }
.imgslot img { width: 100%; height: 100%; object-fit: cover; }
.imgslot input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ===== Desktop breakpoint ===== */
@media (min-width: 900px) {
  .catgrid, .prodgrid { grid-template-columns: repeat(4, 1fr); }
  .section { padding: 28px 40px; }
  .topbar { padding: 20px 40px; }
  .catchips { padding: 12px 40px; }
  .hero { height: 320px; }
  .backrow { padding: 16px 40px; }
  .checkoutgrid { display: grid; grid-template-columns: 1fr 360px; gap: 0; align-items: start; }
  .checkout-aside { border-left: 1px solid var(--charcoal-100); }
}