/* =========================================================
   FoodBites by Ann — brand colours from the logo
   Maroon lettering #7A0A0A · Gold fork & spoon #F2C14E
   ========================================================= */
:root {
    --maroon: #7a0a0a;
    --maroon-dark: #560606;
    --maroon-soft: #fbeeee;
    --gold: #f2c14e;
    --gold-dark: #d9a12b;
    --gold-soft: #fdf3d7;
    --cream: #fff9f0;
    --card: #ffffff;
    --ink: #2b1712;
    --muted: #7b685f;
    --border: #efe2d1;
    --whatsapp: #25d366;
    --whatsapp-dark: #1aa851;
    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 1px 2px rgba(86, 6, 6, .06), 0 8px 24px -8px rgba(86, 6, 6, .14);
    --shadow-lg: 0 2px 4px rgba(86, 6, 6, .06), 0 18px 40px -12px rgba(86, 6, 6, .28);
    --font-display: "Bricolage Grotesque", system-ui, sans-serif;
    --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    background: var(--cream);
    color: var(--ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--maroon); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); margin: 1rem 0; font-weight: 800; }
h2 { font-size: 1.35rem; margin: 0 0 .75rem; font-weight: 700; }
h3 { font-size: 1.1rem; margin: 0; font-weight: 700; }
h4 { margin: 0; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.page-pad { padding-top: 2rem; padding-bottom: 2rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.narrow { max-width: 600px; margin-left: auto; margin-right: auto; }
.optional { font-weight: 400; font-size: .8rem; color: var(--muted); margin-left: .25rem; }
[hidden] { display: none !important; }

/* ---------- Header ---------- */
.site-header {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 30;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 70px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.logo { height: 58px; width: auto; margin: -4px 0; }
.site-header nav { display: flex; gap: .3rem; flex-wrap: wrap; }
.site-header nav a {
    padding: .5rem .95rem; border-radius: 999px; text-decoration: none;
    color: var(--ink); font-weight: 600; font-size: .95rem; transition: background .15s, color .15s;
}
.site-header nav a:hover { background: var(--gold-soft); color: var(--maroon); }
.site-header nav a.active { background: var(--maroon); color: #fff; }

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(242, 193, 78, .35), transparent 40%),
        radial-gradient(circle at 10% 110%, rgba(242, 193, 78, .25), transparent 45%),
        radial-gradient(rgba(255, 255, 255, .07) 1.5px, transparent 1.5px) 0 0 / 22px 22px,
        linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
    padding: 3.5rem 0 5rem;
}
.hero::after {
    content: "🍛 🍗 🍲";
    position: absolute; right: 4%; bottom: 18%;
    font-size: clamp(2.5rem, 7vw, 5.5rem); letter-spacing: .1em;
    opacity: .9; transform: rotate(-6deg);
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .3));
    pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; max-width: 1180px; }
.hero h1 { color: #fff; font-size: clamp(2rem, 5.5vw, 3.6rem); max-width: 15ch; margin: .9rem 0 .8rem; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero p { max-width: 50ch; font-size: 1.08rem; color: rgba(255, 255, 255, .85); margin: 0 0 1.5rem; }
.hero-small { padding: 2.5rem 0 4.5rem; }
.hero-small::after { content: "🎉 🍽️"; }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
    padding: .35rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #c9a7a7; }
.eyebrow .dot.open { background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .25); }

@media (max-width: 720px) {
    .hero::after { position: static; display: block; margin-top: 1.5rem; transform: none; font-size: 2.5rem; }
    .hero { padding: 2.5rem 0 4.5rem; }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .6rem 1.1rem; border: 1.5px solid var(--border); border-radius: 999px;
    background: var(--card); color: var(--ink); font: inherit; font-weight: 700; font-size: .95rem;
    text-decoration: none; cursor: pointer; transition: transform .12s, background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { border-color: var(--maroon); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.btn-primary:hover { background: var(--maroon-dark); border-color: var(--maroon-dark); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--maroon-dark); }
.btn-gold:hover { background: #f5cd6a; border-color: #f5cd6a; box-shadow: 0 6px 18px -6px rgba(242, 193, 78, .8); }
.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.btn-whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); color: #fff; }
.btn-whatsapp:hover:not(:disabled) { background: var(--whatsapp-dark); border-color: var(--whatsapp-dark); box-shadow: 0 8px 20px -8px rgba(37, 211, 102, .7); }
.btn-danger { color: #b91c1c; }
.btn-danger:hover { border-color: #b91c1c; }
.btn-small { padding: .3rem .75rem; font-size: .82rem; }
.btn-block { display: flex; width: 100%; padding: .95rem; font-size: 1.05rem; margin-top: 1rem; }

/* ---------- Forms ---------- */
label { display: block; margin-bottom: .9rem; font-size: .9rem; font-weight: 600; }
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=file], select, textarea {
    display: block; width: 100%; margin-top: .3rem; padding: .7rem .85rem;
    border: 1.5px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-weight: 400;
    background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold-dark); box-shadow: 0 0 0 4px var(--gold-soft); }
textarea { resize: vertical; }
label.check { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
label.check input { width: auto; margin: 0; accent-color: var(--maroon); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }

/* ---------- Alerts & cards ---------- */
.alert { padding: .8rem 1rem; border-radius: var(--radius-sm); margin: 1rem 0; font-weight: 500; }
.alert-success { background: #e7f8ee; color: #166534; border: 1px solid #bfe9cf; }
.alert-error { background: var(--maroon-soft); color: var(--maroon); border: 1px solid #f1caca; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1rem; box-shadow: var(--shadow); }
.card.lifted { margin-top: -4rem; position: relative; z-index: 2; }
.card.lifted .section-title { margin-bottom: 1.25rem; }

/* ---------- Day strip ---------- */
.day-strip {
    display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
    background: var(--card); border-radius: var(--radius); padding: .5rem;
    box-shadow: var(--shadow-lg); margin-top: -2.75rem; position: relative; z-index: 2;
}
.day-strip::-webkit-scrollbar { display: none; }
.day-pill {
    flex: 1 0 72px; display: flex; flex-direction: column; align-items: center;
    padding: .6rem .5rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink);
    transition: background .15s;
}
.day-pill .day-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.day-pill small { font-size: .72rem; color: var(--muted); font-weight: 600; }
.day-pill:hover { background: var(--gold-soft); }
.day-pill.closed { opacity: .5; }
.day-pill.closed .day-name { text-decoration: line-through; text-decoration-thickness: 2px; }
.day-pill.active { background: var(--maroon); color: #fff; opacity: 1; }
.day-pill.active small { color: var(--gold); }

/* ---------- Section heads ---------- */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 1.25rem; }
.kicker { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--gold-dark); }
.section-title { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 800; margin: .15rem 0 0; }
.category-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.category-chips a {
    padding: .4rem .85rem; border-radius: 999px; background: var(--card); border: 1.5px solid var(--border);
    text-decoration: none; color: var(--ink); font-weight: 600; font-size: .88rem; transition: all .15s;
}
.category-chips a:hover { border-color: var(--gold); background: var(--gold-soft); }

/* ---------- Empty state ---------- */
.empty-state { background: var(--card); border: 2px dashed var(--border); border-radius: var(--radius); padding: 3rem 1.5rem; text-align: center; }
.empty-state h3 { font-size: 1.4rem; margin-bottom: .4rem; }
.empty-state p { color: var(--muted); margin: 0 0 1.25rem; }
.empty-emoji { font-size: 3.5rem; margin-bottom: .5rem; }

/* ---------- Order layout ---------- */
.order-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; padding-bottom: 5rem; }
@media (min-width: 980px) {
    .order-layout { grid-template-columns: minmax(0, 1fr) 370px; padding-bottom: 0; }
    .checkout { position: sticky; top: 90px; }
}

.menu-category { margin-bottom: 2rem; }
.category-title { display: flex; align-items: center; gap: .6rem; font-size: 1.3rem; margin-bottom: 1rem; }
.category-title::before { content: ""; width: 6px; height: 1.3rem; border-radius: 3px; background: var(--gold); }
.category-title span { font-family: var(--font-body); font-size: .75rem; font-weight: 700; background: var(--gold-soft); color: var(--maroon); padding: .1rem .55rem; border-radius: 999px; }

.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }

