/* site.css - situs pelanggan bergaya aplikasi pesan makanan. */
body { padding-bottom: 0; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--maroon); border-bottom: 3px solid var(--saffron); }
.site-header .wrap { display: flex; align-items: center; gap: 1rem; padding-block: .6rem; }
.logo { font-family: var(--font-script); font-size: 1.9rem; color: var(--saffron); text-decoration: none; line-height: 1; margin-right: auto; }
.nav { display: flex; gap: .2rem; }
.nav a { color: #f5e6bd; text-decoration: none; padding: .45rem .8rem; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.nav a:hover { background: var(--maroon-2); }
.nav a[aria-current="page"] { background: var(--saffron); color: var(--ink); }
.cart-link { display: inline-flex; align-items: center; gap: .45rem; background: var(--red); color: #fff; text-decoration: none; padding: .5rem 1rem; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.cart-link:hover { background: var(--red-dark); }
.icon { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.badge-count { min-width: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: var(--saffron); color: var(--ink); text-align: center; font-size: .8rem; font-weight: 700; }

/* Navigasi bawah (ponsel) */
.bottom-nav { display: none; }
@media (max-width: 760px) {
  .nav { display: none; }
  .cart-label { display: none; }
  body { padding-bottom: 4.2rem; }
  .bottom-nav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .bottom-nav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem .2rem; color: var(--muted); text-decoration: none; font-size: .72rem; font-weight: 600; }
  .bottom-nav a[aria-current="page"] { color: var(--red); }
  .bottom-nav .badge-count { position: absolute; top: .2rem; left: 55%; }
  .cart-link { display: none; }
}

/* Hero */
.hero { background: radial-gradient(900px 420px at 90% -10%, #7a1a2e 0%, transparent 60%), var(--maroon); color: #fff; padding-block: 2.5rem 3rem; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; }
.hero h1 { color: #fff; margin-bottom: .2em; }
.hero h1 span { color: var(--saffron); }
.hero .lead { font-size: 1.15rem; max-width: 38ch; color: #f1dcc0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.open-badge { display: inline-block; margin: 0 0 1rem; padding: .25rem .8rem; border-radius: 999px; background: var(--maroon-2); border: 1px solid var(--saffron); font-weight: 700; font-size: .9rem; }
.open-badge.is-open { background: var(--leaf); border-color: #8fd18a; }
.order-card { background: #fff; color: var(--ink); border-radius: 18px; padding: 1.3rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.order-card h2 { color: var(--red); margin-bottom: .6rem; }
.seg { display: flex; gap: .3rem; padding: .25rem; background: #f0e8da; border-radius: 999px; margin-bottom: 1rem; }
.seg button { flex: 1; border: 0; background: transparent; border-radius: 999px; padding: .5rem .6rem; font: 700 .92rem var(--font-body); color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--red); color: #fff; box-shadow: var(--shadow); }
@media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; } }

/* Bagian beranda */
.block { padding-block: 1.6rem .4rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.section-head h2 { margin: 0; }
.section-head a { font-weight: 700; text-decoration: none; }
.cat-strip { display: flex; gap: .9rem; overflow-x: auto; padding: .2rem .1rem .6rem; scrollbar-width: thin; }
.cat-tile { flex: none; display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 92px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .85rem; text-align: center; }
.cat-dot { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-family: var(--font-display); font-size: 1.6rem; color: #fff; box-shadow: var(--shadow); }
.scroller { display: flex; gap: 1rem; overflow-x: auto; padding: .2rem .1rem 1rem; scroll-snap-type: x proximity; }
.scroller .product { flex: none; width: 230px; scroll-snap-align: start; }
.promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.promo { display: flex; flex-direction: column; gap: .2rem; padding: 1.3rem; border-radius: 18px; color: #fff; text-decoration: none; min-height: 170px; box-shadow: var(--shadow); }
.promo h3 { font-size: 1.6rem; margin-bottom: .2em; }
.promo p { margin: 0; opacity: .95; }
.promo > span { margin-top: auto; font-weight: 700; }
.promo > span::after { content: ' \2192'; }
.promo-a { background: linear-gradient(135deg, #b3202e, #7a1a2e); }
.promo-b { background: linear-gradient(135deg, #2f7d3a, #1d5a28); }
.promo-c { background: linear-gradient(135deg, #c27a00, #8f5600); }
.pkg-list { list-style: none; padding: 0; margin: .5rem 0; font-size: .92rem; display: grid; gap: .2rem; }
.steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; padding: 0; margin: 0; }
.steps li { counter-increment: s; position: relative; padding: 1rem 1rem 1rem 3.4rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.steps li::before { content: counter(s); position: absolute; left: .8rem; top: .8rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-family: var(--font-display); }
.steps li strong { display: block; }
.steps li span { color: var(--muted); font-size: .95rem; }
.rating-summary { font-size: 1.1rem; font-weight: 700; color: var(--red); }
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin: 1rem 0; }
.review { margin: 0; padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.review blockquote { margin: .4rem 0; }
.review figcaption { color: var(--muted); font-size: .92rem; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.info-grid h3 { color: var(--red); }
.info-grid p { margin: 0 0 .5rem; }

/* Halaman dalam */
.page-head { background: var(--maroon); color: #fff; padding-block: 1.6rem 1.8rem; }
.page-head h1 { font-size: clamp(2rem, 5.5vw, 3rem); margin: 0 0 .15em; }
.page-head p { margin: 0; color: #f1dcc0; max-width: 56ch; }
.page-body { padding-bottom: 5rem; min-height: 50vh; }
.section { padding-block: 1.6rem; }

/* Menu */
.menu-tools { position: sticky; top: 58px; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); padding-block: .7rem; }
.menu-tools .wrap { display: flex; flex-direction: column; gap: .6rem; }
.menu-tools .seg { margin: 0; align-self: flex-start; }
.menu-tools .alert { margin: 0; }
.menu-cat { padding-top: 1.6rem; }
.menu-cat h2 { margin-bottom: .1em; }
.menu-cat .note { color: var(--muted); margin: 0 0 .8rem; }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: .8rem; }
.product { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.product.off { opacity: .65; }
.p-img { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.p-img img { width: 100%; height: 100%; object-fit: cover; }
.p-initials { font-family: var(--font-display); font-size: 2.6rem; color: rgba(255, 255, 255, .92); letter-spacing: .05em; }
.p-badges { position: absolute; top: .5rem; left: .5rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.p-body { display: flex; flex-direction: column; gap: .25rem; padding: .8rem .9rem .9rem; flex: 1; }
.p-name { font-size: 1.15rem; margin: 0; }
.p-desc { margin: 0; color: var(--muted); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .5rem; }
.p-price { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; color: var(--red); letter-spacing: .03em; }
.tint-0 { background: linear-gradient(135deg, #b3202e, #7a1a2e); }
.tint-1 { background: linear-gradient(135deg, #c27a00, #8f5600); }
.tint-2 { background: linear-gradient(135deg, #2f7d3a, #1d5a28); }
.tint-3 { background: linear-gradient(135deg, #7a3a1a, #4a220f); }
.tint-4 { background: linear-gradient(135deg, #8f1824, #4a0f1b); }
.tint-5 { background: linear-gradient(135deg, #a3571f, #6b3410); }
.cat-dot.tint-0, .cat-dot.tint-1, .cat-dot.tint-2, .cat-dot.tint-3, .cat-dot.tint-4, .cat-dot.tint-5 { color: #fff; }

/* Banner nomor meja dari QR */
.table-banner { margin: 0; }

/* Bilah keranjang */
.cart-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--maroon); border-top: 3px solid var(--saffron); color: #fff; padding: .7rem 0; padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px)); }
.cart-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cart-bar-info { display: flex; flex-direction: column; line-height: 1.2; }
.cart-bar-info #bar-total { color: var(--saffron); font-weight: 700; }
@media (max-width: 760px) { .cart-bar { bottom: 3.9rem; padding-bottom: .7rem; } }

/* Lembar varian */
dialog.sheet { width: min(480px, 100%); margin: auto auto 0; border-radius: 22px 22px 0 0; max-height: 90vh; }
@media (min-width: 761px) { dialog.sheet { margin: auto; border-radius: 22px; } }
.sheet-body { padding: 1.2rem 1.3rem 1.3rem; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.sheet-head h3 { color: var(--red); font-size: 1.5rem; }
.sheet-close { border: 0; background: #f0e8da; width: 2.2rem; height: 2.2rem; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.opt-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; }
.opt span { display: inline-block; padding: .45rem 1rem; border: 2px solid var(--line); border-radius: 999px; font-weight: 600; background: #fff; }
.opt input:checked + span { background: var(--red); border-color: var(--red); color: #fff; }
.opt input:focus-visible + span { outline: 3px solid var(--saffron); outline-offset: 2px; }
.sheet-foot { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.sheet-foot .btn { flex: 1; }

/* Checkout */
.checkout .card h2 { margin-top: 0; }
.checkout .seg { margin-bottom: 1rem; }
.summary { position: sticky; top: 80px; }
.empty-state { text-align: center; padding: 2.5rem 1rem; }

/* Pelacak status */
.tracker { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0; }
.tracker li { position: relative; display: flex; align-items: center; gap: .8rem; padding: .55rem 0 .55rem 0; color: var(--muted); }
.tracker li:not(:last-child)::after { content: ''; position: absolute; left: .55rem; top: 2rem; bottom: -.5rem; width: 2px; background: var(--line); }
.tracker .dot { flex: none; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px solid var(--line); background: #fff; z-index: 1; }
.tracker li.done { color: var(--ink); }
.tracker li.done .dot { background: var(--leaf); border-color: var(--leaf); }
.tracker li.done:not(:last-child)::after { background: var(--leaf); }
.tracker li.now { color: var(--red); font-weight: 700; }
.tracker li.now .dot { border-color: var(--red); background: var(--red); box-shadow: 0 0 0 4px rgba(179, 32, 46, .2); }
.success { text-align: center; padding: 1.8rem 1.2rem; }
.success .tracker { text-align: left; max-width: 320px; margin-inline: auto; }
.success-mark { width: 3.2rem; height: 3.2rem; margin: 0 auto .6rem; border-radius: 50%; background: var(--leaf); color: #fff; display: grid; place-items: center; font-size: 1.8rem; }
.success .code { font-family: var(--font-display); font-size: 2rem; letter-spacing: .08em; color: var(--red); margin-bottom: .4rem; }

/* Formulir layanan */
.slots { display: flex; flex-wrap: wrap; gap: .4rem; }
.slot { border: 2px solid var(--line); background: #fff; border-radius: 10px; padding: .45rem .8rem; font: 700 .95rem var(--font-body); cursor: pointer; }
.slot:hover:not(:disabled) { border-color: var(--red); }
.slot.on { background: var(--red); border-color: var(--red); color: #fff; }
.slot:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.pkg-cards { display: grid; gap: .6rem; }
.pkg-card { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; padding: .8rem 1rem; background: #fff; border: 2px solid var(--line); border-radius: var(--radius); font: 400 1rem var(--font-body); cursor: pointer; color: var(--ink); }
.pkg-card b { color: var(--red); }
.pkg-card small, .pkg-card span { color: var(--muted); }
.pkg-card.on { border-color: var(--red); box-shadow: 0 0 0 3px rgba(179, 32, 46, .18); }
.plain-steps { padding-left: 1.2rem; }
.plain-steps li { margin-bottom: .4rem; }
.star-input { display: flex; gap: .2rem; }
.star-input button { background: none; border: 0; font-size: 2.2rem; line-height: 1; cursor: pointer; color: #cdb98a; padding: .1rem .2rem; }
.star-input button.on { color: var(--saffron); text-shadow: 0 0 1px #8a5a00; }

/* Footer */
.site-footer { background: #320a13; color: #d8bfae; padding-block: 2rem; font-size: .95rem; margin-top: 2rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.site-footer a { color: var(--saffron); }