/* =====================================================================
   DAET KITCHEN — tema ng order page (Phase 2 ng redesign, 2026-10-23)
   =====================================================================
   Nilo-load PAGKATAPOS ng inline na <style> ng QUEBO sa order.html, at
   LAHAT ay naka-scope sa `body.daet` -- iyon ang switch. Alisin ang `daet`
   sa <body> at bumabalik ang cream na itsura ng QUEBO, walang ibang galaw.

   ⚠️ ITSURA LANG. Walang display/visibility na binabago rito sa mga
      elementong kinokontrol ng order-app.js (.hidden, .show, .open...).
      Ang daloy at ang lohika ay sa QUEBO pa rin.

   Brand: UI/DAET_KITCHEN_DESIGN_SYSTEM.md · Mockup: Phase 2 sa
   https://claude.ai/artifact/4spcowbE8re4yh6fhAxdwE
   ===================================================================== */

/* ---- 1. TOKENS + remap ng mga variable ng QUEBO ----
   Ang base ng QUEBO ay gumagamit ng --green (pangunahing button),
   --espresso (madilim na bar), --gold (accent), --cream/--bg (likod). */
body.daet {
    --dk-yellow:      #FFF200;
    --dk-yellow-soft: #FFF9B3;
    --dk-red:         #B01010;
    --dk-red-dark:    #9A0A0A;
    --dk-cream:       #FFF4E0;
    --dk-ink:         #2B0A0A;
    --dk-ink-muted:   #6B3A3A;
    --dk-border:      #E6D200;

    --green:      var(--dk-red);
    --green-dark: var(--dk-red-dark);
    --gold:       var(--dk-red);
    --espresso:   var(--dk-red);
    --cream:      var(--dk-cream);
    --cream2:     var(--dk-yellow-soft);
    --bg:         var(--dk-yellow-soft);
    --text:       var(--dk-ink);
    --muted:      var(--dk-ink-muted);
    --line:       var(--dk-border);
    --red:        var(--dk-red);

    background: var(--dk-yellow-soft);
    color: var(--dk-ink);
}
body.daet .wrap { background: var(--dk-yellow-soft); box-shadow: none; }

/* ---- 2. SPLASH (habang naglo-load) ----
   Pulang plato, dilaw na logo (quebo-logo-light.png = dilaw na logo ng
   Daet), dilaw na bar. Flat: walang sinag, walang anino sa logo. */
body.daet .ava-splash { background: var(--dk-red); }
body.daet .ava-splash::after,
body.daet .ava-aura { display: none; }
body.daet .ava-ltr { filter: none; }
body.daet .ava-splash__bar {
    background: rgba(255, 244, 224, .28);
    box-shadow: none;
    border-radius: 6px;
}
body.daet .ava-splash__bar span {
    background: var(--dk-yellow);
    box-shadow: none;
    border-radius: 6px;
}
body.daet .ava-powered,
body.daet .ava-powered * { color: var(--dk-cream) !important; }

