/* ==========================================================================
   Oohlala — brand layer on top of AdminLTE 4 / Bootstrap 5
   Raspberry #d6336c · Plum #2B1740 · Mango #FFB020
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --ooh-raspberry: #d6336c;
    --ooh-raspberry-600: #bd2459;
    --ooh-raspberry-50: #fdf0f5;
    --ooh-plum: #2b1740;
    --ooh-plum-700: #3a2156;
    --ooh-plum-300: #8e7aa6;
    --ooh-mango: #ffb020;
    --ooh-mango-50: #fff6e3;
    --ooh-cream: #fbf8fc;
    --ooh-ink: #22172e;
    --ooh-muted: #7c7189;
    --ooh-line: #efe9f3;
    --ooh-radius: 1rem;
    --ooh-shadow: 0 1px 2px rgba(43, 23, 64, .04), 0 8px 24px -12px rgba(43, 23, 64, .18);
    --ooh-shadow-lg: 0 20px 50px -20px rgba(43, 23, 64, .35);
    --ooh-gradient: linear-gradient(135deg, #d6336c 0%, #ff6b6b 55%, #ffb020 100%);

    --bs-primary: #d6336c;
    --bs-primary-rgb: 214, 51, 108;
    --bs-link-color: #d6336c;
    --bs-link-color-rgb: 214, 51, 108;
    --bs-link-hover-color: #bd2459;
    --bs-link-hover-color-rgb: 189, 36, 89;
    --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-color: #22172e;
    --bs-body-bg: #fbf8fc;
    --bs-border-color: #efe9f3;
    --bs-orange: #fd7e14;
    --bs-orange-rgb: 253, 126, 20;
    --lte-sidebar-width: 260px;
}

body { font-family: var(--bs-body-font-family); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; letter-spacing: -.02em; color: var(--ooh-ink); }
.app-main, .app-wrapper { background: var(--ooh-cream); }
::selection { background: rgba(214, 51, 108, .18); }

/* ---- Buttons ------------------------------------------------------------ */
.btn { font-weight: 600; border-radius: .7rem; letter-spacing: -.005em; }
.btn-sm { border-radius: .55rem; }
.btn-primary {
    --bs-btn-bg: var(--ooh-raspberry); --bs-btn-border-color: var(--ooh-raspberry);
    --bs-btn-hover-bg: var(--ooh-raspberry-600); --bs-btn-hover-border-color: var(--ooh-raspberry-600);
    --bs-btn-active-bg: #a51e4d; --bs-btn-active-border-color: #a51e4d;
    --bs-btn-disabled-bg: var(--ooh-raspberry); --bs-btn-disabled-border-color: var(--ooh-raspberry);
    box-shadow: 0 6px 16px -8px rgba(214, 51, 108, .7);
}
.btn-outline-primary {
    --bs-btn-color: var(--ooh-raspberry); --bs-btn-border-color: rgba(214, 51, 108, .45);
    --bs-btn-hover-bg: var(--ooh-raspberry); --bs-btn-hover-border-color: var(--ooh-raspberry);
    --bs-btn-active-bg: var(--ooh-raspberry-600); --bs-btn-active-border-color: var(--ooh-raspberry-600);
}
.btn-mango { background: var(--ooh-mango); border-color: var(--ooh-mango); color: var(--ooh-plum); box-shadow: 0 6px 16px -8px rgba(255, 176, 32, .9); }
.btn-mango:hover, .btn-mango:focus { background: #f5a30c; border-color: #f5a30c; color: var(--ooh-plum); }
.btn-gradient { background: var(--ooh-gradient); border: 0; color: #fff; box-shadow: 0 10px 24px -10px rgba(214, 51, 108, .8); }
.btn-gradient:hover, .btn-gradient:focus { color: #fff; filter: brightness(1.05) saturate(1.1); transform: translateY(-1px); }
.btn-soft { background: var(--ooh-raspberry-50); color: var(--ooh-raspberry); border: 0; }
.btn-soft:hover { background: #fbdce8; color: var(--ooh-raspberry-600); }
.btn-whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #1ebe5b; border-color: #1ebe5b; color: #fff; }
.btn-icon { width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* ---- Forms -------------------------------------------------------------- */
.form-control, .form-select { border-radius: .7rem; border-color: #e6ddec; padding: .6rem .85rem; }
.form-control-sm, .form-select-sm { border-radius: .55rem; padding: .35rem .65rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: rgba(214, 51, 108, .55); box-shadow: 0 0 0 .25rem rgba(214, 51, 108, .12); }
.form-check-input:checked { background-color: var(--ooh-raspberry); border-color: var(--ooh-raspberry); }
.form-label { font-weight: 600; font-size: .875rem; color: var(--ooh-ink); margin-bottom: .35rem; }
.form-text { color: var(--ooh-muted); }
.input-group-text { border-color: #e6ddec; background: #faf6fc; color: var(--ooh-muted); border-radius: .7rem; }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; }

/* ---- Sidebar ------------------------------------------------------------ */
.app-sidebar.sidebar-oohlala {
    background: radial-gradient(120% 60% at 0% 0%, #4a1f55 0%, transparent 60%), linear-gradient(180deg, #2b1740 0%, #1e0f2e 100%) !important;
    border-right: 0;
}
.sidebar-oohlala .sidebar-brand { border-bottom: 1px solid rgba(255, 255, 255, .07); height: 3.75rem; }
.sidebar-oohlala .brand-link .brand-image { width: 2.1rem; height: 2.1rem; max-height: none; border-radius: .6rem; box-shadow: 0 6px 16px -6px rgba(214, 51, 108, .9); }
.brand-wordmark { font-weight: 500 !important; font-size: 1.35rem; letter-spacing: -.035em; color: #fff; }
.brand-wordmark b { font-weight: 800; background: linear-gradient(90deg, #ff7aa6, #ffb020); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sidebar-oohlala .nav-header { color: rgba(255, 255, 255, .38) !important; font-size: .68rem !important; font-weight: 700; letter-spacing: .14em; padding-top: 1.1rem !important; }
.sidebar-oohlala .sidebar-menu .nav-link { color: rgba(255, 255, 255, .72); border-radius: .75rem; margin: .1rem .6rem; padding: .6rem .8rem; font-weight: 500; transition: background .15s, color .15s; width: auto; }
.sidebar-oohlala .sidebar-menu .nav-link .nav-icon { color: rgba(255, 255, 255, .5); transition: color .15s; }
.sidebar-oohlala .sidebar-menu .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar-oohlala .sidebar-menu .nav-link:hover .nav-icon { color: var(--ooh-mango); }
.sidebar-oohlala .sidebar-menu .nav-link.active {
    background: linear-gradient(135deg, rgba(214, 51, 108, .95), rgba(255, 107, 107, .85)) !important;
    color: #fff !important; font-weight: 600; box-shadow: 0 10px 22px -12px rgba(214, 51, 108, 1);
}
.sidebar-oohlala .sidebar-menu .nav-link.active .nav-icon { color: #fff; }

/* ---- Header ------------------------------------------------------------- */
.app-header { background: rgba(255, 255, 255, .8) !important; backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--ooh-line) !important; }
.app-header .nav-link { color: var(--ooh-muted); }
.app-header .nav-link:hover { color: var(--ooh-raspberry); }
.app-content-header { padding-top: 1.4rem; }
.app-content-header h1, .app-content-header .h3 { font-size: 1.55rem; }
.page-subtitle { color: var(--ooh-muted); font-size: .9rem; margin-top: .15rem; }
.ooh-crumb { font-size: .8rem; color: var(--ooh-muted); font-weight: 600; margin-bottom: .2rem; }
.ooh-crumb a { color: var(--ooh-muted); text-decoration: none; }
.ooh-crumb a:hover { color: var(--ooh-raspberry); }

/* ---- Cards -------------------------------------------------------------- */
.card { border: 1px solid var(--ooh-line); border-radius: var(--ooh-radius); box-shadow: var(--ooh-shadow); }
.card > .card-header { background: transparent; border-bottom: 1px solid var(--ooh-line); padding: 1rem 1.25rem; }
.card > .card-header:first-child { border-radius: var(--ooh-radius) var(--ooh-radius) 0 0; }
.card-title { font-weight: 700; font-size: 1rem; margin: 0; display: flex; align-items: center; gap: .5rem; }
.card-title .bi { color: var(--ooh-raspberry); }
.card-body { padding: 1.25rem; }
.card-footer { background: #fdfbfe; border-top: 1px solid var(--ooh-line); border-radius: 0 0 var(--ooh-radius) var(--ooh-radius) !important; }
.card-hover { transition: transform .18s ease, box-shadow .18s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--ooh-shadow-lg); }

/* ---- Stat tiles --------------------------------------------------------- */
.stat-tile { position: relative; overflow: hidden; border-radius: var(--ooh-radius); padding: 1.15rem 1.25rem; background: #fff; border: 1px solid var(--ooh-line); box-shadow: var(--ooh-shadow); height: 100%; }
.stat-tile .stat-icon { width: 2.75rem; height: 2.75rem; border-radius: .85rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: .85rem; }
.stat-tile .stat-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--ooh-ink); }
.stat-tile .stat-label { font-size: .78rem; color: var(--ooh-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.stat-tile .stat-foot { font-size: .8rem; color: var(--ooh-muted); margin-top: .35rem; }
.stat-tile.is-hero { background: var(--ooh-gradient); border: 0; color: #fff; box-shadow: 0 18px 36px -18px rgba(214, 51, 108, .9); }
.stat-tile.is-hero .stat-value, .stat-tile.is-hero .stat-label, .stat-tile.is-hero .stat-foot { color: #fff; }
.stat-tile.is-hero .stat-label, .stat-tile.is-hero .stat-foot { opacity: .85; }
.stat-tile.is-hero .stat-icon { background: rgba(255, 255, 255, .22); color: #fff; }
.stat-tile.is-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.stat-tile.is-plum { background: linear-gradient(135deg, #2b1740, #4a2566); border: 0; }
.stat-tile.is-plum .stat-value, .stat-tile.is-plum .stat-label, .stat-tile.is-plum .stat-foot { color: #fff; }
.stat-tile.is-plum .stat-label, .stat-tile.is-plum .stat-foot { opacity: .75; }
.stat-tile.is-plum .stat-icon { background: rgba(255, 176, 32, .18); color: var(--ooh-mango); }

.tint-raspberry { background: var(--ooh-raspberry-50); color: var(--ooh-raspberry); }
.tint-mango { background: var(--ooh-mango-50); color: #d98a00; }
.tint-plum { background: #f1ebf6; color: var(--ooh-plum-700); }
.tint-green { background: #e8f8ef; color: #198754; }
.tint-blue { background: #e7f3fe; color: #0b74d1; }
.tint-grey { background: #f2f0f4; color: #6c6477; }

/* ---- Tables ------------------------------------------------------------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; vertical-align: middle; }
.table > thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ooh-muted); font-weight: 700; border-bottom: 1px solid var(--ooh-line); background: #fcfafd; padding-top: .8rem; padding-bottom: .8rem; white-space: nowrap; }
.table > tbody td { border-color: var(--ooh-line); padding-top: .85rem; padding-bottom: .85rem; }
.table-hover > tbody > tr { transition: background .12s; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #fdf5f9; }
.table td:first-child, .table th:first-child { padding-left: 1.25rem; }
.table td:last-child, .table th:last-child { padding-right: 1.25rem; }
.table td.actions, .table th.actions, td.actions, th.actions { white-space: nowrap; width: 1%; text-align: right; }
.table td.actions .btn + .btn, .table td.actions form { margin-left: .25rem; }
.table td.actions form { display: inline-block; }
.row-link { cursor: pointer; }
.ref { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-weight: 700; font-size: .85rem; color: var(--ooh-plum); letter-spacing: .02em; }
a.ref:hover { color: var(--ooh-raspberry); }
.money { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--ooh-muted) !important; }
.tiny { font-size: .75rem; }
.pagination { --bs-pagination-active-bg: var(--ooh-raspberry); --bs-pagination-active-border-color: var(--ooh-raspberry); --bs-pagination-color: var(--ooh-plum); --bs-pagination-border-radius: .6rem; margin: 0; }

/* ---- Badges / pills ----------------------------------------------------- */
.badge { font-weight: 600; letter-spacing: .01em; }
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; line-height: 1.2; }
.pill .bi { font-size: .8rem; }
.pill-primary { background: var(--ooh-raspberry-50); color: var(--ooh-raspberry); }
.pill-warning { background: #fff4db; color: #b87600; }
.pill-info { background: #e5f4fb; color: #0a7ea4; }
.pill-orange { background: #fff0e3; color: #d9630b; }
.pill-success { background: #e6f7ee; color: #16834a; }
.pill-danger { background: #fdecec; color: #c62f3a; }
.pill-secondary { background: #f0eef2; color: #6c6477; }
.pill-dark { background: var(--ooh-plum); color: #fff; }
.text-bg-orange { background-color: #fd7e14 !important; color: #fff !important; }
.text-orange { color: #fd7e14 !important; }
.bg-orange { background-color: #fd7e14 !important; }
.dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.dot-live { background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: ooh-pulse 1.8s infinite; }
.dot-off { background: #c7bfd0; }
@keyframes ooh-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 .5rem rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

/* ---- Avatars ------------------------------------------------------------ */
.avatar { width: 2.4rem; height: 2.4rem; border-radius: .8rem; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; flex-shrink: 0; object-fit: cover; background: var(--ooh-gradient); color: #fff; letter-spacing: -.02em; }
.avatar-sm { width: 1.9rem; height: 1.9rem; border-radius: .6rem; font-size: .72rem; }
.avatar-lg { width: 4rem; height: 4rem; border-radius: 1.1rem; font-size: 1.3rem; }
.avatar-round { border-radius: 50%; }
.avatar-plum { background: linear-gradient(135deg, #3a2156, #6b3c8f); }

/* ---- Alerts ------------------------------------------------------------- */
.alert { border: 0; border-radius: .9rem; font-weight: 500; box-shadow: var(--ooh-shadow); display: flex; align-items: flex-start; gap: .6rem; }
.alert > .bi { font-size: 1.1rem; line-height: 1.3; }
.alert-success { background: #e9f9f0; color: #11663a; }
.alert-danger { background: #fdecee; color: #a4202d; }
.alert-warning { background: #fff5dc; color: #8a5a00; }
.alert-info { background: #eaf5fd; color: #0a5c80; }

/* ---- Empty state -------------------------------------------------------- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--ooh-muted); }
.empty-state .empty-icon { width: 4.5rem; height: 4.5rem; border-radius: 1.4rem; background: var(--ooh-raspberry-50); color: var(--ooh-raspberry); display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 1rem; }
.empty-state h5 { color: var(--ooh-ink); margin-bottom: .25rem; }

/* ---- Filter bar --------------------------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filter-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--ooh-line); color: var(--ooh-muted); font-size: .82rem; font-weight: 600; text-decoration: none; transition: all .15s; }
.filter-chip:hover { color: var(--ooh-raspberry); border-color: rgba(214, 51, 108, .35); }
.filter-chip.active { background: var(--ooh-plum); color: #fff; border-color: var(--ooh-plum); }
.filter-chip .count { background: rgba(0, 0, 0, .06); border-radius: 999px; padding: 0 .45rem; font-size: .72rem; }
.filter-chip.active .count { background: rgba(255, 255, 255, .18); }
.search-input { position: relative; }
.search-input .bi { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--ooh-muted); pointer-events: none; }
.search-input .form-control { padding-left: 2.3rem; }

/* ---- Timeline ----------------------------------------------------------- */
.timeline-ooh { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline-ooh::before { content: ""; position: absolute; left: 1.05rem; top: .5rem; bottom: .5rem; width: 2px; background: linear-gradient(var(--ooh-line), var(--ooh-line)); }
.timeline-ooh > li { position: relative; padding: 0 0 1.1rem 3rem; }
.timeline-ooh > li:last-child { padding-bottom: 0; }
.timeline-ooh .tl-icon { position: absolute; left: 0; top: 0; width: 2.15rem; height: 2.15rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; font-size: .95rem; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--ooh-line); }
.timeline-ooh .tl-title { font-weight: 600; font-size: .9rem; }
.timeline-ooh .tl-meta { font-size: .75rem; color: var(--ooh-muted); }
.timeline-ooh pre { font-size: .72rem; background: #faf7fc; border: 1px solid var(--ooh-line); border-radius: .6rem; padding: .6rem .75rem; margin: .45rem 0 0; max-height: 220px; overflow: auto; }

/* ---- Order progress tracker -------------------------------------------- */
.order-steps { display: flex; justify-content: space-between; position: relative; margin: .5rem 0 0; padding: 0; list-style: none; }
.order-steps::before { content: ""; position: absolute; top: 1.15rem; left: 8%; right: 8%; height: 3px; background: var(--ooh-line); border-radius: 3px; }
.order-steps .step { position: relative; z-index: 1; flex: 1; text-align: center; font-size: .75rem; font-weight: 600; color: var(--ooh-muted); }
.order-steps .step .step-dot { width: 2.3rem; height: 2.3rem; border-radius: 50%; margin: 0 auto .4rem; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--ooh-line); color: #bdb3c8; font-size: 1rem; transition: all .2s; }
.order-steps .step.done { color: var(--ooh-ink); }
.order-steps .step.done .step-dot { background: var(--ooh-raspberry); border-color: var(--ooh-raspberry); color: #fff; }
.order-steps .step.current .step-dot { background: #fff; border-color: var(--ooh-raspberry); color: var(--ooh-raspberry); box-shadow: 0 0 0 .35rem rgba(214, 51, 108, .12); }
.order-steps .step.current { color: var(--ooh-raspberry); }
.order-steps .step time { display: block; font-weight: 500; color: var(--ooh-muted); font-size: .7rem; margin-top: .1rem; }

/* ---- Hero banner (order / vendor pages) -------------------------------- */
.ooh-hero { position: relative; overflow: hidden; border-radius: 1.25rem; padding: 1.5rem 1.6rem; color: #fff; background: radial-gradient(90% 140% at 100% 0%, rgba(255, 176, 32, .35) 0%, transparent 55%), linear-gradient(135deg, #2b1740 0%, #5a2160 55%, #d6336c 120%); box-shadow: var(--ooh-shadow-lg); }
.ooh-hero h2, .ooh-hero h3, .ooh-hero h4 { color: #fff; }
.ooh-hero .hero-meta { color: rgba(255, 255, 255, .72); font-size: .88rem; }
.ooh-hero .hero-stat { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .12); border-radius: .9rem; padding: .6rem .9rem; min-width: 7rem; }
.ooh-hero .hero-stat .v { font-weight: 800; font-size: 1.15rem; }
.ooh-hero .hero-stat .l { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.ooh-hero .pill { background: rgba(255, 255, 255, .16); color: #fff; }
.ooh-hero-cover { background-size: cover; background-position: center; }
.ooh-hero-cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(43, 23, 64, .92) 0%, rgba(43, 23, 64, .6) 60%, rgba(214, 51, 108, .35) 100%); }
.ooh-hero-cover > * { position: relative; }

/* ---- Key/value lists ---------------------------------------------------- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1rem; margin: 0; font-size: .9rem; }
.kv dt { color: var(--ooh-muted); font-weight: 500; }
.kv dd { margin: 0; font-weight: 600; text-align: right; }
.split-row { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px dashed var(--ooh-line); font-size: .9rem; }
.split-row:last-child { border-bottom: 0; }
.split-row.total { font-weight: 800; font-size: 1.05rem; border-top: 2px solid var(--ooh-ink); border-bottom: 0; margin-top: .25rem; padding-top: .65rem; }

/* ---- Timing breakdown --------------------------------------------------- */
.timing-bar { display: flex; height: .8rem; border-radius: 999px; overflow: hidden; background: var(--ooh-line); }
.timing-bar > span { display: block; height: 100%; }
.timing-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .78rem; color: var(--ooh-muted); margin-top: .6rem; }
.timing-legend i { width: .6rem; height: .6rem; border-radius: 3px; display: inline-block; margin-right: .3rem; vertical-align: middle; }
.big-time { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }

/* ---- Live board --------------------------------------------------------- */
.live-board { display: grid; grid-template-columns: repeat(6, minmax(240px, 1fr)); gap: 1rem; overflow-x: auto; padding-bottom: .5rem; align-items: start; }
.live-col { background: #f5f0f8; border-radius: 1.1rem; padding: .75rem; min-height: 60vh; }
.live-col-head { display: flex; align-items: center; justify-content: space-between; padding: .25rem .35rem .75rem; font-weight: 700; font-size: .85rem; }
.live-col-head .count { background: #fff; border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; color: var(--ooh-muted); box-shadow: var(--ooh-shadow); }
.live-card { display: block; background: #fff; border-radius: .9rem; padding: .85rem .9rem; margin-bottom: .6rem; box-shadow: var(--ooh-shadow); text-decoration: none; color: inherit; border-left: 4px solid transparent; transition: transform .15s, box-shadow .15s; animation: ooh-in .35s ease both; }
.live-card:hover { transform: translateY(-2px); box-shadow: var(--ooh-shadow-lg); color: inherit; }
.live-card .lc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
.live-card .lc-vendor { font-weight: 700; font-size: .9rem; }
.live-card .lc-items { font-size: .8rem; color: var(--ooh-muted); margin: .15rem 0 .5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.live-card .lc-foot { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; color: var(--ooh-muted); }
.live-card.is-dark { border-left-color: var(--ooh-plum); }
.live-card.is-warning { border-left-color: #ffb020; }
.live-card.is-primary { border-left-color: var(--ooh-raspberry); }
.live-card.is-info { border-left-color: #0dcaf0; }
.live-card.is-orange { border-left-color: #fd7e14; }
.live-card.is-success { border-left-color: #22c55e; opacity: .8; }
.live-card.is-urgent { background: #fff7f9; box-shadow: 0 0 0 2px rgba(214, 51, 108, .3), var(--ooh-shadow); }
.live-empty { text-align: center; color: #b3a8bf; font-size: .8rem; padding: 2rem .5rem; border: 2px dashed #e6dcee; border-radius: .9rem; }
.live-status { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--ooh-muted); background: #fff; padding: .4rem .8rem; border-radius: 999px; box-shadow: var(--ooh-shadow); }
@keyframes ooh-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Vendor & product cards -------------------------------------------- */
.vendor-card { overflow: hidden; }
.vendor-card .vc-cover { height: 120px; background: var(--ooh-gradient); background-size: cover; background-position: center; position: relative; }
.vendor-card .vc-cover .pill { position: absolute; top: .75rem; right: .75rem; background: rgba(255, 255, 255, .92); }
.vendor-card .vc-avatar { margin-top: -2rem; border: 4px solid #fff; box-shadow: var(--ooh-shadow); position: relative; }
.vendor-card .vc-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; border-top: 1px solid var(--ooh-line); }
.vendor-card .vc-stats > div { padding: .7rem .25rem; }
.vendor-card .vc-stats > div + div { border-left: 1px solid var(--ooh-line); }
.vendor-card .vc-stats .v { font-weight: 800; font-size: 1rem; }
.vendor-card .vc-stats .l { font-size: .68rem; color: var(--ooh-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.product-thumb { width: 3.25rem; height: 3.25rem; border-radius: .8rem; object-fit: cover; background: var(--ooh-mango-50); display: inline-flex; align-items: center; justify-content: center; color: #d98a00; font-size: 1.3rem; flex-shrink: 0; }
.product-row.is-off { opacity: .5; }
.image-drop { border: 2px dashed #e0d4ea; border-radius: 1rem; padding: 1rem; text-align: center; background: #fcfafd; cursor: pointer; transition: border-color .15s, background .15s; position: relative; }
.image-drop:hover { border-color: var(--ooh-raspberry); background: var(--ooh-raspberry-50); }
.image-drop img { max-height: 180px; border-radius: .75rem; max-width: 100%; }
.image-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#vendor-map { height: 280px; border-radius: 1rem; border: 1px solid var(--ooh-line); z-index: 0; }

/* ---- Settings ----------------------------------------------------------- */
.integration { display: flex; align-items: center; gap: .85rem; padding: .85rem 0; border-bottom: 1px solid var(--ooh-line); }
.integration:last-child { border-bottom: 0; }
.integration .i-icon { width: 2.6rem; height: 2.6rem; border-radius: .8rem; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.copy-field { font-family: ui-monospace, Menlo, monospace; font-size: .78rem; }
.section-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ooh-muted); font-weight: 700; margin-bottom: .75rem; }

/* ---- Chart legend ------------------------------------------------------- */
.chart-wrap { position: relative; height: 290px; }
.rank { width: 1.6rem; height: 1.6rem; border-radius: .5rem; background: #f3eef7; color: var(--ooh-plum); font-weight: 800; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; }
.rank-1 { background: var(--ooh-mango); color: var(--ooh-plum); }
.progress-thin { height: .4rem; border-radius: 999px; background: var(--ooh-line); }
.progress-thin .progress-bar { background: var(--ooh-gradient); border-radius: 999px; }

/* ==========================================================================
   Login
   ========================================================================== */
.ooh-login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: #fff; font-family: var(--bs-body-font-family); }
.ooh-login-art { position: relative; overflow: hidden; background: #2b1740 url('../images/login-bg.gif') center / cover no-repeat; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 2.5rem 3rem; }
.ooh-login-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(43, 23, 64, .55) 0%, rgba(43, 23, 64, .25) 45%, rgba(214, 51, 108, .55) 100%); }
.ooh-login-art > * { position: relative; }
.ooh-login-art .art-brand { display: flex; width: fit-content; color: inherit; text-decoration: none; align-items: center; gap: .75rem; font-size: 1.6rem; letter-spacing: -.04em; }
.ooh-login-art .art-brand img { width: 2.75rem; height: 2.75rem; border-radius: .85rem; box-shadow: 0 12px 30px -8px rgba(214, 51, 108, .9); }
.ooh-login-art h1 { color: #fff; font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; max-width: 14ch; }
.ooh-login-art h1 span { background: linear-gradient(90deg, #ffb020, #ff8fb4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ooh-login-art .art-lead { color: rgba(255, 255, 255, .82); max-width: 34ch; font-size: 1.02rem; }
.ooh-login-art .art-flow { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.ooh-login-art .art-flow span { background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .18); padding: .4rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.ooh-login-art .art-foot { font-size: .8rem; color: rgba(255, 255, 255, .6); }
.ooh-login-form { display: flex; align-items: center; justify-content: center; padding: 2rem; background: radial-gradient(60% 50% at 100% 0%, #fff1f6 0%, transparent 70%), radial-gradient(50% 40% at 0% 100%, #fff7e6 0%, transparent 70%), #fff; }
.ooh-login-card { width: 100%; max-width: 400px; }
.ooh-login-card h2 { font-size: 1.85rem; font-weight: 800; letter-spacing: -.035em; }
.ooh-login-card .lead-icon { position: relative; }
.ooh-login-card .lead-icon > .bi { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ooh-muted); z-index: 3; }
.ooh-login-card .lead-icon .form-control { padding: .85rem 1rem .85rem 2.75rem; border-radius: .9rem; background: #fcfafd; }
.ooh-login-card .lead-icon .toggle-pw { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--ooh-muted); z-index: 3; padding: .35rem .5rem; }
.ooh-login-card .btn-gradient { padding: .85rem 1rem; border-radius: .9rem; font-size: 1rem; }
.ooh-login-mobile-brand { display: none; }
@media (max-width: 991.98px) {
    .ooh-login { grid-template-columns: 1fr; }
    .ooh-login-art { display: none; }
    .ooh-login-form { min-height: 100vh; background: linear-gradient(180deg, rgba(43, 23, 64, .78), rgba(214, 51, 108, .6)), url('../images/login-bg.gif') center / cover; }
    .ooh-login-card { background: #fff; border-radius: 1.5rem; padding: 2rem 1.5rem; box-shadow: var(--ooh-shadow-lg); }
    .ooh-login-mobile-brand { display: flex; width: fit-content; text-decoration: none; align-items: center; gap: .6rem; margin-bottom: 1.25rem; font-size: 1.35rem; letter-spacing: -.04em; }
    .ooh-login-mobile-brand img { width: 2.3rem; height: 2.3rem; border-radius: .7rem; }
    .ooh-login-mobile-brand .brand-wordmark { color: var(--ooh-ink); }
}

/* ==========================================================================
   Public site
   ========================================================================== */
.pub { font-family: var(--bs-body-font-family); background: var(--ooh-cream); color: var(--ooh-ink); }
.pub-nav { position: sticky; top: 0; z-index: 20; background: rgba(251, 248, 252, .85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ooh-line); }
.pub-nav .navbar-brand { display: flex; align-items: center; gap: .55rem; font-size: 1.35rem; letter-spacing: -.04em; }
.pub-nav .navbar-brand img { width: 2.1rem; height: 2.1rem; border-radius: .6rem; }
.pub-nav .brand-wordmark, .pub-foot .brand-wordmark { color: var(--ooh-ink); }
.pub-hero { position: relative; overflow: hidden; padding: 5rem 0 4rem; background: radial-gradient(60% 70% at 85% 10%, rgba(255, 176, 32, .25), transparent 60%), radial-gradient(50% 60% at 10% 90%, rgba(214, 51, 108, .18), transparent 60%); }
.pub-hero h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; }
.pub-hero h1 .grad { background: var(--ooh-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pub-hero .lead { color: var(--ooh-muted); font-size: 1.15rem; max-width: 36rem; }
.pub-hero .hero-phone { position: relative; max-width: 340px; margin-left: auto; background: #fff; border-radius: 2rem; padding: 1rem; box-shadow: 0 40px 80px -30px rgba(43, 23, 64, .45); transform: rotate(2deg); }
.chat { background: #efe7de url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23e0d6c9'/%3E%3C/svg%3E"); border-radius: 1.4rem; padding: 1rem .8rem; font-size: .85rem; }
.chat-head { display: flex; align-items: center; gap: .6rem; background: #075e54; color: #fff; margin: -1rem -.8rem .9rem; padding: .75rem 1rem; border-radius: 1.4rem 1.4rem 0 0; font-weight: 600; }
.chat-head img { width: 2rem; height: 2rem; border-radius: 50%; background: #fff; }
.chat-head small { display: block; font-weight: 400; opacity: .75; font-size: .7rem; }
.bubble { max-width: 85%; padding: .5rem .7rem; border-radius: .9rem; margin-bottom: .5rem; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); line-height: 1.35; animation: ooh-in .4s ease both; }
.bubble.in { background: #fff; border-top-left-radius: .2rem; }
.bubble.out { background: #d9fdd3; margin-left: auto; border-top-right-radius: .2rem; }
.bubble .pay { display: inline-block; margin-top: .35rem; background: var(--ooh-raspberry); color: #fff; padding: .2rem .6rem; border-radius: .5rem; font-weight: 700; font-size: .75rem; }
.float-emoji { position: absolute; font-size: 2.4rem; animation: ooh-float 6s ease-in-out infinite; filter: drop-shadow(0 10px 14px rgba(43, 23, 64, .18)); }
@keyframes ooh-float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(6deg); } }
.steps-grid .step-card { background: #fff; border-radius: 1.25rem; padding: 1.5rem; border: 1px solid var(--ooh-line); height: 100%; box-shadow: var(--ooh-shadow); }
.steps-grid .step-num { width: 2.6rem; height: 2.6rem; border-radius: .85rem; background: var(--ooh-gradient); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .9rem; }
.pub-section { padding: 4.5rem 0; }
.pub-section h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 800; letter-spacing: -.04em; }
.eyebrow { font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ooh-raspberry); }
.stall-card { display: block; text-decoration: none; color: inherit; background: #fff; border-radius: 1.25rem; overflow: hidden; border: 1px solid var(--ooh-line); box-shadow: var(--ooh-shadow); transition: transform .2s, box-shadow .2s; height: 100%; }
.stall-card:hover { transform: translateY(-4px); box-shadow: var(--ooh-shadow-lg); color: inherit; }
.stall-card .sc-cover { height: 150px; background: var(--ooh-gradient); background-size: cover; background-position: center; position: relative; }
.stall-card .sc-cover .pill { position: absolute; top: .75rem; left: .75rem; background: rgba(255, 255, 255, .94); }
.stall-card .sc-body { padding: 1rem 1.15rem 1.2rem; }
.stall-card h5 { font-weight: 800; letter-spacing: -.02em; margin-bottom: .15rem; }
.partner-band { background: linear-gradient(135deg, #2b1740, #5a2160); color: #fff; border-radius: 1.75rem; padding: 3rem; position: relative; overflow: hidden; }
.partner-band h2 { color: #fff; }
.partner-band::after { content: "🍢"; position: absolute; right: 2rem; bottom: -1rem; font-size: 9rem; opacity: .15; transform: rotate(-15deg); }
.pub-foot { padding: 2.5rem 0; color: var(--ooh-muted); font-size: .85rem; border-top: 1px solid var(--ooh-line); }
.wa-fab { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 30; width: 3.75rem; height: 3.75rem; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; box-shadow: 0 16px 30px -10px rgba(37, 211, 102, .8); text-decoration: none; transition: transform .15s; }
.wa-fab:hover { color: #fff; transform: scale(1.06); }

.menu-hero { padding: 3rem 0 2rem; }
.menu-item { display: flex; gap: 1rem; background: #fff; border-radius: 1.1rem; padding: .9rem; border: 1px solid var(--ooh-line); box-shadow: var(--ooh-shadow); height: 100%; }
.menu-item img, .menu-item .mi-ph { width: 5.5rem; height: 5.5rem; border-radius: .9rem; object-fit: cover; flex-shrink: 0; background: var(--ooh-mango-50); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.menu-item h6 { font-weight: 700; margin-bottom: .2rem; }
.menu-item .price { font-weight: 800; color: var(--ooh-raspberry); }
.menu-item.is-off { opacity: .45; }
.menu-vendor-head { display: flex; align-items: center; gap: .9rem; margin: 2.5rem 0 1rem; }
.order-bar { position: sticky; bottom: 1rem; z-index: 25; background: var(--ooh-plum); color: #fff; border-radius: 1.25rem; padding: .9rem 1rem .9rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; box-shadow: 0 20px 40px -18px rgba(43, 23, 64, .8); margin-top: 2rem; }

.pay-result { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: radial-gradient(60% 50% at 50% 0%, #fff0f5, transparent 70%), var(--ooh-cream); }
.pay-card { background: #fff; border-radius: 1.75rem; max-width: 460px; width: 100%; padding: 2.25rem 1.75rem; text-align: center; box-shadow: var(--ooh-shadow-lg); }
.pay-card .pay-icon { width: 5.5rem; height: 5.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 2.6rem; margin-bottom: 1.25rem; }
.pay-card .pay-icon.ok { background: #e6f7ee; color: #16834a; animation: ooh-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.pay-card .pay-icon.wait { background: #fff4db; color: #b87600; }
.pay-card .pay-icon.bad { background: #fdecec; color: #c62f3a; }
@keyframes ooh-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.receipt { text-align: left; background: #fcfafd; border: 1px dashed #e0d4ea; border-radius: 1rem; padding: 1rem 1.1rem; margin: 1.25rem 0; font-size: .9rem; }

@media (max-width: 767.98px) {
    .kv dd { text-align: left; }
    .ooh-hero { padding: 1.25rem; }
    .pub-hero { padding: 3rem 0 2.5rem; }
    .partner-band { padding: 2rem 1.5rem; }
}

/* Steps tracker on the dark hero */
.order-steps.on-dark::before { background: rgba(255, 255, 255, .18); }
.order-steps.on-dark .step { color: rgba(255, 255, 255, .55); }
.order-steps.on-dark .step .step-dot { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .55); }
.order-steps.on-dark .step.done { color: #fff; }
.order-steps.on-dark .step.done .step-dot { background: var(--ooh-gradient); border-color: transparent; color: #fff; }
.order-steps.on-dark .step.current { color: var(--ooh-mango); }
.order-steps.on-dark .step.current .step-dot { background: rgba(255, 176, 32, .15); border-color: var(--ooh-mango); color: var(--ooh-mango); box-shadow: 0 0 0 .35rem rgba(255, 176, 32, .15); }
.order-steps.on-dark .step time { color: rgba(255, 255, 255, .6); }
.min-w-0 { min-width: 0; }

/* ---------- Street-food photography ---------- */
.hero-stage { position: relative; max-width: 460px; margin-left: auto; }
.hero-stage .hero-phone { z-index: 2; }
.polaroid { position: absolute; z-index: 1; margin: 0; background: #fff; padding: .5rem .5rem .6rem; border-radius: .9rem; box-shadow: 0 24px 50px -22px rgba(43, 23, 64, .55); width: 170px; animation: ooh-bob 7s ease-in-out infinite; }
.polaroid img { width: 100%; height: 125px; object-fit: cover; border-radius: .6rem; display: block; }
.polaroid figcaption { font-size: .78rem; font-weight: 700; text-align: center; margin-top: .4rem; color: var(--ooh-ink); }
.polaroid.p-1 { top: -1.5rem; left: -1rem; --r: -9deg; }
.polaroid.p-2 { bottom: 1rem; left: -3rem; --r: 7deg; animation-delay: -2.5s; z-index: 3; }
.polaroid.p-3 { top: -3.75rem; right: -1.5rem; width: 125px; --r: 10deg; animation-delay: -5s; z-index: 3; }
.polaroid.p-3 img { height: 80px; }
@keyframes ooh-bob { 0%, 100% { transform: rotate(var(--r)) translateY(0); } 50% { transform: rotate(var(--r)) translateY(-10px); } }

.food-strip { padding: 3.5rem 0 1rem; overflow: hidden; }
.food-strip h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 800; letter-spacing: -.04em; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 1rem; width: max-content; padding: .75rem 0 1.5rem; animation: ooh-marquee 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.dish { position: relative; margin: 0; width: 220px; height: 270px; border-radius: 1.25rem; overflow: hidden; box-shadow: var(--ooh-shadow); flex-shrink: 0; }
.dish:nth-child(even) { transform: translateY(14px); }
.dish img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.dish:hover img { transform: scale(1.07); }
.dish figcaption { position: absolute; inset: auto 0 0 0; padding: 2.5rem .9rem .8rem; color: #fff; font-weight: 800; letter-spacing: -.01em; background: linear-gradient(transparent, rgba(43, 23, 64, .85)); }
@keyframes ooh-marquee { to { transform: translateX(calc(-50% - .5rem)); } }
@media (prefers-reduced-motion: reduce) { .marquee-track, .polaroid { animation: none; } .marquee { overflow-x: auto; } }

.partner-band::before { content: ""; position: absolute; inset: 0; background: var(--band-photo, none) center / cover; opacity: .22; mix-blend-mode: luminosity; }
.partner-band > * { position: relative; z-index: 1; }
.vendor-banner { height: 220px; border-radius: 1.5rem; background-size: cover; background-position: center; box-shadow: var(--ooh-shadow-lg); }
.stall-card .sc-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(43, 23, 64, .35)); }
.stall-card .sc-cover .pill { z-index: 1; }
.pub-foot a { color: var(--ooh-muted); }
.pub-foot a:hover { color: var(--ooh-raspberry); }
@media (max-width: 575.98px) { .dish { width: 160px; height: 200px; } .vendor-banner { height: 150px; } }

/* ---------- Help & tutorials ---------- */
.help-nav { position: sticky; top: 1rem; }
.help-nav-group { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8e7aa6; margin: 1rem 0 .35rem; }
.help-nav-group:first-child { margin-top: 0; }
.help-nav a { display: block; padding: .35rem .6rem; border-radius: .5rem; color: #2b1740; font-size: .9rem; text-decoration: none; }
.help-nav a:hover { background: #fdf0f5; color: #d6336c; }
.help-nav a i, .help-topic h5 i, .help-modal .modal-title i { color: #d6336c; margin-right: .35rem; }
.help-group-title { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8e7aa6; margin: 1.5rem 0 .75rem; }
.help-group-title:first-child { margin-top: 0; }
.help-topic { scroll-margin-top: 1rem; }
.help-topic:target { box-shadow: 0 0 0 3px rgba(214, 51, 108, .25); }
.help-topic h5 { font-weight: 800; color: #2b1740; font-size: 1rem; }
.help-actions { white-space: nowrap; }
.help-topic-body p, .help-topic-body li { font-size: .92rem; }
.help-topic-body ul, .help-topic-body ol { padding-left: 1.2rem; }
.help-topic-body > :last-child { margin-bottom: 0; }
.page-help-link { white-space: nowrap; }
.help-video-toggle { white-space: nowrap; }
.help-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: .75rem; background: #2b1740; box-shadow: var(--ooh-shadow); }

/* ---------- Quick login (demo) ---------- */
.quick-login { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed #e6dcec; }
.quick-login .ql-title { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8e7aa6; margin-bottom: .6rem; }
.quick-login form { margin-bottom: .5rem; }
.quick-login button { width: 100%; display: flex; align-items: center; gap: .75rem; text-align: left; background: #fbf8fc; border: 1px solid #efe9f3; border-radius: .75rem; padding: .65rem .85rem; transition: border-color .15s, background .15s; }
.quick-login button:hover { border-color: #d6336c; background: #fdf0f5; }
.quick-login .ql-icon { width: 2.25rem; height: 2.25rem; flex: none; border-radius: .6rem; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #d6336c, #ff6b6b 55%, #ffb020); }
.quick-login .ql-role { display: block; font-weight: 700; color: #2b1740; font-size: .9rem; }
.quick-login .ql-desc { display: block; font-size: .75rem; color: #7c7189; }
.quick-login .bi-arrow-right { margin-left: auto; color: #d6336c; }

/* Customer wallet */
.wallet-balance { font-size: .9rem; color: var(--bs-secondary-color); white-space: nowrap; }
.wallet-balance b { font-size: 1.15rem; color: var(--ooh-raspberry); margin-left: .35rem; }

/* Same-day vendor payouts */
@keyframes ooh-alarm { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); } 70% { box-shadow: 0 0 0 .6rem rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
.payout-alert { display: flex; align-items: center; gap: .75rem; padding: .8rem 1.1rem; margin-bottom: 1rem; border-radius: var(--ooh-radius); text-decoration: none; font-size: .92rem; }
.payout-alert > .bi { font-size: 1.35rem; flex-shrink: 0; }
.payout-alert-cta { margin-left: auto; font-weight: 700; white-space: nowrap; }
.payout-alert.is-overdue { background: #dc2626; color: #fff; animation: ooh-alarm 1.6s infinite; }
.payout-alert.is-overdue:hover { background: #b91c1c; color: #fff; }
.payout-alert.is-due { background: #fff4db; color: #8a5a00; border: 1px solid #ffd98a; }
.payout-alert.is-due:hover { color: #6b4500; }
.payout-critical { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--ooh-radius); background: linear-gradient(135deg, #dc2626, #9f1239); color: #fff; box-shadow: 0 18px 36px -18px rgba(220, 38, 38, .9); animation: ooh-alarm 1.6s infinite; }
.payout-critical-icon { width: 3rem; height: 3rem; border-radius: .9rem; background: rgba(255, 255, 255, .2); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.payout-critical-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.table tr.payout-row-overdue > td { background: #fff5f5; }
.table tr.payout-row-overdue > td:first-child { box-shadow: inset 4px 0 0 #dc2626; }
.pill-urgent { background: #dc2626; color: #fff; animation: ooh-alarm 1.6s infinite; }
@media (max-width: 575.98px) { .payout-alert { flex-wrap: wrap; } .payout-alert-cta { margin-left: 2.1rem; } .payout-critical { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .payout-alert.is-overdue, .payout-critical, .pill-urgent { animation: none; } }

/* Settings → "How stall payouts work" note */
.payout-howto { background: var(--ooh-raspberry-50); border-radius: .75rem; padding: .85rem 1rem; font-size: .875rem; }
.payout-howto li + li { margin-top: .25rem; }

/* ---- WordPress theme additions ---- */
.admin-bar .pub-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .pub-nav { top: 46px; } }
.pub-nav .menu-links { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.pub-nav .menu-links a { color: var(--ooh-ink); font-weight: 600; text-decoration: none; padding: .375rem .75rem; }
.pub-nav .menu-links a:hover, .pub-nav .menu-links .current-menu-item > a { color: var(--ooh-raspberry); }
.wp-content { max-width: 760px; }
.wp-content img { max-width: 100%; height: auto; border-radius: .75rem; }
.wp-content a { color: var(--ooh-raspberry); }
.alignwide { max-width: 1100px; }
.alignfull { width: 100%; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

/* WhatsApp everywhere */
.menu-item { position: relative; }
.menu-item > .flex-grow-1 { display: flex; flex-direction: column; }
.mi-order { align-self: flex-start; margin-top: .6rem; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px; background: #e9fbef; color: #128c4a; font-size: .85rem; font-weight: 700; text-decoration: none; }
.mi-order:hover { background: #25d366; color: #fff; }
.wa-band { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.25rem 1.5rem; border-radius: 1.25rem; background: linear-gradient(120deg, #128c4a, #25d366); color: #fff; box-shadow: 0 20px 40px -20px rgba(18, 140, 74, .8); }
.foot-wa { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: #128c4a !important; text-decoration: none !important; }
.wa-fab { bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
.order-bar { bottom: calc(1rem + env(safe-area-inset-bottom)); }

/* Phones */
.pub-nav .nav-icon { width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 575.98px) {
    .pub-nav .container { gap: .5rem; }
    .pub-nav .navbar-brand { margin-right: 0; font-size: 1.2rem; }
    .pub-nav .navbar-brand img { width: 1.9rem; height: 1.9rem; }
    .pub-nav .nav-login { width: 2.4rem; height: 2.4rem; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
    .pub-nav .btn { font-size: .9rem; }
    .pub-hero .btn-lg { width: 100%; justify-content: center; display: flex; align-items: center; }
    .menu-item { gap: .8rem; padding: .75rem; }
    .menu-item img, .menu-item .mi-ph { width: 4.75rem; height: 4.75rem; }
    .wa-band { padding: 1.1rem; }
    .wa-band .btn { width: 100%; }
    .order-bar { left: 0; right: 0; }
    .pub-foot .container { flex-direction: column; align-items: flex-start !important; }
    .wa-fab { right: 1rem; width: 3.4rem; height: 3.4rem; font-size: 1.6rem; }
}