/* ---------- Dish card ---------- */
.dish {
    background: var(--card); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
    box-shadow: var(--shadow); border: 2px solid transparent; transition: transform .18s, box-shadow .18s, border-color .18s;
    /* it's a <button>: reset browser styles */
    padding: 0; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.dish:hover:not(:disabled) { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.dish:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.dish:disabled { cursor: not-allowed; }
.dish-media, .dish-body, .dish-foot, .dish-title, .dish-desc, .dish-cat { display: block; }
.dish.in-cart { border-color: var(--gold); }
.dish-media { position: relative; aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 45%, #fff6dc 0%, var(--gold-soft) 45%, #f8dd99 100%); display: grid; place-items: center; overflow: hidden; }
.dish-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.dish:hover .dish-media img { transform: scale(1.05); }
.dish-emoji { font-size: 4.2rem; filter: drop-shadow(0 8px 10px rgba(122, 10, 10, .2)); transition: transform .3s; }
.dish:hover .dish-emoji { transform: scale(1.1) rotate(-6deg); }
.price-tag {
    position: absolute; left: .75rem; bottom: .75rem; background: var(--maroon); color: #fff;
    font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; padding: .25rem .7rem; border-radius: 999px;
    box-shadow: 0 4px 12px rgba(86, 6, 6, .35);
}
.price-tag small { font-family: var(--font-body); font-weight: 600; font-size: .7rem; opacity: .85; }
.in-cart-badge {
    position: absolute; top: .75rem; right: .75rem;
    background: var(--gold); color: var(--maroon-dark); font-weight: 700; font-size: .75rem;
    padding: .2rem .6rem; border-radius: 999px;
}
.sold-ribbon {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(43, 23, 18, .55); color: #fff; font-family: var(--font-display); font-weight: 800;
    font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase;
}
.dish.sold-out { opacity: .75; }
.dish.sold-out:hover { transform: none; }
.dish-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.dish-cat { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-dark); }
.dish-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.dish-desc { font-size: .85rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dish-body .dish-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: .75rem; }
.add-circle {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: var(--maroon); color: #fff; font-size: 1.4rem; font-weight: 700; line-height: 1;
    box-shadow: 0 4px 10px -3px rgba(122, 10, 10, .5); transition: transform .15s;
}
.dish:hover .add-circle { transform: scale(1.1) rotate(90deg); }
.dish.in-cart .add-circle { background: var(--gold); color: var(--maroon-dark); }
.section-hint { margin: 0; }

/* Quantity stepper */
.qty { display: flex; align-items: center; gap: .15rem; background: var(--cream); border-radius: 999px; padding: .2rem; }
.qty input {
    width: 38px; margin: 0; padding: .2rem 0; border: 0; background: transparent; text-align: center;
    font-weight: 700; font-size: 1rem; -moz-appearance: textfield; appearance: textfield;
}
.qty input:focus { box-shadow: none; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn {
    width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--border); background: #fff;
    font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--maroon); font-weight: 700; transition: all .12s;
}
.qty-btn:hover { border-color: var(--maroon); }
.qty-btn:active { transform: scale(.9); }
.qty-btn.plus { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.qty-btn.plus:hover { background: var(--maroon-dark); }

/* ---------- Checkout panel ---------- */
.checkout { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.4rem; border-top: 6px solid var(--gold); }
.checkout-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .75rem; }
.checkout-head h3 { font-size: 1.35rem; }
.checkout-day { font-size: .8rem; font-weight: 700; color: var(--maroon); background: var(--maroon-soft); padding: .15rem .6rem; border-radius: 999px; }

.cart-lines { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.cart-lines li { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-bottom: 1px dashed var(--border); font-size: .93rem; }
.cart-lines li:last-child { border-bottom: 0; }
.cart-lines li b { color: var(--maroon); }
.cart-lines li.cart-empty { flex-direction: column; align-items: center; text-align: center; color: var(--muted); padding: 1rem .5rem; border: 2px dashed var(--border); border-radius: var(--radius-sm); }
.cart-empty-emoji { font-size: 2rem; }

.pickup-note { display: flex; gap: .7rem; align-items: flex-start; background: var(--gold-soft); border-radius: var(--radius-sm); padding: .75rem .9rem; font-size: .88rem; color: #5b4209; }
.pickup-note > span { font-size: 1.4rem; line-height: 1; }
.pickup-note strong { color: var(--maroon); }

.total-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.1rem; padding-top: .9rem; border-top: 2px solid var(--ink); font-weight: 600; }
.total-row strong { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--maroon); }
.fine-print { font-size: .8rem; color: var(--muted); text-align: center; margin: .6rem 0 0; }

/* Legacy totals list (still used in a couple of places) */
.totals { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; margin: 1rem 0 0; }
.totals dd { margin: 0; text-align: right; }
.totals .grand { font-weight: 800; font-size: 1.2rem; color: var(--maroon); }

/* Mobile cart bar */
.cart-bar {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--maroon); color: #fff; border-radius: 999px; padding: .55rem .55rem .55rem 1.3rem;
    box-shadow: 0 12px 30px -8px rgba(86, 6, 6, .6); animation: rise .25s ease-out;
}
.cart-bar div { display: flex; flex-direction: column; line-height: 1.15; }
.cart-bar span { font-size: .78rem; opacity: .85; }
.cart-bar strong { font-family: var(--font-display); font-size: 1.2rem; }
@media (min-width: 980px) { .cart-bar { display: none !important; } }
@keyframes rise { from { transform: translateY(120%); } to { transform: none; } }