/* ---- 3. MENU HEADER: pula, dilaw na logo, OPEN, mga icon ---- */
body.daet .mhead { background: var(--dk-red); box-shadow: none; border-bottom: 0; }
body.daet .mhead-bar { background: var(--dk-red); padding-bottom: 6px; }
body.daet .mhead-logo { height: 40px; }
@media (min-width: 480px) { body.daet .mhead-logo { height: 48px; } }
body.daet .chip-open {
    background: var(--dk-yellow); color: var(--dk-red);
    border-radius: 6px; font-weight: 900;
}
body.daet .chip-closed {
    background: var(--dk-ink); color: var(--dk-cream);
    border-radius: 6px; font-weight: 900;
}
body.daet .mhead-bar .icon-btn {
    background: var(--dk-red-dark); color: var(--dk-cream);
    border-radius: 10px;
}
body.daet .mhead-bar .icon-btn:active { background: #870808; }
body.daet .closed-tip,
body.daet .closed-tip::before { background: var(--dk-ink); }
body.daet .closed-tip i { color: var(--dk-yellow); }

/* Search: puting kahon sa loob ng pulang header. */
body.daet .menu-search { background: var(--dk-red); padding: 6px 16px 10px; }
body.daet .menu-search-box {
    border: 0; border-radius: 8px; background: #FFFFFF; min-height: 46px;
}
body.daet .menu-search-box:focus-within { box-shadow: 0 0 0 3px var(--dk-yellow); }
body.daet .menu-search-box > i { color: var(--dk-red); }
body.daet .menu-search-input { font-weight: 600; }

/* All / Foods / Drinks: mga tab sa ilalim ng pulang header, dilaw na
   underline ang aktibo. Ang kategorya (row 2) ay nasa mapusyaw na dilaw. */
body.daet .chips-row { background: var(--dk-yellow-soft); }
body.daet .tabs-row {
    background: var(--dk-red);
    gap: 0;
    padding: 0 16px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}
body.daet .tab-btn {
    justify-content: center;
    min-height: 46px;
    padding: 8px 0 10px;
    border: 0;
    border-bottom: 5px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--dk-cream);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
body.daet .tab-btn.on {
    background: transparent;
    border-color: var(--dk-yellow);
    color: var(--dk-yellow);
    box-shadow: none;
    font-weight: 900;
}
body.daet .tab-btn:active,
body.daet .tab-btn.on:active { background: rgba(255, 244, 224, .10); }

body.daet .chips { padding: 12px 16px; gap: 8px; }
body.daet .chip-btn {
    min-height: 36px; padding: 0 14px;
    border: 0; border-radius: 8px;
    background: #FFFFFF; color: var(--dk-ink);
    font-size: 14px; font-weight: 700;
}
body.daet .chip-btn.on { background: var(--dk-red); color: var(--dk-yellow); font-weight: 900; }

/* ---- 4. SECTION LABEL: maikling pulang bar sa itaas ng pangalan ---- */
body.daet .cat-sec { align-items: flex-end; margin: 12px 2px 0; }
body.daet .cat-sec-label {
    position: relative;
    padding-top: 12px;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.01em;
    color: var(--dk-ink);
}
body.daet .cat-sec-label::before {
    content: "";
    position: absolute; top: 0; left: 0;
    width: 44px; height: 7px;
    background: var(--dk-red);
}
body.daet .cat-sec-rule { visibility: hidden; }
body.daet .cat-sec-count { font-size: 13px; font-weight: 700; color: var(--dk-ink-muted); }

/* ---- 5. ITEM CARDS ---- */
body.daet .item-list { padding-left: 16px; padding-right: 16px; }
body.daet .item-card {
    background: #FFFFFF;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
    body.daet .item-card:hover { transform: none; box-shadow: 0 0 0 3px var(--dk-red); }
}
body.daet .mm-ph,
body.daet .mm-imgwrap {
    background: var(--dk-yellow);
    border-radius: 12px 12px 0 0;
}
body.daet .mm-ph { color: var(--dk-red); }
body.daet .mm-ph i { opacity: .45; }
body.daet .ic-tag,
body.daet .mm-tag {
    background: var(--dk-red);
    color: var(--dk-yellow);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: none;
}
body.daet .ic-name { font-size: 16px; font-weight: 800; color: var(--dk-ink); }
body.daet .ic-price {
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: var(--dk-red);
    font-size: 15px;
    font-weight: 900;
}
body.daet .ic-desc { color: var(--dk-ink-muted); }
body.daet:not(.menu-mode) .item-card::after {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--dk-red);
    color: var(--dk-yellow);
    font-weight: 900;
    box-shadow: none;
}
body.daet:not(.menu-mode) .item-card:active::after { background: var(--dk-red-dark); }
body.daet .item-card.is-out .ic-out { background: var(--dk-ink); color: var(--dk-cream); }

/* ---- 6. CART BAR + live-order bar ---- */
body.daet #cartBar {
    background: var(--dk-red);
    color: var(--dk-cream);
    border-radius: 12px;
    min-height: 62px;
    font-weight: 900;
    box-shadow: none;
}
body.daet #cartBar:active { background: var(--dk-red-dark); }
body.daet #cartBar i { color: var(--dk-yellow); }
body.daet #cartBarTotal { color: var(--dk-yellow); }
body.daet #activeOrderBar {
    background: var(--dk-ink);
    color: var(--dk-cream);
    border-radius: 12px;
    box-shadow: none;
}
body.daet .bar-scrim {
    background: linear-gradient(to top, var(--dk-yellow-soft) 0%, var(--dk-yellow-soft) 42%, rgba(255, 249, 179, 0) 100%);
}

/* ---- 7. WIZARD (How / Table / Discount) ----
   Maliwanag na: mapusyaw na dilaw na likod, pulang header, puting card.
   Ang napili ay buong pulang card (Order 1 · How sa mockup). */
