/* ============================================================
   SAJIAN — User-facing theme (waffle palette)
   Loaded AFTER style.css to override the default light theme.
   Scope: index, about, katalog, contact, user/*, auth/*
   ============================================================ */

:root{
  /* Primary palette */
  --chocolate:#B78F64;
  --waffle:#382615;
  --honey:#D8D8D0;
  --syrup:#713E18;
  --maple:#F4C07D;

  /* Variations */
  --chocolate-light:#C9A882;
  --chocolate-deep:#8B6F4E;
  --waffle-soft:#4A3420;
  --honey-warm:#E5DCC4;
  --syrup-light:#9B5428;

  /* UI support */
  --bg-cream:#FAF8F4;
  --line:rgba(244,192,125,.18);
  --text:#2A1810;
  --text-soft:#5A4838;

  /* Remap legacy vars used by inline styles in PHP pages.
     This keeps old code readable on the new dark theme without
     touching every page. Admin/driver don't load this file, so
     they keep the original light-theme values from style.css. */
  --cream:#D8D8D0;                /* honey */
  --cream-2:rgba(56,38,21,.55);   /* glass waffle */
  --ink:#D8D8D0;                  /* honey (was very dark) */
  --ink-soft:rgba(216,216,208,.78);
  --terra:#F4C07D;                /* maple */
  --terra-deep:#F4C07D;
  --mustard:#F4C07D;
  --olive:#C4DD92;
  --rose:#E8A38B;
}

/* ============================================================
   BASE
   ============================================================ */
