/*
 * Tampilan pelanggan.
 * Warna diambil dari logo Babahu: krem kertas, hijau punggung ubin 發, merah 中, garis tinta hitam.
 * Aksen: Jotun 8302 Laurel (--laurel) untuk pita bagian, footer, dan detail kecil.
 * Semua sudut memakai satu nilai: --radius. Jangan menulis border-radius angka langsung.
 */

:root {
    --radius: 10px;

    --felt: #255a35;
    --felt-deep: #1a4227;
    --felt-soft: #e5eddb;
    --ivory: #fcf5dc;
    --paper: #fffcf0;
    /* Aksen Jotun 8302 Laurel: hero, pita bagian (.section-alt), footer. */
    --laurel: #b0ae96;
    --ink: #1a1a17;
    /* Cukup gelap supaya teks kecil tetap terbaca juga di atas Laurel. */
    --muted: #4d5650;
    --line: #e2dcc6;
    --red: #c0150f;
    --dragon-blue: #2e5b86;

    --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-tile: "Noto Serif SC", "Songti SC", "SimSun", serif;

    /* Bootstrap ikut token di atas. */
    --bs-body-font-family: var(--font);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--paper);
    --bs-secondary-color: var(--muted);
    --bs-border-color: var(--line);
    --bs-link-color: var(--felt);
    --bs-link-color-rgb: 37, 90, 53;
    --bs-link-hover-color: var(--felt-deep);
    --bs-link-hover-color-rgb: 26, 66, 39;
    --bs-primary: var(--felt);
    --bs-primary-rgb: 37, 90, 53;
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius);
    --bs-border-radius-lg: var(--radius);
    --bs-border-radius-xl: var(--radius);
    --bs-border-radius-xxl: var(--radius);
    --bs-border-radius-2xl: var(--radius);
    --bs-border-radius-pill: var(--radius);
    --bs-focus-ring-color: rgba(37, 90, 53, .25);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

main {
    flex: 1 0 auto;
}

.container-narrow {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Tombol ---------- */

.btn {
    font-weight: 600;
    --bs-btn-border-radius: var(--radius);
    --bs-btn-padding-x: 1.1rem;
}

.btn-lg {
    --bs-btn-border-radius: var(--radius);
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-font-size: 1.05rem;
}

.btn-primary {
    --bs-btn-bg: var(--felt);
    --bs-btn-border-color: var(--felt);
    --bs-btn-hover-bg: var(--felt-deep);
    --bs-btn-hover-border-color: var(--felt-deep);
    --bs-btn-active-bg: var(--felt-deep);
    --bs-btn-active-border-color: var(--felt-deep);
    --bs-btn-disabled-bg: var(--felt);
    --bs-btn-disabled-border-color: var(--felt);
}

.btn-outline-primary {
    --bs-btn-color: var(--felt);
    --bs-btn-border-color: var(--felt);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--felt);
    --bs-btn-hover-border-color: var(--felt);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--felt-deep);
    --bs-btn-active-border-color: var(--felt-deep);
}

.btn-ivory {
    --bs-btn-color: var(--felt-deep);
    --bs-btn-bg: var(--ivory);
    --bs-btn-border-color: var(--ivory);
    --bs-btn-hover-color: var(--felt-deep);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-bg: #fff;
    --bs-btn-disabled-color: var(--felt-deep);
    --bs-btn-disabled-bg: var(--ivory);
    --bs-btn-disabled-border-color: var(--ivory);
    --bs-btn-disabled-opacity: .55;
}

.form-control,
.form-select {
    border-radius: var(--radius);
    /* Bootstrap memakai warna latar halaman (krem); isian dibuat putih supaya jelas terlihat. */
    background-color: #fff;
}

/* ---------- Ubin mahjong ---------- */