body.daet #viewWizard { background: var(--dk-yellow-soft); color: var(--dk-ink); }
body.daet .wz-glow { display: none; }
body.daet .wz-top { background: var(--dk-red); border-bottom: 0; padding: 14px 16px 16px; }
body.daet .wz-top-row { height: 40px; }
body.daet .wz-back {
    width: 40px; height: 40px; border: 0; border-radius: 10px;
    background: var(--dk-red-dark); color: var(--dk-cream);
}
body.daet .wz-step-lbl {
    font-size: 26px; font-weight: 900; letter-spacing: -.01em;
    color: var(--dk-cream);
}
body.daet .wz-step-of { color: var(--dk-cream); font-size: 13px; font-weight: 800; }
body.daet .wz-rail { margin-top: 14px; gap: 6px; }
body.daet .wz-seg { height: 6px; border-radius: 3px; background: rgba(255, 244, 224, .28); }
body.daet .wz-seg i,
body.daet .wz-seg.done i { background: var(--dk-yellow); border-radius: 3px; }

body.daet .wz-choice {
    background: #FFFFFF;
    border: 3px solid var(--dk-border);
    border-radius: 12px;
    color: var(--dk-ink);
    min-height: 76px;
}
body.daet .wz-choice .ic {
    background: var(--dk-yellow); color: var(--dk-red);
    border: 0; border-radius: 10px;
}
body.daet .wz-choice .tt { font-size: 18px; font-weight: 800; }
body.daet .wz-choice .chk { border: 3px solid var(--dk-border); color: var(--dk-red); }
body.daet .wz-choice .pct {
    background: var(--dk-yellow-soft); color: var(--dk-red);
    border: 0; border-radius: 6px; font-weight: 900;
}
body.daet .wz-choice.on {
    background: var(--dk-red); border-color: var(--dk-red);
    color: var(--dk-cream); box-shadow: none;
}
body.daet .wz-choice.on .ic { background: var(--dk-yellow); color: var(--dk-red); transform: none; }
body.daet .wz-choice.on .chk { background: var(--dk-yellow); border-color: var(--dk-yellow); }
body.daet .wz-choice.on .pct { background: var(--dk-yellow); color: var(--dk-red); }
body.daet .wz-choice.on::after { border-color: var(--dk-yellow); }

body.daet #viewWizard .field label {
    font-size: 12px; letter-spacing: .06em; color: var(--dk-ink);
}
body.daet #viewWizard .field input,
body.daet #viewWizard .field textarea {
    background: #FFFFFF;
    border: 2px solid var(--dk-ink);
    border-radius: 8px;
    color: var(--dk-ink);
    font-weight: 600;
    min-height: 52px;
}
body.daet #viewWizard .field input::placeholder { color: var(--dk-ink-muted); }
body.daet #viewWizard .field input:focus {
    background: #FFFFFF; border-color: var(--dk-red);
    box-shadow: 0 0 0 1px var(--dk-red);
}
body.daet #viewWizard .field input.invalid { border-color: var(--dk-red); box-shadow: 0 0 0 1px var(--dk-red); }
body.daet #viewWizard .req { color: var(--dk-red); }
body.daet #viewWizard .wz-opt { color: var(--dk-ink-muted); }

body.daet #viewWizard .auth-why,
body.daet #viewWizard .login-cta,
body.daet #viewWizard .signed-strip {
    background: #FFFFFF; border: 2px solid var(--dk-border);
    border-radius: 12px; color: var(--dk-ink);
}
body.daet #viewWizard .auth-why b,
body.daet #viewWizard .login-cta b,
body.daet #viewWizard .signed-strip b,
body.daet #viewWizard .signed-strip i { color: var(--dk-red); }
body.daet #viewWizard .signed-strip .ss-main span { color: var(--dk-ink-muted); }
body.daet #viewWizard .btn-ghost {
    background: #FFFFFF; border: 2px solid var(--dk-ink);
    border-radius: 8px; color: var(--dk-ink); font-weight: 800;
}
body.daet #viewWizard .btn-primary { background: var(--dk-red); color: var(--dk-yellow); border-radius: 12px; font-weight: 900; }

body.daet #viewWizard .wz-msg {
    background: var(--dk-red); border: 0; border-left: 4px solid var(--dk-yellow);
    border-radius: 8px; color: var(--dk-cream); font-weight: 700;
}