body{
  background-color:var(--syrup);
  background-image:
    radial-gradient(rgba(244,192,125,.07) 1px, transparent 1px),
    radial-gradient(circle at 15% 10%, rgba(244,192,125,.10), transparent 55%),
    radial-gradient(circle at 85% 90%, rgba(183,143,100,.10), transparent 55%);
  background-size:24px 24px, 100% 100%, 100% 100%;
  background-attachment:fixed;
  color:var(--honey);

  /* Sticky-footer layout: body grows to fill viewport, footer pinned to bottom */
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
nav{ flex-shrink:0; }
footer{
  flex-shrink:0;
  margin-top:auto;
}

::selection{ background:var(--maple); color:var(--waffle); }

/* ============================================================
   NAVBAR
   ============================================================ */
nav{
  background:rgba(56,38,21,.78);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(244,192,125,.25);
}
.logo{
  background:linear-gradient(135deg,var(--maple),var(--honey));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.logo::before{
  color:var(--maple);
  -webkit-text-fill-color:var(--maple);
}
.nav-links a{ color:var(--honey); }
.nav-links a:hover{ color:var(--maple); }
.nav-links a.active{ color:var(--maple); }
.nav-links a::after{
  background:linear-gradient(90deg,var(--maple),var(--honey));
}

.nav-btn{
  background:rgba(244,192,125,.10);
  color:var(--honey);
  border:1.5px solid rgba(244,192,125,.45);
}
.nav-btn:hover{
  background:var(--maple);
  color:var(--waffle);
  border-color:var(--maple);
}
/* Inline register button override */
.nav-right a[style*="background:var(--ink)"]{
  background:linear-gradient(135deg,var(--maple),var(--honey)) !important;
  color:var(--waffle) !important;
  border-color:transparent !important;
}

.cart-btn{
  background:linear-gradient(135deg,var(--maple),var(--honey));
  color:var(--waffle);
  box-shadow:0 4px 16px rgba(244,192,125,.3);
}
.cart-btn:hover{
  background:linear-gradient(135deg,var(--maple),var(--honey));
  color:var(--waffle);
  box-shadow:0 10px 28px rgba(244,192,125,.5);
}
.cart-count{
  background:var(--waffle);
  color:var(--maple);
}
.user-badge{
  background:rgba(244,192,125,.14);
  border:1px solid rgba(244,192,125,.3);
  color:var(--honey);
}

/* Settings (cog) button — original is inline-styled */
.nav-right a[title="Pengaturan"]{
  background:linear-gradient(135deg,var(--maple),var(--honey)) !important;
  color:var(--waffle) !important;
  border-color:rgba(255,255,255,.5) !important;
}

/* ============================================================
   SECTION LABELS & TITLES
   ============================================================ */
.section-label{
  display:inline-flex;
  background:rgba(244,192,125,.14);
  border:1px solid rgba(244,192,125,.3);
  color:var(--maple);
  padding:6px 14px;
  border-radius:999px;
}
.section-label::before{ background:var(--maple); }
.section-title{ color:var(--honey); }
.section-title em{
  background:linear-gradient(135deg,var(--maple),var(--honey));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; overflow:hidden; }
.hero::before{
  content:"";
  position:absolute;
  top:-180px; right:-150px;
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(244,192,125,.18), transparent 70%);
  pointer-events:none;
  z-index:0;
}
.hero > *{ position:relative; z-index:1; }

.hero-tag{
  display:inline-flex;
  background:rgba(244,192,125,.14);
  border:1px solid rgba(244,192,125,.3);
  color:var(--maple);
  padding:8px 16px;
  border-radius:999px;
}
.hero-tag::before{ display:none; }

.hero h1{ color:var(--honey); }
.hero h1 em{
  background:linear-gradient(135deg,var(--maple),var(--honey));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  font-weight:300;
}
.hero h1 .underline::after{
  background:linear-gradient(135deg,var(--maple),var(--honey));
  opacity:.4;
  height:16px;
}
.hero p{ color:rgba(216,216,208,.85); }

/* Hero stat cards */
.hero-stat{
  background:linear-gradient(135deg, rgba(244,192,125,.95), rgba(216,216,208,.95));
  border:1px solid rgba(255,255,255,.6);
  color:var(--waffle);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.hero-stat strong{ color:var(--waffle); }

/* Hero plate gradients tweaked for warm palette */
.plate-1{
  background:radial-gradient(circle at 30% 30%, var(--maple), var(--syrup) 75%);
  box-shadow:0 30px 80px rgba(0,0,0,.4), 0 0 60px rgba(244,192,125,.2);
}
.plate-2{
  background:radial-gradient(circle at 30% 30%, var(--honey), var(--chocolate) 75%);
  box-shadow:0 30px 80px rgba(0,0,0,.4), 0 0 40px rgba(216,216,208,.15);
}
.plate-3{
  background:radial-gradient(circle at 30% 30%, var(--chocolate-light), var(--syrup-light) 75%);
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary{
  background:linear-gradient(135deg,var(--maple),var(--honey));
  color:var(--waffle);
  box-shadow:0 6px 20px rgba(244,192,125,.3);
}
.btn-primary:hover{
  background:linear-gradient(135deg,var(--maple),var(--honey));
  color:var(--waffle);
  box-shadow:0 10px 30px rgba(244,192,125,.5);
}
.btn-secondary{
  background:rgba(244,192,125,.12);
  color:var(--honey);
  border:1.5px solid var(--maple);
}
.btn-secondary:hover{
  background:var(--maple);
  color:var(--waffle);
}
.btn-dark{
  background:var(--waffle);
  color:var(--honey);
  border:1px solid rgba(244,192,125,.3);
}
.btn-dark:hover{
  background:var(--waffle-soft);
  color:var(--maple);
}

/* ============================================================
   MENU CARDS (glass — full bloom on hover)
   ============================================================ */
.menu-card{
  background:rgba(56,38,21,.55);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(244,192,125,.22);
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease,
    -webkit-backdrop-filter .35s ease,
    backdrop-filter .35s ease;
}

/* Frosted tint overlay (fades in on hover) */
.menu-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    135deg,
    rgba(244,192,125,.22) 0%,
    rgba(216,216,208,.10) 35%,
    transparent 65%
  );
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
  border-radius:inherit;
}

/* Light sweep — runs across the card on hover */
.menu-card::after{
  content:"";
  position:absolute;
  top:0;
  left:-110%;
  width:60%;
  height:100%;
  background:linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,255,255,.06) 40%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.06) 60%,
    transparent 100%
  );
  pointer-events:none;
  transition:left .8s cubic-bezier(.2,.8,.2,1);
  border-radius:inherit;
  z-index:1;
}

.menu-card:hover{
  background:rgba(244,192,125,.08);
  -webkit-backdrop-filter:blur(28px) saturate(170%);
  backdrop-filter:blur(28px) saturate(170%);
  border-color:rgba(244,192,125,.6);
  box-shadow:
    0 30px 70px rgba(0,0,0,.45),
    0 0 0 1px rgba(244,192,125,.35),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 50px rgba(244,192,125,.18);
}
.menu-card:hover::before{ opacity:1; }
.menu-card:hover::after{ left:130%; }

.badge-rank{
  background:linear-gradient(135deg,var(--maple),var(--honey));
  color:var(--waffle);
  font-weight:700;
  box-shadow:0 6px 20px rgba(244,192,125,.4);
}
.badge-best{
  background:linear-gradient(135deg,var(--maple),var(--honey));
  color:var(--waffle);
  box-shadow:0 4px 16px rgba(244,192,125,.4);
}

.menu-img.main{    background:linear-gradient(135deg,var(--chocolate),var(--maple)); }
.menu-img.dessert{ background:linear-gradient(135deg,var(--maple),var(--honey)); }
.menu-img.drink{   background:linear-gradient(135deg,var(--syrup-light),var(--chocolate)); }
.menu-img::after{
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), transparent 65%);
}