.tile {
    --tile-w: 58px;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--tile-w);
    height: calc(var(--tile-w) * 1.36);
    background: var(--ivory);
    border-radius: var(--radius);
    /*
     * Lapisan hijau di bawah = punggung ubin, seperti ubin asli.
     * Garis tinta di sekeliling muka dan punggung meniru gaya gambar logo.
     */
    box-shadow:
        0 0 0 2px var(--ink),
        0 5px 0 #4c7b4f,
        0 5px 0 2px var(--ink),
        0 12px 16px -6px rgba(0, 0, 0, .22);
    font-family: var(--font-tile);
    font-weight: 700;
    font-size: calc(var(--tile-w) * .6);
    line-height: 1;
    color: var(--ink);
    user-select: none;
}

.tile-red { color: var(--red); }
.tile-green { color: #2b6a3c; }
.tile-ink { color: #1f2a44; }

/* Ubin angka (萬): angka di atas, 萬 merah di bawah. */
.tile-top {
    font-size: .62em;
    color: #1f2a44;
}

.tile-bottom {
    font-size: .62em;
    color: var(--red);
    margin-top: .12em;
}

/* Naga putih: bingkai biru kosong. */
.tile-white i {
    width: 58%;
    height: 66%;
    border: 3px solid var(--dragon-blue);
    border-radius: var(--radius);
}

/* ---------- Header ---------- */

.topbar {
    background: var(--laurel);
    color: var(--ink);
    padding: 10px 0;
    text-align: center;
}

/* Logo tetap di tengah; tautan cek booking menempel di kanan. */
.topbar .container-narrow { position: relative; }

.topbar-cek {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--felt-deep);
    font-weight: 700;
    font-size: .9rem;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.brand {
    display: inline-block;
}

/* Logo selalu utuh (jangan dipotong), cukup diperkecil. */
.brand-logo {
    display: block;
    width: auto;
    height: 80px;
}

@media (min-width: 768px) {
    .brand-logo { height: 96px; }
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    /* Aksen Laurel hanya di hero; bagian di bawahnya tetap terang. */
    background: var(--laurel);
    color: var(--ink);
    padding: 24px 0 0;
    overflow: hidden;
}

/* Logo dulu di HP; di layar lebar logo di kanan teks. */
.hero-grid {
    display: grid;
    gap: 8px;
}

.hero-logo {
    display: block;
    width: min(100%, 320px);
    height: auto;
    margin: 0 auto 12px;
}

@media (min-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr minmax(0, 400px);
        align-items: center;
        gap: 40px;
    }
    .hero-logo {
        order: 2;
        width: 100%;
    }
}

.hero h1 {
    font-size: clamp(2rem, 7vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
    margin-bottom: 18px;
}

.hero-lead {
    font-size: 1.08rem;
    max-width: 32em;
    color: var(--ink);
    margin-bottom: 28px;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
}

.hero-link {
    color: var(--felt);
    font-weight: 600;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.hero-link:hover { color: var(--felt-deep); }

/*
 * "Tangan" ubin yang berdiri berjajar di tepi meja (bibir kayu di bawahnya).
 */
.hand {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 44px;
    padding: 0 12px 14px;
    border-bottom: 12px solid #5b3a24;
}

.hand .tile {
    --tile-w: 34px;
    transform: rotate(calc((var(--i) - 6) * .4deg));
}

/* Jeda kecil di antara kelompok ubin, seperti tangan yang sudah disusun. */
.hand .tile:nth-child(3),
.hand .tile:nth-child(6),
.hand .tile:nth-child(8),
.hand .tile:nth-child(11) {
    margin-right: 10px;
}

/* Di layar kecil cukup tampilkan bagian tengahnya: 東東東 中中 發發發. */
@media (max-width: 767.98px) {
    .hand .tile:nth-child(-n+3),
    .hand .tile:nth-child(n+12) {
        display: none;
    }
}

@media (min-width: 768px) {
    .hero { padding-top: 64px; }
    .hand { gap: 8px; margin-top: 64px; padding-bottom: 18px; border-bottom-width: 14px; }
    .hand .tile { --tile-w: 58px; }
    .hand .tile:nth-child(3),
    .hand .tile:nth-child(6),
    .hand .tile:nth-child(8),
    .hand .tile:nth-child(11) { margin-right: 18px; }
}

/* ---------- Section ---------- */

.section {
    padding: 56px 0;
}

.section-alt {
    background: var(--laurel);
    /* Abu-abu biasa terlalu pudar di atas Laurel. */
    --muted: #33352f;
    padding-top: 56px;
}

.section-title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 8px;
}

.section-lead {
    color: var(--muted);
    margin-bottom: 32px;
    max-width: 36em;
}

/* Dua jenis meja */

.kind h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 20px 0 6px;
}

.kind p {
    color: var(--muted);
    margin: 0;
}

/* Meja mahjong dilihat dari atas (SVG di template). */
.scene {
    display: block;
    width: 100%;
    height: auto;
    background: #efe6d2;
    border-radius: var(--radius);
}

.scene .karpet { fill: #e3d5b6; }
.scene .karpet-jahit { fill: none; stroke: #cdb98f; stroke-width: 1; stroke-dasharray: 3 2.5; }
.scene .kursi { fill: #7a4b2c; }
.scene .kursi-bantal { fill: #9c6a43; }
.scene .bayang { fill: rgba(60, 35, 15, .22); }
.scene .rel { fill: #5b3a24; }
.scene .rel-garis { fill: none; stroke: #7d5234; stroke-width: 1.2; }
.scene .kain { fill: var(--felt); stroke: rgba(0, 0, 0, .18); stroke-width: 1.5; }
.scene .tatakan { fill: #3f2716; }
.scene .cangkir { fill: var(--ivory); stroke: #d6cdb8; stroke-width: .8; }
.scene .kopi { fill: #6a3d1f; }

/* Otomatis */
.scene .tembok-dasar { fill: var(--ivory); }
.scene .punggung-biru { fill: var(--dragon-blue); }
.scene .tangan { fill: var(--ivory); stroke: #4c7b4f; stroke-width: .7; }
.scene .tangan-lawan { fill: #4c7b4f; stroke: var(--ivory); }
.scene .panel { fill: #14241d; stroke: #0c1712; stroke-width: 1; }
.scene .kubah { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .28); stroke-width: .8; }
.scene .dadu { fill: #fffdf6; }
.scene .mata { fill: var(--ink); }
.scene .mata-merah { fill: var(--red); }
.scene .lampu { fill: #ff6b4f; animation: lampu-dealer 2.4s ease-in-out infinite; }
.scene .lampu-mati { fill: #2c3d35; }

@keyframes lampu-dealer {
    50% { fill: #7a2b20; }
}

/* Manual */
.scene .ubin-sisi { fill: #d9d0bb; }
.scene .ubin-muka { fill: var(--ivory); }
.scene .punggung-hijau { fill: #4c7b4f; stroke: #6a9a6c; stroke-width: .5; }
.scene .ubin-putih { fill: none; stroke: var(--dragon-blue); stroke-width: .9; }
.scene .ubin-huruf {
    font-family: var(--font-tile);
    font-weight: 700;
    font-size: 7.4px;
    text-anchor: middle;
    dominant-baseline: central;
}
.scene .ubin-huruf.merah { fill: var(--red); }
.scene .ubin-huruf.hijau { fill: #2b6a3c; }
.scene .ubin-huruf.tinta { fill: #1f2a44; }

/* ---------- Animasi meja ---------- */

.scene-otomatis .tembok,
.scene-otomatis .tangan-grup,
.scene-otomatis .dadu-kubah,
.scene-manual .ubin-lepas {
    transform-box: fill-box;
    transform-origin: center;
}

/*
 * Otomatis, satu putaran 9 detik:
 * ubin di tangan didorong ke tengah, tembok turun masuk mesin, dadu dikocok di kubah,
 * lalu tembok baru naik satu per satu dan ubin dibagikan lagi.
 */
.scene-otomatis .tembok {
    animation: tembok 9s ease-in-out calc(var(--i) * 120ms) infinite;
}

.scene-otomatis .tangan-grup {
    animation: tangan 9s ease-in-out infinite;
}

.scene-otomatis .dadu-kubah {
    animation: dadu-kocok 9s ease-in-out infinite;
}

@keyframes tangan {
    0%, 8% { opacity: 1; transform: scale(1); }
    16%, 82% { opacity: 0; transform: scale(.82); }
    92%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes tembok {
    0%, 16% { opacity: 1; transform: scale(1); }
    28% { opacity: 0; transform: scale(.6); }
    56% { opacity: 0; transform: scale(.6); }
    66%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes dadu-kocok {
    0%, 30% { transform: rotate(0); }
    34% { transform: rotate(140deg) translate(1px, -1px); }
    38% { transform: rotate(260deg) translate(-1px, 1px); }
    42% { transform: rotate(390deg); }
    46% { transform: rotate(470deg) translate(.5px, 0); }
    50%, 100% { transform: rotate(540deg); }
}

/* Manual: ubin terus dikocok, berputar maju-mundur sambil saling bergeser. */
.scene-manual .pusaran {
    transform-box: view-box;
    transform-origin: 160px 100px;
    animation: pusaran 5s ease-in-out infinite alternate;
}

.scene-manual .ubin-lepas {
    animation: kocok 1.1s ease-in-out calc(var(--i) * -97ms) infinite alternate;
}

@keyframes pusaran {
    from { transform: rotate(-14deg); }
    to { transform: rotate(18deg); }
}

@keyframes kocok {
    to { transform: translate(1.6px, -1.2px) rotate(24deg); }
}

@media (prefers-reduced-motion: reduce) {
    .scene * { animation: none !important; }
}

/* Langkah booking */

.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 28px;
}

.steps li {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.tile-step {
    --tile-w: 44px;
    box-shadow: 0 0 0 2px var(--ink), 0 4px 0 #4c7b4f, 0 4px 0 2px var(--ink);
}

.steps h3 {
    font-size: 1.08rem;
    font-weight: 700;
    margin: 4px 0 4px;
}

.steps p {
    color: var(--muted);
    margin: 0;
}

@media (min-width: 768px) {
    .steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
    .steps li {
        flex-direction: column;
        gap: 16px;
    }
}

/* Aturan main: nomor angka Mandarin besar (data-no) tanpa bingkai, merah seperti 中. */

.aturan {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}

.aturan li {
    position: relative;
    padding-left: 46px;
    color: var(--muted);
}

.aturan li::before {
    content: attr(data-no);
    position: absolute;
    left: 0;
    top: -4px;
    width: 34px;
    text-align: center;
    color: var(--red);
    font-family: var(--font-tile);
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1;
}

.aturan strong {
    display: block;
    color: var(--ink);
    margin-bottom: 2px;
}

@media (min-width: 768px) {
    .aturan:not(.aturan-ringkas) {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 40px;
    }
}

/* Versi ringkas di halaman data diri, sebelum centang setuju. */
.aturan-ringkas {
    gap: 10px;
    font-size: .88rem;
}

.aturan-ringkas li { padding-left: 38px; }

.aturan-ringkas li::before {
    top: -2px;
    width: 26px;
    font-size: 1.3rem;
}

.aturan-ringkas strong {
    display: inline;
    margin: 0;
}

/* Penutup */

.closing {
    background: var(--felt-deep);
    color: var(--ivory);
    padding: 64px 0;
    text-align: center;
}

.closing h2 {
    font-size: clamp(1.5rem, 4.5vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    max-width: 18em;
    margin: 0 auto 28px;
}

.closing-note {
    margin: 18px 0 0;
    font-size: .9rem;
    opacity: .75;
}

.closing-note a {
    color: inherit;
    text-underline-offset: 3px;
}

/* Lokasi: peta dibingkai bibir kayu seperti tepi meja. */
.lokasi-aksi {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.peta {
    padding: 6px;
    background: #5b3a24;
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px #7d5234;
}

.peta iframe {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: var(--radius);
    background: var(--felt-soft);
}

/* ---------- Alur booking ---------- */

/* Lebar konten halaman booking; footer di halaman ini memakai .container-flow supaya sejajar. */
.container-flow { max-width: 600px; }

.flow {
    max-width: 600px;
    margin: 0 auto;
    padding: 24px 20px 64px;
}

.flow-steps {
    list-style: none;
    display: flex;
    gap: 18px;
    padding: 0;
    margin: 0 0 22px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
}

.flow-steps li {
    display: flex;
    align-items: center;
    gap: 7px;
}

.flow-step-no {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius);
    border: 1.5px solid var(--line);
    font-size: .74rem;
}

.flow-steps .is-active { color: var(--ink); }
.flow-steps .is-active .flow-step-no { background: var(--felt); border-color: var(--felt); color: var(--ivory); }
.flow-steps .is-done .flow-step-no { background: var(--felt-soft); border-color: var(--felt-soft); color: var(--felt); }

.flow-title {
    font-size: clamp(1.6rem, 6vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.025em;
    margin-bottom: 20px;
}

.pick {
    padding: 18px 0 8px;
    scroll-margin-top: 16px;
}

.pick + .pick {
    border-top: 1px dashed var(--line);
    margin-top: 10px;
}

.pick-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.pick-hint {
    font-size: .88rem;
    color: var(--muted);
    margin: 10px 0 0;
}

/* Tombol pilihan */

.chips {
    display: flex;
    gap: 8px;
}

.chips-scroll {
    overflow-x: auto;
    margin: 0 -20px;
    padding: 2px 20px 6px;
    scrollbar-width: none;
}

.chips-scroll::-webkit-scrollbar { display: none; }

.chips-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.chips-wrap {
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.chip {
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 46px;
    padding: 8px 14px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    line-height: 1.2;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .12s ease;
}

a.chip:active {
    transform: scale(.95);
}

/* Hover hanya untuk perangkat dengan mouse; di HP efek hover "nyangkut" setelah diketuk. */
@media (hover: hover) {
    a.chip:not(.is-active):hover {
        border-color: var(--felt);
        color: var(--ink);
    }
}

.chip.is-active {
    background: var(--felt);
    border-color: var(--felt);
    color: var(--ivory);
}

.chip.is-off {
    background: transparent;
    border-style: dashed;
    color: #a9aea9;
}

.chip small {
    font-size: .7rem;
    font-weight: 500;
}

.chip-date {
    min-width: 72px;
}

.chip-date span {
    font-size: .74rem;
    font-weight: 500;
    opacity: .8;
}

/* Tanggal khusus (libur, jam lain): keterangannya ditulis merah kecil di bawah tanggal. */
.chip-note {
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--red);
    font-weight: 600 !important;
}

.chip.is-active .chip-note { color: #f3c9c2; }
.chip.is-off .chip-note { color: #c99a93; }

.chip-alt {
    align-items: flex-start;
    padding: 10px 14px;
}

.chip-alt small {
    color: var(--muted);
}

/* Saat isi jadwal sedang diperbarui tanpa reload */
.flow.is-loading #tabel,
.flow.is-loading #durasi {
    opacity: .55;
    /* Hanya terlihat kalau server lambat; pemilihan biasa tidak sempat memudar. */
    transition: opacity .15s .4s;
}

/* Tabel jadwal meja × jam */

.tt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: .8rem;
    color: var(--muted);
    margin: -4px 0 10px;
}

.tt-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tt-legend .tt-slot {
    width: 16px;
    height: 16px;
}

/* Jam yang kena harga khusus: garis merah di bawah angka jam, seperti angka merah di ubin. */
.timetable thead th.tt-th-khusus {
    color: var(--red);
    box-shadow: inset 0 -2px 0 var(--red);
}

.tt-legend .tt-mark {
    display: inline-block;
    width: 16px;
    height: 2px;
    background: var(--red);
}

.price-note {
    font-size: .86rem;
    color: var(--ink);
    background: var(--ivory);
    border-left: 3px solid var(--red);
    border-radius: var(--radius);
    padding: 8px 12px;
    margin: 0 0 12px;
}

.price-kind {
    display: inline-block;
    margin-left: 4px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--red);
}

.tt-wrap {
    overflow-x: auto;
    margin: 0 -20px;
    padding: 0 20px 4px;
}

.timetable {
    /* Jarak antar-kotak lewat padding sel, bukan border-spacing, supaya latar kolom
       nama meja menyambung tanpa celah saat tabel digeser. */
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.timetable thead th {
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
    padding: 0 1.5px 4px;
}

/* Angka jam ditulis 5PM (AM/PM dikecilkan) supaya terbaca sebagai waktu, bukan nomor. */
.timetable thead th small {
    margin-left: 1px;
    font-size: .58rem;
    font-weight: 500;
    opacity: .75;
}

.timetable .tt-cap td {
    padding: 0 1.5px 2px;
    text-align: center;
    font-size: .7rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .02em;
}

.timetable .tt-cap span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Nama meja menempel di kiri saat tabel digeser. */
.timetable .tt-meja {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--paper);
    text-align: left;
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
    padding: 4px 10px 4px 0;
    line-height: 1.15;
    /* Kolom ini menempel 20px dari tepi area geser (ikut padding); bayangan kiri menutup
       celah itu, bayangan kanan memberi tanda ada isi yang tergeser di bawahnya. */
    box-shadow: -20px 0 0 var(--paper), 8px 0 8px -8px rgba(0, 0, 0, .18);
    clip-path: inset(0 -16px 0 -20px);
}

.timetable .tt-meja small {
    display: block;
    font-size: .7rem;
    font-weight: 500;
    color: var(--muted);
}

/* Jarak antar-baris (antar-meja) sedikit lebih lega dari jarak antar-jam. */
.timetable td {
    padding: 4px 1.5px;
}

.tt-slot {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: var(--radius);
}

.tt-slot {
    transition: background-color .18s ease, border-color .18s ease;
}

.tt-free {
    background: #fff;
    border: 1.5px solid var(--line);
}

@media (hover: hover) {
    a.tt-free:not(.tt-picked):hover {
        border-color: var(--felt);
    }
}

.tt-busy {
    background: #c9cfca;
}

/* Pratinjau hasil ketukan saat kursor di atas kotak (desktop). */
.tt-slot.tt-preview:not(.tt-picked) {
    background: var(--felt-soft);
    border: 1.5px solid var(--felt);
}

/* Jam-jam yang sedang dipilih. */
.tt-slot.tt-picked {
    background: var(--felt);
    border: 1.5px solid var(--felt);
}

/* Jam pilihan yang akan dilepas kalau kotak di bawah kursor diketuk. */
.tt-slot.tt-picked.tt-lepas {
    opacity: .4;
}


/* Animasi saat sesuatu dipilih: sedikit "membal", kotak tabel menyala berurutan. */
@keyframes pick-pop {
    0% { transform: scale(.88); }
    60% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.anim-pick {
    animation: pick-pop .22s ease-out both;
    animation-delay: calc(var(--n, 0) * 45ms);
}

@keyframes bar-in {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.pick-bar {
    animation: bar-in .25s ease-out both;
}

.pick-bar.tanpa-animasi {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .anim-pick,
    .pick-bar { animation: none; }
    .chip,
    .tt-slot { transition: none; }
}

/* Bar ringkasan pilihan, menempel di bawah layar */
.pick-bar {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 12px 12px 12px 16px;
    background: var(--felt-deep);
    color: var(--ivory);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .45);
}

.pick-bar-info {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

.pick-bar-info strong {
    display: block;
    font-size: .98rem;
}

.pick-bar-info span {
    font-size: .8rem;
    opacity: .8;
}

.table-card.is-picked {
    border-color: var(--felt);
    box-shadow: inset 0 0 0 1px var(--felt);
}

/* Kartu meja */

.table-cards {
    display: grid;
    gap: 10px;
}

.table-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 14px 14px 16px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .12s, transform .12s;
}

.table-card:hover {
    border-color: var(--felt);
    color: var(--ink);
}

.table-card:active {
    transform: scale(.99);
}

.table-card-main {
    flex: 1;
    min-width: 0;
}

.table-card-name {
    display: block;
    font-weight: 700;
    font-size: 1.02rem;
}

.table-card-type {
    display: block;
    font-size: .84rem;
    color: var(--muted);
    margin-top: 3px;
}

.table-card-price {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.table-card-price small {
    display: block;
    font-size: .74rem;
    font-weight: 500;
    color: var(--muted);
}

.table-card-arrow {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--felt);
}

.type-tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    padding: 1px 7px;
    margin-right: 4px;
    border-radius: var(--radius);
    vertical-align: 1px;
}

.type-otomatis { background: var(--felt-soft); color: var(--felt); }
.type-manual { background: #f4e6d8; color: #8a4b1c; }

.full-note {
    background: var(--ivory);
    border-radius: var(--radius);
    padding: 18px 18px 6px;
}

.full-note p {
    color: var(--muted);
    font-size: .92rem;
    margin-bottom: 10px;
}

/* Pemberitahuan & keadaan kosong */

.notice {
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: .94rem;
}

.notice-warn {
    background: #fbefd9;
    color: #6e4a0e;
}

.empty {
    background: var(--ivory);
    border-radius: var(--radius);
    padding: 20px;
    color: var(--muted);
}

.empty-big {
    padding: 28px 22px;
    margin-top: 24px;
}

.empty-big p { margin-bottom: 18px; }

/* Ringkasan pesanan */

.summary {
    background: var(--ivory);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 18px;
}

.summary-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.summary-table {
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: 2px;
}

.summary-edit {
    font-size: .88rem;
    font-weight: 600;
}

.summary-list {
    margin: 0;
    font-size: .92rem;
}

.summary-list > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 0;
}

.summary-list dt {
    font-weight: 500;
    color: var(--muted);
}

.summary-list dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.summary-total {
    border-top: 1px dashed #d8d0bd;
    margin-top: 6px;
    padding-top: 10px !important;
    font-weight: 800;
    font-size: 1.02rem;
}

.summary-total dt { color: var(--ink); font-weight: 800; }

.summary-compact { margin-top: 18px; }

/* Form */

.form-card .form-label {
    font-weight: 600;
    font-size: .92rem;
}

.form-control:focus {
    border-color: var(--felt);
    box-shadow: 0 0 0 .2rem rgba(37, 90, 53, .15);
}

.voucher summary {
    cursor: pointer;
    font-weight: 600;
    font-size: .92rem;
    color: var(--felt);
}

.setuju {
    margin-top: 24px;
    padding: 16px;
    background: var(--ivory);
    border: 1px solid var(--laurel);
    border-left: 4px solid var(--laurel);
    border-radius: var(--radius);
}

.setuju legend {
    margin: 0 0 10px;
    font-size: .92rem;
    font-weight: 700;
}

.setuju .form-check-label {
    font-weight: 600;
    font-size: .92rem;
}

.setuju .form-check-input:checked {
    background-color: var(--felt);
    border-color: var(--felt);
}

/* Belum centang setuju: tampak mati, tapi tetap bisa diklik supaya pesannya dikedipkan (data.js). */
.btn-mati {
    opacity: .5;
    cursor: not-allowed;
}

.setuju .kedip {
    animation: kedip .7s ease-in-out 3;
}

@keyframes kedip {
    50% { opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
    .setuju .kedip { animation: none; }
}

.form-note {
    text-align: center;
    font-size: .84rem;
    color: var(--muted);
    margin: 12px 0 0;
}

/* Bayar */

.hold {
    margin: -8px 0 18px;
    color: var(--muted);
}

.hold strong {
    display: inline-block;
    min-width: 3.2em;
    padding: 1px 8px;
    border-radius: var(--radius);
    background: var(--felt-soft);
    color: var(--felt);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.is-urgent .hold strong {
    background: #f8dcd6;
    color: var(--red);
}

.qris {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
}

.qris-amount span {
    display: block;
    font-size: .84rem;
    color: var(--muted);
}

.qris-amount strong {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.qris-code {
    width: min(260px, 100%);
    margin: 14px auto 10px;
}

.qris-code svg {
    display: block;
    width: 100%;
    height: auto;
}

.qris-code svg .dark,
.qris-code svg path {
    fill: var(--ink);
}

.qris-note {
    font-size: .84rem;
    color: var(--muted);
    margin: 0;
}

.simulasi {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1.5px dashed #d9b36b;
    border-radius: var(--radius);
    background: #fdf6e6;
    font-size: .84rem;
    text-align: left;
}

.simulasi p { margin-bottom: 8px; }

/* Bukti booking */

.ticket {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 1px 0 var(--line), 0 18px 40px -24px rgba(0, 0, 0, .35);
    overflow: hidden;
    margin-top: 12px;
}

.ticket-head {
    background: var(--felt);
    color: var(--ivory);
    padding: 22px 22px 20px;
}

.ticket-status {
    font-size: .82rem;
    font-weight: 700;
    opacity: .85;
    margin: 0 0 4px;
}

.ticket-code {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .04em;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.ticket-sub {
    font-size: .86rem;
    opacity: .8;
    margin: 4px 0 0;
}

.ticket-body {
    margin: 0;
    padding: 16px 22px 6px;
    font-size: .94rem;
}

.ticket-body > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
}

.ticket-body dt {
    font-weight: 500;
    color: var(--muted);
}

.ticket-body dd {
    margin: 0;
    text-align: right;
}

.ticket-total {
    border-top: 1px dashed var(--line);
    margin-top: 6px;
    padding-top: 12px !important;
    font-weight: 800;
}

.ticket-total dt { color: var(--ink); font-weight: 800; }

/* Sobekan karcis */
.ticket-foot {
    position: relative;
    margin: 10px 0 0;
    padding: 16px 22px 20px;
    border-top: 2px dashed var(--line);
    font-size: .86rem;
    color: var(--muted);
}

/* ---------- Footer ---------- */

.site-footer {
    flex-shrink: 0;
    padding: 28px 0 32px;
    font-size: .88rem;
    background: var(--laurel);
    /* Abu-abu biasa terlalu pudar di atas Laurel. */
    --muted: #33352f;
    --bs-secondary-color: #33352f;
}

.footer-grid {
    display: grid;
    gap: 20px 48px;
}

@media (min-width: 768px) {
    .footer-grid {
        /* Lokasi, Admin, Instagram: kolom yang belum diisi di Pengaturan tidak tampil. */
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, max-content);
    }
}

/* Judul kolom footer berupa ikon (lokasi, WhatsApp, Instagram); teksnya hanya untuk pembaca layar. */
.footer-label {
    margin-bottom: 6px;
    color: var(--felt-deep);
}

.footer-ikon {
    display: block;
    width: 26px;
    height: 26px;
}

.ticket-arah {
    margin-top: 24px;
    text-align: center;
}

.ticket-arah .btn {
    width: 100%;
}

.ticket-arah p {
    margin: 10px 0 0;
    font-size: .88rem;
    color: var(--muted);
}

/* ---------- Halaman kecil (404 dsb.) ---------- */

.plain-page {
    padding: 72px 0;
    max-width: 520px;
}

.plain-page h1 {
    font-weight: 800;
    letter-spacing: -.02em;
}

/* ---------- Cek booking ---------- */

.cek-baris {
    display: flex;
    gap: 10px;
}

.cek-baris .form-control { min-width: 0; }