body.daet .wz-cta-bar { background: var(--dk-yellow-soft); }
body.daet .wz-cta {
    border-radius: 12px;
    background: var(--dk-red);
    color: var(--dk-yellow);
    min-height: 62px;
    font-size: 18px; font-weight: 900; letter-spacing: .04em;
    box-shadow: none;
}
body.daet .wz-cta:active { background: var(--dk-red-dark); box-shadow: none; }
body.daet .wz-cta::after { display: none; }
body.daet .wz-cta.dim { opacity: .35; }

/* ID popup (discount) */
body.daet .wz-pop { background: rgba(43, 10, 10, .6); backdrop-filter: none; }
body.daet .wz-pop-card {
    background: #FFFFFF; border: 3px solid var(--dk-red);
    border-radius: 12px; box-shadow: none;
}
body.daet .wz-pop-x { color: var(--dk-ink); }
body.daet .wz-pop-ic { background: var(--dk-yellow); color: var(--dk-red); border-radius: 12px; box-shadow: none; }
body.daet .wz-pop-h { color: var(--dk-ink); font-weight: 900; }
body.daet .wz-pop-h .wz-pop-pct { color: var(--dk-red); }
body.daet .wz-pop-tx { color: var(--dk-red); }

/* Table picker */
body.daet .wz-tbl-legend { color: var(--dk-ink-muted); }
body.daet .wz-tbl-dot { background: #FFFFFF; border: 2px solid var(--dk-border); }
body.daet .wz-tbl-dot.sel { background: var(--dk-red); border-color: var(--dk-red); }
body.daet .wz-tbl {
    background: #FFFFFF; border: 3px solid var(--dk-border);
    border-radius: 12px; color: var(--dk-ink);
}
body.daet .wz-tbl .c { color: var(--dk-ink-muted); }
body.daet .wz-tbl.on {
    background: var(--dk-red); border-color: var(--dk-red);
    color: var(--dk-yellow); box-shadow: none;
}
body.daet .wz-tbl.on .c { color: var(--dk-cream); }
body.daet .wz-tbl.on::before { background: var(--dk-yellow); color: var(--dk-red); box-shadow: none; }

body.daet .wz-cta-bar { border-top: 2px solid var(--dk-border); }

/* ---- 8. SHEETS (item, cart, checkout, account...) ----
   Flat: walang anino. ⚠️ Mahalaga rin ito sa itsura ng page: ang mga
   nakasarang sheet ay nakaabang sa ILALIM ng screen, at ang dating anino nila
   ay umaabot pataas bilang madilim na bahid sa ibaba ng bawat view. */
body.daet #sheetOverlay { background: rgba(43, 10, 10, .6); }
body.daet .sheet { border-radius: 16px 16px 0 0; box-shadow: none; }
body.daet .sheet-head { border-bottom: 2px solid var(--dk-yellow-soft); padding: 14px 16px 12px 20px; }
body.daet .sheet-title { font-size: 22px; font-weight: 900; letter-spacing: -.02em; color: var(--dk-ink); }
body.daet .sheet-head .icon-btn {
    background: #FFFFFF; color: var(--dk-ink);
    border: 2px solid var(--dk-ink); border-radius: 10px;
}
body.daet .sheet-body { padding-left: 20px; padding-right: 20px; }
body.daet .sheet-foot { border-top: 2px solid var(--dk-yellow-soft); }
body.daet .sheet-img { border-radius: 12px; }
body.daet .sheet-img-ph { background: var(--dk-yellow); color: var(--dk-red); }
body.daet .sheet-img-ph i { opacity: .45; }
body.daet .sheet-desc { color: var(--dk-ink-muted); font-size: 15px; font-weight: 500; }

/* Mga button sa buong page */
body.daet .btn { border-radius: 12px; }
body.daet .btn-primary {
    background: var(--dk-red); color: var(--dk-yellow);
    font-weight: 900; letter-spacing: .03em; text-transform: uppercase;
}
body.daet .btn-primary:active { background: var(--dk-red-dark); }
body.daet .btn-primary:disabled { background: #D9D9D9; color: #555555; }
body.daet .btn-ghost {
    background: #FFFFFF; border: 2px solid var(--dk-ink);
    color: var(--dk-ink); font-weight: 800;
}
body.daet .co-btns .btn.back {
    background: var(--dk-yellow); border: 3px solid var(--dk-red);
    color: var(--dk-red); font-weight: 900; text-transform: uppercase;
}

/* Modifier groups ("Extra") */
body.daet .mod-group { border: 2px solid var(--dk-border); border-radius: 12px; }
body.daet .mod-group.mod-missing { border-color: var(--dk-red); background: #FFFFFF; }
body.daet .mod-head { font-size: 16px; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
body.daet .mod-hint { color: var(--dk-ink-muted); font-size: 12px; font-weight: 700; }
body.daet .mod-hint.mod-req { background: var(--dk-red); color: var(--dk-yellow); border-radius: 6px; }
body.daet .mod-row input,
body.daet .pay-row input,
body.daet .stu-row input { accent-color: var(--dk-red); }
body.daet .mod-label { font-weight: 700; }
body.daet .mod-price { color: var(--dk-red); font-weight: 800; }
body.daet .mod-best { background: var(--dk-red); color: var(--dk-yellow); border: 0; border-radius: 6px; }
body.daet .mod-step button {
    width: 38px; height: 38px; border-radius: 8px;
    border: 3px solid var(--dk-red); background: #FFFFFF; color: var(--dk-red);
    font-weight: 900;
}
body.daet .mod-step button:last-child { background: var(--dk-red); color: var(--dk-yellow); }
body.daet .mod-n { font-weight: 900; }

/* Upsell sa loob ng item sheet */
body.daet .ups-card { border: 2px solid var(--dk-border); border-radius: 10px; }
body.daet .ups-card.is-in { border-color: var(--dk-red); background: var(--dk-yellow-soft); }
body.daet .ups-img { background: var(--dk-yellow); border-radius: 8px; }
body.daet .ups-img-ph { color: var(--dk-red); }
body.daet .ups-price { color: var(--dk-red); font-weight: 900; }
body.daet .ups-add { border: 2px solid var(--dk-red); color: var(--dk-red); font-weight: 900; border-radius: 8px; }
body.daet .ups-add:disabled { background: var(--dk-red); color: var(--dk-yellow); }

/* Qty stepper (item sheet footer) */
body.daet .qty button {
    border: 3px solid var(--dk-red); border-radius: 10px;
    background: #FFFFFF; color: var(--dk-red); font-weight: 900;
}
body.daet .qty span { font-weight: 900; font-size: 18px; }

/* Cart */
body.daet .cart-line { border-bottom: 1px solid var(--dk-border); }
body.daet .cl-name { font-size: 16px; font-weight: 800; }
body.daet .cl-mods { color: var(--dk-red); font-weight: 700; }
body.daet .cl-price { color: var(--dk-red); font-weight: 900; font-size: 15px; }
body.daet .cl-qty button {
    width: 42px; height: 42px; border-radius: 10px;
    border: 3px solid var(--dk-ink); background: #FFFFFF; color: var(--dk-ink);
}
body.daet .cl-qty button:last-child { border-color: var(--dk-red); background: var(--dk-red); color: var(--dk-yellow); }
body.daet .cl-qty span { font-weight: 900; }
body.daet .foot-total { font-size: 18px; font-weight: 900; }
body.daet .foot-total > :last-child { color: var(--dk-red); font-size: 22px; }
body.daet .foot-vat { color: var(--dk-ink-muted); font-weight: 600; }

/* Checkout: hakbang, segmented, fields, bayad */
body.daet .co-step-bar { height: 6px; border-radius: 3px; background: var(--dk-border); }
body.daet .co-step.done .co-step-bar,
body.daet .co-step.cur .co-step-bar { background: var(--dk-red); }
body.daet .co-step-txt { color: var(--dk-ink-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
body.daet .co-step.cur .co-step-txt { color: var(--dk-red); font-weight: 900; }
body.daet .co-h { font-size: 18px; font-weight: 900; }
body.daet .co-sub { color: var(--dk-ink-muted); }

body.daet .seg { background: var(--dk-yellow-soft); border-radius: 10px; }
body.daet .seg-btn { color: var(--dk-ink); font-weight: 800; border-radius: 8px; }
body.daet .seg-btn.on { background: var(--dk-red); color: var(--dk-yellow); box-shadow: none; font-weight: 900; }
body.daet .seg.need { background: transparent; }
body.daet .seg.need .seg-btn { border: 2px dashed var(--dk-red); background: #FFFFFF; color: var(--dk-red); }
body.daet .seg-need-note { color: var(--dk-red); }

/* `> label` LANG: ang mga .pay-row ay <label> din sa loob ng .field, at
   hindi sila dapat maging uppercase na maliit na label. */
body.daet .field > label {
    font-size: 12px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--dk-ink);
}
body.daet .field input,
body.daet .field textarea {
    border: 2px solid var(--dk-ink); border-radius: 8px;
    background: #FFFFFF; color: var(--dk-ink); font-weight: 600;
}
body.daet .field input:focus,
body.daet .field textarea:focus { border-color: var(--dk-red); box-shadow: 0 0 0 1px var(--dk-red); }
body.daet .field-hint { color: var(--dk-ink-muted); }
body.daet .field.tbl-on label { color: var(--dk-red); }
body.daet .field.tbl-on input { border-color: var(--dk-red); background: #FFFFFF; }
body.daet .pin-status { color: var(--dk-red); }

body.daet .pay-row { border: 3px solid var(--dk-border); border-radius: 12px; background: #FFFFFF; }
body.daet .pay-row.on { border-color: var(--dk-red); background: var(--dk-yellow-soft); }
body.daet .pay-ic { color: var(--dk-red); }
body.daet .pay-main { font-size: 16px; font-weight: 800; color: var(--dk-ink); }
body.daet .pay-sub { color: var(--dk-ink-muted); font-weight: 600; }

body.daet .stu-row { border: 2px solid var(--dk-border); border-radius: 12px; }
body.daet .stu-row.on { border-color: var(--dk-red); background: var(--dk-yellow-soft); }
body.daet .stu-txt small { color: var(--dk-ink-muted); }

body.daet .totals { background: var(--dk-yellow-soft); border: 0; border-radius: 12px; }
body.daet .t-row { color: var(--dk-ink-muted); font-weight: 600; }
body.daet .t-row.grand { color: var(--dk-ink); font-size: 18px; font-weight: 900; border-top: 2px solid var(--dk-border); }
body.daet .t-row.grand > :last-child { color: var(--dk-red); }
body.daet .vat-note,
body.daet .km-note { color: var(--dk-ink-muted); }

/* Review */
body.daet .rv-card { border: 2px solid var(--dk-border); border-radius: 12px; }
body.daet .rv-title { color: var(--dk-red); font-weight: 900; }
body.daet .rv-edit { color: var(--dk-red); font-weight: 800; }
body.daet .rv-line { font-weight: 700; }
body.daet .rv-line.muted { color: var(--dk-ink-muted); font-weight: 600; }
body.daet .rv-item { font-weight: 700; }
body.daet .rv-item .q { color: var(--dk-red); font-weight: 900; }
body.daet .rv-miss { color: var(--dk-red); }
body.daet .rv-promise { background: var(--dk-yellow-soft); border: 0; border-radius: 8px; color: var(--dk-ink-muted); }

/* Account / auth / address */
body.daet .auth-tabs { background: var(--dk-yellow-soft); border-radius: 10px; }
body.daet .auth-tab { color: var(--dk-ink); font-weight: 800; border-radius: 8px; }
body.daet .auth-tab.on { background: var(--dk-red); color: var(--dk-yellow); box-shadow: none; }
body.daet .auth-why,
body.daet .signed-strip { background: var(--dk-yellow-soft); border: 0; border-radius: 8px; color: var(--dk-ink); }
body.daet .auth-why b,
body.daet .signed-strip b { color: var(--dk-red); }
body.daet .login-cta { background: var(--dk-yellow-soft); border: 0; border-radius: 8px; color: var(--dk-ink); }
body.daet .guest-link { color: var(--dk-ink-muted); font-weight: 700; }
body.daet #acctBtn .acct-dot { background: var(--dk-yellow); border-color: var(--dk-red); }
body.daet .acct-av { background: var(--dk-yellow); color: var(--dk-red); border-radius: 10px; }
body.daet .acct-sec h4 { color: var(--dk-red); font-weight: 900; }
body.daet .addr-card { border: 2px solid var(--dk-border); border-radius: 12px; }
body.daet .addr-card.on { border-color: var(--dk-red); background: var(--dk-yellow-soft); }
body.daet .acct-row { border-bottom: 1px solid var(--dk-border); font-weight: 700; }
body.daet .acct-row i:first-child { color: var(--dk-red); }

/* Mga paalala */
body.daet .warn-note { background: var(--dk-yellow-soft); border: 0; border-left: 4px solid var(--dk-red); border-radius: 8px; color: var(--dk-ink); }
body.daet .err-note { background: var(--dk-red); border: 0; border-left: 4px solid var(--dk-yellow); border-radius: 8px; color: var(--dk-cream); font-weight: 700; }
body.daet .closed-note { background: var(--dk-yellow-soft); border: 0; border-left: 4px solid var(--dk-red); border-radius: 8px; }
body.daet .closed-note i { color: var(--dk-red); }
body.daet .closed-note strong { color: var(--dk-ink); font-weight: 900; }
body.daet .closed-note span { color: var(--dk-ink-muted); }
body.daet .spinner { border-color: var(--dk-border); border-top-color: var(--dk-red); }

/* Toast */
body.daet #toast { background: var(--dk-ink); color: var(--dk-cream); border-radius: 8px; font-weight: 700; box-shadow: none; }

/* ---- 9. SMART SUGGEST + UPSELL popup (#ssModal) ---- */
body.daet #ssModal .ss-modal__backdrop { background: rgba(43, 10, 10, .6); backdrop-filter: none; }
body.daet #ssModal .ss-modal__card {
    background: #FFFFFF; border: 3px solid var(--dk-red);
    border-radius: 12px; box-shadow: none;
}
body.daet #ssModal .ss-modal__x { background: var(--dk-yellow-soft); color: var(--dk-ink); border-radius: 8px; }
body.daet #ssModal .ss-modal__eyebrow { color: var(--dk-red); font-weight: 800; }
body.daet #ssModal .ss-modal__thumb { background-color: var(--dk-yellow); color: var(--dk-red); border-radius: 12px; box-shadow: none; }
body.daet #ssModal .ss-modal__name { color: var(--dk-ink); font-weight: 900; font-size: 20px; }
body.daet #ssModal .ss-modal__badge { background: var(--dk-red); color: var(--dk-yellow); border-radius: 6px; font-weight: 900; }
body.daet #ssModal .ss-modal__price { color: var(--dk-red); font-weight: 900; }
body.daet #ssModal .ss-modal__add {
    background: var(--dk-red); color: var(--dk-yellow);
    border-radius: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em;
}
body.daet #ssModal .ss-modal__skip { color: var(--dk-ink-muted); font-weight: 700; }

/* Ang "Add to cart — ₱120.00" ay mahaba sa uppercase: huwag umapaw sa button. */
body.daet #addCartBtn { font-size: 15px; letter-spacing: .01em; padding: 0 10px; white-space: nowrap; }

/* ---- 10. QR MENU (?menu=1) — book view + grid toggle ---- */
body.daet.menu-mode .view-seg { background: var(--dk-red-dark); border-radius: 10px; }
body.daet .view-seg-btn { color: var(--dk-cream); }
body.daet .view-seg-btn.on { background: var(--dk-yellow); color: var(--dk-red); box-shadow: none; }
body.daet .bk-card { background: #FFFFFF; border: 0; border-radius: 12px; box-shadow: none; }
body.daet .bk-imgwrap,
body.daet .bk-ph { background: var(--dk-yellow); }
body.daet .bk-ph { color: var(--dk-red); }
body.daet .bk-ph i { opacity: .45; }
body.daet .bk-name { font-weight: 900; color: var(--dk-ink); }
body.daet .bk-price { background: transparent; padding: 0; color: var(--dk-red); font-weight: 900; }
body.daet .bk-desc { color: var(--dk-ink-muted); }
body.daet .bk-cat,
body.daet .bk-num { color: var(--dk-ink-muted); }
body.daet.menu-mode.view-book .bk-page:focus-visible { outline-color: var(--dk-red); border-radius: 12px; }

/* Ang credit sa dulo ng listahan */
body.daet .list-tail .ava-powered__by,
body.daet .list-tail .ava-powered__name { color: var(--dk-ink-muted); }
body.daet .list-tail .ava-powered__name { color: var(--dk-red); }

/* Popup: kaunting text lang (utos ng may-ari). Ang presyo ay nasa button na;
   ang "No thanks" ay pareho ng X at ng backdrop (lahat ay _ssDecline). */
body.daet #ssModal .ss-modal__price,
body.daet #ssModal .ss-modal__skip { display: none; }
body.daet #ssModal .ss-modal__name { margin-bottom: 16px; }
body.daet #ssModal .ss-modal__eyebrow { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 900; }

/* ---- 11. PHASE 6 (2026-10-23): mga bihirang screen ----
   Tracking, feedback, photo/gallery, account, QR menu at closed screen: may
   kayumanggi/ginto pa ng QUEBO na NAKASULAT NANG DIRETSO (hindi variable),
   kaya hindi naabot ng remap sa seksyon 1. Flat, walang gradient. */
/* Header ng tracking (ang tanging .mhead-top) */
body.daet .mhead-top { background: var(--dk-red); color: var(--dk-cream); }
body.daet .mhead-top .icon-btn { background: var(--dk-red-dark); color: var(--dk-cream); }
/* Progress ring at mga hakbang ng order */
body.daet .prep-track,
body.daet .pay-track { stroke: rgba(176, 16, 16, .14); }
body.daet .prep-spin { stroke: var(--dk-border); }
body.daet .step.cur .step-dot { box-shadow: 0 0 0 6px rgba(255, 242, 0, .45); }
body.daet .step.cur::before {
    background: repeating-linear-gradient(180deg, var(--dk-red) 0 5px, rgba(176, 16, 16, .16) 5px 10px);
    background-size: 100% 10px;
}
body.daet .mo-done { background: var(--dk-yellow-soft); color: var(--dk-ink); }
/* Mapa ng rider (ang bilog at ruta ay #B01010 na sa order-app.js) */
body.daet .track-map-wrap { border: 2px solid var(--dk-border); border-radius: 12px; box-shadow: none; }
body.daet .track-map-head { background: var(--dk-yellow-soft); color: var(--dk-ink); border-bottom-color: var(--dk-border); }
body.daet .track-dist i { color: var(--dk-red); }
body.daet .track-eta { background: var(--dk-red); color: var(--dk-yellow); border-radius: 6px; font-weight: 900; }
body.daet .trk-rider { background: var(--dk-red); color: var(--dk-yellow); }
body.daet .trk-rider::after { border-color: rgba(176, 16, 16, .5); }
/* Feedback (pagkatapos ng order) */
body.daet .fb-card { border-color: var(--dk-border); }
body.daet .fb-tag { border-radius: 8px; }
body.daet .fb-tag.on { background: var(--dk-red); border-color: var(--dk-red); color: var(--dk-yellow); }
body.daet .fb-thanks { background: var(--dk-yellow-soft); border-color: var(--dk-border); color: var(--dk-ink); }
body.daet .fb-thanks i { color: var(--dk-red); }
/* Photo card at Photo Gallery */
body.daet .gal-card { border-color: var(--dk-border); }
body.daet .gal-card-flash { border-color: var(--dk-red) !important; }
body.daet .gal-drop { background: var(--dk-yellow-soft); border: 2px dashed var(--dk-red); color: var(--dk-red); border-radius: 12px; }
body.daet .gal-hero { background: var(--dk-red); box-shadow: none; border-radius: 12px; }
body.daet .gal-hero::before { display: none; }
body.daet .gal-hero-icon { background: var(--dk-yellow); border: 0; border-radius: 12px; color: var(--dk-red); }
body.daet .gal-hero-sub { color: var(--dk-cream); opacity: 1; }
body.daet .gal-hero-btn { background: var(--dk-yellow); color: var(--dk-red); border-radius: 10px; font-weight: 900; box-shadow: none; }
body.daet .gal-hero-btn:hover { background: var(--dk-yellow); }
body.daet .gal-empty i { color: var(--dk-border); }
/* QR menu (?menu=1): presyo sa item sheet */
body.daet.menu-mode .mm-price { background: var(--dk-yellow); color: var(--dk-red); border-radius: 8px; font-weight: 900; }
/* Account */
body.daet #acctBtn .acct-dot { background: var(--dk-yellow); border-color: var(--dk-red); }
body.daet .acct-av { background: var(--dk-yellow); color: var(--dk-red); border-radius: 12px; }
body.daet .signed-strip { background: var(--dk-yellow-soft); border-color: var(--dk-border); color: var(--dk-ink); }
body.daet .again-ic { background: var(--dk-yellow-soft); color: var(--dk-red); }
/* Sarado ang tindahan */
body.daet .closed-mark { background: var(--dk-yellow); color: var(--dk-red); box-shadow: none; border-radius: 24px; }