/* ---------- Receipt / success ---------- */
.receipt { border-top: 6px solid var(--gold); }
.receipt-head { text-align: center; margin-bottom: 1.25rem; }
.receipt-head h1 { margin: .25rem 0 .5rem; }
.receipt-head p { color: var(--muted); margin: .75rem 0 0; }
.receipt-emoji { font-size: 3.5rem; }
.order-chip { display: inline-block; background: var(--maroon); color: #fff; font-family: var(--font-display); font-weight: 700; padding: .3rem .9rem; border-radius: 999px; }

.steps { display: flex; list-style: none; padding: 0; margin: 0 0 1.5rem; counter-reset: s; }
.steps li { flex: 1; text-align: center; font-size: .75rem; font-weight: 600; color: var(--muted); position: relative; counter-increment: s; }
.steps li::before {
    content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto .35rem;
    border-radius: 50%; background: var(--cream); border: 2px solid var(--border); font-weight: 800; position: relative; z-index: 1;
}
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; background: var(--border); }
.steps li.done::before { content: "✓"; background: var(--gold); border-color: var(--gold); color: var(--maroon-dark); }
.steps li.done::after { background: var(--gold); }
.steps li.current { color: var(--maroon); }
.steps li.current::before { background: var(--maroon); border-color: var(--maroon); color: #fff; box-shadow: 0 0 0 5px var(--maroon-soft); }

/* ---------- Footer ---------- */
.site-footer { margin-top: 4rem; background: var(--maroon-dark); color: rgba(255, 255, 255, .78); font-size: .92rem; }
.footer-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; padding-top: 2.5rem; padding-bottom: 2rem; }
.footer-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--gold); }
.site-footer h4 { font-family: var(--font-body); color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .5rem; }
.site-footer p { margin: .3rem 0 0; }
.site-footer a { color: var(--gold); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 1rem; padding-bottom: 1.25rem; font-size: .8rem; opacity: .7; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: #eee5dc; color: #4b3a33; }
.badge-new, .badge-requested { background: #dbeafe; color: #1e40af; }
.badge-confirmed, .badge-quoted { background: #ede9fe; color: #5b21b6; }
.badge-payment_verified, .badge-paid { background: #cffafe; color: #155e75; }
.badge-preparing { background: var(--gold-soft); color: #8a5a00; }
.badge-ready, .badge-out_for_delivery { background: #ffedd5; color: #9a3412; }
.badge-completed, .badge-delivered { background: #dcfce7; color: #166534; }
.badge-cancelled { background: var(--maroon-soft); color: var(--maroon); }

/* =========================================================
   Admin
   ========================================================= */
.admin main { padding-bottom: 3rem; }
.admin .logo { height: 48px; }
.admin-tag { background: var(--maroon); color: var(--gold); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; padding: .2rem .55rem; border-radius: 6px; }
.admin h1 { margin-top: 1.5rem; }
.admin .card { box-shadow: 0 1px 2px rgba(86, 6, 6, .05); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin: 1.5rem 0; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; color: var(--muted); font-size: .85rem; font-weight: 600; text-decoration: none; border-top: 4px solid var(--gold); }
.stat span { display: block; font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--maroon); }
.stat.highlight { border-top-color: var(--maroon); background: var(--maroon-soft); }

.filters { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.filters select, .filters input { width: auto; margin: 0; }

.order-list { display: grid; gap: .75rem; }
.order-card { background: var(--card); border: 1px solid var(--border); border-left: 5px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.1rem; }
.order-card.status-new { border-left-color: #3b82f6; }
.order-card.status-confirmed { border-left-color: #8b5cf6; }
.order-card.status-payment_verified { border-left-color: #06b6d4; }
.order-card.status-preparing { border-left-color: var(--gold); }
.order-card.status-ready { border-left-color: var(--maroon); }
.order-card header { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.order-card header strong { font-family: var(--font-display); font-size: 1.1rem; }
.order-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.order-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.order-actions form { margin: 0; }
form.inline { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
form.inline select, form.inline input { width: auto; margin: 0; padding: .45rem .7rem; }
.inline-label { display: flex; align-items: center; gap: .3rem; margin: 0; }
.inline-label input { width: 110px; }
.note { font-style: italic; color: var(--muted); font-size: .9rem; margin-top: .25rem; }
.pre { background: var(--cream); padding: .7rem; border-radius: 8px; }

.table { width: 100%; border-collapse: collapse; background: var(--card); }
.table th, .table td { padding: .65rem .55rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr.inactive td { opacity: .5; }
.table td.actions { text-align: right; }
.table td.actions > * { display: inline-block; margin: 2px 0 2px .2rem; vertical-align: middle; }
.table td.actions form { margin: 0; }
.kitchen-table { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.kitchen-table tr.status-preparing { background: #fffaeb; }
.kitchen-table tr.status-ready { background: #f0fdf4; }

/* Admin day tabs (menu manager) */
.day-tabs { display: flex; gap: .4rem; overflow-x: auto; padding: 1.25rem 0 .25rem; }
.day-tab {
    flex: 0 0 auto; min-width: 60px; padding: .5rem .8rem; border: 1.5px solid var(--border); border-radius: 999px;
    background: var(--card); color: var(--ink); text-decoration: none; text-align: center; font-weight: 700;
}
.day-tab.closed { color: var(--muted); text-decoration: line-through; }
.day-tab.active { background: var(--maroon); border-color: var(--maroon); color: #fff; }

.admin-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
@media (min-width: 900px) { .admin-grid { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.inline-form input[type=text] { flex: 1; min-width: 180px; margin: 0; }
.inline-form label.check { margin: 0; }
.thumb-row { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.thumb { width: 80px; height: 60px; object-fit: cover; border-radius: 8px; }

@media (max-width: 600px) {
    .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
    .dish-emoji { font-size: 3rem; }
    .dish-body { padding: .7rem .7rem .8rem; }
    .dish-title { font-size: 1rem; }
    .dish-desc { font-size: .8rem; }
    .add-circle { width: 32px; height: 32px; font-size: 1.25rem; }
    .price-tag { left: .5rem; bottom: .5rem; font-size: .92rem; padding: .2rem .55rem; }
    .in-cart-badge { top: .5rem; right: .5rem; font-size: .7rem; }
    .table td.actions { text-align: left; }
    .card { padding: 1.15rem; }
    .logo { height: 48px; }
}

/* =========================================================
   App shell — splash, logo loader, tab bar (mobile-app feel)
   ========================================================= */

/* Splash screen */
.splash {
    position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 40%, #fff 0%, var(--cream) 55%, var(--gold-soft) 100%);
    transition: opacity .5s ease, visibility .5s;
}
.no-splash .splash { display: none; }
.splash.hide { opacity: 0; visibility: hidden; }
.splash.hide .splash-inner { transform: scale(1.06); }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; transition: transform .5s ease; }
.splash-logo { width: min(72vw, 320px); height: auto; animation: splash-in .8s cubic-bezier(.2, .9, .3, 1.2) both; }
.splash-bar { width: 140px; height: 5px; border-radius: 999px; background: rgba(122, 10, 10, .1); overflow: hidden; animation: fade-in .4s .4s both; }
.splash-bar span { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--maroon)); animation: slide 1.1s ease-in-out infinite; }
.splash-tag { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--maroon); animation: fade-in .4s .55s both; }
@keyframes splash-in { from { opacity: 0; transform: scale(.85) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Page loader (logo in a spinning ring) */
.page-loader {
    position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
    background: rgba(255, 249, 240, .78); backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.page-loader.show { opacity: 1; visibility: visible; }
.page-loader { transition: opacity .3s ease, visibility .3s; }
/* Safety net: if loader.js never runs, the opening loader still clears itself. */
.page-loader.is-initial { animation: loader-failsafe .3s 5s forwards; }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }
.loader-badge { position: relative; width: 132px; height: 132px; display: grid; place-items: center; background: #fff; border-radius: 50%; box-shadow: var(--shadow-lg); }
.loader-ring {
    position: absolute; inset: -6px; border-radius: 50%;
    background: conic-gradient(var(--gold) 0deg, var(--maroon) 140deg, transparent 220deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    animation: spin .9s linear infinite;
}
.loader-logo { width: 96px; height: auto; animation: pulse 1.2s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* Header WhatsApp shortcut */
.header-chat {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    background: var(--whatsapp); color: #fff; box-shadow: 0 4px 12px -4px rgba(37, 211, 102, .7);
}
.header-chat:hover { background: var(--whatsapp-dark); }
.header-inner { gap: .75rem; }
.top-nav { margin-left: auto; }

/* Greeting */
.hero .greeting { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--gold); margin: 1rem 0 -.25rem; }

/* Pickup / delivery switch */
.segmented { border: 0; padding: 0; margin: 0 0 .9rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.segmented legend { font-size: .9rem; font-weight: 600; margin-bottom: .4rem; padding: 0; }
.segmented label { margin: 0; cursor: pointer; position: relative; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label > span {
    display: flex; flex-direction: column; gap: .1rem; height: 100%;
    padding: .7rem .8rem; border: 2px solid var(--border); border-radius: var(--radius-sm); background: #fff;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.segmented b { font-size: .98rem; }
.segmented small { font-size: .74rem; font-weight: 500; color: var(--muted); line-height: 1.3; }
.segmented input:checked + span { border-color: var(--maroon); background: var(--maroon-soft); box-shadow: 0 0 0 3px rgba(122, 10, 10, .08); }
.segmented input:checked + span b { color: var(--maroon); }
.segmented input:focus-visible + span { box-shadow: 0 0 0 4px var(--gold-soft); border-color: var(--gold-dark); }
.fee-note { margin: .35rem 0 0; text-align: right; font-size: .82rem; font-weight: 700; color: var(--gold-dark); }
.receipt .fee-note { text-align: left; background: var(--gold-soft); color: #5b4209; font-weight: 500; padding: .7rem .9rem; border-radius: var(--radius-sm); }

/* Admin: delivery tag + fee form */
.fulfil-tag { display: inline-block; margin-top: .35rem; font-size: .85rem; font-weight: 600; background: var(--cream); border: 1px solid var(--border); padding: .15rem .6rem; border-radius: 999px; }
.fulfil-tag.delivery { background: var(--gold-soft); border-color: #f3dc9c; }
.fee-form { margin-top: .5rem; }
.fee-form input { width: 100px; }

/* Bottom tab bar — phones only */
.tab-bar { display: none; }
@media (max-width: 760px) {
    .app { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    .site-header .top-nav { display: none; }
    .header-inner { flex-wrap: nowrap; }
    .header-chat { margin-left: auto; }
    .header-inner { min-height: 60px; }
    .logo { height: 46px; }

    .tab-bar {
        display: grid; grid-template-columns: repeat(4, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px);
        border-top: 1px solid var(--border);
        padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
        box-shadow: 0 -6px 20px -10px rgba(86, 6, 6, .2);
    }
    .tab-bar a {
        position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem;
        padding: .35rem 0; text-decoration: none; color: var(--muted); font-size: .7rem; font-weight: 700;
    }
    .tab-bar svg { width: 24px; height: 24px; }
    .tab-bar a.active { color: var(--maroon); }
    .tab-bar a.active::before { content: ""; position: absolute; top: -6px; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
    .tab-bar a:last-child { color: var(--whatsapp-dark); }
    .tab-badge {
        position: absolute; top: .1rem; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px;
        display: grid; place-items: center; border-radius: 999px; background: var(--maroon); color: #fff;
        font-size: .68rem; border: 2px solid #fff;
    }

    /* Cart bar floats just above the tab bar */
    .cart-bar { bottom: calc(76px + env(safe-area-inset-bottom)); }

    /* Compact, app-like hero */
    .hero { padding: 1rem 0 4rem; }
    .hero::after { display: none; }
    .hero h1 { font-size: 1.9rem; margin: .5rem 0 .6rem; }
    .hero p { font-size: .95rem; margin-bottom: 1rem; }
    .hero .greeting { margin-top: .75rem; }
    .hero-actions .btn { flex: 1; padding: .7rem .9rem; font-size: .9rem; }
    .eyebrow { font-size: .75rem; }

    /* Phones: the bottom tab bar is the footer — hide the website footer */
    .site-footer { display: none; }
    main { padding-bottom: 1.5rem; }
}

/* Running as an installed app */
@media (display-mode: standalone) {
    .site-header { padding-top: env(safe-area-inset-top); }
}

/* Install prompt */
.install-toast {
    position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60;
    max-width: 440px; margin: 0 auto; display: flex; align-items: center; gap: .7rem;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .7rem;
    box-shadow: var(--shadow-lg); animation: rise .3s ease-out;
}
.install-toast img { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border); }
.install-toast div { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.install-toast strong { font-size: .92rem; }
.install-toast span { font-size: .78rem; color: var(--muted); }
.install-close { border: 0; background: none; font-size: 1.4rem; line-height: 1; color: var(--muted); cursor: pointer; padding: .2rem .3rem; }
@media (min-width: 761px) { .install-toast { bottom: 20px; right: 20px; left: auto; } }

/* =========================================================
   Dish options sheet (bottom sheet on phones, modal on desktop)
   ========================================================= */
.sheet-open { overflow: hidden; }
.sheet {
    padding: 0; border: 0; background: transparent; color: var(--ink);
    width: 100%; max-width: 520px; max-height: 100dvh; overflow: visible;
}
.sheet::backdrop { background: rgba(43, 23, 18, .55); backdrop-filter: blur(2px); animation: fade-in .2s ease-out; }
.sheet.closing::backdrop { opacity: 0; transition: opacity .18s; }
.sheet-panel {
    position: relative; display: flex; flex-direction: column; max-height: min(88dvh, 760px);
    background: var(--card); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(43, 23, 18, .5);
    animation: pop-in .22s cubic-bezier(.2, .9, .3, 1.1);
}
.sheet.closing .sheet-panel { animation: pop-out .18s ease-in forwards; }
@keyframes pop-in { from { opacity: 0; transform: scale(.95) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop-out { to { opacity: 0; transform: scale(.97) translateY(8px); } }

.sheet-handle { display: none; }
.sheet-close {
    position: absolute; top: .75rem; right: .75rem; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
    border: 0; background: rgba(255, 255, 255, .95); color: var(--ink); font-size: 1.5rem; line-height: 1;
    cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.sheet-scroll { overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.sheet-media {
    height: 200px; display: grid; place-items: center; overflow: hidden;
    background: radial-gradient(circle at 50% 45%, #fff6dc 0%, var(--gold-soft) 45%, #f8dd99 100%);
}
.sheet-media img { width: 100%; height: 100%; object-fit: cover; }
.sheet-media .dish-emoji { font-size: 5.5rem; }
.sheet-body { padding: 1.1rem 1.25rem .5rem; }
.sheet-body h3 { font-size: 1.6rem; font-weight: 800; }
.sheet-desc { margin: .35rem 0 0; color: var(--muted); font-size: .92rem; }

.sheet-group { margin-top: 1.25rem; }
.group-head { display: flex; justify-content: space-between; align-items: center; background: var(--cream); margin: 0 -1.25rem .25rem; padding: .6rem 1.25rem; }
.group-head h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.pill-req, .pill-opt { font-size: .72rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; }
.pill-req { background: var(--maroon); color: #fff; }
.pill-opt { background: #eee5dc; color: var(--muted); }

.opt-list { display: flex; flex-direction: column; }
.opt {
    display: flex; align-items: center; gap: .75rem; margin: 0; padding: .8rem 0;
    border-bottom: 1px solid var(--border); font-weight: 500; cursor: pointer;
}
.opt:last-child { border-bottom: 0; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt-mark {
    flex: 0 0 22px; height: 22px; border-radius: 50%; border: 2px solid #cdbfb2; background: #fff;
    display: grid; place-items: center; transition: all .15s;
}
.opt-mark.square { border-radius: 6px; }
.opt input:checked + .opt-mark { border-color: var(--maroon); background: var(--maroon); box-shadow: inset 0 0 0 4px #fff; }
.opt input:checked + .opt-mark.square { box-shadow: none; }
.opt input:checked + .opt-mark.square::after { content: "✓"; color: #fff; font-size: .8rem; font-weight: 800; }
.opt input:focus-visible + .opt-mark { outline: 3px solid var(--gold); outline-offset: 2px; }
.opt-name { flex: 1; }
.opt input:checked ~ .opt-name { font-weight: 700; color: var(--maroon); }
.opt-price { font-weight: 700; font-size: .92rem; color: var(--ink); }
.opt.disabled { opacity: .45; cursor: not-allowed; }

.sheet-foot {
    display: flex; gap: .75rem; align-items: center; padding: .85rem 1.25rem calc(.85rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border); background: #fff;
}
.sheet-foot output, .qty output { min-width: 28px; text-align: center; font-weight: 800; font-size: 1.05rem; }
.qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.sheet-add { flex: 1; padding: .85rem 1rem; font-size: 1rem; }
.sheet-add span { opacity: .85; font-weight: 600; }

/* Phones: slide up from the bottom like an app sheet */
@media (max-width: 760px) {
    .sheet { max-width: none; margin: auto 0 0; }
    .sheet-panel { border-radius: 22px 22px 0 0; max-height: 92dvh; animation: sheet-up .28s cubic-bezier(.2, .9, .3, 1); }
    .sheet.closing .sheet-panel { animation: sheet-down .18s ease-in forwards; }
    .sheet-handle { display: block; position: absolute; top: 8px; left: 50%; z-index: 2; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: rgba(255, 255, 255, .85); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
    .sheet-media { height: 170px; }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-down { to { transform: translateY(100%); } }

/* Cart lines with their own steppers */
.cart-lines li.cart-line { align-items: center; }
.cl-main { flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem; }
.cl-name { font-weight: 600; }
.cl-extras { grid-column: 1; font-size: .8rem; color: var(--muted); }
.cl-price { grid-column: 2; grid-row: 1; font-weight: 700; }
.qty-sm .qty-btn { width: 28px; height: 28px; font-size: .95rem; }
.qty-sm output { min-width: 20px; font-size: .92rem; }

/* =========================================================
   Mobile-app home, "Get app", full-screen order panel
   ========================================================= */
.get-app {
    display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px;
    border: 1.5px solid var(--maroon); background: #fff; color: var(--maroon);
    font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; transition: background .15s, color .15s;
}
.get-app:hover { background: var(--maroon); color: #fff; }
.is-installed [data-install-app] { display: none !important; }

/* Search */
.search-box {
    display: flex; align-items: center; gap: .5rem; margin: 0; min-width: min(100%, 340px);
    background: #fff; border: 1.5px solid var(--border); border-radius: 999px; padding: 0 1rem; color: var(--muted);
    transition: border-color .15s, box-shadow .15s;
}
.search-box:focus-within { border-color: var(--gold-dark); box-shadow: 0 0 0 4px var(--gold-soft); }
.search-box input { border: 0; margin: 0; padding: .7rem 0; background: transparent; box-shadow: none !important; font-weight: 500; }
.search-empty { margin-top: 0; }
.dish[hidden] { display: none; }

/* Phone home block (hidden on larger screens) */
.m-home { display: none; }
.dish-price { display: none; }
.checkout-close { display: none; }

.promo-kicker .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #c9a7a7; margin-right: .35rem; vertical-align: middle; }
.promo-kicker .dot.open { background: #4ade80; }

/* Install sheet */
.install-sheet .sheet-panel { overflow-y: auto; }
.install-head { text-align: center; padding: 1.75rem 1.25rem .5rem; }
.install-icon { width: 76px; height: 76px; margin: 0 auto .75rem; border-radius: 20px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.install-head h3 { font-size: 1.45rem; font-weight: 800; }
.install-head p { margin: .35rem 0 0; color: var(--muted); font-size: .88rem; }
.install-steps { padding: .5rem 1.25rem 1rem; }
.install-steps h4 { font-family: var(--font-body); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-dark); margin: .5rem 0 .6rem; }
.install-steps ol { list-style: none; counter-reset: st; padding: 0; margin: 0 0 .5rem; }
.install-steps li { counter-increment: st; position: relative; padding: .55rem 0 .55rem 2.6rem; border-bottom: 1px dashed var(--border); }
.install-steps li:last-child { border-bottom: 0; }
.install-steps li::before {
    content: counter(st); position: absolute; left: 0; top: .45rem; width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center; background: var(--maroon); color: #fff; font-weight: 800; font-size: .85rem;
}
.install-steps svg { vertical-align: -3px; color: #0a84ff; }

@media (max-width: 760px) {
    /* App header: logo · Get app · WhatsApp */
    .get-app { margin-left: auto; padding: .4rem .75rem; font-size: .8rem; }
    .header-chat { margin-left: 0; width: 38px; height: 38px; }
    .is-installed .header-chat { margin-left: auto; }

    /* Replace the big hero with an app-style home */
    .hero { display: none; }
    .m-home { display: block; padding-top: 1rem; }
    .m-greet { margin: 0; font-weight: 600; color: var(--muted); font-size: .92rem; }
    .m-title { font-size: 1.65rem; margin: .15rem 0 .5rem; line-height: 1.15; }
    .m-title em { font-style: normal; color: var(--maroon); }
    .m-loc { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; background: #fff; border: 1px solid var(--border); padding: .3rem .75rem; border-radius: 999px; }
    .m-loc b { color: var(--maroon); }

    .promo-rail {
        display: flex; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin: 1rem -16px 0; padding: 0 16px .25rem; scroll-padding-inline: 16px;
    }
    .promo-rail::-webkit-scrollbar { display: none; }
    .promo {
        flex: 0 0 80%; scroll-snap-align: start; display: flex; flex-direction: column; gap: .15rem;
        padding: 1rem 1.1rem; border-radius: 18px; border: 0; text-align: left; font: inherit; text-decoration: none;
        min-height: 112px; justify-content: center; cursor: pointer; position: relative; overflow: hidden;
    }
    .promo strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; line-height: 1.15; }
    .promo span:last-child { font-size: .82rem; opacity: .85; }
    .promo-kicker { font-size: .7rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .8 !important; }
    .promo-maroon { background: radial-gradient(circle at 90% 10%, rgba(242, 193, 78, .35), transparent 50%), linear-gradient(135deg, var(--maroon), var(--maroon-dark)); color: #fff; }
    .promo-maroon strong { color: #fff; }
    .promo-gold { background: linear-gradient(135deg, #f7d27a, var(--gold)); color: var(--maroon-dark); }
    .promo-cream { background: #fff; border: 1.5px solid var(--border); color: var(--ink); }
    .promo-cream strong { color: var(--maroon); }

    .day-strip { margin-top: 1rem; box-shadow: var(--shadow); }

    .section-head { flex-direction: column; align-items: stretch; margin: 1.25rem 0 .9rem; gap: .75rem; }
    .section-title { font-size: 1.45rem; }
    .search-box { min-width: 0; }

    /* Dishes as app-style rows: photo left, details right */
    .menu-grid { grid-template-columns: 1fr; gap: .7rem; }
    .dish { flex-direction: row; border-radius: 16px; min-height: 116px; }
    .dish:hover:not(:disabled) { transform: none; }
    .dish:active:not(:disabled) { transform: scale(.98); }
    .dish-media { flex: 0 0 116px; aspect-ratio: auto; }
    .dish-emoji { font-size: 2.8rem; }
    .price-tag, .dish-hint { display: none; }
    .dish-body { padding: .75rem .85rem; min-width: 0; }
    .dish-title { font-size: 1.05rem; }
    .dish-cat { font-size: .66rem; }
    .dish-body .dish-foot { padding-top: .4rem; }
    .dish-price { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--maroon); }
    .dish-price small { font-family: var(--font-body); font-weight: 600; font-size: .7rem; color: var(--muted); }
    .in-cart-badge { top: .4rem; left: .4rem; right: auto; font-size: .62rem; padding: .15rem .45rem; }
    .cart-bar .btn { white-space: nowrap; }

    /* "Your order" becomes a full-screen panel */
    .checkout-open { overflow: hidden; }
    .checkout {
        position: fixed; inset: 0; z-index: 70; margin: 0; border-radius: 0; border-top: 0; box-shadow: none;
        overflow-y: auto; overscroll-behavior: contain; padding: 0 16px;
        transform: translateY(100%); visibility: hidden;
        transition: transform .32s cubic-bezier(.2, .9, .3, 1), visibility .32s;
    }
    .checkout.open { transform: none; visibility: visible; }
    .checkout-head {
        position: sticky; top: 0; z-index: 2; background: #fff; align-items: center; justify-content: flex-start; gap: .5rem;
        margin: 0 -16px .75rem; padding: calc(.7rem + env(safe-area-inset-top)) 16px .7rem; border-bottom: 1px solid var(--border);
    }
    .checkout-close {
        display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
        border: 0; background: var(--cream); color: var(--ink); cursor: pointer;
    }
    .checkout-day { margin-left: auto; }
    .checkout-submit {
        position: sticky; bottom: 0; z-index: 2; background: #fff; margin: .5rem -16px 0;
        padding: .25rem 16px calc(.9rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border); box-shadow: 0 -10px 24px -14px rgba(86, 6, 6, .35);
    }
    .checkout-submit .total-row { margin-top: .5rem; padding-top: .5rem; border-top: 0; }
    .checkout-submit .btn-block { margin-top: .6rem; }
}

/* =========================================================
   Welcome / splash page (welcome.php)
   ========================================================= */
.welcome {
    min-height: 100vh; min-height: 100dvh; color: #fff;
    background:
        radial-gradient(circle at 85% 12%, rgba(242, 193, 78, .4), transparent 40%),
        radial-gradient(circle at 8% 95%, rgba(242, 193, 78, .3), transparent 45%),
        radial-gradient(rgba(255, 255, 255, .07) 1.5px, transparent 1.5px) 0 0 / 22px 22px,
        linear-gradient(160deg, var(--maroon) 0%, var(--maroon-dark) 100%);
}
.welcome-screen {
    position: relative; overflow: hidden; min-height: 100vh; min-height: 100dvh;
    display: grid; place-items: center;
    padding: calc(1.5rem + env(safe-area-inset-top)) 20px calc(1.5rem + env(safe-area-inset-bottom));
}
.welcome-inner { position: relative; z-index: 1; width: 100%; max-width: 460px; text-align: center; display: flex; flex-direction: column; align-items: center; }

.welcome-logo {
    width: min(78vw, 300px); background: #fff; border-radius: 28px; padding: 1rem 1.25rem;
    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .55), 0 0 0 6px rgba(242, 193, 78, .35);
    animation: splash-in .8s cubic-bezier(.2, .9, .3, 1.2) both;
}
.welcome-logo img { width: 100%; height: auto; }

.welcome-status { margin-top: 1.6rem; }
.welcome h1 { color: #fff; font-size: clamp(2rem, 8vw, 2.8rem); font-weight: 800; margin: 1rem 0 .7rem; line-height: 1.08; }
.welcome h1 em { font-style: normal; color: var(--gold); display: block; }
.welcome-sub { margin: 0 0 1.75rem; color: rgba(255, 255, 255, .85); font-size: 1.02rem; max-width: 38ch; }

.welcome-actions { width: 100%; display: flex; flex-direction: column; gap: .7rem; }
.welcome-cta { width: 100%; padding: 1.05rem 1.25rem; font-size: 1.15rem; font-weight: 800; box-shadow: 0 14px 30px -12px rgba(242, 193, 78, .9); }
.welcome-cta svg { transition: transform .15s; }
.welcome-cta:hover svg { transform: translateX(4px); }
.welcome-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.welcome-secondary .btn { padding: .75rem .5rem; font-size: .9rem; }

.welcome-perks { list-style: none; padding: 0; margin: 1.75rem 0 0; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; font-size: .76rem; line-height: 1.25; color: rgba(255, 255, 255, .78); font-weight: 600; }
.welcome-perks li { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.welcome-perks span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); font-size: 1.25rem; }

/* Staggered entrance */
.welcome-status, .welcome h1, .welcome-sub, .welcome-actions, .welcome-perks { animation: rise-in .6s cubic-bezier(.2, .9, .3, 1) both; }
.welcome-status { animation-delay: .35s; }
.welcome h1 { animation-delay: .45s; }
.welcome-sub { animation-delay: .55s; }
.welcome-actions { animation-delay: .65s; }
.welcome-perks { animation-delay: .8s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Floating food in the background */
.welcome-food span { position: absolute; font-size: clamp(2.2rem, 7vw, 3.6rem); opacity: .9; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .35)); animation: bob 5s ease-in-out infinite; }
.welcome-food span:nth-child(1) { top: 6%;  left: 6%;  animation-delay: 0s; }
.welcome-food span:nth-child(2) { top: 10%; right: 7%; animation-delay: .8s; }
.welcome-food span:nth-child(3) { top: 44%; left: -2%; animation-delay: 1.6s; opacity: .55; }
.welcome-food span:nth-child(4) { top: 48%; right: -2%; animation-delay: 2.2s; opacity: .55; }
.welcome-food span:nth-child(5) { bottom: 5%; left: 8%;  animation-delay: 1.1s; }
.welcome-food span:nth-child(6) { bottom: 7%; right: 8%; animation-delay: 2.8s; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-12px) rotate(6deg); } }
@media (max-width: 520px) {
    .welcome-food { display: none; }
}
/* Short phones: shrink the logo and spacing so everything fits on one screen */
@media (max-height: 700px) {
    .welcome-logo { width: min(60vw, 230px); padding: .7rem 1rem; border-radius: 22px; }
    .welcome-status { margin-top: 1rem; }
    .welcome h1 { font-size: 1.8rem; margin: .7rem 0 .5rem; }
    .welcome-sub { font-size: .92rem; margin-bottom: 1.1rem; }
    .welcome-cta { padding: .9rem 1rem; }
    .welcome-perks { margin-top: 1.1rem; }
    .welcome-perks span { width: 36px; height: 36px; font-size: 1.05rem; }
}

/* =========================================================
   Admin — sidebar layout
   ========================================================= */
.admin-shell { --sidebar-w: 264px; background: #f8f3ec; }
.sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: var(--sidebar-w);
    display: flex; flex-direction: column; color: rgba(255, 255, 255, .78);
    background:
        radial-gradient(circle at 100% 0%, rgba(242, 193, 78, .22), transparent 45%),
        linear-gradient(180deg, var(--maroon) 0%, var(--maroon-dark) 100%);
    box-shadow: 4px 0 24px -12px rgba(43, 23, 18, .5);
}
.sidebar-brand { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1.25rem 1.25rem 1rem; text-decoration: none; }
.sidebar-logo { display: block; background: #fff; border-radius: 14px; padding: .45rem .7rem; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4); }
.sidebar-logo img { height: 46px; width: auto; }
.sidebar-tag { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .25rem .75rem 1rem; scrollbar-width: thin; }
.nav-group { margin-top: .9rem; }
.nav-label { display: block; padding: 0 .75rem .35rem; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.nav-link {
    position: relative; display: flex; align-items: center; gap: .75rem; padding: .62rem .75rem; margin-bottom: 2px;
    border-radius: 10px; color: rgba(255, 255, 255, .8); text-decoration: none; font-weight: 600; font-size: .94rem;
    transition: background .15s, color .15s;
}
.nav-link svg { flex: none; opacity: .85; }
.nav-link span { flex: 1; }
.nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-link.active { background: rgba(255, 255, 255, .14); color: #fff; }
.nav-link.active::before { content: ""; position: absolute; left: -.75rem; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--gold); }
.nav-link.active svg { color: var(--gold); opacity: 1; }
.nav-badge { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: var(--gold); color: var(--maroon-dark); font-size: .72rem; font-weight: 800; }

.sidebar-user { display: flex; align-items: center; gap: .65rem; margin: .5rem .75rem .9rem; padding: .7rem; border-radius: 12px; background: rgba(0, 0, 0, .18); }
.avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--maroon-dark); font-family: var(--font-display); font-weight: 800; }
.user-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.user-meta b { color: #fff; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta small { font-size: .72rem; color: rgba(255, 255, 255, .55); }
.logout-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: rgba(255, 255, 255, .75); }
.logout-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.admin-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 1rem;
    padding: .9rem 2rem; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
}
.topbar-title { flex: 1; min-width: 0; }
.admin .topbar h1 { margin: 0; font-size: 1.45rem; font-weight: 800; }
.topbar-title p { margin: .1rem 0 0; font-size: .85rem; color: var(--muted); }
.topbar-right { display: flex; align-items: center; gap: .75rem; }
.topbar-date { font-size: .85rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.live-pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; color: #166534; background: #e7f8ee; padding: .3rem .7rem; border-radius: 999px; }
.live-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); }
.menu-toggle { display: none; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--ink); cursor: pointer; }

.admin-content { flex: 1; width: 100%; max-width: 1280px; padding: 1.5rem 2rem 3rem; }
.admin-content > .alert:first-child { margin-top: 0; }

/* Upgraded admin components */
.admin-shell .card { border-radius: 16px; box-shadow: 0 1px 2px rgba(86, 6, 6, .04), 0 6px 20px -12px rgba(86, 6, 6, .18); }
.admin-shell .card h2 { font-size: 1.15rem; }
.admin-shell .stats { margin-top: 0; }
.admin-shell .stat { border-radius: 14px; border-top-width: 0; border-left: 4px solid var(--gold); box-shadow: 0 6px 20px -14px rgba(86, 6, 6, .3); }
.admin-shell .stat.highlight { border-left-color: var(--maroon); }
.admin-shell .order-card { border-radius: 14px; box-shadow: 0 6px 20px -16px rgba(86, 6, 6, .35); }
.admin-shell .table { border-radius: 12px; }
.admin-shell .table tbody tr:hover td { background: #fffaf3; }
.admin-shell .day-tabs { padding-top: 0; }
.admin-shell .admin-grid { margin-top: 0; }
.admin-shell .filters select, .admin-shell .filters input { background: #fff; }

/* Reports */
.report-filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1.25rem; }
.report-filters .page-tabs { margin: 0; }
.custom-range { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.custom-range input { width: auto; margin: 0; padding: .4rem .6rem; background: #fff; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.kpi { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .2rem; box-shadow: 0 6px 20px -14px rgba(86, 6, 6, .3); }
.kpi-label { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: .4rem; }
.kpi strong { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-note { font-size: .8rem; color: var(--muted); }
.kpi-hero { border-top: 4px solid var(--maroon); }
.kpi-hero strong { font-size: 2.3rem; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.report-notes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.note-chip { font-size: .82rem; font-weight: 600; background: #fff; border: 1px solid var(--border); padding: .3rem .75rem; border-radius: 999px; color: var(--ink); text-decoration: none; }
.note-chip.warn { background: #fff7e6; border-color: #f3d58c; color: #7a4b00; }
.legend { display: flex; gap: 1rem; font-size: .85rem; color: var(--muted); font-weight: 600; }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.chart-wrap { position: relative; margin-top: .5rem; }
.rev-chart { width: 100%; height: auto; display: block; overflow: visible; }
.rev-chart .grid { stroke: #efe7dd; stroke-width: 1; }
.rev-chart .axis { stroke: #cdbfb2; stroke-width: 1; }
.rev-chart .tick { font: 600 11px var(--font-body); fill: var(--muted); }
.rev-chart .hit { fill: transparent; }
.rev-chart .bar { outline: none; cursor: default; }
.rev-chart .bar.on .hit, .rev-chart .bar:focus-visible .hit { fill: rgba(122, 10, 10, .05); }
.chart-tip {
    position: absolute; top: -6px; z-index: 3; pointer-events: none; transform: translateY(-100%);
    display: flex; flex-direction: column; gap: .15rem; min-width: 170px;
    background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: .55rem .7rem;
    box-shadow: 0 10px 24px -10px rgba(43, 23, 18, .35); font-size: .82rem; color: var(--ink);
}
.chart-tip i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .4rem; }
.chart-tip .t { margin-top: .2rem; padding-top: .25rem; border-top: 1px solid var(--border); font-weight: 700; }
.table-scroll { max-height: 420px; overflow: auto; }
.table tfoot th { border-top: 2px solid var(--ink); color: var(--ink); font-size: .85rem; text-transform: none; letter-spacing: 0; }
.top-dishes { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.meter { height: 8px; background: #f3ebe1; border-radius: 4px; margin: .3rem 0 .15rem; overflow: hidden; }
.meter span { display: block; height: 100%; background: #a52a2a; border-radius: 4px; }

/* Invoices: list */
.inv-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.inv-toolbar .page-tabs { margin: 0; }
.inv-toolbar form.inline input, .inv-toolbar form.inline select { background: #fff; max-width: 260px; border-radius: 999px; }
.inv-new { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.table-scroll.tall { max-height: 640px; }
.inv-list tr.clickable { cursor: pointer; }
.inv-list a { text-decoration: none; }
.overdue { color: #b91c1c; font-weight: 700; }
.empty-inline { text-align: center; padding: 2rem 1rem; }

/* Invoices: form */
.inv-lines { display: grid; gap: .5rem; margin-bottom: .75rem; }
.inv-line { display: grid; grid-template-columns: minmax(0, 1fr) 80px 130px 110px 36px; gap: .5rem; align-items: center; }
.inv-line input { margin: 0; }
.inv-head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.line-amount { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.remove-line { padding: .3rem .5rem; }
.tax-modes { border: 0; padding: 0; margin: 0 0 .9rem; display: grid; gap: .45rem; }
.tax-modes legend { font-size: .9rem; font-weight: 600; margin-bottom: .4rem; }
.tax-mode { margin: 0; cursor: pointer; position: relative; }
.tax-mode input { position: absolute; opacity: 0; pointer-events: none; }
.tax-mode > span { display: flex; flex-direction: column; padding: .6rem .8rem; border: 2px solid var(--border); border-radius: 12px; background: #fff; transition: border-color .15s, background .15s; }
.tax-mode small { font-weight: 500; color: var(--muted); font-size: .76rem; }
.tax-mode input:checked + span { border-color: var(--maroon); background: var(--maroon-soft); }
.tax-mode input:checked + span b { color: var(--maroon); }
.tax-mode input:focus-visible + span { box-shadow: 0 0 0 4px var(--gold-soft); }
.tax-warn { font-size: .82rem; background: #fff7e6; border: 1px solid #f3d58c; color: #7a4b00; border-radius: 10px; padding: .6rem .75rem; }
.inv-totals { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; margin: 1rem 0 0; padding-top: .75rem; border-top: 1px dashed var(--border); font-variant-numeric: tabular-nums; }
.inv-totals dd { margin: 0; text-align: right; font-weight: 600; }
.inv-totals dt { color: var(--muted); }
.inv-totals .grand { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--maroon); border-top: 2px solid var(--ink); padding-top: .5rem; margin-top: .25rem; }
@media (max-width: 700px) {
    .inv-line { grid-template-columns: 1fr 1fr; }
    .inv-line input[type=text] { grid-column: 1 / -1; }
    .inv-head { display: none; }
    .inv-line { padding-bottom: .6rem; border-bottom: 1px dashed var(--border); }
}

/* Invoices: printable sheet */
.inv-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; align-items: center; }
.inv-actions form { margin: 0; }
.invoice-sheet {
    position: relative; overflow: hidden; max-width: 860px; background: #fff; border: 1px solid var(--border); border-radius: 16px;
    padding: 2.25rem 2.5rem; box-shadow: 0 10px 30px -18px rgba(86, 6, 6, .35); color: var(--ink); font-size: .95rem;
}
.invoice-sheet::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: linear-gradient(90deg, var(--maroon), var(--gold)); }
.inv-top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.inv-brand { display: flex; gap: 1rem; align-items: flex-start; flex: 1 1 320px; min-width: 0; }
.inv-title { flex: none; }
.inv-brand img { height: 64px; width: auto; }
.inv-biz { display: flex; flex-direction: column; font-size: .85rem; color: var(--muted); line-height: 1.45; }
.inv-biz b { color: var(--ink); font-size: 1rem; }
.inv-title { text-align: right; }
.inv-title h2 { font-size: 1.7rem; font-weight: 800; letter-spacing: .04em; color: var(--maroon); margin: 0 0 .5rem; }
.inv-title dl { display: grid; grid-template-columns: auto auto; gap: .15rem .9rem; margin: 0; font-size: .88rem; justify-content: end; }
.inv-title dt { color: var(--muted); }
.inv-title dd { margin: 0; font-weight: 700; text-align: right; }
.inv-billto { display: flex; flex-direction: column; margin: 1.25rem 0; font-size: .9rem; line-height: 1.45; }
.inv-billto b { font-size: 1.05rem; }
.inv-label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-dark); margin-bottom: .2rem; }
.inv-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.inv-table th { background: var(--cream); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: left; padding: .6rem .7rem; }
.inv-table td { padding: .65rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.inv-table .num { text-align: right; white-space: nowrap; }
.inv-table th:first-child, .inv-table td:first-child { width: 36px; color: var(--muted); }
.inv-bottom { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-top: 1.25rem; }
.inv-notes { flex: 1; min-width: 220px; font-size: .88rem; }
.inv-notes p { margin: 0 0 .9rem; }
.inv-sum { display: grid; grid-template-columns: auto auto; gap: .35rem 1.5rem; margin: 0; min-width: 280px; font-variant-numeric: tabular-nums; align-content: start; }
.inv-sum dt { color: var(--muted); }
.inv-sum dd { margin: 0; text-align: right; font-weight: 600; }
.inv-sum .grand { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--maroon); border-top: 2px solid var(--ink); padding-top: .5rem; margin-top: .3rem; }
.inv-sum .paid-on { color: #166534; font-weight: 700; }
.inv-foot { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); text-align: center; font-size: .85rem; color: var(--muted); }
.inv-stamp {
    position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%) rotate(-16deg);
    font-family: var(--font-display); font-size: 6rem; font-weight: 800; letter-spacing: .1em; pointer-events: none;
    color: rgba(22, 101, 52, .12); border: 8px solid rgba(22, 101, 52, .12); border-radius: 18px; padding: 0 1.5rem;
}
.status-void .inv-stamp { color: rgba(185, 28, 28, .14); border-color: rgba(185, 28, 28, .14); }
@media (max-width: 600px) {
    .invoice-sheet { padding: 1.5rem 1.1rem; }
    .inv-title { text-align: left; }
    .inv-title dl { justify-content: start; }
    .inv-sum { min-width: 0; width: 100%; }
    .inv-stamp { font-size: 3.5rem; }
}

/* Invoice payments */
.inv-sum .balance { font-weight: 800; color: var(--ink); }
.inv-payments { margin-top: 1rem; max-width: 1180px; }
.pay-methods { border: 0; padding: 0; margin: 0 0 .9rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.pay-methods legend { font-size: .9rem; font-weight: 600; margin-bottom: .4rem; width: 100%; }
.pay-methods label { margin: 0; cursor: pointer; position: relative; }
.pay-methods input { position: absolute; opacity: 0; pointer-events: none; }
.pay-methods span { display: inline-block; padding: .45rem .85rem; border: 2px solid var(--border); border-radius: 999px; background: #fff; font-weight: 600; font-size: .88rem; }
.pay-methods input:checked + span { border-color: var(--maroon); background: var(--maroon-soft); color: var(--maroon); }
.pay-methods input:focus-visible + span { box-shadow: 0 0 0 4px var(--gold-soft); }
.rc-search { max-width: 320px; border-radius: 999px !important; margin: 0 !important; background: #fff; }

/* Receipt (compact, prints on A5) */
.receipt-sheet {
    position: relative; overflow: hidden; max-width: 520px; background: #fff; border: 1px solid var(--border); border-radius: 16px;
    padding: 2rem 1.75rem 1.5rem; box-shadow: 0 10px 30px -18px rgba(86, 6, 6, .35); font-size: .92rem; color: var(--ink);
}
.receipt-sheet::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: linear-gradient(90deg, var(--maroon), var(--gold)); }
.rc-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .1rem; font-size: .8rem; color: var(--muted); }
.rc-head img { height: 60px; width: auto; margin-bottom: .35rem; }
.rc-head b { color: var(--ink); font-size: 1rem; }
.rc-title { text-align: center; font-size: 1.25rem; letter-spacing: .14em; color: var(--maroon); margin: 1.1rem 0 .75rem; padding: .5rem 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); }
.rc-meta, .rc-lines { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; margin: 0; font-variant-numeric: tabular-nums; }
.rc-meta dt, .rc-lines dt { color: var(--muted); }
.rc-meta dd, .rc-lines dd { margin: 0; text-align: right; font-weight: 700; }
.rc-from { display: flex; flex-direction: column; margin: 1rem 0; }
.rc-amount { text-align: center; background: var(--cream); border-radius: 12px; padding: .9rem; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .15rem; }
.rc-amount strong { font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; color: var(--maroon); line-height: 1.1; }
.rc-amount em { font-size: .82rem; color: var(--muted); }
.rc-lines .rc-bal { border-top: 2px solid var(--ink); padding-top: .4rem; margin-top: .2rem; color: var(--ink); font-weight: 800; }
.rc-tax, .rc-note { font-size: .78rem; color: var(--muted); margin: .9rem 0 0; }
.rc-foot { margin-top: 1.25rem; padding-top: .9rem; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: .5rem; font-size: .85rem; }
.rc-sign { color: var(--muted); }
.rc-foot p { text-align: center; color: var(--muted); margin: .4rem 0 0; font-size: .8rem; }
.receipt-sheet .inv-stamp { font-size: 3.4rem; }

/* Invoice: how to pay */
.inv-pay { margin-top: 1.5rem; padding: 1rem 1.1rem; border: 1px dashed var(--gold-dark); border-radius: 12px; background: #fffcf4; break-inside: avoid; }
.inv-pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem 1.5rem; margin-top: .35rem; }
.inv-pay-box b { display: block; margin-bottom: .25rem; color: var(--maroon); }
.inv-pay-box dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; margin: 0; font-size: .88rem; }
.inv-pay-box dt { color: var(--muted); }
.inv-pay-box dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-pay-ref { margin: .7rem 0 0; font-size: .82rem; color: var(--muted); }
.sub-h { font-family: var(--font-body); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-dark); margin: .5rem 0 .6rem; }

/* Letterhead (A4) — on screen it looks like one A4 sheet; in print the header and footer
   repeat on every page (position: fixed) and the table's thead/tfoot spacers keep text clear of them. */
.letter-stage { overflow-x: auto; padding-bottom: 1rem; }
.letter-sheet {
    position: relative; overflow: hidden; width: 210mm; min-height: 297mm; background: #fff; color: #231512;
    display: flex; flex-direction: column; box-shadow: 0 16px 40px -20px rgba(43, 23, 18, .45); border: 1px solid var(--border);
    font-size: 11pt; line-height: 1.6;
}
.lh-watermark { position: absolute; top: 50%; left: 50%; width: 120mm; transform: translate(-50%, -50%); opacity: .045; pointer-events: none; z-index: 0; }
.lh-head {
    position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4mm 10mm;
    padding: 13mm 18mm 0; background: #fff;
}
.lh-head::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7mm; background: linear-gradient(90deg, var(--maroon) 0%, var(--maroon) 60%, var(--gold) 100%); }
.lh-logo { height: 22mm; width: auto; }
.lh-contact { display: flex; flex-direction: column; text-align: right; font-size: 8.5pt; line-height: 1.5; color: #6b5a52; }
.lh-contact b { font-family: var(--font-display); font-size: 13pt; color: var(--maroon); line-height: 1.2; margin-bottom: 1mm; }
.lh-rule { grid-column: 1 / -1; height: 1.2mm; background: linear-gradient(90deg, var(--maroon), var(--gold)); border-radius: 1mm; }

.lh-flow { position: relative; z-index: 1; width: 100%; border-collapse: collapse; }
.lh-flow td { padding: 0; vertical-align: top; }
.lh-space-top, .lh-space-bottom { display: none; }   /* only used when printing */
.lh-body { padding: 8mm 22mm 6mm; }
.lh-refdate { display: flex; justify-content: space-between; font-size: 10pt; margin-bottom: 7mm; }
.lh-to { font-style: normal; line-height: 1.45; margin-bottom: 7mm; }
.lh-to b { display: block; }
.lh-salutation { margin: 0 0 3mm; }
.lh-subject { font-family: var(--font-body); font-size: 11pt; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; margin: 0 0 4mm; color: #231512; line-height: 1.4; }

/* Letter text (plain or rich). The Quill classes come from quill.core.css; these reset the editor-only bits. */
.lh-text { font-family: var(--font-body); }
.lh-text.ql-editor { padding: 0; height: auto; overflow: visible; outline: none; font-size: inherit; line-height: inherit; }
.lh-text p, .lh-text ol, .lh-text ul, .lh-text pre, .lh-text blockquote { margin: 0 0 3mm; }
.lh-text h1, .lh-text h2, .lh-text h3, .lh-text h4, .lh-text h5, .lh-text h6 { margin: 4mm 0 2mm; color: #231512; font-family: var(--font-display); }
.lh-text blockquote { border-left: 3px solid var(--gold); padding-left: 4mm; color: #4b3a33; }
.lh-text img { max-width: 100%; height: auto; }
.lh-text a { color: var(--maroon); }

.lh-sign { display: flex; flex-direction: column; margin-top: 8mm; break-inside: avoid; }
.lh-sign p { margin: 0; }
.lh-sign-space { height: 16mm; }
.lh-sign b { border-top: 1px solid #231512; padding-top: 1mm; width: 60mm; }
.lh-sign span { font-size: 10pt; color: #4b3a33; }

.lh-foot {
    position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 8mm;
    padding: 4mm 18mm 8mm; margin-top: auto; border-top: 1px solid #efe2d1; background: #fff;
}
.lh-foot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4mm; background: linear-gradient(90deg, var(--gold), var(--maroon)); }
.lh-foot-text { display: flex; flex-direction: column; font-size: 8pt; color: #6b5a52; line-height: 1.5; }
.lh-foot-text b { color: var(--maroon); font-size: 9pt; }
.lh-qr { display: flex; align-items: center; gap: 3mm; }
.qr-box { width: 22mm; height: 22mm; padding: 1.2mm; background: #fff; border: 1px solid #e3d6c6; border-radius: 1.5mm; }
.qr-box svg { width: 100%; height: 100%; display: block; }
.qr-text { display: flex; flex-direction: column; font-size: 7.5pt; line-height: 1.35; color: #6b5a52; text-align: right; }
.qr-text b { color: var(--maroon); font-size: 8.5pt; }
.qr-code { font-family: ui-monospace, Consolas, monospace; font-size: 6.5pt; letter-spacing: .02em; }
.letter-sheet .inv-stamp { font-size: 5.5rem; top: 42%; z-index: 3; color: rgba(185, 28, 28, .14); border-color: rgba(185, 28, 28, .14); }

/* Letter editor (Quill) */
.editor-field { margin-bottom: .9rem; }
.editor-label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .3rem; }
.ql-toolbar-wrap.ql-toolbar.ql-snow { border: 1.5px solid var(--border); border-radius: 12px 12px 0 0; background: var(--cream); position: sticky; top: 72px; z-index: 5; }
.ql-toolbar.ql-snow .ql-formats { margin-right: 10px; }
.letter-editor.ql-container.ql-snow { border: 1.5px solid var(--border); border-top: 0; border-radius: 0 0 12px 12px; background: #fff; font-family: var(--font-body); font-size: 11pt; }
.letter-editor .ql-editor { min-height: 340px; line-height: 1.6; }
.letter-editor .ql-editor.ql-blank::before { color: var(--muted); font-style: normal; }
.letter-editor .ql-editor img { max-width: 100%; }
.editor-meta { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin-top: .35rem; }
.ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before { font-family: var(--font-body); }

/* Public verify page */
.verify-card { text-align: center; border-top: 6px solid var(--border); }
.verify-valid { border-top-color: #22c55e; }
.verify-revoked { border-top-color: #f59e0b; }
.verify-unknown { border-top-color: #dc2626; }
.verify-icon { font-size: 3.5rem; }
.verify-card h1 { margin: .25rem 0 .5rem; }
.verify-lead { font-size: 1.05rem; }
.verify-details { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; text-align: left; margin: 1.25rem 0; padding: 1rem; background: var(--cream); border-radius: 12px; }
.verify-details dt { color: var(--muted); font-size: .88rem; }
.verify-details dd { margin: 0; font-weight: 700; }
.verify-text { text-align: left; margin-bottom: 1rem; }
.verify-text summary { cursor: pointer; font-weight: 700; color: var(--maroon); }
.verify-text .lh-text { font-size: .92rem; margin-top: .5rem; padding: .75rem; border: 1px solid var(--border); border-radius: 10px; }
.verify-form { text-align: left; margin-top: 1rem; }
.verify-contact { font-size: .88rem; color: var(--muted); margin-bottom: 0; }

@page letter { size: A4; margin: 0; }
@media print {
    .letter-stage { overflow: visible; padding: 0; }
    .admin-content:has(.letter-sheet) { padding: 0 !important; max-width: none !important; }
    .letter-sheet { page: letter; display: block; width: auto; min-height: 0; overflow: visible; box-shadow: none; border: 0; }
    /* Standard letterhead: the same header at the top and footer (with QR) at the bottom of EVERY A4 page. */
    .lh-head { position: fixed; top: 0; left: 0; right: 0; height: 44mm; box-sizing: border-box; padding-top: 12mm; }
    .lh-foot { position: fixed; bottom: 0; left: 0; right: 0; height: 34mm; box-sizing: border-box; margin: 0; }
    .lh-watermark, .letter-sheet .inv-stamp { position: fixed; }
    /* Space reserved on each page so text never runs under the header or footer. */
    .lh-space-top { display: block; height: 47mm; }
    .lh-space-bottom { display: block; height: 37mm; }
    .lh-flow thead { display: table-header-group; }
    .lh-flow tfoot { display: table-footer-group; }
    .lh-body { padding-top: 0; padding-bottom: 0; }
    .lh-text p, .lh-text li { orphans: 3; widows: 3; }
    .lh-head::before, .lh-rule, .lh-foot::after, .lh-watermark, .qr-box { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@page receipt { size: A5; margin: 10mm; }
@media print {
    .receipt-sheet { page: receipt; max-width: none; border: 0; box-shadow: none; border-radius: 0; padding: 5mm 0 0; font-size: 10.5pt; }
    /* Compact spacing so the whole receipt fits on one A5 page */
    .rc-head img { height: 42px; margin-bottom: 1mm; }
    .rc-title { font-size: 13pt; margin: 3mm 0 2mm; padding: 1.5mm 0; }
    .rc-meta, .rc-lines { gap: .5mm 4mm; }
    .rc-from { margin: 2.5mm 0; }
    .rc-amount { padding: 2.5mm; margin-bottom: 2.5mm; }
    .rc-amount strong { font-size: 20pt; }
    .rc-tax, .rc-note { margin-top: 2mm; }
    .rc-foot { margin-top: 3mm; padding-top: 2.5mm; gap: 1.5mm; break-inside: avoid; }
    .rc-foot p { margin-top: 1mm; }
    .receipt-sheet, .rc-amount { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media print {
    @page { size: A4; margin: 12mm; }
    body, .admin-shell { background: #fff !important; }
    .sidebar, .sidebar-scrim, .topbar, .no-print, .page-loader, .alert { display: none !important; }
    .admin-main { margin: 0 !important; }
    .admin-content { padding: 0 !important; max-width: none !important; }
    .invoice-sheet { border: 0; box-shadow: none; border-radius: 0; padding: 6mm 0 0; max-width: none; }
    .invoice-sheet, .inv-table th, .inv-stamp { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .inv-table tr { break-inside: avoid; }
}

/* Settings: SMS */
.check-group { border: 1px solid var(--border); border-radius: 12px; padding: .75rem .9rem .25rem; margin: 0 0 .9rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 .75rem; }
.check-group legend { font-size: .9rem; font-weight: 600; padding: 0 .3rem; }
.check-group label.check { margin-bottom: .5rem; }
.switch-row { background: var(--gold-soft); border-radius: 10px; padding: .6rem .8rem; }
.sms-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.sms-tools form { margin: 0; }
.sms-tools input { width: 160px !important; }
.sms-log { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow-y: auto; }
.sms-log li { padding: .65rem 0; border-bottom: 1px solid var(--border); display: grid; gap: .15rem; }
.sms-log li:last-child { border-bottom: 0; }
.sms-err { color: #b91c1c; }

.page-tabs { display: inline-flex; gap: .25rem; padding: .25rem; margin-bottom: 1rem; background: #fff; border: 1px solid var(--border); border-radius: 999px; }
.page-tabs a { padding: .4rem 1rem; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 700; font-size: .88rem; }
.page-tabs a.active { background: var(--maroon); color: #fff; }

@media (max-width: 980px) {
    .sidebar { transform: translateX(-100%); transition: transform .25s cubic-bezier(.2, .9, .3, 1); }
    .sidebar-open .sidebar { transform: none; }
    .sidebar-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(43, 23, 18, .45); }
    .admin-main { margin-left: 0; }
    .menu-toggle { display: grid; }
    .topbar { padding: .7rem 1rem; }
    .admin .topbar h1 { font-size: 1.2rem; }
    .topbar-title p, .topbar-date { display: none; }
    .admin-content { padding: 1rem 1rem 2.5rem; }
}

/* Login / first signup */
.admin-auth {
    min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 16px;
    background:
        radial-gradient(circle at 85% 10%, rgba(242, 193, 78, .35), transparent 40%),
        radial-gradient(rgba(255, 255, 255, .06) 1.5px, transparent 1.5px) 0 0 / 22px 22px,
        linear-gradient(160deg, var(--maroon) 0%, var(--maroon-dark) 100%);
}
.auth-wrap { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; }
.auth-logo { display: block; background: #fff; border-radius: 20px; padding: .7rem 1.1rem; margin-bottom: 1.25rem; box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .5); }
.auth-logo img { height: 64px; width: auto; }
.admin-auth .card.narrow { width: 100%; margin: 0; border-radius: 20px; padding: 1.75rem; border-top: 6px solid var(--gold); }
.admin-auth h1 { margin-top: 0; font-size: 1.6rem; }
.admin-auth .alert { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}