.menu-body h4{ color:var(--honey); }
.menu-body .desc{ color:rgba(216,216,208,.72); }
.menu-type{ color:var(--maple); }

.price{
  background:linear-gradient(135deg,var(--maple),var(--honey));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  font-weight:700;
}

.add-btn{
  background:linear-gradient(135deg,var(--maple),var(--honey));
  color:var(--waffle);
  box-shadow:0 6px 20px rgba(244,192,125,.3);
}
.add-btn:hover{
  background:linear-gradient(135deg,var(--maple),var(--honey));
  color:var(--waffle);
  box-shadow:0 10px 30px rgba(244,192,125,.5);
  transform:rotate(90deg) scale(1.05);
}

/* ============================================================
   FILTERS
   ============================================================ */
.filter-btn{
  background:rgba(244,192,125,.08);
  color:var(--honey);
  border:1px solid rgba(244,192,125,.25);
}
.filter-btn:hover{
  border-color:var(--maple);
  color:var(--maple);
}
.filter-btn.active{
  background:linear-gradient(135deg,var(--maple),var(--honey));
  color:var(--waffle);
  border-color:var(--maple);
}

/* ============================================================
   FORMS (auth, contact, checkout, settings)
   ============================================================ */
.form-card{
  background:rgba(56,38,21,.6);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  border:1px solid rgba(244,192,125,.3);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  color:var(--honey);
}
.form-card h2{ color:var(--honey); }
.form-card h2 em{
  background:linear-gradient(135deg,var(--maple),var(--honey));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.form-card .sub{ color:rgba(216,216,208,.75); }

.form-row label{ color:var(--maple); }
.form-row input,
.form-row textarea,
.form-row select{
  background:rgba(56,38,21,.55);
  border:1px solid rgba(244,192,125,.28);
  color:var(--honey);
}
.form-row input::placeholder,
.form-row textarea::placeholder{ color:rgba(216,216,208,.4); }
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus{
  border-color:var(--maple);
  box-shadow:0 0 0 3px rgba(244,192,125,.18);
}
.form-row select option{ background:var(--waffle); color:var(--honey); }
.form-link{ color:rgba(216,216,208,.75); }
.form-link a{ color:var(--maple); }

/* Demo account hint card on login.php */
.form-card div[style*="background:var(--cream)"]{
  background:rgba(244,192,125,.08) !important;
  color:rgba(216,216,208,.78) !important;
  border:1px dashed rgba(244,192,125,.3) !important;
}
.form-card div[style*="background:var(--cream)"] code{
  background:rgba(244,192,125,.15);
  color:var(--maple);
  padding:2px 6px;
  border-radius:4px;
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert{ border-radius:12px; }
.alert-success{
  background:rgba(124,179,66,.16);
  color:#C4DD92;
  border:1px solid rgba(124,179,66,.4);
}
.alert-error{
  background:rgba(196,71,28,.18);
  color:#F0B7A3;
  border:1px solid rgba(196,71,28,.45);
}
.alert-info{
  background:rgba(244,192,125,.15);
  color:var(--maple);
  border:1px solid rgba(244,192,125,.4);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:linear-gradient(135deg, var(--waffle), var(--syrup));
  color:var(--honey);
  border-top:1px solid rgba(244,192,125,.22);
}
footer .logo{
  background:linear-gradient(135deg,var(--maple),var(--honey));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
footer .logo::before{
  color:var(--maple);
  -webkit-text-fill-color:var(--maple);
}
footer p{ color:rgba(216,216,208,.78); }
.foot-col h5{ color:var(--maple); }
.foot-col a{ color:rgba(216,216,208,.72); }
.foot-col a:hover{ color:var(--maple); }
.footer-grid{ border-bottom-color:rgba(244,192,125,.15); }
.footer-bottom{ color:rgba(216,216,208,.58); }

/* ============================================================
   TABLES (orders list etc.)
   ============================================================ */
.table-wrap{
  background:rgba(56,38,21,.55);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  border:1px solid rgba(244,192,125,.22);
}
table th{
  background:rgba(56,38,21,.85);
  color:var(--maple);
  border-bottom:1px solid rgba(244,192,125,.3);
}
table td{
  color:var(--honey);
  border-bottom:1px solid rgba(244,192,125,.12);
}
table tr:hover{ background:rgba(244,192,125,.05); }

/* Status badges (dark) */
.status-pending   { background:rgba(244,192,125,.18); color:var(--maple); }
.status-dibayar   { background:rgba(110,165,210,.18); color:#9BC1DC; }
.status-diproses  { background:rgba(216,147,39,.20); color:#F0C57A; }
.status-dikirim   { background:rgba(155,121,210,.20); color:#C0A7DC; }
.status-selesai   { background:rgba(124,179,66,.18); color:#C4DD92; }
.status-dibatalkan{ background:rgba(196,71,28,.18); color:#F0B7A3; }

/* ============================================================
   CART PAGE
   ============================================================ */
.cart-items,
.cart-summary{
  background:rgba(56,38,21,.55);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  border:1px solid rgba(244,192,125,.22);
  color:var(--honey);
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.cart-item{ border-bottom-color:rgba(244,192,125,.13); }
.cart-item-info h4{ color:var(--honey); }
.cart-item-info .ci-price{ color:var(--maple); }
.cart-item-img{ background:linear-gradient(135deg, var(--chocolate), var(--maple)); }
.cart-item-img.has-photo{ background:rgba(56,38,21,.4); }

.qty-btn{
  background:rgba(244,192,125,.12);
  border:1px solid rgba(244,192,125,.3);
  color:var(--honey);
}
.qty-btn:hover{
  background:var(--maple);
  color:var(--waffle);
  border-color:var(--maple);
}
.qty-val{ color:var(--honey); }

.cart-summary h3{ color:var(--honey); }
.summary-row{ color:rgba(216,216,208,.85); }
.summary-total{ border-top:2px solid var(--maple); color:var(--honey); }
.summary-total .amt{
  background:linear-gradient(135deg,var(--maple),var(--honey));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ============================================================
   STAR RATING — glass chips. Background gelap → terang dari
   posisi 1 ke 5. Warna bintang KONSTAN (maple gold) di semua
   chip, drop-shadow tipis biar tetap visible kalau bg-nya terang.
   ============================================================ */
.star-rating{
  display:flex;
  gap:10px;
  margin:6px 0;
  user-select:none;
}
.star-rating .star{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:14px;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  color:var(--maple);                         /* warna bintang konstan */
  text-shadow:0 1px 2px rgba(56,38,21,.55);   /* outline tipis biar pop di bg terang */
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(244,192,125,.22);
  transition:
    transform .2s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
}

/* Base state — semua chip pakai bg gelap waffle yang sama.
   Brightness gradient muncul lewat border + glow, bukan bg. */
.star-rating .star{
  background:rgba(56,38,21,.65);
}
.star-rating .star:nth-child(1){
  border-color:rgba(244,192,125,.14);
}
.star-rating .star:nth-child(2){
  border-color:rgba(244,192,125,.22);
}
.star-rating .star:nth-child(3){
  border-color:rgba(255,210,110,.35);
}
.star-rating .star:nth-child(4){
  border-color:rgba(255,210,110,.55);
  box-shadow:inset 0 0 0 1px rgba(255,210,110,.08);
}
.star-rating .star:nth-child(5){
  border-color:rgba(255,225,150,.80);
  box-shadow:
    inset 0 0 0 1px rgba(255,210,110,.18),
    0 4px 16px rgba(255,210,110,.18);
}

/* Active state — chip menyala saat dipilih / di-hover.
   BG kuning lebih intens, warna bintang TETAP maple. */
.star-rating .star.active{
  border-color:var(--maple);
  transform:translateY(-2px);
  box-shadow:
    0 6px 20px rgba(255,210,110,.40),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.star-rating .star.active:nth-child(1){ background:rgba(255,210,110,.40); }
.star-rating .star.active:nth-child(2){ background:rgba(255,210,110,.55); }
.star-rating .star.active:nth-child(3){
  background:linear-gradient(135deg, rgba(255,210,110,.78), rgba(255,230,160,.55));
}
.star-rating .star.active:nth-child(4){
  background:linear-gradient(135deg, rgba(255,210,110,.92), rgba(255,235,170,.70));
}
.star-rating .star.active:nth-child(5){
  background:linear-gradient(135deg, #FFD27A, #FFE6A8);
  box-shadow:
    0 12px 34px rgba(255,210,110,.65),
    inset 0 1px 0 rgba(255,255,255,.45);
}

/* Hover lift */
.star-rating .star:hover{
  transform:translateY(-2px);
  border-color:var(--maple);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state{ color:rgba(216,216,208,.7); }
.empty-state h3{ color:var(--honey); }
.empty-state .icon{ opacity:.55; }

/* ============================================================
   GENERIC INLINE STYLES — patch any leftover var(--cream*) etc.
   ============================================================ */
[style*="background:var(--cream"]:not(.form-card div){
  background:rgba(56,38,21,.45) !important;
  color:var(--honey);
}

/* ============================================================
   SCROLLBAR (subtle warm)
   ============================================================ */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:rgba(56,38,21,.4); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--maple), var(--chocolate));
  border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{ background:var(--maple); }