/* ==========================================================================
   MediZon - Bootstrap 5 theme
   Palette: pharmacy green on a cool, clean paper; amber is reserved for
   "act now" (a dose is due, supply is low) so it always means something.
   ========================================================================== */

:root {
    --mz-green: #0E6B57;
    --mz-green-ink: #0A4E40;
    --mz-mint: #E6F2EC;
    --mz-ink: #17302A;
    --mz-muted: #5B716A;
    --mz-paper: #F6F9F7;
    --mz-line: #D3E3DB;
    --mz-amber: #E89A2C;
    --mz-amber-soft: #FDF1DE;
    --mz-red: #B83A3A;

    --bs-body-font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: var(--mz-ink);
    --bs-body-bg: var(--mz-paper);
    --bs-primary: var(--mz-green);
    --bs-primary-rgb: 14, 107, 87;
    --bs-link-color: var(--mz-green);
    --bs-link-color-rgb: 14, 107, 87;
    --bs-link-hover-color: var(--mz-green-ink);
    --bs-border-color: var(--mz-line);
    --bs-secondary-color: var(--mz-muted);
    --bs-border-radius: .6rem;
    --bs-focus-ring-color: rgba(14, 107, 87, .3);
}

body { font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: var(--mz-ink); font-weight: 700; letter-spacing: -0.01em; }
.text-muted { color: var(--mz-muted) !important; }
a { text-underline-offset: 2px; }
:focus-visible { outline: 3px solid rgba(14, 107, 87, .45); outline-offset: 2px; }

/* ---------- Screen-filling layout ----------
   Bootstrap's containers stop at 1320px, leaving wide empty margins on laptops and monitors. Pages here grow with the
   screen up to a generous cap, with side padding that scales from phone to monitor. On big monitors the whole UI
   (type, spacing, controls: all rem-based) steps up a little so it fills the screen instead of looking tiny. */
@media (min-width: 1600px) { html { font-size: 106.25%; } }   /* 17px */
@media (min-width: 1920px) { html { font-size: 112.5%; } }    /* 18px */
@media (min-width: 2400px) { html { font-size: 125%; } }      /* 20px */
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: 120rem;
    padding-left: clamp(1rem, 2.6vw, 2.75rem);
    padding-right: clamp(1rem, 2.6vw, 2.75rem);
}
/* Pages that read best narrower than the screen (forms, a document): sized in rem so they grow with it too */
.mz-w-form { max-width: 60rem; }      /* single-column forms */
.mz-w-page { max-width: 74rem; }      /* lists and settings */
.mz-w-wide { max-width: 88rem; }      /* admin forms with side panels */
.mz-w-doc { max-width: 66rem; }       /* the invoice, an A4 page on screen */
/* Product and card grids get more columns as the screen widens */
@media (min-width: 1800px) {
    .row-cols-3xl-5 > * { flex: 0 0 auto; width: 20%; }
    .row-cols-3xl-6 > * { flex: 0 0 auto; width: 16.6666667%; }
}

/* Scrolling areas inside the page (rails, tables, the chat, lists) scroll without a visible bar; only the page has one */
body * { scrollbar-width: none; }
body *::-webkit-scrollbar { display: none; }

/* Two-line label in the navbar: "Returns" over "& Orders" */
.mz-icon-label-2 { line-height: 1.05; }
.mz-icon-label-2 small { display: block; font-size: .72rem; font-weight: 500; opacity: .85; }

/* ---------- Buttons ---------- */
.btn-primary {
    --bs-btn-bg: var(--mz-green); --bs-btn-border-color: var(--mz-green);
    --bs-btn-hover-bg: var(--mz-green-ink); --bs-btn-hover-border-color: var(--mz-green-ink);
    --bs-btn-active-bg: var(--mz-green-ink); --bs-btn-active-border-color: var(--mz-green-ink);
    --bs-btn-disabled-bg: var(--mz-green); --bs-btn-disabled-border-color: var(--mz-green);
    font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: var(--mz-green); --bs-btn-border-color: var(--mz-green);
    --bs-btn-hover-bg: var(--mz-green); --bs-btn-hover-border-color: var(--mz-green);
    --bs-btn-active-bg: var(--mz-green-ink); --bs-btn-active-border-color: var(--mz-green-ink);
    font-weight: 600;
}
.btn-amber {
    --bs-btn-color: #3D2600; --bs-btn-bg: var(--mz-amber); --bs-btn-border-color: var(--mz-amber);
    --bs-btn-hover-color: #3D2600; --bs-btn-hover-bg: #D98A1C; --bs-btn-hover-border-color: #D98A1C;
    font-weight: 600;
}
.form-control:focus, .form-select:focus { border-color: var(--mz-green); box-shadow: 0 0 0 .2rem rgba(14, 107, 87, .18); }
.form-check-input:checked { background-color: var(--mz-green); border-color: var(--mz-green); }
.form-label { font-weight: 600; font-size: .92rem; }

/* ---------- Navigation ---------- */
.mz-brand { font-weight: 800; font-size: 1.3rem; color: var(--mz-ink); display: inline-flex; align-items: center; gap: .5rem; letter-spacing: -0.02em; }
.mz-brand:hover { color: var(--mz-ink); }
.mz-mark {
    width: 2rem; height: 2rem; border-radius: 50%; background: var(--mz-green); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; transform: rotate(-35deg);
}

.mz-loc-modal .modal-body { padding-top: 1rem; }
.mz-loc-option { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .75rem .9rem; margin-bottom: .5rem; text-align: left;
    border: 1px solid var(--mz-line); border-radius: .8rem; background: #fff; color: var(--mz-ink); }
.mz-loc-option:hover { border-color: var(--mz-green); background: var(--mz-mint); }
.mz-loc-option > i { font-size: 1.25rem; color: var(--mz-green); }
.mz-loc-option[hidden] { display: none; }
.mz-loc-option:disabled { opacity: .6; }
.mz-loc-hits { list-style: none; padding: 0; margin: .4rem 0 0; max-height: 14rem; overflow-y: auto; }
.mz-loc-hits button { display: block; width: 100%; text-align: left; padding: .5rem .6rem; border: 0; border-radius: .5rem; background: none;
    font-size: .88rem; color: var(--mz-ink); }
.mz-loc-hits button:hover, .mz-loc-hits button:focus-visible { background: var(--mz-mint); }
.mz-loc-hits .mz-loc-hit-pin { font-weight: 700; color: var(--mz-green); margin-left: .35rem; }
.mz-loc-map { height: 16rem; border-radius: .8rem; border: 1px solid var(--mz-line); }
.mz-loc-result { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .9rem; margin-bottom: 1rem; border-radius: .8rem; font-size: .92rem; }
.mz-loc-result[hidden] { display: none; }
.mz-loc-result.is-ok { background: var(--mz-mint); color: var(--mz-green-ink); }
.mz-loc-result.is-off { background: #FBE9E9; color: #7A2222; }
.mz-loc-result.is-busy { background: var(--mz-paper); color: var(--mz-muted); }
.mz-nav-search { position: relative; max-width: 30rem; }
.mz-nav-search i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--mz-muted); }
.mz-nav-search .form-control { padding-left: 2.3rem; border-radius: 2rem; background: var(--mz-paper); }
.mz-icon-link { position: relative; font-size: 1.2rem; }
.mz-count {
    position: absolute; top: .1rem; right: -.15rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
    border-radius: 1rem; background: var(--mz-amber); color: #3D2600; font-size: .7rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.mz-subnav { background: var(--mz-ink); }
.mz-subnav .nav-link { color: rgba(255,255,255,.7); padding: .8rem 1rem; font-weight: 500; }
.mz-subnav .nav-link.active, .mz-subnav .nav-link:hover { color: #fff; box-shadow: inset 0 -3px 0 var(--mz-amber); }

/* ---------- Page scaffolding ---------- */
.mz-page { padding-top: 2rem; padding-bottom: 3rem; }
.mz-page-title { font-size: 1.85rem; font-weight: 800; margin-bottom: .25rem; }
.mz-panel { background: #fff; border: 1px solid var(--mz-line); border-radius: .9rem; padding: 1.5rem; }
.mz-panel-flush { background: #fff; border: 1px solid var(--mz-line); border-radius: .9rem; overflow: hidden; }
.mz-empty { text-align: center; padding: 3rem 1rem; color: var(--mz-muted); }
.mz-empty i { font-size: 2.2rem; color: var(--mz-green); display: block; margin-bottom: .75rem; }

/* ---------- Hero ---------- */
.mz-hero { padding: 3.5rem 0 3rem; background: linear-gradient(180deg, #fff 0%, var(--mz-paper) 100%); border-bottom: 1px solid var(--mz-line); }
.mz-display { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; max-width: 13ch; }
.mz-hero .lead { color: var(--mz-muted); max-width: 34rem; font-size: 1.15rem; }
.mz-hero-search { display: flex; gap: .5rem; max-width: 32rem; background: #fff; border: 1px solid var(--mz-line); border-radius: 3rem; padding: .35rem; }
.mz-hero-search .form-control { border: 0; border-radius: 3rem; box-shadow: none; padding-left: 1.1rem; }
.mz-hero-search .btn { border-radius: 3rem; padding-inline: 1.4rem; }
.mz-chip {
    display: inline-block; padding: .35rem .85rem; border-radius: 2rem; border: 1px solid var(--mz-line);
    background: #fff; color: var(--mz-ink); font-size: .88rem; text-decoration: none;
}
.mz-chip:hover, .mz-chip.active { border-color: var(--mz-green); color: var(--mz-green); background: var(--mz-mint); }

/* ---------- The blister pack: today's doses ----------
   One cell per scheduled dose. Taken cells look "popped", the due one glows amber. */
.mz-pack {
    background: #fff; border: 1px solid var(--mz-line); border-radius: 1.25rem; padding: 1.25rem 1.25rem 1rem;
    box-shadow: 0 1px 0 var(--mz-line), 0 18px 40px -28px rgba(10, 78, 64, .45);
}
.mz-pack-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.mz-pack-head h2 { font-size: 1.05rem; margin: 0; }
.mz-strip { list-style: none; margin: 0; padding: .75rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .75rem;
    background: repeating-linear-gradient(135deg, #EEF4F1 0 6px, #F5F9F7 6px 12px); border-radius: .9rem; }
.mz-slot { background: #fff; border-radius: .8rem; padding: .7rem .6rem .65rem; text-align: center; border: 1px solid var(--mz-line); display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.mz-bubble {
    width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
    background: radial-gradient(circle at 35% 30%, #fff 0 20%, #E3EEE9 60%, #D2E3DB 100%);
    border: 1px solid #C6DACF; color: var(--mz-green);
}
.mz-slot-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.mz-slot-name { font-size: .8rem; color: var(--mz-muted); line-height: 1.25; }
.mz-slot.is-taken .mz-bubble { background: var(--mz-green); border-color: var(--mz-green); color: #fff; }
.mz-slot.is-taken { border-style: dashed; }
.mz-slot.is-skipped > :not(form) { opacity: .6; }
.mz-slot.is-skipped .mz-bubble { background: #F0F2F1; color: var(--mz-muted); border-style: dashed; }
.mz-slot.is-pending, .mz-slot.is-due { border-color: var(--mz-amber); background: var(--mz-amber-soft); }
.mz-slot.is-pending .mz-bubble, .mz-slot.is-due .mz-bubble { border-color: var(--mz-amber); color: #8A5300; animation: mz-due 2.4s ease-in-out infinite; }
@keyframes mz-due { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 154, 44, .45); } 50% { box-shadow: 0 0 0 7px rgba(232, 154, 44, 0); } }
@media (prefers-reduced-motion: reduce) { .mz-slot .mz-bubble { animation: none !important; } }
.mz-slot form { display: flex; gap: .25rem; }
.mz-slot .btn { padding: .15rem .45rem; font-size: .75rem; }

/* ---------- Steps on home ---------- */
.mz-steps { counter-reset: step; }
.mz-step { position: relative; padding-left: 3.2rem; }
.mz-step::before {
    counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0;
    width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 2px solid var(--mz-green); color: var(--mz-green);
    font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.mz-step h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.mz-step p { color: var(--mz-muted); margin: 0; }

/* ---------- Medicine cards ---------- */
.mz-med { background: #fff; border: 1px solid var(--mz-line); border-radius: .9rem; display: flex; flex-direction: column; overflow: hidden; }
.mz-med:hover { border-color: #A9C9BB; }
.mz-med-thumb { position: relative; display: flex; align-items: center; justify-content: center; height: 128px; background: var(--mz-mint); color: var(--mz-green); font-size: 2.6rem; text-decoration: none; }
.mz-med-thumb img { max-height: 100%; max-width: 100%; object-fit: contain; }

/* Add to cart: "Add" turns into a - qty + stepper */
.mz-qty-row { display: flex; align-items: center; gap: .6rem; }
.mz-qty [hidden] { display: none !important; }
.mz-qty-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--mz-green); border-radius: 2rem;
    background: #fff; overflow: hidden; }
.mz-qty-btn { border: 0; background: none; color: var(--mz-green); width: 2rem; height: 1.95rem; display: flex;
    align-items: center; justify-content: center; font-size: .95rem; }
.mz-qty-btn:hover:not(:disabled) { background: var(--mz-mint); }
.mz-qty-btn:disabled { color: #A9BDB5; }
.mz-qty-count { min-width: 1.6rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.mz-qty.is-busy .mz-qty-stepper { opacity: .6; }
.mz-qty-lg { margin-bottom: 1rem; }
.mz-qty-lg .mz-qty-btn { width: 2.75rem; height: 2.6rem; font-size: 1.1rem; }

/* Out of stock: "Notify me" instead of "Add"; filled bell once the alert is on */
.mz-med.is-oos .mz-med-thumb > :not(.mz-oos-tag) { opacity: .5; }
.mz-oos-tag { position: absolute; left: .5rem; bottom: .5rem; background: rgba(33, 37, 41, .78); color: #fff;
    font-size: .7rem; font-weight: 600; padding: .15rem .5rem; border-radius: 1rem; }
.mz-notify-btn { white-space: nowrap; border-radius: 2rem; }
.mz-notify[data-on="true"] .mz-notify-btn { background: var(--mz-mint); border-color: var(--mz-green); color: var(--mz-green); }
.mz-notify[data-on="true"] .mz-notify-off, .mz-notify:not([data-on="true"]) .mz-notify-on { display: none; }
.mz-qty-lg .mz-notify { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.mz-notify.is-busy .mz-notify-btn { opacity: .6; pointer-events: none; }

/* Prescription read by AI: what's written, and the product to add for it */
.mz-ai-hint { color: #5B4BB7; }
.mz-ai-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: .9rem;
    background: #F3F0FF; border: 1px solid #DCD4FF; }
.mz-ai-banner > .bi { font-size: 1.5rem; color: #5B4BB7; }
.mz-rx-line { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--mz-line); }
.mz-rx-line:last-child { border-bottom: 0; }
.mz-rx-written { flex: 1 1 14rem; }
.mz-rx-arrow { color: var(--mz-muted); }
.mz-rx-match { flex: 1 1 18rem; display: flex; align-items: center; gap: .75rem; }
.mz-rx-product { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; margin-right: auto; }
.mz-rx-product > .bi { font-size: 1.6rem; color: var(--mz-green); }

/* Pharmacist queue: the AI score and its checks */
.mz-rx-fast { border-color: #9ED3B5; box-shadow: inset 4px 0 0 #2E9E62; }
.mz-rx-score { background: #F8FAF9; border: 1px solid var(--mz-line); border-radius: .7rem; padding: .75rem .9rem; }
.mz-rx-score-num { font-size: 1.5rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.mz-rx-checks { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .15rem .75rem; font-size: .8rem; }
.mz-rx-checks .is-ok i { color: #2E9E62; }
.mz-rx-checks .is-no { color: var(--mz-muted); }
.mz-rx-checks .is-no i { color: #C0392B; }
.mz-cover { border: 0; padding: 0; margin: 0; }
.mz-cover-row { display: grid; grid-template-columns: 1fr 5.5rem auto; gap: .4rem; align-items: center; margin-bottom: .35rem; }
.mz-cover-src { grid-column: 1 / -1; display: flex; gap: .3rem; margin-bottom: -.15rem; }
.mz-cover-src:empty { display: none; }
.mz-ai-badge { background: #F3F0FF; color: #5B4BB7; border: 1px solid #DCD4FF; }
.mz-rx-thumb { flex: none; width: 4.5rem; height: 4.5rem; border-radius: .5rem; border: 1px solid var(--mz-line); background: #F8FAF9;
    display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--mz-muted); font-size: 1.6rem; }
.mz-rx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mz-rx-covers { list-style: none; padding: 0; margin: 0; }
.mz-rx-covers li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dashed var(--mz-line); }
.mz-rx-covers li:last-child { border-bottom: 0; }
/* "Upload prescription" in the category bar is a file picker, not a link: it takes the links' look (see .mz-catbar-scroll a) */
.mz-catbar-form { display: contents; }
.mz-catbar-link { cursor: pointer; margin: 0; }
.mz-catbar-link:focus-within { border-color: rgba(255,255,255,.6); }
.mz-qty-lg .mz-qty-count { min-width: 2.4rem; font-size: 1.1rem; }
.mz-qty-note { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .65rem; padding: .55rem .8rem;
    border-radius: .6rem; background: var(--mz-mint); color: var(--mz-green-ink); font-weight: 600; }
.mz-qty-note a { margin-left: auto; font-weight: 700; }
.mz-qty-error { color: var(--mz-red); margin-top: .3rem; }

/* Admin: product image picker */
.mz-image-picker { display: flex; gap: 1rem; align-items: flex-start; }
.mz-image-preview { flex: 0 0 112px; height: 112px; display: flex; align-items: center; justify-content: center; border-radius: .75rem;
    background: var(--mz-mint); color: var(--mz-green); font-size: 2.4rem; overflow: hidden; }
.mz-image-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mz-image-tabs .nav-link { padding: .3rem .8rem; font-size: .875rem; }
@media (max-width: 575.98px) { .mz-image-picker { flex-direction: column; } }
.mz-rx { position: absolute; top: .6rem; right: .6rem; font-size: .72rem; font-weight: 800; padding: .1rem .45rem; border-radius: .35rem; background: #fff; color: var(--mz-red); border: 1px solid #E8C4C4; }
.mz-med-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; }
.mz-med-name { font-size: 1rem; margin: 0 0 .2rem; line-height: 1.3; }
.mz-med-name a { color: var(--mz-ink); text-decoration: none; }
.mz-med-name a:hover { color: var(--mz-green); }
.mz-med-meta { font-size: .82rem; color: var(--mz-muted); margin: 0; }
.mz-med-foot { margin-top: auto; padding-top: .8rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.mz-price { font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.mz-off { font-size: .78rem; color: var(--mz-green); font-weight: 700; margin-left: .3rem; }
.mz-mrp { color: var(--mz-muted); text-decoration: line-through; }

.mz-detail-thumb { background: var(--mz-mint); border-radius: 1rem; height: 320px; display: flex; align-items: center; justify-content: center; color: var(--mz-green); font-size: 6rem; }
.mz-detail-thumb img { max-height: 90%; max-width: 90%; object-fit: contain; }
.mz-facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0; }
.mz-facts dt { color: var(--mz-muted); font-weight: 500; }
.mz-facts dd { margin: 0; }
/* Returnable or not, on the product page */
.mz-return-policy { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.mz-return-policy i { font-size: 1.05rem; }
.mz-return-policy.is-yes { color: var(--mz-green-ink); }
.mz-return-policy.is-no { color: var(--mz-muted); }

/* Delivery date on the product page */
.mz-delivery { display: flex; gap: .85rem; align-items: flex-start; padding: .9rem 1rem; border: 1px solid var(--mz-line); border-radius: .9rem; background: #fff; }
.mz-delivery-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: var(--mz-mint); color: var(--mz-green); font-size: 1.2rem; }
.mz-delivery-ico.is-fast { background: var(--mz-amber-soft); color: #B86E00; }
.mz-delivery-ico.is-off { background: #FBEFEF; color: var(--mz-red); }
.mz-delivery-head { font-weight: 800; color: var(--mz-green-ink); }
.mz-delivery-head.is-fast { color: #8A5300; }
.mz-delivery-head.is-off { color: var(--mz-red); }
.mz-delivery-dates { font-size: .95rem; }
.mz-delivery-cutoff { font-size: .85rem; font-weight: 600; color: #B86E00; }
.mz-delivery-to { display: inline-flex; align-items: center; gap: .35rem; margin-top: .3rem; padding: 0; border: 0; background: none;
    color: var(--mz-muted); font-size: .85rem; text-align: left; }
.mz-delivery-change { color: var(--bs-link-color); font-weight: 600; }
.mz-delivery-to:hover .mz-delivery-change { text-decoration: underline; }

.mz-rx-note { background: #FBEFEF; border: 1px solid #EFCFCF; border-radius: .7rem; padding: .8rem 1rem; color: #7A2626; }

/* Same salt, other brands (product page) */
.mz-subs { border: 1px solid var(--mz-line); border-radius: .9rem; background: #fff; padding: 1rem; }
.mz-subs-save { display: flex; gap: .5rem; align-items: center; background: var(--mz-mint); color: var(--mz-green-ink);
    border-radius: .6rem; padding: .55rem .75rem; font-size: .92rem; margin-bottom: .75rem; }
.mz-subs-list { list-style: none; padding: 0; margin: 0; }
.mz-subs-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .65rem 0; border-top: 1px solid var(--mz-line); }
.mz-subs-row:first-child { border-top: 0; padding-top: 0; }
.mz-subs-row a { color: var(--mz-ink); font-weight: 600; text-decoration: none; }
.mz-subs-row a:hover { color: var(--mz-green); text-decoration: underline; }
.mz-subs-price { text-align: right; white-space: nowrap; }
.mz-subs-unit { font-size: .8rem; color: var(--mz-muted); }
.mz-subs-tag { display: inline-block; font-size: .75rem; font-weight: 600; border-radius: 1rem; padding: .1rem .5rem; }
.mz-subs-tag.is-cheaper { background: var(--mz-mint); color: var(--mz-green-ink); }
.mz-subs-tag.is-dearer { background: var(--mz-paper); color: var(--mz-muted); }
.mz-subs-tag.is-out { background: var(--mz-amber-soft); color: #8A5200; }

/* ---------- Plans (my medicines) ---------- */
.mz-plan { background: #fff; border: 1px solid var(--mz-line); border-radius: 1rem; padding: 1.25rem; height: 100%; display: flex; flex-direction: column; }
.mz-plan.is-low { border-color: var(--mz-amber); box-shadow: inset 4px 0 0 var(--mz-amber); }
.mz-plan.is-paused { opacity: .7; }
.mz-plan h3 { font-size: 1.1rem; margin: 0; }
.mz-meter { height: .55rem; background: #E8EFEC; border-radius: 1rem; overflow: hidden; margin: .5rem 0 .35rem; }
.mz-meter > span { display: block; height: 100%; background: var(--mz-green); border-radius: 1rem; }
.mz-plan.is-low .mz-meter > span { background: var(--mz-amber); }
.mz-days { font-size: 1.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.mz-time { display: inline-block; padding: .15rem .55rem; border-radius: .4rem; background: var(--mz-mint); color: var(--mz-green-ink); font-weight: 600; font-size: .85rem; margin: 0 .25rem .25rem 0; font-variant-numeric: tabular-nums; }
.mz-mode { font-size: .82rem; font-weight: 600; }
.mz-mode-AUTO { color: var(--mz-green); }
.mz-mode-MANUAL { color: #8A5300; }
.mz-mode-OFF { color: var(--mz-muted); }
.mz-plan-history { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 600; color: var(--mz-muted);
    text-decoration: none; white-space: nowrap; padding: .1rem .2rem; margin: -.1rem -.2rem 0 0; border-radius: .35rem; }
.mz-plan-history:hover, .mz-plan-history:focus-visible { color: var(--mz-green); background: var(--mz-mint); }

/* Dose history: one card per dose */
.mz-hist-icon { flex: none; width: 3rem; height: 3rem; border-radius: .9rem; display: grid; place-items: center; font-size: 1.4rem;
    background: var(--mz-mint); color: var(--mz-green); }
.mz-hist-stat.is-taken .mz-stat-label { color: var(--mz-green); }
.mz-hist-stat.is-missed .mz-stat-label { color: #8A5300; }
.mz-hist-filter-btn { position: relative; }
.mz-hist-filter-count { display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; margin-left: .35rem; padding: 0 .3rem;
    border-radius: 1rem; background: #fff; color: var(--mz-green); font-size: .7rem; font-weight: 800; }
.mz-hist-filter-label { float: none; width: auto; font-size: .72rem; font-weight: 600; color: var(--mz-muted); text-transform: uppercase;
    letter-spacing: .03em; margin-bottom: .45rem; }
.mz-seg { display: flex; padding: .2rem; gap: .15rem; background: var(--mz-paper); border: 1px solid var(--mz-line); border-radius: .7rem; }
.mz-seg-btn { flex: 1; text-align: center; padding: .4rem .5rem; border-radius: .5rem; font-size: .88rem; font-weight: 600; color: var(--mz-muted);
    cursor: pointer; white-space: nowrap; margin: 0; }
.mz-seg-btn:hover { color: var(--mz-green); }
.btn-check:checked + .mz-seg-btn { background: var(--mz-green); color: #fff; }
.btn-check:focus-visible + .mz-seg-btn, .btn-check:focus-visible + .mz-chip { outline: 2px solid var(--mz-green); outline-offset: 2px; }
[data-mz-hist-filter] .mz-chip { cursor: pointer; margin: 0; }
.btn-check:checked + .mz-chip { border-color: var(--mz-green); color: var(--mz-green); background: var(--mz-mint); }
.mz-hist-active { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mz-hist-active-label { font-weight: 700; min-width: 0; }
.mz-hist-step { flex: none; width: 2rem; padding-inline: 0; }
.mz-hist-tag { font-size: .8rem; font-weight: 700; border-radius: 1rem; padding: .2rem .65rem; background: var(--mz-mint); color: var(--mz-green-ink); }
.mz-hist-tag.is-skipped { background: var(--mz-paper); color: var(--mz-muted); border: 1px solid var(--mz-line); }
.mz-hist-tag.is-missed { background: var(--mz-amber-soft); color: #8A5300; }
.mz-hist-clear { font-size: .85rem; font-weight: 600; color: var(--mz-muted); text-decoration: none; margin-left: auto; }
.mz-hist-clear:hover { color: var(--mz-red); }
.mz-hist { --mz-hist-accent: var(--mz-green); background: #fff; border: 1px solid var(--mz-line); border-radius: 1rem; padding: 1rem 1.15rem;
    height: 100%; display: flex; flex-direction: column; gap: .7rem; box-shadow: inset 4px 0 0 var(--mz-hist-accent); }
.mz-hist.is-skipped { --mz-hist-accent: #9AABA4; }
.mz-hist.is-missed { --mz-hist-accent: var(--mz-amber); }
.mz-hist-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.mz-hist-day { font-size: 1rem; font-weight: 700; margin: 0; }
.mz-hist-date { font-size: .82rem; color: var(--mz-muted); font-variant-numeric: tabular-nums; }
.mz-hist-status { flex: none; display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; border-radius: 1rem;
    padding: .2rem .6rem; background: var(--mz-mint); color: var(--mz-green-ink); }
.mz-hist.is-skipped .mz-hist-status { background: var(--mz-paper); color: var(--mz-muted); border: 1px solid var(--mz-line); }
.mz-hist.is-missed .mz-hist-status { background: var(--mz-amber-soft); color: #8A5300; }
.mz-hist-med { display: flex; align-items: center; gap: .45rem; font-weight: 600; min-width: 0; }
.mz-hist-med i { color: var(--mz-green); }
.mz-hist-med span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-hist-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; margin: 0; padding-top: .7rem; border-top: 1px dashed var(--mz-line); }
.mz-hist-facts > div { min-width: 0; }
.mz-hist-facts dt { font-size: .72rem; font-weight: 600; color: var(--mz-muted); text-transform: uppercase; letter-spacing: .03em; }
.mz-hist-facts dd { margin: .1rem 0 0; font-weight: 600; font-size: .92rem; font-variant-numeric: tabular-nums; }
.mz-hist-note { font-size: .75rem; font-weight: 500; color: var(--mz-muted); margin-left: .2rem; }
@media (max-width: 575.98px) {
    .mz-hist-icon { width: 2.6rem; height: 2.6rem; font-size: 1.2rem; }
    .mz-hist { padding: .9rem 1rem; }
    .mz-hist-stat { padding: .8rem .9rem; }
    .mz-hist-stat .mz-stat-value { font-size: 1.45rem; }
}
.mz-low-banner { background: var(--mz-amber-soft); border: 1px solid #F3CF96; border-radius: .9rem; padding: 1rem 1.25rem; }

/* ---------- Orders ---------- */
.mz-track { display: flex; list-style: none; padding: 0; margin: 0; }
.mz-track li { flex: 1; text-align: center; position: relative; font-size: .85rem; color: var(--mz-muted); padding-top: 1.9rem; }
.mz-track li::before { content: ""; position: absolute; top: .45rem; left: 50%; width: 1rem; height: 1rem; margin-left: -.5rem; border-radius: 50%; background: #fff; border: 2px solid var(--mz-line); z-index: 1; }
.mz-track li::after { content: ""; position: absolute; top: .87rem; left: -50%; width: 100%; height: 2px; background: var(--mz-line); }
.mz-track li:first-child::after { display: none; }
.mz-track li.done { color: var(--mz-ink); font-weight: 600; }
.mz-track li.done::before { background: var(--mz-green); border-color: var(--mz-green); }
.mz-track li.done::after { background: var(--mz-green); }
.table > :not(caption) > * > * { padding: .8rem .9rem; }
.table thead th { font-size: .82rem; color: var(--mz-muted); font-weight: 600; background: #FAFCFB; }
.mz-order-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--mz-line); overflow-x: auto; scrollbar-width: none; }
.mz-order-tabs::-webkit-scrollbar { display: none; }
.mz-order-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1rem; color: var(--mz-muted); font-weight: 600;
    text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.mz-order-tab:hover { color: var(--mz-green); }
.mz-order-tab.active { color: var(--mz-green-ink); border-bottom-color: var(--mz-green); }
.mz-order-tab-count { min-width: 1.4rem; padding: 0 .4rem; border-radius: 1rem; background: #E8EFEC; color: var(--mz-ink);
    font-size: .75rem; text-align: center; font-variant-numeric: tabular-nums; }
.mz-order-tab.active .mz-order-tab-count { background: var(--mz-green); color: #fff; }
.mz-auto-badge { background: var(--mz-mint); color: var(--mz-green-ink); font-weight: 600; }

/* ---------- Admin ---------- */
.mz-stat { background: #fff; border: 1px solid var(--mz-line); border-radius: .9rem; padding: 1.1rem 1.25rem; height: 100%; }
.mz-stat-value { font-size: 1.8rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mz-stat-label { color: var(--mz-muted); font-size: .9rem; }
.mz-stat.is-attention { border-color: var(--mz-amber); background: var(--mz-amber-soft); }
.mz-stat-sub { font-size: .8rem; color: var(--mz-muted); margin-top: .15rem; }
.mz-section-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mz-muted); margin-bottom: .75rem; }
.mz-online { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #2BA36B; box-shadow: 0 0 0 3px rgba(43, 163, 107, .18); }
.mz-user-off { opacity: .6; }
.mz-dist { display: flex; align-items: center; gap: .75rem; padding: .2rem 0; }
.mz-dist-label { width: 2.2rem; font-weight: 600; font-size: .9rem; }
.mz-dist-count { width: 2.5rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--mz-muted); font-size: .9rem; }

/* ---------- Reviews ---------- */
.mz-stars { display: flex; align-items: center; gap: .15rem; color: var(--mz-amber); }
.mz-review-text { white-space: pre-line; }
/* Radios are in 5..1 order; row-reverse shows them 1..5 so "~" can light up the lower stars on hover. */
.mz-star-input { display: inline-flex; flex-direction: row-reverse; gap: .2rem; }
.mz-star-input input { position: absolute; opacity: 0; pointer-events: none; }
.mz-star-input label { font-size: 1.9rem; line-height: 1; color: #D5DDD9; cursor: pointer; transition: color .1s, transform .1s; }
.mz-star-input label:hover, .mz-star-input label:hover ~ label,
.mz-star-input input:checked ~ label { color: var(--mz-amber); }
.mz-star-input input:focus-visible + label { outline: 3px solid rgba(14, 107, 87, .45); outline-offset: 2px; border-radius: .3rem; }
.mz-star-input label:active { transform: scale(.9); }

/* ---------- Confirm dialog ---------- */
.mz-confirm { border: 0; border-radius: 1rem; padding: 1rem .5rem .5rem; }
.mz-confirm-icon { width: 3.2rem; height: 3.2rem; margin: 0 auto 1rem; border-radius: 50%; background: #FBEFEF; color: var(--mz-red);
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }

/* ---------- Notifications ---------- */
.mz-note { display: flex; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--mz-line); color: var(--mz-ink); text-decoration: none; }
.mz-note:last-child { border-bottom: 0; }
.mz-note:hover { background: #FAFCFB; color: var(--mz-ink); }
.mz-note.is-unread { background: #F2F8F5; }
.mz-note-icon { width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; background: var(--mz-mint); color: var(--mz-green); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.mz-note-DOSE_REMINDER .mz-note-icon, .mz-note-REORDER_ALERT .mz-note-icon { background: var(--mz-amber-soft); color: #8A5300; }
.mz-note-EXPIRY_ALERT .mz-note-icon { background: #FBEFEF; color: var(--mz-red); }
.mz-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; max-width: 22rem; }

/* ---------- MediZon Assistant (floating chat) ---------- */
.mz-bot { --mz-bot-w: 380px; position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1070; font-size: .94rem; }
.mz-bot-launcher { position: relative; width: 3.6rem; height: 3.6rem; border: 0; border-radius: 50%; background: var(--mz-green);
    color: #fff; font-size: 1.45rem; box-shadow: 0 10px 24px rgba(14, 107, 87, .35); display: flex; align-items: center;
    justify-content: center; margin-left: auto; transition: transform .15s ease, background .15s ease; }
.mz-bot-launcher:hover { background: var(--mz-green-ink); transform: translateY(-2px); }
.mz-bot-launcher-close, .mz-bot.is-open .mz-bot-launcher-open { display: none; }
.mz-bot.is-open .mz-bot-launcher-close { display: inline; font-size: 1.15rem; }
.mz-bot-launcher-tab { display: none; }

/* Phones, off the front page: a slim tab on the right edge instead of the round button */
@media (max-width: 767.98px) {
    .mz-bot.is-tucked { right: 0; bottom: 5rem; }
    .mz-bot.is-tucked .mz-bot-launcher { width: 1.6rem; height: 3.4rem; border-radius: .7rem 0 0 .7rem; font-size: 1rem;
        opacity: .85; box-shadow: -2px 4px 12px rgba(14, 107, 87, .25); }
    .mz-bot.is-tucked .mz-bot-launcher:hover { opacity: 1; width: 2rem; transform: none; }
    .mz-bot.is-tucked .mz-bot-launcher-open, .mz-bot.is-tucked .mz-bot-teaser { display: none; }
    .mz-bot.is-tucked .mz-bot-launcher-tab { display: inline; }
    .mz-bot.is-tucked.is-open .mz-bot-launcher { display: none; }
    .mz-bot.is-tucked .mz-bot-panel { right: 1rem; bottom: 0; }
    body:has(.mz-bot.is-tucked) .mz-toasts { bottom: 1rem; }
}

.mz-bot-teaser { position: absolute; right: 0; bottom: 4.4rem; width: 16rem; background: #fff; border: 1px solid var(--mz-line);
    border-radius: 1rem 1rem .3rem 1rem; box-shadow: 0 8px 24px rgba(23, 48, 42, .14); display: flex; align-items: flex-start;
    animation: mz-bot-in .25s ease-out; }
.mz-bot-teaser-text { border: 0; background: none; text-align: left; padding: .8rem .2rem .8rem .95rem; color: var(--mz-ink); line-height: 1.4; }
.mz-bot-teaser-close { border: 0; background: none; color: var(--mz-muted); padding: .45rem .55rem; }

.mz-bot-panel { position: absolute; right: 0; bottom: 4.6rem; width: var(--mz-bot-w); height: min(620px, calc(100vh - 7.5rem));
    background: var(--mz-paper); border: 1px solid var(--mz-line); border-radius: 1.1rem; box-shadow: 0 18px 48px rgba(23, 48, 42, .22);
    display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(12px) scale(.98);
    transform-origin: bottom right; transition: opacity .18s ease, transform .18s ease; }
.mz-bot.is-open .mz-bot-panel { opacity: 1; transform: none; }

.mz-bot-head { display: flex; align-items: center; gap: .65rem; padding: .8rem .7rem .8rem 1rem; background: var(--mz-green); color: #fff; }
.mz-bot-avatar { width: 2.3rem; height: 2.3rem; border-radius: 50%; background: rgba(255,255,255,.18); display: flex;
    align-items: center; justify-content: center; font-size: 1.1rem; flex: none; }
.mz-bot-title { font-size: 1rem; margin: 0; color: #fff; }
.mz-bot-status { font-size: .78rem; opacity: .85; display: flex; align-items: center; gap: .35rem; }
.mz-bot-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #7CE0B4; }
.mz-bot.is-offline .mz-bot-dot { background: var(--mz-amber); }
.mz-bot-icon { border: 0; background: none; color: #fff; width: 2.1rem; height: 2.1rem; border-radius: 50%; opacity: .85; }
.mz-bot-icon:hover { background: rgba(255,255,255,.15); opacity: 1; }

.mz-bot-log { position: relative; flex: 1; overflow-y: auto; padding: 1rem .9rem .5rem; display: flex; flex-direction: column; gap: .55rem; scroll-behavior: smooth; }
.mz-bot-msg { max-width: 86%; padding: .6rem .85rem; border-radius: 1rem; line-height: 1.45; overflow-wrap: anywhere; animation: mz-bot-in .2s ease-out; }
.mz-bot-msg.is-user { align-self: flex-end; background: var(--mz-green); color: #fff; border-bottom-right-radius: .3rem; }
.mz-bot-msg.is-bot { align-self: flex-start; background: #fff; border: 1px solid var(--mz-line); border-bottom-left-radius: .3rem; }
.mz-bot-msg em { color: var(--mz-muted); font-size: .88em; }

.mz-bot-cards { display: flex; flex-direction: column; gap: .45rem; align-self: stretch; animation: mz-bot-in .2s ease-out; }
.mz-bot-card { display: flex; gap: .7rem; background: #fff; border: 1px solid var(--mz-line); border-radius: .85rem; padding: .6rem; }
.mz-bot-thumb { flex: none; width: 3.3rem; height: 3.3rem; border-radius: .6rem; background: var(--mz-mint); color: var(--mz-green);
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem; overflow: hidden; }
.mz-bot-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mz-bot-card-body { min-width: 0; flex: 1; }
.mz-bot-card-title { font-weight: 600; color: var(--mz-ink); text-decoration: none; }
.mz-bot-card-title:hover { color: var(--mz-green); text-decoration: underline; }
.mz-bot-card-sub { font-size: .8rem; color: var(--mz-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-bot-price { font-weight: 700; margin-top: .15rem; }
.mz-bot-price s { color: var(--mz-muted); font-weight: 400; font-size: .82rem; margin-left: .2rem; }
.mz-bot-oos { color: var(--mz-red); font-size: .78rem; font-weight: 600; margin-left: .3rem; }
.mz-bot-badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border-radius: 1rem; background: var(--mz-mint); color: var(--mz-green-ink); }
.mz-bot-rx { display: inline-block; font-size: .68rem; font-weight: 700; padding: 0 .35rem; border-radius: .3rem; background: var(--mz-amber-soft); color: #8A5300; }
.mz-bot-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.mz-bot-actions .btn { padding: .2rem .65rem; font-size: .8rem; }

.mz-bot-chips { display: flex; gap: .4rem; padding: .35rem .9rem .55rem; overflow-x: auto; scrollbar-width: none; }
.mz-bot-chips::-webkit-scrollbar { display: none; }
.mz-bot-chips[hidden] { display: none; }
.mz-bot-chip { flex: none; border: 1px solid var(--mz-green); background: #fff; color: var(--mz-green); border-radius: 1rem;
    padding: .28rem .75rem; font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.mz-bot-chip:hover { background: var(--mz-mint); color: var(--mz-green-ink); }

.mz-bot-form { display: flex; gap: .45rem; padding: .65rem .7rem; border-top: 1px solid var(--mz-line); background: #fff; }
.mz-bot-input { flex: 1; min-width: 0; border: 1px solid var(--mz-line); border-radius: 1.4rem; padding: .5rem .95rem; background: var(--mz-paper); }
.mz-bot-input:focus { outline: none; border-color: var(--mz-green); box-shadow: 0 0 0 3px rgba(14, 107, 87, .15); background: #fff; }
.mz-bot-send { flex: none; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: var(--mz-green); color: #fff; }
.mz-bot-send:disabled { opacity: .5; }
/* WhatsApp style: the mic while the box is empty, send once there's text */
.mz-bot-mic { flex: none; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: var(--mz-green); color: #fff; font-size: 1.1rem; }
.mz-bot-form .mz-bot-send { display: none; }
.mz-bot-form.has-text .mz-bot-send { display: block; }
.mz-bot-form.has-text .mz-bot-mic { display: none; }
.mz-bot.is-listening .mz-bot-form .mz-bot-mic { display: block; background: var(--mz-red); animation: mz-mic-pulse 1.2s ease-out infinite; }
.mz-bot.is-listening .mz-bot-form .mz-bot-send { display: none; }
.mz-bot.is-listening .mz-bot-input { border-color: var(--mz-red); }
@keyframes mz-mic-pulse { 0% { box-shadow: 0 0 0 0 rgba(184, 58, 58, .45); } 100% { box-shadow: 0 0 0 .75rem rgba(184, 58, 58, 0); } }
/* Read a reply aloud */
.mz-bot-msg.is-bot { position: relative; padding-right: 2.1rem; }
.mz-bot-say { position: absolute; top: .3rem; right: .3rem; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%;
    background: none; color: var(--mz-muted); font-size: .95rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.mz-bot-say:hover { background: var(--mz-mint); color: var(--mz-green); }
.mz-bot-msg.is-speaking .mz-bot-say { color: var(--mz-green); background: var(--mz-mint); animation: mz-blink 1.2s infinite; }
.mz-bot-icon[aria-pressed="true"] { background: rgba(255,255,255,.2); opacity: 1; }
.mz-bot-icon[hidden] { display: none; }

.mz-bot-typing { display: flex; gap: .25rem; padding: .75rem .9rem; }
.mz-bot-typing span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--mz-muted); animation: mz-blink 1.2s infinite; }
.mz-bot-typing span:nth-child(2) { animation-delay: .2s; }
.mz-bot-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes mz-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes mz-bot-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* keep page toasts clear of the chat button */
.mz-bot ~ .mz-toasts, body:has(.mz-bot) .mz-toasts { bottom: 5.6rem; }

@media (max-width: 575.98px) {
    .mz-bot { right: 1rem; bottom: 1rem; }
    .mz-bot-panel, .mz-bot.is-tucked .mz-bot-panel { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; border: 0; }
    .mz-bot.is-open .mz-bot-launcher { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mz-bot-panel, .mz-bot-msg, .mz-bot-cards, .mz-bot-teaser, .mz-bot-launcher { transition: none; animation: none; }
}

/* ---------- Family members ---------- */
.mz-avatar { width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; background: var(--mz-mint); color: var(--mz-green-ink);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .95rem; }
.mz-avatar.is-common { background: var(--mz-amber-soft); color: #8A5300; }
.mz-avatar-lg { width: 3rem; height: 3rem; font-size: 1.2rem; }
.mz-avatar-sm { width: 1.45rem; height: 1.45rem; font-size: .72rem; }
.mz-avatar-xs { width: 1.2rem; height: 1.2rem; font-size: .65rem; }
.mz-member-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.mz-member-tabs .mz-chip { display: inline-flex; align-items: center; gap: .4rem; padding-left: .45rem; }
.mz-member-tabs .mz-chip:first-child { padding-left: .85rem; }
.mz-chip-add { border-style: dashed; }
.mz-member-head { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; margin: 0; }
.mz-member-head .small { display: block; }
.mz-panel-soft { background: #FBFDFC; border-style: dashed; }
.mz-who { display: inline-block; margin-left: .35rem; padding: 0 .45rem; border-radius: 1rem; background: var(--mz-mint);
    color: var(--mz-green-ink); font-size: .75rem; font-weight: 600; vertical-align: middle; }
.mz-slot-who { font-size: .72rem; font-weight: 700; color: var(--mz-green-ink); background: var(--mz-mint); border-radius: 1rem; padding: 0 .45rem; }

/* Expiry on medicine cards; the common (OTC) shelf */
.mz-expiry { font-size: .82rem; font-weight: 600; display: flex; align-items: center; gap: .35rem; color: var(--mz-ink); }
.mz-expiry.is-soon { color: #8A5300; }
.mz-expiry.is-expired { color: var(--mz-red); }
.mz-shelf-item { background: #FFFDF8; border-color: #F3DDB8; }
.mz-shelf-note { background: var(--mz-amber-soft); border: 1px solid #F3CF96; border-radius: .9rem; padding: .8rem 1.1rem; font-size: .9rem; }
.mz-take-common { background: var(--mz-mint); border-radius: .7rem; padding: .7rem .9rem; }

/* Delivered medicines waiting for a schedule */
.mz-setup { background: var(--mz-amber-soft); border: 1px solid #F3CF96; border-radius: .9rem; padding: 1rem 1.25rem; }
.mz-setup-icon { font-size: 1.6rem; color: #8A5300; }
.mz-setup-row { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid #F3DDB8; border-radius: .7rem; padding: .5rem .6rem .5rem .75rem; }

/* Checkbox chips: who a medicine is for, which members a device follows */
.mz-member-picks { display: flex; flex-wrap: wrap; gap: .4rem; }
.mz-pick { position: relative; cursor: pointer; margin: 0; }
.mz-pick input { position: absolute; opacity: 0; pointer-events: none; }
.mz-pick > span { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border: 1px solid var(--mz-line);
    border-radius: 2rem; background: #fff; font-size: .88rem; color: var(--mz-ink); transition: background .1s, border-color .1s; }
.mz-pick > span::before { content: "\F26E"; font-family: "bootstrap-icons"; font-size: .8rem; color: transparent; margin-left: -.1rem; }
.mz-pick:hover > span { border-color: #A9C9BB; }
.mz-pick input:checked + span { border-color: var(--mz-green); background: var(--mz-mint); color: var(--mz-green-ink); font-weight: 600; }
.mz-pick input:checked + span::before { color: var(--mz-green); }
.mz-pick input:focus-visible + span { outline: 3px solid rgba(14, 107, 87, .45); outline-offset: 2px; }
.mz-pick-common input:checked + span { border-color: var(--mz-amber); background: var(--mz-amber-soft); color: #6B4100; }
.mz-pick-common input:checked + span::before { color: #8A5300; }
.mz-pick-sm > span { padding: .15rem .6rem; font-size: .8rem; }
.mz-for { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .5rem; }
.mz-for-label { font-size: .78rem; font-weight: 700; color: var(--mz-muted); text-transform: uppercase; letter-spacing: .04em; }
.mz-for.is-busy { opacity: .6; }
.mz-for .mz-qty-error { flex-basis: 100%; margin-top: 0; }
[data-mz-member-picks].is-off { opacity: .5; pointer-events: none; }

/* Schedule */
.mz-segmented { display: flex; flex-wrap: wrap; gap: .4rem; }
.mz-day { min-width: 3.2rem; border: 1px solid var(--mz-line); background: #fff; color: var(--mz-ink); font-weight: 600; }
.mz-day:hover { border-color: var(--mz-green); color: var(--mz-green); background: #fff; }
.btn-check:checked + .mz-day, .btn-check:checked + .mz-day:hover {
    background: var(--mz-green); border-color: var(--mz-green); color: #fff; box-shadow: 0 2px 6px rgba(14, 107, 87, .25);
}
.btn-check:focus-visible + .mz-day { outline: 3px solid rgba(14, 107, 87, .45); outline-offset: 2px; }
.mz-date-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .6rem 0 0; }
.mz-date-chips li { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .4rem .25rem .7rem; border-radius: 2rem;
    background: var(--mz-mint); color: var(--mz-green-ink); font-size: .85rem; font-weight: 600; }
.mz-date-chips .btn-close { font-size: .55rem; }

/* Account settings */
.mz-account-head { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.mz-avatar { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--mz-green); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; font-weight: 800; }
.mz-account-nav { display: flex; flex-direction: column; gap: .15rem; background: #fff; border: 1px solid var(--mz-line); border-radius: 1rem; padding: .5rem; }
.mz-account-nav a { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: .6rem; color: var(--mz-ink);
    text-decoration: none; font-weight: 500; }
.mz-account-nav a:hover { background: var(--mz-mint); color: var(--mz-green-ink); }
.mz-account-nav i { color: var(--mz-green); }
.mz-account-dl { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.5rem; }
.mz-account-dl dt { font-weight: 600; color: var(--mz-muted); font-size: .9rem; }
.mz-account-dl dd { margin: 0; overflow-wrap: anywhere; }
.mz-pw { position: relative; }
.mz-pw .form-control { padding-right: 2.6rem; }
.mz-pw-toggle { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--mz-muted);
    padding: .25rem .45rem; border-radius: .4rem; }
.mz-pw-toggle:hover { color: var(--mz-green); }
/* Bootstrap's tick / warning icons would sit under the eye button; the messages below the field say it instead */
.mz-pw .form-control.is-invalid, .mz-pw .form-control.is-valid { background-image: none; padding-right: 2.6rem; }
.mz-pw ~ .invalid-feedback { display: none; }
.mz-pw:has(.is-invalid) ~ .invalid-feedback { display: block; }
@media (max-width: 991.98px) { .mz-account-nav { flex-direction: row; flex-wrap: wrap; } .mz-account-nav a { padding: .4rem .65rem; font-size: .9rem; } }

/* Cart: packs per person */
.mz-alloc-opt { display: inline-flex; align-items: center; border: 1px solid var(--mz-line); border-radius: 2rem; background: #fff;
    font-size: .8rem; transition: background .1s, border-color .1s; }
.mz-alloc-pick { border: 0; background: none; padding: .15rem .65rem; color: var(--mz-ink); border-radius: 2rem; display: inline-flex; align-items: center; }
.mz-alloc-pick::before { content: "\F26E"; font-family: "bootstrap-icons"; font-size: .75rem; color: transparent; margin-right: .2rem; }
.mz-alloc-opt:hover { border-color: #A9C9BB; }
.mz-alloc-opt.is-on { border-color: var(--mz-green); background: var(--mz-mint); }
.mz-alloc-opt.is-on .mz-alloc-pick { color: var(--mz-green-ink); font-weight: 600; }
.mz-alloc-opt.is-on .mz-alloc-pick::before { color: var(--mz-green); }
.mz-alloc-opt.mz-pick-common.is-on { border-color: var(--mz-amber); background: var(--mz-amber-soft); }
.mz-alloc-opt.mz-pick-common.is-on .mz-alloc-pick { color: #6B4100; }
.mz-alloc-opt.mz-pick-common.is-on .mz-alloc-pick::before { color: #8A5300; }
.mz-alloc-opt.mz-pick-others.is-on { border-color: #5B5BD6; background: #EEEEFC; }
.mz-alloc-opt.mz-pick-others.is-on .mz-alloc-pick { color: #33337A; }
.mz-alloc-opt.mz-pick-others.is-on .mz-alloc-pick::before { color: #5B5BD6; }
.mz-alloc-step { display: none; align-items: center; gap: .1rem; padding-right: .25rem; }
.mz-alloc.is-multi .mz-alloc-opt.is-on .mz-alloc-step { display: inline-flex; }
.mz-alloc-step button { border: 0; background: #fff; width: 1.35rem; height: 1.35rem; border-radius: 50%; padding: 0; line-height: 1;
    color: var(--mz-green-ink); display: inline-flex; align-items: center; justify-content: center; }
.mz-alloc-step button:hover:not(:disabled) { background: var(--mz-green); color: #fff; }
.mz-alloc-step button:disabled { opacity: .35; }
.mz-alloc-n { min-width: 1.1rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.mz-alloc.is-busy { opacity: .6; pointer-events: none; }
.mz-alloc .mz-qty-error { flex-basis: 100%; margin-top: 0; }

/* Change password steps */
.mz-steps { display: flex; gap: 1.25rem; list-style: none; padding: 0; counter-reset: step; color: var(--mz-muted); }
.mz-steps li { display: inline-flex; align-items: center; gap: .45rem; counter-increment: step; }
.mz-steps li::before { content: counter(step); width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid var(--mz-line);
    display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; background: #fff; }
.mz-steps li.is-active { color: var(--mz-ink); font-weight: 600; }
.mz-steps li.is-active::before { background: var(--mz-green); border-color: var(--mz-green); color: #fff; }
.mz-step-done { color: var(--mz-green-ink); background: var(--mz-mint); border-radius: .6rem; padding: .5rem .75rem; display: inline-block; }
.mz-step-done[hidden] { display: none; }

/* Address book */
.mz-addr-card { display: flex; gap: 1rem; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--mz-line); border-radius: 1rem; }
.mz-addr-card.is-default { border-color: var(--mz-green); }
.mz-addr-icon { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--mz-mint); color: var(--mz-green);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.mz-choice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .6rem; }
.mz-choice { position: relative; margin: 0; cursor: pointer; }
.mz-choice input { position: absolute; opacity: 0; pointer-events: none; }
.mz-choice > span { display: grid; grid-template-columns: auto 1fr; column-gap: .65rem; align-items: center; padding: .8rem 1rem;
    border: 1px solid var(--mz-line); border-radius: .8rem; background: #fff; height: 100%; }
.mz-choice > span i { grid-row: span 2; font-size: 1.3rem; color: var(--mz-green); }
.mz-choice small { color: var(--mz-muted); }
.mz-choice:hover > span { border-color: #A9C9BB; }
.mz-choice input:checked + span { border-color: var(--mz-green); background: var(--mz-mint); box-shadow: 0 0 0 1px var(--mz-green) inset; }
.mz-choice input:focus-visible + span { outline: 3px solid rgba(14, 107, 87, .45); outline-offset: 2px; }
.mz-addr-pick { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 1rem; margin: 0; border: 1px solid var(--mz-line);
    border-radius: .8rem; background: #fff; cursor: pointer; color: var(--mz-ink); }
.mz-addr-pick input { margin-top: .3rem; accent-color: var(--mz-green); }
.mz-addr-pick:has(input:checked) { border-color: var(--mz-green); background: var(--mz-mint); }
.mz-addr-pick.is-off { opacity: .65; cursor: not-allowed; }
.mz-addr-pick-body i { color: var(--mz-green); }
.mz-addr-add { align-items: center; border-style: dashed; color: var(--mz-green); }
.mz-addr-add:hover { background: var(--mz-mint); }
/* Promo codes at checkout: a ticket-like code next to what it gives */
.mz-promo-card { display: flex; gap: .75rem; align-items: center; padding: .65rem .8rem; border: 1px dashed #A9C9BB;
    border-radius: .8rem; background: #fff; }
.mz-promo-card.is-on { border-style: solid; border-color: var(--mz-green); background: var(--mz-mint); }
.mz-promo-card.is-off { opacity: .6; }
.mz-promo-code { flex: none; min-width: 5.5rem; padding: .3rem .5rem; border-radius: .4rem; background: var(--mz-mint);
    color: var(--mz-green); font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-align: center; }
.mz-promo-applied { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .8rem;
    border: 1px solid var(--mz-green); border-radius: .8rem; background: var(--mz-mint); color: var(--mz-green); }
.mz-addr-option .mz-addr-check { color: transparent; font-size: 1rem; }
.mz-addr-option.is-selected { border-color: var(--mz-green); background: var(--mz-mint); }
.mz-addr-option.is-selected .mz-addr-check { color: var(--mz-green); }
.mz-loc-add { border-style: dashed; }
.mz-pick-others input:checked + span { border-color: #5B5BD6; background: #EEEEFC; color: #33337A; }
.mz-pick-others input:checked + span::before { color: #5B5BD6; }
.min-w-0 { min-width: 0; }

/* Device alerts */
.mz-device-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .85rem 1.1rem; border-radius: .9rem;
    background: #fff; border: 1px solid var(--mz-green); box-shadow: inset 4px 0 0 var(--mz-green); }
.mz-device-prompt > i { font-size: 1.5rem; color: var(--mz-green); }
.mz-device-row { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--mz-line); }
.mz-device-row:last-child { border-bottom: 0; }
/* Account > Signed-in devices: a narrow column, so the full-width button stays a sensible size on desktop */
.mz-w-devices { max-width: 40rem; }
.mz-device-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
    border-radius: 50%; background: var(--mz-mint); color: var(--mz-green); font-size: 1.15rem; }

/* ---------- Returns ---------- */
.mz-track-sm li { font-size: .75rem; padding-top: 1.6rem; }
.mz-track-sm li::before { width: .8rem; height: .8rem; margin-left: -.4rem; top: .35rem; }
.mz-track-sm li::after { top: .7rem; }
.mz-photo-previews, .mz-photo-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.mz-photo-previews img, .mz-photo-grid img { width: 120px; height: 120px; object-fit: cover; border-radius: .6rem; border: 1px solid var(--mz-line); background: var(--mz-mint); }
.mz-photo-grid img { width: 180px; height: 180px; }

/* ---------- Tax invoice ---------- */
.mz-invoice { background: #fff; border: 1px solid var(--mz-line); border-radius: .9rem; padding: 2rem; font-size: .92rem; }
.mz-invoice h2 { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mz-muted); margin-bottom: .4rem; }
.mz-invoice-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--mz-ink); }
.mz-invoice-title { font-size: 1.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem; }
.mz-invoice-meta { display: grid; grid-template-columns: max-content max-content; gap: .15rem 1rem; margin: 0; justify-content: end; font-size: .88rem; }
.mz-invoice-meta dt { color: var(--mz-muted); font-weight: 500; text-align: left; }
.mz-invoice-meta dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.mz-invoice-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.5rem; padding: 1.25rem 0; }
.mz-invoice-table { font-size: .85rem; font-variant-numeric: tabular-nums; }
.mz-invoice-table > :not(caption) > * > * { padding: .5rem .55rem; }
.mz-invoice-table thead th { white-space: nowrap; }
.mz-invoice-foot { display: grid; grid-template-columns: 1fr 18rem; gap: 2rem; padding-top: 1.25rem; align-items: start; }
.mz-invoice-totals { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; margin: 0; font-variant-numeric: tabular-nums; }
.mz-invoice-totals dt { font-weight: 500; color: var(--mz-muted); }
.mz-invoice-totals dd { margin: 0; text-align: right; font-weight: 600; }
.mz-invoice-totals .mz-invoice-grand { border-top: 2px solid var(--mz-ink); padding-top: .4rem; color: var(--mz-ink); font-size: 1.15rem; font-weight: 800; }
.mz-invoice-notes { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--mz-line); font-size: .8rem; color: var(--mz-muted); }
@media (max-width: 767.98px) {
    .mz-invoice { padding: 1.1rem; }
    .mz-invoice-parties, .mz-invoice-foot { grid-template-columns: 1fr; }
    .mz-invoice-meta { justify-content: start; }
}
@media print {
    /* No page margin: browsers then leave out their own header and footer (date, title, URL, page number).
       The 12 mm margin moves inside the invoice and repeats on every printed page. */
    @page { size: A4; margin: 0; }
    body { background: #fff; }
    /* Print the logo and shading as they look on screen; browsers drop background colours by default */
    .mz-invoice, .mz-invoice * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .mz-nav, .mz-locbar, .mz-catbar, .mz-subnav, .mz-footer, .mz-tabbar, .mz-bot, .mz-toasts, .mz-flash, .mz-no-print { display: none !important; }
    .mz-page { padding: 0; max-width: none !important; }
    .mz-invoice { border: 0; border-radius: 0; padding: 12mm; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
    /* Seller on the left, "Tax invoice" and its numbers on the right, however long the store's address */
    .mz-invoice-head { flex-wrap: nowrap; }
    .mz-invoice-head > div:first-child { flex: 1 1 auto; min-width: 0; }
    .mz-invoice-head > div:last-child { flex: none; text-align: right; }
    .mz-invoice-head .mz-invoice-meta { justify-content: end; }
    .mz-invoice-parties { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
    .mz-invoice-foot { grid-template-columns: 1fr 16rem; }
    .table-responsive { overflow: visible; }
}

/* ---------- Auth ---------- */
.mz-auth { max-width: 26rem; margin: 3rem auto; }

@media (max-width: 575.98px) {
    .mz-page { padding-top: 1.25rem; }
    .mz-track li { font-size: .72rem; }
}

/* ---------- Sales report ---------- */
.mz-range { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; padding: 1rem 1.25rem; }
.mz-num-table td, .mz-num-table th { font-variant-numeric: tabular-nums; }
/* Admin > Monitoring: stack traces */
.mz-stack { max-height: 18rem; overflow: auto; padding: .6rem .75rem; margin-top: .4rem; border-radius: .5rem;
    background: #F3F6F4; border: 1px solid var(--mz-line); font-size: .75rem; white-space: pre; }
.mz-num-table tfoot td { border-top: 2px solid var(--mz-ink); background: #FAFCFB; }
.mz-row-quiet td { color: var(--mz-muted); }
.mz-export > summary { list-style: none; display: inline-flex; align-items: center; gap: .35rem; }
.mz-export > summary::-webkit-details-marker { display: none; }
.mz-export[open] > summary { background: var(--mz-green); color: #fff; }

/* ---------- Header: dark bar (stays on screen) + category bar ---------- */
.mz-nav { position: sticky; top: 0; z-index: 1030; background: #0B3B31; color: #fff; padding: .55rem 0; }
.mz-nav-row { display: flex; align-items: center; gap: .5rem .9rem; }
.mz-nav .mz-brand { flex: none; color: #fff; text-decoration: none; }
.mz-nav .mz-mark { background: #fff; color: var(--mz-green); }
.mz-admin-badge { font-size: .7rem; font-weight: 700; letter-spacing: 0; padding: .15rem .45rem; border-radius: .35rem; background: rgba(255,255,255,.16); }
.mz-burger { flex: none; border: 0; background: none; color: #fff; font-size: 1.7rem; line-height: 1; padding: .1rem .2rem; margin-left: -.3rem; }

/* "Delivers to" */
.mz-loc { display: inline-flex; align-items: center; gap: .4rem; flex: none; min-width: 0; max-width: 13rem; padding: .3rem .5rem;
    border: 1px solid transparent; border-radius: .5rem; background: none; color: #fff; text-align: left; }
.mz-loc:hover { border-color: rgba(255,255,255,.55); }
.mz-loc-pin { font-size: 1.15rem; }
.mz-loc-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.mz-loc-k { font-size: .72rem; color: rgba(255,255,255,.72); white-space: nowrap; }
.mz-loc-v { font-size: .9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-loc-caret { font-size: .7rem; color: rgba(255,255,255,.72); }
.mz-loc.is-off .mz-loc-pin, .mz-loc.is-off .mz-loc-k { color: #FFB8B8; }

/* Search: white field, mint button */
.mz-search { flex: 1; min-width: 0; display: flex; background: #fff; border-radius: .6rem; overflow: hidden; }
.mz-search:focus-within { box-shadow: 0 0 0 3px #7CE0B4; }
.mz-search .form-control { height: 2.6rem; border: 0; border-radius: 0; padding-left: 1rem; box-shadow: none !important; }
.mz-search button { flex: none; width: 3.1rem; border: 0; background: #7CE0B4; color: var(--mz-green-ink); font-size: 1.15rem; }
.mz-search button:hover { background: #5FD3A0; }

/* Bell, cart, account */
.mz-nav-icons { display: flex; align-items: center; gap: .1rem; flex: none; list-style: none; margin: 0 0 0 auto; padding: 0; }
.mz-icon-link, .mz-account { position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .5rem;
    border: 1px solid transparent; border-radius: .5rem; color: #fff; text-decoration: none; }
.mz-icon-link { font-size: 1.35rem; }
.mz-icon-link:hover, .mz-account:hover, .mz-account[aria-expanded="true"] { border-color: rgba(255,255,255,.55); color: #fff; }
.mz-icon-label { font-size: .92rem; font-weight: 700; }
.mz-nav .mz-count { top: .05rem; right: auto; left: 1.3rem; }
.mz-account { line-height: 1.15; }
.mz-account-text { display: flex; flex-direction: column; text-align: left; min-width: 0; }
.mz-account-k { font-size: .72rem; color: rgba(255,255,255,.72); }
.mz-account-v { font-size: .92rem; font-weight: 700; max-width: 8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-account-ico { display: none; font-size: 1.35rem; }
.mz-account-caret { font-size: .7rem; opacity: .75; }

/* Phones and tablets: "Delivers to" strip under the bar */
.mz-locbar { background: #0E5244; }
.mz-locbar .mz-loc { display: flex; width: calc(100% + 1.5rem); max-width: none; margin: 0 -.75rem; padding: .5rem .75rem; border: 0; border-radius: 0; }
.mz-locbar .mz-loc-text { flex: 1; flex-direction: row; align-items: baseline; gap: .35rem; }
.mz-locbar .mz-loc-k { font-size: .8rem; }

/* Category bar */
.mz-catbar { background: var(--mz-green); }
.mz-catbar-scroll { display: flex; align-items: center; gap: .1rem; overflow-x: auto; scrollbar-width: none; margin-inline: -.75rem; padding-inline: .75rem; }
.mz-catbar-scroll::-webkit-scrollbar { display: none; }
.mz-catbar-scroll a, .mz-catbar-link, .mz-catbar-all { flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .6rem; white-space: nowrap;
    border: 1px solid transparent; border-radius: .35rem; background: none; color: #fff; font-size: .88rem; font-weight: 500; text-decoration: none; }
.mz-catbar-scroll a:hover, .mz-catbar-link:hover, .mz-catbar-all:hover { border-color: rgba(255,255,255,.6); color: #fff; }
.mz-catbar-all { font-weight: 700; margin-left: -.6rem; }
.mz-catbar-all i { font-size: 1.15rem; }

/* Phones and tablets: menu + brand + icons, then a full-width search, then a "Delivers to" strip */
@media (max-width: 991.98px) {
    .mz-nav { padding: .5rem 0 .6rem; }
    .mz-nav-row { flex-wrap: wrap; column-gap: .35rem; row-gap: .55rem; }
    .mz-nav .mz-brand { font-size: 1.15rem; }
    .mz-nav .mz-mark { width: 1.75rem; height: 1.75rem; font-size: .9rem; }
    .mz-nav-icons { order: 2; }
    .mz-search { order: 3; flex: 0 0 100%; }
    .mz-search .form-control { height: 2.75rem; font-size: 1rem; }   /* 16px: no zoom-in on iOS */
    .mz-account-k, .mz-account-caret { display: none; }
    .mz-catbar { display: none; }   /* the side menu already lists every category */
    .mz-account-ico { display: inline; }
    .mz-account-v { font-size: .9rem; max-width: 5.5rem; }
    .mz-icon-link, .mz-account { padding: .3rem .4rem; }
}
@media (max-width: 359.98px) { .mz-account-v { max-width: 3.5rem; } }

/* "All" menu */
.mz-menu { --bs-offcanvas-width: min(22rem, 86vw); }
.mz-menu-head { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.15rem; background: #0B3B31; color: #fff; }
.mz-menu-head > i { font-size: 1.6rem; }
.mz-menu-title { margin: 0; color: #fff; font-size: 1.15rem; }
.mz-menu-group { padding: .7rem 0; border-bottom: 1px solid var(--mz-line); }
.mz-menu-group:last-child { border-bottom: 0; }
.mz-menu-group h3 { margin: 0; padding: .35rem 1.25rem .45rem; font-size: 1rem; font-weight: 800; }
.mz-menu-group a, .mz-menu-group button { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .6rem 1.25rem; border: 0;
    background: none; color: var(--mz-ink); font-size: .95rem; text-align: left; text-decoration: none; }
.mz-menu-group a:hover, .mz-menu-group button:hover { background: var(--mz-mint); color: var(--mz-green-ink); }
.mz-menu-group i { width: 1.2rem; text-align: center; color: var(--mz-green); }

/* ---------- Home: banners, then cards over their lower edge ---------- */
body.mz-home { background: #EAF1ED; }
.mz-banner { position: relative; height: 20rem; overflow: hidden; color: #fff; }
.mz-banner-row { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-bottom: 5.5rem; }
/* Room for the carousel arrows, so they never sit on the headline */
@media (min-width: 576px) { .mz-banner .mz-banner-row { padding-left: max(3.25rem, clamp(1rem, 2.6vw, 2.75rem)); padding-right: max(3.25rem, clamp(1rem, 2.6vw, 2.75rem)); } }
.mz-banner-deals { background: linear-gradient(120deg, #0A4E40 0%, #0E6B57 55%, #2BA36B 100%); }
.mz-banner-remind { background: linear-gradient(120deg, #2E2366 0%, #5B5BD6 60%, #8C8CF0 100%); }
.mz-banner-delivery { background: linear-gradient(120deg, #7A3E00 0%, #C9781A 55%, #F0B256 100%); }
.mz-banner-rx { background: linear-gradient(120deg, #123A5C 0%, #1F6FA8 60%, #4FA3D9 100%); }
.mz-banner-copy { position: relative; z-index: 1; min-width: 0; }
.mz-banner-kicker { display: inline-block; margin-bottom: .6rem; padding: .2rem .65rem; border-radius: 2rem; background: rgba(255,255,255,.18);
    font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mz-banner-title { max-width: 18ch; margin-bottom: .45rem; color: #fff; font-size: clamp(1.3rem, 3.4vw, 2.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.mz-banner-sub { margin-bottom: 1rem; opacity: .9; }
.mz-banner-btn { padding: .5rem 1.35rem; border-radius: 2rem; background: #fff; color: var(--mz-ink); font-weight: 700; }
.mz-banner-btn:hover { background: var(--mz-mint); color: var(--mz-ink); }
.mz-banner-art { position: relative; flex: none; width: 15rem; height: 11rem; }
.mz-banner-art > i { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: rgba(255,255,255,.15); color: #fff; }
.mz-art-a { left: 0; top: 1rem; width: 7rem; height: 7rem; font-size: 3.2rem; }
.mz-art-b { right: 1.5rem; top: 0; width: 4.5rem; height: 4.5rem; font-size: 2rem; }
.mz-art-c { right: .4rem; bottom: 0; width: 4rem; height: 4rem; font-size: 1.7rem; }
.mz-art-tag { position: absolute; left: 5.4rem; bottom: .4rem; z-index: 1; padding: .35rem .8rem; border-radius: 1rem; background: #fff; color: var(--mz-ink);
    font-size: 1.3rem; font-weight: 800; box-shadow: 0 8px 20px rgba(0,0,0,.2); transform: rotate(-6deg); }
.mz-hero-banners .carousel-indicators { margin-bottom: 6rem; }
.mz-hero-banners .carousel-indicators [data-bs-target] { width: .5rem; height: .5rem; border: 0; border-radius: 50%; }
.mz-hero-banners .carousel-control-prev, .mz-hero-banners .carousel-control-next { width: 3.5rem; bottom: 5.5rem; font-size: 2rem; opacity: .75; }
@media (prefers-reduced-motion: reduce) { .mz-hero-banners .carousel-item { transition: none; } }

.mz-home-cards { position: relative; z-index: 2; margin-top: -5.5rem; padding-bottom: .5rem; }
.mz-card { display: flex; flex-direction: column; height: 100%; padding: 1.1rem 1.1rem 1rem; border-radius: .9rem; background: #fff;
    box-shadow: 0 1px 2px rgba(23, 48, 42, .06), 0 8px 22px -12px rgba(23, 48, 42, .3); }
.mz-card-title { margin-bottom: .85rem; font-size: 1.12rem; font-weight: 800; }
.mz-card-link { margin-top: auto; padding-top: .85rem; font-size: .88rem; font-weight: 600; text-decoration: none; }
.mz-card-link:hover { text-decoration: underline; }
.mz-card-empty { padding: 1.25rem 0; text-align: center; color: var(--mz-muted); }
.mz-card-empty i { display: block; margin-bottom: .5rem; font-size: 2rem; color: var(--mz-green); }
.mz-card-empty p { margin-bottom: .75rem; }

/* 2 x 2 product tiles */
.mz-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.mz-tile { display: flex; flex-direction: column; gap: .2rem; min-width: 0; color: var(--mz-ink); text-decoration: none; }
.mz-tile-img { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / .85; overflow: hidden;
    border-radius: .6rem; background: var(--mz-mint); color: var(--mz-green); font-size: 2.2rem; transition: background .15s; }
.mz-tile-img img { max-width: 85%; max-height: 85%; object-fit: contain; }
.mz-tile-img img ~ i, .mz-med-thumb img ~ i { display: none; }
.mz-tile:hover { color: var(--mz-green-ink); }
.mz-tile:hover .mz-tile-img { background: #D6EBE1; }
.mz-tile-off { position: absolute; left: .35rem; bottom: .35rem; padding: .05rem .4rem; border-radius: .3rem; background: var(--mz-red); color: #fff;
    font-size: .68rem; font-weight: 700; }
.mz-tile-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .82rem; line-height: 1.25; }
.mz-tile-price { font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mz-tile-price s { margin-left: .25rem; color: var(--mz-muted); font-size: .75rem; font-weight: 400; }

/* Today's doses as a list */
.mz-dose-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mz-dose { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border: 1px solid var(--mz-line); border-radius: .7rem; }
.mz-dose .mz-bubble { flex: none; width: 2.3rem; height: 2.3rem; font-size: 1rem; }
.mz-dose-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mz-dose .mz-slot-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-dose-act { flex: none; display: flex; gap: .25rem; }
.mz-dose-act .btn { padding: .2rem .5rem; font-size: .78rem; }
.mz-dose.is-taken .mz-bubble { background: var(--mz-green); border-color: var(--mz-green); color: #fff; }
.mz-dose.is-skipped > :not(form) { opacity: .6; }
.mz-dose.is-pending, .mz-dose.is-due { border-color: var(--mz-amber); background: var(--mz-amber-soft); }
.mz-dose.is-pending .mz-bubble, .mz-dose.is-due .mz-bubble { border-color: var(--mz-amber); color: #8A5300; }

.mz-perks { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .65rem; }
.mz-perks li { display: flex; align-items: center; gap: .65rem; font-size: .92rem; }
.mz-perks i { flex: none; display: flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
    background: var(--mz-mint); color: var(--mz-green); }
.mz-card-signin .mz-card-link { text-align: center; }
.mz-promo-art { position: relative; display: flex; align-items: center; justify-content: center; height: 8.5rem; margin-bottom: .9rem;
    border-radius: .7rem; background: linear-gradient(135deg, var(--mz-mint), #D4ECF7); color: var(--mz-green); font-size: 3.5rem; }
.mz-promo-art span { position: absolute; right: 30%; bottom: 22%; padding: 0 .4rem; border: 1px solid #E8C4C4; border-radius: .35rem;
    background: #fff; color: var(--mz-red); font-size: .9rem; font-weight: 800; }

/* A row of product cards that scrolls sideways */
.mz-rail { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .4rem; scroll-snap-type: x mandatory; }
.mz-rail-item { flex: 0 0 13.5rem; scroll-snap-align: start; }
/* Arrows over the row's edges, shaped like the product cards (white, bordered, same corners): "back" appears once
   it's scrolled, "more" goes at the end */
.mz-rail-wrap { position: relative; }
.mz-rail-arrow { position: absolute; top: calc(50% - .2rem); z-index: 2; display: flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 6rem; transform: translateY(-50%); border: 1px solid var(--mz-line); border-radius: .9rem;
    background: #fff; color: var(--mz-ink); font-size: 1.15rem; box-shadow: 0 6px 18px rgba(16, 42, 32, .14);
    transition: color .15s, border-color .15s, box-shadow .15s; }
.mz-rail-arrow:hover { color: var(--mz-green); border-color: var(--mz-green); box-shadow: 0 8px 22px rgba(16, 42, 32, .2); }
.mz-rail-arrow:focus-visible { outline: 2px solid var(--mz-green); outline-offset: 2px; }
.mz-rail-arrow[hidden] { display: none; }
.mz-rail-prev { left: -.6rem; }
.mz-rail-next { right: -.6rem; }
@media (hover: none) { .mz-rail-arrow { width: 2.2rem; height: 5rem; font-size: 1rem; } }
.mz-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
/* Each step a tile, so the three fill the card evenly whatever the screen width */
.mz-how li { display: flex; align-items: center; gap: .9rem; height: 100%; padding: 1rem 1.15rem; border-radius: .8rem;
    background: var(--mz-paper); border: 1px solid var(--mz-line); color: var(--mz-muted); font-size: .9rem; }
.mz-how i { flex: none; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: var(--mz-mint); color: var(--mz-green); font-size: 1.15rem; }
.mz-how strong { display: block; color: var(--mz-ink); }

@media (max-width: 991.98px) {
    .mz-banner { height: 250px; }
    .mz-banner-row { padding-bottom: 3.75rem; }
    .mz-hero-banners .carousel-indicators { margin-bottom: 4rem; }
    .mz-hero-banners .carousel-control-prev, .mz-hero-banners .carousel-control-next { bottom: 3.75rem; }
    .mz-home-cards { margin-top: -3.25rem; }
}
@media (max-width: 575.98px) {
    .mz-banner { height: 205px; }
    .mz-banner-row { padding-bottom: 2.6rem; }
    .mz-banner-copy { max-width: 78%; }
    .mz-banner-sub { display: none; }
    .mz-banner-btn { padding: .35rem 1rem; font-size: .85rem; }
    .mz-banner-art { position: absolute; right: -1.75rem; top: .75rem; opacity: .6; transform: scale(.68); transform-origin: top right; }
    .mz-hero-banners .carousel-control-prev, .mz-hero-banners .carousel-control-next { display: none; }
    .mz-hero-banners .carousel-indicators { margin-bottom: 2.6rem; }
    .mz-home-cards { margin-top: -2rem; }
    .mz-card { padding: .95rem; }
    .mz-tiles { gap: .6rem; }
    .mz-how { grid-template-columns: 1fr; }
    .mz-rail-item { flex-basis: 11rem; }
}

/* ---------- Footer ---------- */
.mz-footer { margin-top: 3rem; background: var(--mz-ink); color: rgba(255,255,255,.72); font-size: .92rem; }
.mz-footer-trust { background: #fff; color: var(--mz-ink); border-top: 1px solid var(--mz-line); }
.mz-trust { list-style: none; margin: 0; padding: 1.4rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 1.5rem; }
.mz-trust li { display: flex; align-items: center; gap: .8rem; min-width: 0; }
@media (min-width: 992px) { .mz-trust li { justify-content: center; } }   /* each centred in its quarter */
.mz-trust i { flex: none; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--mz-mint); color: var(--mz-green);
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.mz-trust strong { display: block; font-size: .92rem; line-height: 1.25; }
.mz-trust small { display: block; color: var(--mz-muted); font-size: .8rem; }
.mz-footer-main { padding-top: 3rem; padding-bottom: 2.25rem; }
.mz-footer .mz-brand { color: #fff; text-decoration: none; }
.mz-footer-tag { margin: .8rem 0 1.2rem; max-width: 22rem; line-height: 1.6; }
.mz-footer-head { color: #fff; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; }
.mz-footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.mz-footer-list a { color: rgba(255,255,255,.78); text-decoration: none; transition: color .15s; }
.mz-footer-list a:hover { color: #fff; }
.mz-footer-contact li, .mz-footer-contact a { display: flex; align-items: flex-start; gap: .65rem; }
.mz-footer-contact i { color: #7CE0B4; margin-top: .1rem; }
.mz-pay { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.mz-pay li { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .65rem; border-radius: .5rem; font-size: .8rem; font-weight: 600;
    color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.mz-footer-bar { background: #0F241F; padding: 1rem 0; font-size: .8rem; }
.mz-footer-bar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; }
.mz-footer-legal { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; color: rgba(255,255,255,.62); }
.mz-footer-k { color: rgba(255,255,255,.42); font-weight: 600; margin-right: .35rem; }
.mz-lang { position: relative; display: flex; align-items: center; }
.mz-lang > i { position: absolute; left: .8rem; color: #fff; pointer-events: none; }
.mz-lang .form-select { min-width: 13rem; padding-left: 2.2rem; border-radius: 2rem; color: #fff; font-size: .85rem;
    background-color: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.mz-lang .form-select:hover { border-color: rgba(255,255,255,.45); }
.mz-lang .form-select:focus { border-color: #7CE0B4; box-shadow: 0 0 0 .2rem rgba(124, 224, 180, .25); }
.mz-lang option, .mz-lang optgroup { color: var(--mz-ink); background: #fff; }
@media (max-width: 991.98px) { .mz-trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) {
    .mz-trust { padding: 1.1rem 0; gap: .9rem; }
    .mz-trust i { width: 2.3rem; height: 2.3rem; font-size: 1rem; }
    .mz-trust strong { font-size: .84rem; }
    .mz-trust small { font-size: .74rem; }
    .mz-footer-main { padding-top: 2.25rem; }
    .mz-footer-bar .container { flex-direction: column-reverse; align-items: stretch; }
    .mz-lang .form-select { width: 100%; }
}

/* Translated pages: keep Google's toolbar and hover tips out of the layout */
body { top: 0 !important; }
.goog-te-banner-frame, .skiptranslate > iframe, #goog-gt-tt, .goog-te-balloon-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-yAWNEb-L7lbkb { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
/* Indian scripts carry marks above and below the line: give translated headings room */
html.translated-ltr .mz-display, html.translated-rtl .mz-display { line-height: 1.3; }
html.translated-ltr h1, html.translated-ltr h2, html.translated-ltr h3, html.translated-rtl h1, html.translated-rtl h2, html.translated-rtl h3 { line-height: 1.35; }

/* ---------- Phones: app-style tab bar ---------- */
.mz-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1060; display: flex; background: #fff;
    border-top: 1px solid var(--mz-line); box-shadow: 0 -6px 20px rgba(23, 48, 42, .06); padding-bottom: env(safe-area-inset-bottom); }
.mz-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .5rem 0 .45rem;
    color: var(--mz-muted); text-decoration: none; font-size: .7rem; font-weight: 600; }
.mz-tabbar i { font-size: 1.25rem; line-height: 1; }
.mz-tabbar a.active { color: var(--mz-green); box-shadow: inset 0 2px 0 var(--mz-green); }
@media (max-width: 991.98px) {
    body:has(.mz-tabbar) { padding-bottom: calc(3.7rem + env(safe-area-inset-bottom)); }
    body:has(.mz-tabbar) .mz-bot { bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
    body:has(.mz-tabbar) .mz-toasts { bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
    body:has(.mz-tabbar):has(.mz-bot) .mz-toasts { bottom: calc(9rem + env(safe-area-inset-bottom)); }
    .mz-footer { margin-top: 2rem; }
}

/* ---------- Help & FAQ ---------- */
.mz-help-hero { padding: 2.5rem 0 1.75rem; background: linear-gradient(180deg, #fff 0%, var(--mz-paper) 100%); border-bottom: 1px solid var(--mz-line); }
.mz-help-search { max-width: 40rem; }
.mz-help-search .form-control { padding-left: .6rem; }
.mz-faq-group { margin-bottom: 2rem; scroll-margin-top: 6rem; }
.mz-faq-group[hidden], .mz-faq-item[hidden], [data-mz-help-empty][hidden] { display: none; }
.mz-faq-title { display: flex; align-items: center; gap: .65rem; font-size: 1.1rem; margin-bottom: .8rem; }
.mz-faq-title i { width: 2.2rem; height: 2.2rem; border-radius: .7rem; background: var(--mz-mint); color: var(--mz-green);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.mz-faq { background: #fff; border: 1px solid var(--mz-line); border-radius: 1rem; overflow: hidden; }
.mz-faq-item + .mz-faq-item { border-top: 1px solid var(--mz-line); }
.mz-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1rem 1.25rem; font-weight: 600; }
.mz-faq-item summary::-webkit-details-marker { display: none; }
.mz-faq-item summary::after { content: "\F282"; font-family: "bootstrap-icons"; flex: none; color: var(--mz-muted); transition: transform .2s ease; }
.mz-faq-item summary:hover { color: var(--mz-green); }
.mz-faq-item[open] summary { color: var(--mz-green-ink); }
.mz-faq-item[open] summary::after { transform: rotate(180deg); color: var(--mz-green); }
.mz-faq-item > div { padding: 0 1.25rem 1.15rem; color: var(--mz-muted); line-height: 1.65; }
.mz-help-contact { position: sticky; top: 6rem; }
.mz-contact-row { display: flex; align-items: center; gap: .85rem; width: 100%; padding: .8rem 1rem; border: 1px solid var(--mz-line);
    border-radius: .8rem; background: #fff; color: var(--mz-ink); text-decoration: none; text-align: left; }
.mz-contact-row:hover { border-color: var(--mz-green); background: var(--mz-mint); color: var(--mz-ink); }
.mz-contact-row > i { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--mz-mint); color: var(--mz-green);
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.mz-contact-row strong { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .mz-faq-item summary::after { transition: none; } }

/* ---------- Responsive helpers ---------- */
.mz-chip-scroll { display: flex; flex-wrap: wrap; gap: .5rem; }
.mz-page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

@media (max-width: 767.98px) {
    /* Chip rows scroll sideways, edge to edge, instead of wrapping into tall blocks */
    .mz-chip-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -.75rem; padding-inline: .75rem;
        scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .mz-chip-scroll::-webkit-scrollbar { display: none; }
    .mz-chip-scroll > * { flex: none; white-space: nowrap; scroll-snap-align: start; }

    .mz-page { padding-top: 1.25rem; padding-bottom: 2rem; }
    .mz-page-title { font-size: 1.5rem; }
    .mz-panel { padding: 1.1rem; }
    .mz-hero { padding: 1.75rem 0 2rem; }
    .mz-hero .lead { font-size: 1.02rem; }
    .mz-help-hero { padding: 1.5rem 0 1.25rem; }
    .mz-page-actions { width: 100%; }
    .mz-page-actions .btn { flex: 1 1 auto; }
    .mz-pack { padding: 1rem; }
    .mz-strip { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .5rem; padding: .5rem; }
    .mz-detail-thumb { height: 220px; font-size: 4rem; }

    /* Product cards two to a row */
    .mz-med-thumb { height: 108px; font-size: 2.2rem; }
    .mz-med-body { padding: .7rem .75rem .8rem; }
    .mz-med-name { font-size: .94rem; }
    .mz-med-foot { flex-wrap: wrap; gap: .4rem; }
    .mz-med-foot .mz-qty { margin-left: auto; }

    /* Admin section tabs scroll sideways */
    .mz-subnav .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .mz-subnav .nav::-webkit-scrollbar { display: none; }
    .mz-subnav .nav-link { white-space: nowrap; padding: .7rem .85rem; }

    /* Tables become a list of cards: one row per card, a label beside each value */
    .mz-table-stack thead { display: none; }
    .mz-table-stack, .mz-table-stack tbody, .mz-table-stack tr, .mz-table-stack td { display: block; width: 100%; }
    .mz-table-stack tr { padding: .9rem 1rem; border-bottom: 1px solid var(--mz-line); }
    .mz-table-stack tr:last-child { border-bottom: 0; }
    .mz-table-stack > :not(caption) > * > * { padding: .2rem 0; border: 0; background: transparent; box-shadow: none; }
    .mz-table-stack td:first-child { margin-bottom: .35rem; }
    .mz-table-stack td[data-label] { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; text-align: right; }
    .mz-table-stack td[data-label]::before { content: attr(data-label); flex: none; color: var(--mz-muted); font-size: .85rem; font-weight: 600; text-align: left; }
    .mz-table-stack .mz-td-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
}

/* ---------- Help & support: quick answers, tickets and their conversation ---------- */
.min-w-0 { min-width: 0; }
.flex-none { flex: none; }
.mz-narrow { max-width: 64rem; }

.mz-quick-asks { display: flex; flex-wrap: wrap; gap: .5rem; }
.mz-quick-ask {
    display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: 2rem;
    border: 1px solid var(--mz-line); background: #fff; color: var(--mz-ink); font-weight: 600; font-size: .92rem;
    transition: border-color .15s, background .15s, color .15s;
}
.mz-quick-ask i { color: var(--mz-green); }
.mz-quick-ask:hover, .mz-quick-ask:focus-visible { border-color: var(--mz-green); background: var(--mz-mint); color: var(--mz-green-ink); }

.mz-raise { display: flex; gap: 1rem; align-items: flex-start; background: linear-gradient(135deg, #fff 60%, var(--mz-mint)); }
.mz-raise-icon {
    width: 3rem; height: 3rem; flex: none; border-radius: 50%; background: var(--mz-green); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
}

.mz-ticket-row {
    display: flex; gap: .85rem; align-items: flex-start; padding: .9rem 1.1rem; border-bottom: 1px solid var(--mz-line);
    color: var(--mz-ink); text-decoration: none;
}
.mz-ticket-row:last-child { border-bottom: 0; }
.mz-ticket-row:hover { background: #FAFCFB; color: var(--mz-ink); }
.mz-ticket-icon {
    width: 2.3rem; height: 2.3rem; flex: none; border-radius: 50%; background: var(--mz-mint); color: var(--mz-green);
    display: flex; align-items: center; justify-content: center;
}
.mz-closed-tickets summary { cursor: pointer; color: var(--mz-muted); }

/* Topic picker: a card per topic, two columns from tablets up */
.mz-topics { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .mz-topics { grid-template-columns: 1fr 1fr; } }
.mz-topic { position: relative; margin: 0; cursor: pointer; }
.mz-topic input { position: absolute; opacity: 0; pointer-events: none; }
.mz-topic-card {
    display: flex; gap: .75rem; align-items: flex-start; height: 100%; padding: .8rem .9rem; border-radius: .75rem;
    border: 1px solid var(--mz-line); background: #fff; transition: border-color .15s, box-shadow .15s, background .15s;
}
.mz-topic-card > i { font-size: 1.25rem; color: var(--mz-green); margin-top: .1rem; }
.mz-topic:hover .mz-topic-card { border-color: var(--mz-green); }
.mz-topic input:checked + .mz-topic-card { border-color: var(--mz-green); background: var(--mz-mint); box-shadow: 0 0 0 1px var(--mz-green) inset; }
.mz-topic input:focus-visible + .mz-topic-card { outline: 3px solid rgba(14, 107, 87, .45); outline-offset: 2px; }

.mz-ticket-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem; }

/* Conversation: the viewer's own messages on the right */
.mz-thread-panel { padding: 1.25rem; }
.mz-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.mz-msg { max-width: min(36rem, 88%); align-self: flex-start; scroll-margin-top: 6rem; }
.mz-msg.is-mine { align-self: flex-end; }
.mz-msg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .8rem; color: var(--mz-muted); margin-bottom: .25rem; }
.mz-msg.is-mine .mz-msg-meta { justify-content: flex-end; }
.mz-msg-meta .fw-semibold { color: var(--mz-ink); }
.mz-msg-body {
    white-space: pre-wrap; overflow-wrap: anywhere; padding: .7rem .95rem; border-radius: 1rem 1rem 1rem .3rem;
    background: #F1F5F3; border: 1px solid var(--mz-line);
}
.mz-msg.is-mine .mz-msg-body { background: var(--mz-green); border-color: var(--mz-green); color: #fff; border-radius: 1rem 1rem .3rem 1rem; }
.mz-msg.is-note .mz-msg-body { background: var(--mz-amber-soft); border: 1px dashed var(--mz-amber); color: var(--mz-ink); }
.mz-note-badge { background: var(--mz-amber-soft); color: #8A5300; font-weight: 600; }
.mz-msg-photos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.mz-msg.is-mine .mz-msg-photos { justify-content: flex-end; }
.mz-msg-photos img { width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: .6rem; border: 1px solid var(--mz-line); }
.mz-msg.is-system { align-self: center; max-width: 100%; }
.mz-msg-system {
    display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; text-align: center;
    font-size: .82rem; color: var(--mz-muted); background: var(--mz-paper); border: 1px solid var(--mz-line);
    border-radius: .8rem; padding: .35rem .85rem;
}
.mz-msg-system i { color: var(--mz-green); }

/* Reply box stays in reach on phones */
@media (max-width: 575.98px) {
    .mz-thread-panel { padding: 1rem .85rem; }
    .mz-msg { max-width: 94%; }
    .mz-raise { flex-direction: column; }
    .mz-ticket-head .badge { font-size: .8rem !important; }
}

/* ---------- Orders and Returns: search by number, and the date filter ---------- */
.mz-list-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.mz-number-search { position: relative; margin: 0; }
.mz-number-search i { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--mz-muted); font-size: .85rem; }
.mz-number-search input { padding-left: 1.85rem; width: 13.5rem; max-width: 100%; }
.mz-period-menu { width: 21rem; max-width: calc(100vw - 2rem); padding: 1rem; }
.mz-period-title { font-weight: 700; margin-bottom: .75rem; }
.mz-period-label { float: none; width: auto; font-size: .8rem; font-weight: 600; color: var(--mz-muted); margin-bottom: .35rem;
    text-transform: uppercase; letter-spacing: .03em; }
.mz-period-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.mz-period-months { display: grid; grid-template-columns: repeat(4, 1fr); }
.mz-period-months[hidden] { display: none; }
.mz-period-chip { position: relative; margin: 0; cursor: pointer; }
.mz-period-chip input { position: absolute; opacity: 0; pointer-events: none; }
.mz-period-chip span { display: block; padding: .3rem .65rem; border: 1px solid var(--mz-line); border-radius: 999px;
    font-size: .85rem; text-align: center; }
.mz-period-chip input:checked + span { border-color: var(--mz-green); background: var(--mz-mint); color: var(--mz-green); font-weight: 600; }
.mz-period-chip input:focus-visible + span { outline: 2px solid var(--mz-green); outline-offset: 1px; }
.mz-period-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .35rem .2rem .65rem; border-radius: 999px;
    background: var(--mz-mint); color: var(--mz-green); font-size: .85rem; font-weight: 600; }
.mz-period-tag .btn-close { width: .55rem; height: .55rem; padding: .25rem; }
@media (max-width: 575.98px) {
    .mz-list-tools { width: 100%; justify-content: flex-start; }
    .mz-number-search { flex: 1 1 12rem; }
    .mz-number-search input { width: 100%; }
}

/* ---------- Catalogue: product codes (staff only) and "Add products" ---------- */
.mz-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; letter-spacing: .02em; color: var(--mz-muted); }
.mz-product-pick { position: relative; max-width: 34rem; }
.mz-product-pick > i { position: absolute; left: .8rem; top: 1.2rem; transform: translateY(-50%); color: var(--mz-muted); }
.mz-product-pick input { padding-left: 2.2rem; }
.mz-pick-results { position: absolute; left: 0; right: 0; top: calc(100% + .25rem); z-index: 20; max-height: 18rem; overflow-y: auto;
    background: #fff; border: 1px solid var(--mz-line); border-radius: .6rem; box-shadow: 0 10px 28px rgba(16, 42, 32, .14); }
.mz-pick-results[hidden] { display: none; }
.mz-pick-item { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .55rem .8rem; border: 0; border-bottom: 1px solid var(--mz-line);
    background: none; text-align: left; }
.mz-pick-item:last-child { border-bottom: 0; }
.mz-pick-item:hover, .mz-pick-item:focus-visible { background: var(--mz-mint); }
.mz-pick-none { padding: .6rem .8rem; color: var(--mz-muted); font-size: .9rem; }

/* ---------- Monitoring: health cards all one size; a long problem is cut short, "View more" has it in full ---------- */
.mz-health-card { display: flex; flex-direction: column; height: 8.25rem; padding-top: 1rem; padding-bottom: 1rem; overflow: hidden; }
.mz-health-card.is-degraded { border-color: #E9C46A; }
.mz-health-card.is-down { border-color: #E5A3A3; }
.mz-health-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.mz-health-more { margin-top: auto; padding-top: .25rem; font-weight: 600; }
.mz-health-log dt { font-size: .8rem; font-weight: 600; color: var(--mz-muted); text-transform: uppercase; letter-spacing: .03em; }
.mz-health-log dd { margin-bottom: 1rem; }
.mz-health-log dd:last-child { margin-bottom: 0; }
.mz-health-log .mz-stack { max-height: none; white-space: pre-wrap; word-break: break-word; }

/* ---------- Catalogue import: the columns the sheet can have ---------- */
.mz-import-cols { display: flex; flex-wrap: wrap; gap: .35rem; }
.mz-import-col { padding: .2rem .6rem; border: 1px solid var(--mz-line); border-radius: 999px; font-size: .8rem; cursor: help; }
.mz-import-col.is-required { border-color: var(--mz-green); background: var(--mz-mint); color: var(--mz-green); font-weight: 600; }

/* ---------- Catalogue categories, and the changes an import would make ---------- */
.mz-chip-count { margin-left: .35rem; color: var(--mz-muted); font-size: .78rem; }
.mz-chip.is-empty { border-style: dashed; }
.mz-category-filter { width: 12rem; max-width: 100%; }
.mz-review-table td { word-break: break-word; }
.mz-review-table .mz-review-now { color: var(--mz-muted); }
.mz-review-table .mz-review-new { font-weight: 600; }
@media (max-width: 575.98px) { .mz-category-filter { flex: 1 1 10rem; width: auto; } }

/* ---------- Minimum order value: how much more the cart needs ---------- */
.mz-min-order { padding: .65rem .75rem; border: 1px solid #f3d38a; border-radius: .6rem; background: #fff8e6; }
.mz-min-order[hidden] { display: none; }
.mz-min-order .progress { height: .35rem; background: #f6e7c1; }
.mz-min-order .progress-bar { background: var(--mz-green); transition: width .2s ease; }

/* ---------- Payment page: how to pay, then "Order placed" ---------- */
.mz-pay-back { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600; text-decoration: none; }
.mz-pay-back:hover { text-decoration: underline; }
.mz-pay-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; margin: .5rem 0 1.5rem; }
.mz-pay-steps { display: flex; align-items: center; gap: .4rem; margin: 0; padding: 0; list-style: none; font-size: .85rem; font-weight: 600; color: var(--mz-muted); }
.mz-pay-steps li { display: flex; align-items: center; gap: .4rem; }
.mz-pay-steps li + li::before { content: ""; width: 1.75rem; height: 2px; border-radius: 2px; background: var(--mz-line); margin-right: .1rem; }
.mz-pay-steps li.is-done + li::before { background: var(--mz-green); }
.mz-pay-steps i, .mz-pay-steps span { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%;
    font-size: .75rem; font-style: normal; }
.mz-pay-steps .is-done { color: var(--mz-green); }
.mz-pay-steps .is-done i { background: var(--mz-mint); color: var(--mz-green); }
.mz-pay-steps .is-now { color: var(--mz-ink); }
.mz-pay-steps .is-now span { background: var(--mz-green); color: #fff; }

.mz-pay-card { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.15rem; margin: 0; background: #fff;
    border: 1px solid var(--mz-line); border-radius: 1rem; box-shadow: 0 1px 2px rgba(23, 48, 42, .04); }
.mz-pay-section { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mz-muted);
    margin: 1.6rem 0 .65rem; }
.mz-pay-icon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .8rem;
    background: var(--mz-mint); color: var(--mz-green); font-size: 1.3rem; transition: background .15s, color .15s; }

.mz-pay-wallet { cursor: pointer; }
.mz-pay-wallet:has(input:checked) { border-color: var(--mz-green); background: linear-gradient(90deg, var(--mz-mint), #fff 70%); }
.mz-pay-wallet.is-off { cursor: default; opacity: .7; }
.mz-pay-wallet .form-check-input { width: 2.6rem; height: 1.4rem; cursor: pointer; }
.mz-pay-wallet .form-check-input:checked { background-color: var(--mz-green); border-color: var(--mz-green); }

/* Method tiles: the whole tile is the radio; the ring on the right fills when picked */
.mz-pay-methods { display: grid; gap: .6rem; }
.mz-pay-methods[hidden] { display: none; }
.mz-pay-option { position: relative; display: flex; align-items: center; gap: .9rem; padding: .95rem 1.15rem; margin: 0; cursor: pointer;
    background: #fff; border: 1px solid var(--mz-line); border-radius: 1rem; transition: border-color .15s, box-shadow .15s, background .15s; }
.mz-pay-option:hover { border-color: #A9C9BB; box-shadow: 0 4px 14px rgba(23, 48, 42, .06); }
.mz-pay-option input { position: absolute; opacity: 0; pointer-events: none; }
.mz-pay-option:has(input:checked) { border-color: var(--mz-green); background: #FAFDFB;
    box-shadow: 0 0 0 1px var(--mz-green) inset, 0 6px 18px rgba(14, 107, 87, .1); }
.mz-pay-option:has(input:focus-visible) { outline: 3px solid rgba(14, 107, 87, .45); outline-offset: 2px; }
.mz-pay-option:has(input:checked) .mz-pay-icon { background: var(--mz-green); color: #fff; }
.mz-pay-radio { flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 2px solid #A9C9BB; transition: border-width .15s, border-color .15s; }
.mz-pay-option:has(input:checked) .mz-pay-radio { border: 6px solid var(--mz-green); }
/* What a way to pay costs, just after its name: "Free", "₹10 + GST" */
.mz-pay-fee { margin-left: .5rem; font-size: .76rem; font-weight: 500; color: var(--mz-muted); vertical-align: middle; white-space: nowrap; }
.mz-pay-tag { margin-left: .35rem; padding: .1rem .45rem; border-radius: 999px; background: var(--mz-amber-soft); color: #9A5B07;
    font-size: .68rem; font-weight: 700; letter-spacing: .02em; vertical-align: middle; }
.mz-pay-covered { display: flex; gap: .75rem; align-items: center; padding: 1rem 1.15rem; border-radius: 1rem;
    background: var(--mz-mint); border: 1px solid var(--mz-green); color: var(--mz-green-ink); }
.mz-pay-covered[hidden] { display: none; }
.mz-pay-covered > i { font-size: 1.5rem; color: var(--mz-green); }

.mz-pay-summary { display: block; padding: 1.4rem 1.5rem; }
@media (min-width: 992px) { .mz-pay-summary { position: sticky; top: 1.5rem; } }
.mz-pay-line { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .45rem; font-size: .95rem; }
.mz-pay-line[hidden] { display: none; }
.mz-pay-subtotal { font-weight: 600; margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--mz-line); }
.mz-pay-error { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: 1rem; padding: .7rem .85rem; border-radius: .75rem;
    background: #FBEDED; border: 1px solid #EBC3C3; color: var(--mz-red); font-size: .875rem; }
.mz-pay-error[hidden] { display: none; }
.mz-pay-error i { margin-top: .1rem; }
.mz-pay-total { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 1.1rem; padding-top: 1rem;
    border-top: 1px dashed var(--mz-line); font-weight: 700; }
.mz-pay-total strong { font-size: 1.65rem; letter-spacing: -.02em; color: var(--mz-ink); }
.mz-pay-secure { display: flex; gap: .45rem; align-items: flex-start; margin: .9rem 0 0; font-size: .8rem; color: var(--mz-muted); }
.mz-pay-secure i { color: var(--mz-green); }

/* Phones: amount and button pinned to the bottom, in place of the tab bar and the assistant */
.mz-pay-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1065; display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--mz-line);
    box-shadow: 0 -8px 24px rgba(23, 48, 42, .08); }
.mz-pay-bar strong { font-size: 1.3rem; }
.mz-pay-bar .mz-pay-go { flex: 0 1 60%; }
@media (max-width: 991.98px) {
    body:has(.mz-checkout-pay) .mz-tabbar, body:has(.mz-checkout-pay) .mz-bot { display: none !important; }
    body:has(.mz-checkout-pay) { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
    /* Checkout: "Pay now" pinned to the bottom the same way, in place of the tab bar and the assistant */
    .mz-checkout-go { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1065; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
        background: var(--mz-surface, #fff); border-top: 1px solid var(--mz-line); box-shadow: 0 -8px 24px rgba(23, 48, 42, .08); }
    body:has(.mz-checkout-go) .mz-tabbar, body:has(.mz-checkout-go) .mz-bot { display: none !important; }
    body:has(.mz-checkout-go) { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}

/* Confirming, then "Order placed" */
.mz-pay-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 1rem;
    background: rgba(23, 48, 42, .45); backdrop-filter: blur(4px); animation: mz-pay-fade .2s ease; }
.mz-pay-overlay[hidden] { display: none; }
.mz-pay-overlay-card { width: min(24rem, 100%); padding: 2rem 1.75rem 1.5rem; text-align: center; background: #fff; border-radius: 1.25rem;
    box-shadow: 0 24px 60px rgba(23, 48, 42, .25); animation: mz-pay-pop .3s cubic-bezier(.2, .9, .3, 1.2); }
.mz-pay-overlay-card [hidden] { display: none; }
.mz-pay-spinner { width: 3.25rem; height: 3.25rem; margin: 0 auto; border-radius: 50%; border: 4px solid var(--mz-mint);
    border-top-color: var(--mz-green); animation: mz-pay-spin .8s linear infinite; }
.mz-pay-tick { width: 4.5rem; height: 4.5rem; display: block; margin: 0 auto; }
.mz-pay-tick circle { fill: var(--mz-mint); stroke: var(--mz-green); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151;
    animation: mz-pay-draw .5s ease-out forwards; }
.mz-pay-tick path { fill: none; stroke: var(--mz-green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 40; stroke-dashoffset: 40; animation: mz-pay-draw .35s .45s ease-out forwards; }
.mz-pay-progress { height: .3rem; border-radius: 999px; background: var(--mz-mint); overflow: hidden; }
.mz-pay-progress span { display: block; height: 100%; width: 0; background: var(--mz-green); animation: mz-pay-fill 3.2s linear forwards; }
.mz-pay-overlay [data-mz-pay-done-title]:focus { outline: none; }

/* Custom Overlay Alerts (modeled directly on Order Placed alert) */
.mz-custom-alert-overlay { position: fixed; inset: 0; z-index: 2050; display: grid; place-items: center; padding: 1rem;
    background: rgba(23, 48, 42, .45); backdrop-filter: blur(4px); animation: mz-pay-fade .2s ease; }
.mz-custom-alert-overlay[hidden] { display: none !important; }
.mz-custom-alert-card { width: min(24rem, 100%); padding: 2.25rem 1.75rem 1.75rem; text-align: center; background: #fff; border-radius: 1.25rem;
    box-shadow: 0 24px 60px rgba(23, 48, 42, .25); animation: mz-pay-pop .3s cubic-bezier(.2, .9, .3, 1.2); }
.mz-pay-cross { width: 4.5rem; height: 4.5rem; display: block; margin: 0 auto; }
.mz-pay-cross circle { fill: #FEF2F2; stroke: #EF4444; stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151;
    animation: mz-pay-draw .5s ease-out forwards; }
.mz-pay-cross path { fill: none; stroke: #EF4444; stroke-width: 3.5; stroke-linecap: round;
    stroke-dasharray: 40; stroke-dashoffset: 40; animation: mz-pay-draw .35s .45s ease-out forwards; }
@keyframes mz-pay-fade { from { opacity: 0; } }
@keyframes mz-pay-pop { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes mz-pay-spin { to { transform: rotate(360deg); } }
@keyframes mz-pay-draw { to { stroke-dashoffset: 0; } }
@keyframes mz-pay-fill { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .mz-pay-overlay, .mz-pay-overlay-card, .mz-pay-tick circle, .mz-pay-tick path { animation: none; stroke-dashoffset: 0; }
    .mz-pay-progress span { animation: none; width: 100%; }
    .mz-pay-spinner { animation-duration: 2s; }
}

/* Payment page: "or pay later" between the online methods and pay on delivery */
.mz-pay-divider { display: flex; align-items: center; gap: .75rem; margin: .35rem 0; color: var(--mz-muted); font-size: .78rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.mz-pay-divider::before, .mz-pay-divider::after { content: ""; flex: 1; height: 1px; background: var(--mz-line); }

/* ---------- MediZon UPI: choose app / UPI ID / QR, approve, UPI PIN ---------- */
body.mz-upi-open { overflow: hidden; }
.mz-upi { position: fixed; inset: 0; z-index: 1990; display: grid; place-items: center; padding: 1rem;
    background: rgba(23, 48, 42, .5); backdrop-filter: blur(4px); animation: mz-pay-fade .2s ease; }
.mz-upi[hidden] { display: none; }
.mz-upi-sheet { width: min(27rem, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; background: #fff; border-radius: 1.25rem;
    box-shadow: 0 24px 60px rgba(23, 48, 42, .3); animation: mz-pay-pop .3s cubic-bezier(.2, .9, .3, 1.2); }
.mz-upi-sheet [hidden] { display: none !important; }
.mz-upi-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem;
    background: #fff; border-bottom: 1px solid var(--mz-line); }
.mz-upi-brand { display: flex; align-items: center; gap: .35rem; font-weight: 800; color: var(--mz-green); }
.mz-upi-amount { font-size: 1.15rem; font-weight: 800; color: var(--mz-ink); white-space: nowrap; }
.mz-upi-icon-btn { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 0; border-radius: 50%;
    background: var(--mz-paper); color: var(--mz-ink); }
.mz-upi-icon-btn:hover { background: var(--mz-mint); color: var(--mz-green); }
.mz-upi-test { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .35rem; font-size: .75rem;
    font-weight: 600; background: var(--mz-amber-soft); color: #9A5B07; }
.mz-upi-body { padding: 1.1rem 1.15rem 1.3rem; }
.mz-upi-label { display: block; font-size: .8rem; font-weight: 700; color: var(--mz-muted); text-transform: uppercase;
    letter-spacing: .05em; margin-bottom: .6rem; }

.mz-upi-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.mz-upi-app { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .7rem .25rem; border: 1px solid var(--mz-line);
    border-radius: .9rem; background: #fff; font-size: .75rem; font-weight: 600; color: var(--mz-ink);
    transition: border-color .15s, box-shadow .15s, transform .15s; }
.mz-upi-app:hover { border-color: var(--app); box-shadow: 0 6px 16px rgba(23, 48, 42, .08); transform: translateY(-1px); }
.mz-upi-app-mark, .mz-upi-wait-mark { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem;
    background: var(--app); color: #fff; font-weight: 800; font-size: .95rem; letter-spacing: -.02em; }

.mz-upi-or { display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0; color: var(--mz-muted); font-size: .8rem; }
.mz-upi-or::before, .mz-upi-or::after { content: ""; flex: 1; height: 1px; background: var(--mz-line); }

.mz-upi-field { display: flex; align-items: center; border: 1.5px solid var(--mz-line); border-radius: .85rem; background: #fff;
    transition: border-color .15s, box-shadow .15s; }
.mz-upi-field:focus-within { border-color: var(--mz-green); box-shadow: 0 0 0 3px rgba(14, 107, 87, .15); }
.mz-upi-field input { flex: 1; min-width: 0; padding: .75rem .9rem; border: 0; background: transparent; font-size: 1rem; outline: none; }
.mz-upi-verify { margin-right: .35rem; padding: .4rem .8rem; border: 0; border-radius: .6rem; background: var(--mz-mint);
    color: var(--mz-green); font-weight: 700; font-size: .85rem; }
.mz-upi-verify:disabled { opacity: .7; }
.mz-upi-handles { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 .2rem; }
.mz-upi-handles button { padding: .2rem .6rem; border: 1px solid var(--mz-line); border-radius: 999px; background: #fff;
    font-size: .78rem; color: var(--mz-muted); }
.mz-upi-handles button:hover { border-color: var(--mz-green); color: var(--mz-green); }
.mz-upi-verified { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; padding: .6rem .8rem; border-radius: .75rem;
    background: var(--mz-mint); }
.mz-upi-verified > i { font-size: 1.3rem; color: var(--mz-green); }
.mz-upi-error, .mz-upi-pin-error { margin-top: .6rem; font-size: .85rem; color: var(--mz-red); }
.mz-upi-cta { margin-top: .9rem; }

.mz-upi-qr { display: flex; align-items: center; gap: 1rem; padding: .9rem; border: 1px dashed #A9C9BB; border-radius: .9rem; }
.mz-upi-qr canvas { flex: none; width: 6.5rem; height: 6.5rem; border-radius: .4rem; image-rendering: pixelated; }

/* Waiting for approval */
.mz-upi-wait-mark { width: 4rem; height: 4rem; margin: .5rem auto 0; border-radius: 1.1rem; font-size: 1.25rem; position: relative; }
.mz-upi-wait-mark::after { content: ""; position: absolute; inset: -6px; border-radius: 1.4rem; border: 2px solid var(--app);
    opacity: .5; animation: mz-upi-pulse 1.6s ease-out infinite; }
.mz-upi-timer { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 999px;
    background: var(--mz-paper); font-size: .85rem; color: var(--mz-muted); }
.mz-upi-timer strong { color: var(--mz-ink); font-variant-numeric: tabular-nums; }
.mz-upi-phone { margin-top: 1.3rem; padding: .9rem; border-radius: 1.1rem; background: var(--mz-paper); border: 1px solid var(--mz-line); }
.mz-upi-phone-label { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-bottom: .6rem;
    font-size: .75rem; font-weight: 600; color: var(--mz-muted); }
.mz-upi-notif { padding: .9rem; border-radius: .9rem; background: #fff; box-shadow: 0 6px 18px rgba(23, 48, 42, .1);
    animation: mz-pay-pop .35s .15s cubic-bezier(.2, .9, .3, 1.2) backwards; }
.mz-upi-notif-head { display: flex; align-items: center; gap: .65rem; }
.mz-upi-notif-logo { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: var(--mz-green); color: #fff; }
.mz-upi-notif-amount { font-size: 1.1rem; }

/* UPI PIN */
.mz-upi-pin-to { display: flex; justify-content: space-between; align-items: center; padding: .75rem .9rem; border-radius: .85rem;
    background: var(--mz-paper); }
.mz-upi-pin-title { margin: 1.2rem 0 .8rem; text-align: center; font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: var(--mz-muted); }
.mz-upi-dots { display: flex; justify-content: center; gap: .9rem; min-height: 1rem; }
.mz-upi-dots span { width: .9rem; height: .9rem; border-radius: 50%; border: 2px solid var(--mz-ink); transition: background .1s, transform .1s; }
.mz-upi-dots span.is-filled { background: var(--mz-ink); transform: scale(1.1); }
.mz-upi-pin .mz-upi-pin-error { text-align: center; }
.mz-upi-pin-switch { display: block; margin: .8rem auto 0; border: 0; background: none; color: var(--mz-green); font-size: .8rem; font-weight: 600; }
.mz-upi-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1rem; }
.mz-upi-keypad button { padding: .8rem 0; border: 0; border-radius: .8rem; background: var(--mz-paper); font-size: 1.35rem;
    font-weight: 600; color: var(--mz-ink); transition: background .1s; }
.mz-upi-keypad button:hover { background: var(--mz-mint); }
.mz-upi-keypad button:active { background: #CFE6DA; }
.mz-upi-keypad .is-ok { background: var(--mz-green); color: #fff; }
.mz-upi-keypad .is-ok:hover { background: var(--mz-green-ink); }
.mz-upi-keypad .is-ok:disabled { background: #A9C9BB; }
.mz-upi-pin-note { display: flex; justify-content: center; gap: .35rem; margin: 1rem 0 0; font-size: .75rem; color: var(--mz-muted); }

@keyframes mz-upi-pulse { from { transform: scale(.9); opacity: .6; } to { transform: scale(1.25); opacity: 0; } }

/* Phones: a bottom sheet */
@media (max-width: 575.98px) {
    .mz-upi { place-items: end stretch; padding: 0; }
    .mz-upi-sheet { width: 100%; max-height: 92vh; border-radius: 1.25rem 1.25rem 0 0; animation: mz-upi-up .3s cubic-bezier(.2, .9, .3, 1); }
    .mz-upi-body { padding-bottom: calc(1.3rem + env(safe-area-inset-bottom)); }
}
@keyframes mz-upi-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
    .mz-upi, .mz-upi-sheet, .mz-upi-notif { animation: none; }
    .mz-upi-wait-mark::after { animation: none; }
}

/* Forgot password: "Resend code" link with its countdown, and the live "passwords match" badge */
.mz-resend { font-size: .875rem; color: #0E6B57; font-variant-numeric: tabular-nums; }
.mz-resend:disabled, .mz-resend.mz-resend-wait { color: #7B908A; opacity: 1; cursor: not-allowed; }
.mz-pw-match { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; padding: .25rem .6rem;
    border-radius: .5rem; font-size: .875rem; font-weight: 600; }
.mz-pw-match[hidden] { display: none; }
.mz-pw-match.ok { color: #0E6B57; background: #E6F5F0; border: 1px solid #A7F3D0; }
.mz-pw-match.bad { color: #991B1B; background: #FEF2F2; border: 1px solid #FECACA; }
.mz-code-input:not(:placeholder-shown) { letter-spacing: .35em; }

/* ---------- Settings page (/settings): dark mode and language ---------- */
/* Text size and reduced motion come from the Android app's settings (js/theme.js) */
html[data-text="sm"] { font-size: 93.75%; }
html[data-text="lg"] { font-size: 112.5%; }
html[data-text="xl"] { font-size: 125%; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
}

.mz-set-group { margin-bottom: 1.6rem; }
.mz-set-title { margin: 0 0 .5rem .3rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mz-muted); }
.mz-set-list { background: var(--mz-surface, #fff); border: 1px solid var(--mz-line); border-radius: 1rem; overflow: hidden; }
.mz-set-row { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; margin: 0; }
.mz-set-row + .mz-set-row { border-top: 1px solid var(--mz-line); }
.mz-set-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem;
    border-radius: .75rem; background: var(--mz-mint); color: var(--mz-green); font-size: 1.1rem; }
.mz-set-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.mz-set-label { margin: 0; font-weight: 600; color: var(--mz-ink); cursor: pointer; }
.mz-set-hint { font-size: .85rem; color: var(--mz-muted); }
.mz-set-select { flex: none; width: auto; min-width: 14rem; max-width: 100%; border-radius: .7rem; }
@media (max-width: 575.98px) {
    .mz-set-row-stack { flex-wrap: wrap; }
    .mz-set-select { flex: 1 1 100%; min-width: 0; }
}

/* Dark mode switch: sun and moon in the track, the knob slides under the one that's on */
.mz-theme-switch { position: relative; flex: none; margin: 0; cursor: pointer; }
.mz-theme-switch input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mz-theme-track { position: relative; display: flex; align-items: center; justify-content: space-between; width: 4.3rem; height: 2.25rem;
    padding: 0 .62rem; border: 1px solid #F3CF96; border-radius: 2rem; background: #FDF1DE; transition: background-color .25s ease, border-color .25s ease; }
.mz-theme-track i { position: relative; z-index: 1; font-size: .95rem; line-height: 1; transition: color .25s ease; }
.mz-theme-track .bi-sun-fill { color: #E89A2C; }
.mz-theme-track .bi-moon-fill { color: #B9A98A; }
.mz-theme-knob { position: absolute; top: .18rem; left: .2rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 4px rgba(23, 48, 42, .25); transition: transform .28s cubic-bezier(.4, 0, .2, 1), background-color .25s ease; }
.mz-theme-switch input:checked + .mz-theme-track { background: #0B3B31; border-color: #0B3B31; }
.mz-theme-switch input:checked + .mz-theme-track .mz-theme-knob { transform: translateX(2.05rem); background: #1D3A33; }
.mz-theme-switch input:checked + .mz-theme-track .bi-moon-fill { color: #FDE68A; }
.mz-theme-switch input:checked + .mz-theme-track .bi-sun-fill { color: rgba(255, 255, 255, .4); }
.mz-theme-switch input:focus-visible + .mz-theme-track { outline: 3px solid rgba(14, 107, 87, .45); outline-offset: 2px; }
/* Smaller, in the footer next to the language picker (signed out only) */
.mz-theme-switch-sm { margin-left: .6rem; }
.mz-theme-switch-sm .mz-theme-track { width: 3.6rem; height: 1.95rem; padding: 0 .5rem; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }
.mz-theme-switch-sm .mz-theme-track i { font-size: .8rem; }
.mz-theme-switch-sm .bi-sun-fill { color: #FDE68A; }
.mz-theme-switch-sm .bi-moon-fill { color: rgba(255,255,255,.55); }
.mz-theme-switch-sm .mz-theme-knob { top: .16rem; left: .18rem; width: 1.55rem; height: 1.55rem; background: rgba(255,255,255,.22); box-shadow: none; }
.mz-theme-switch-sm input:checked + .mz-theme-track .mz-theme-knob { transform: translateX(1.62rem); }
@media (max-width: 575.98px) { .mz-lang .form-select { flex: 1; } }

/* ---------- Scheduled downtime banner (MaintenanceService) ---------- */
.mz-maint { background: var(--mz-amber-soft); border-bottom: 1px solid #F3CF96; color: #6B4100; font-size: .88rem; }
.mz-maint .container { display: flex; align-items: center; gap: .6rem; padding-top: .5rem; padding-bottom: .5rem; }
.mz-maint > .container > i { font-size: 1rem; flex: none; }
.mz-maint > .container > span { flex: 1; min-width: 0; font-weight: 600; }
.mz-maint .btn-close { flex: none; font-size: .65rem; }

/* ---- Address form: search, centre-pin map, picked spot ---- */
.mz-addr-find { display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap; }
.mz-addr-search { position: relative; flex: 1 1 16rem; min-width: 0; }
.mz-addr-search > .bi { position: absolute; left: .85rem; top: 1.2rem; transform: translateY(-50%); color: var(--mz-muted); pointer-events: none; }
.mz-addr-search .form-control { padding-left: 2.3rem; }
.mz-addr-find > .btn { flex: 0 0 auto; white-space: nowrap; }
.mz-addr-hits { position: absolute; z-index: 1060; left: 0; right: 0; top: calc(100% + .3rem); list-style: none; margin: 0; padding: .3rem;
    max-height: 18rem; overflow-y: auto; background: var(--mz-surface, #fff); border: 1px solid var(--mz-line); border-radius: .8rem;
    box-shadow: 0 .6rem 1.6rem rgba(16, 40, 34, .14); }
.mz-addr-hits[hidden] { display: none; }
.mz-addr-hits [role="option"] { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .6rem; border-radius: .55rem; cursor: pointer; }
.mz-addr-hits [role="option"] > .bi { color: var(--mz-green); margin-top: .1rem; }
.mz-addr-hits [role="option"] strong { display: block; font-weight: 600; font-size: .92rem; }
.mz-addr-hits [role="option"] small { display: block; color: var(--mz-muted); font-size: .78rem; line-height: 1.3; }
.mz-addr-hits [role="option"]:hover, .mz-addr-hits [aria-selected="true"] { background: var(--mz-mint); }
.mz-addr-hit-none { padding: .55rem .6rem; font-size: .85rem; color: var(--mz-muted); }
.mz-addr-mapbox { position: relative; border-radius: .9rem; overflow: hidden; border: 1px solid var(--mz-line); }
.mz-addr-mapbox[hidden] { display: none; }
.mz-addr-map { height: 17rem; }
.mz-addr-map-pin { position: absolute; left: 50%; top: 50%; z-index: 500; font-size: 2.3rem; line-height: 1; color: var(--mz-green);
    transform: translate(-50%, -100%); pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); transition: transform .15s ease; }
.mz-addr-mapbox.is-moving .mz-addr-map-pin { transform: translate(-50%, calc(-100% - .45rem)); }
.mz-addr-map-tip { position: absolute; z-index: 500; left: 50%; bottom: .6rem; transform: translateX(-50%); max-width: calc(100% - 1.2rem);
    background: rgba(23, 48, 42, .88); color: #fff; font-size: .78rem; padding: .3rem .7rem; border-radius: 1rem; text-align: center; pointer-events: none; }
.mz-addr-spot { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .75rem; border-radius: .7rem; background: var(--mz-mint); }
.mz-addr-spot[hidden] { display: none; }
.mz-addr-spot > .bi { color: var(--mz-green); margin-top: .1rem; }
@media (prefers-reduced-motion: reduce) { .mz-addr-map-pin { transition: none; } }
@media (max-width: 575.98px) { .mz-addr-find > .btn { flex: 1 1 100%; } .mz-addr-map { height: 15rem; } }

/* ---------- Cart: product cards with pictures, a bill card and a "To pay" + checkout block ----------
   Shopping-app style. Surfaces use var(--mz-surface, #fff) so dark mode follows without extra rules. */
.mz-cart-head { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .75rem; margin-bottom: 1.25rem; }
.mz-cart-count { padding: .2rem .7rem; border-radius: 2rem; background: var(--mz-mint); color: var(--mz-green-ink);
    font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.mz-cart-empty { max-width: 32rem; margin: 1rem auto; padding: 3.25rem 1.5rem; text-align: center; background: var(--mz-surface, #fff);
    border: 1px solid var(--mz-line); border-radius: 1.25rem; }
.mz-cart-empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; margin-bottom: 1.25rem;
    border-radius: 50%; background: var(--mz-mint); color: var(--mz-green); font-size: 2.6rem; box-shadow: 0 0 0 .7rem rgba(14, 107, 87, .06); }

.mz-cart-list { display: flex; flex-direction: column; gap: .75rem; }
.mz-cart-item { padding: .9rem; background: var(--mz-surface, #fff); border: 1px solid var(--mz-line); border-radius: 1.1rem;
    box-shadow: 0 1px 2px rgba(23, 48, 42, .04), 0 6px 18px rgba(23, 48, 42, .04); transition: border-color .15s ease; }
.mz-cart-main { position: relative; display: flex; gap: .95rem; }
.mz-cart-thumb { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 6rem; height: 6rem;
    overflow: hidden; border-radius: .9rem; background: var(--mz-mint); color: var(--mz-green); font-size: 2.2rem; text-decoration: none; }
.mz-cart-thumb img { max-width: 82%; max-height: 82%; object-fit: contain; }
.mz-cart-thumb img ~ i { display: none; }

.mz-cart-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mz-cart-title { display: flex; align-items: flex-start; gap: .4rem; }
.mz-cart-name { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    color: var(--mz-ink); font-weight: 700; line-height: 1.3; text-decoration: none; }
.mz-cart-name:hover { color: var(--mz-green); }
.mz-cart-remove form { margin: 0; }
.mz-cart-del { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; margin: -.3rem -.35rem 0 0;
    padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--mz-muted); font-size: 1.02rem;
    transition: background-color .15s ease, color .15s ease; }
.mz-cart-del:hover, .mz-cart-del:active { background: #FBEFEF; color: var(--mz-red); }
/* One line: Rx and the pack size stay whole, the maker's name is cut short with "..." if it doesn't fit */
.mz-cart-meta { display: flex; align-items: center; gap: .4rem; min-width: 0; margin-top: .15rem; font-size: .8rem; color: var(--mz-muted); }
.mz-cart-meta > span { flex: none; white-space: nowrap; }
.mz-cart-meta > .mz-cart-maker { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mz-cart-maker::before { content: "·"; margin-right: .4rem; }
.mz-cart-rx { padding: 0 .35rem; border: 1px solid #E8C4C4; border-radius: .3rem; background: #FBEFEF; color: var(--mz-red);
    font-size: .68rem; font-weight: 800; line-height: 1.35; }
.mz-cart-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; margin-top: .35rem; font-variant-numeric: tabular-nums; }
/* Prices sit below the medicine name in weight: the name (1rem, 700) leads the card */
.mz-cart-unit { font-size: .9rem; font-weight: 700; }
.mz-cart-mrp { color: var(--mz-muted); font-size: .82rem; }
.mz-cart-mrp[hidden] { display: none; }
.mz-cart-per { color: var(--mz-muted); font-size: .78rem; }
.mz-cart-foot { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .65rem; }
.mz-cart-qty { flex: none; }
.mz-cart-oos { display: inline-block; padding: .4rem .95rem; border-radius: 2rem; background: #FBEFEF; color: #7A2626;
    font-size: .85rem; font-weight: 600; white-space: nowrap; }
.mz-cart-qty .mz-qty-error { max-width: 14rem; }
/* The line amount always stays on the stepper's line: it takes the room left and, if a long figure doesn't fit,
   medizon.js (fitCartAmount) steps its font down instead of letting it wrap or push the card wider */
.mz-cart-amount { flex: 1 1 auto; min-width: 0; overflow: hidden; text-align: right; font-size: .95rem; font-weight: 700;
    font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The stepper in a cart card: a solid green pill (three classes deep so dark.css's stepper background doesn't win) */
.mz-cart-item .mz-qty .mz-qty-stepper { background: var(--mz-green); border-color: var(--mz-green); box-shadow: 0 2px 6px rgba(14, 107, 87, .18); }
/* Compact, close to the "For" chips' size */
.mz-cart-item .mz-qty .mz-qty-btn { width: 1.75rem; height: 1.6rem; color: #fff; font-size: .8rem; }
.mz-cart-item .mz-qty .mz-qty-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.mz-cart-item .mz-qty .mz-qty-btn:disabled { color: rgba(255, 255, 255, .45); }
.mz-cart-item .mz-qty .mz-qty-count { min-width: 1.2rem; color: #fff; font-size: .88rem; }

/* A line that can't be delivered */
.mz-cart-item.mz-cart-unavailable { border-color: #EFCFCF; }
.mz-cart-unavailable .mz-cart-thumb > * { opacity: .45; filter: grayscale(1); }
.mz-cart-unavailable .mz-cart-amount { color: var(--mz-muted); }
.mz-cart-alert { display: flex; align-items: flex-start; gap: .5rem; margin-top: .8rem; padding: .55rem .75rem; border-radius: .75rem;
    background: #FBEFEF; color: #7A2626; font-size: .82rem; line-height: 1.4; }
.mz-cart-alert i { margin-top: .05rem; color: var(--mz-red); }

/* "For": right under the card's details, no divider, so a card stays compact */
.mz-cart-for { margin-top: .55rem; }

/* ---------- Partial checkout: a tick on each card (new items come in ticked) ----------
   A rounded green checkbox drawn in CSS (the real input stays on top, invisible, so it's tappable and accessible). */
.mz-check { position: relative; display: inline-flex; align-items: center; gap: .55rem; margin: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent; }
.mz-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.mz-check-box { flex: none; position: relative; width: 1.3rem; height: 1.3rem; border: 2px solid #9DB8AD; border-radius: .42rem;
    background: var(--mz-surface, #fff); transition: background-color .15s ease, border-color .15s ease, transform .12s ease; }
.mz-check-box::after { content: ""; position: absolute; left: .36rem; top: .14rem; width: .34rem; height: .66rem;
    border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .15s ease; }
.mz-check input:checked + .mz-check-box { background: var(--mz-green); border-color: var(--mz-green); }
.mz-check input:checked + .mz-check-box::after { transform: rotate(45deg) scale(1); }
.mz-check input:focus-visible + .mz-check-box { outline: 3px solid rgba(14, 107, 87, .45); outline-offset: 2px; }
.mz-check:active .mz-check-box { transform: scale(.9); }

/* On a card: on the picture's top-left corner (the picture starts at the card's edge); a bigger tap area than the box */
.mz-cart-check { position: absolute; top: .25rem; left: .25rem; z-index: 2; padding: .2rem; }
.mz-cart-check::before { content: ""; position: absolute; inset: -.25rem; }
.mz-cart-check .mz-check-box { box-shadow: 0 1px 3px rgba(23, 48, 42, .18); }
/* Unticked: dimmed, still editable, and left out of the bill */
.mz-cart-item.is-unticked .mz-cart-thumb, .mz-cart-item.is-unticked .mz-cart-info { opacity: .55; transition: opacity .15s ease; }
.mz-cart-item.is-unticked { box-shadow: none; }
.mz-cart-none { display: flex; align-items: center; gap: .55rem; padding: .7rem .95rem; border: 1px dashed var(--mz-line); border-radius: 1rem;
    background: var(--mz-surface, #fff); color: var(--mz-muted); font-size: .88rem; font-weight: 600; }
.mz-cart-none[hidden] { display: none; }
.mz-cart-none i { color: var(--mz-green); font-size: 1.1rem; }
.mz-cart-none[data-mz-blocked] i { color: var(--mz-red); }
.mz-cart-go-n { margin-left: .3rem; }   /* a flex item: a leading space would be dropped */
.mz-cart-go-n[hidden] { display: none; }

/* Right column (below the items on phones) */
.mz-cart-side { display: flex; flex-direction: column; gap: .75rem; }
.mz-cart-save { display: flex; align-items: center; gap: .55rem; padding: .7rem .95rem; border: 1px dashed rgba(14, 107, 87, .35); border-radius: 1rem;
    background: var(--mz-mint); color: var(--mz-green-ink); font-size: .88rem; font-weight: 700; }
.mz-cart-save i { color: var(--mz-green); font-size: 1.1rem; }
.mz-cart-save[hidden] { display: none; }
.mz-cart-bill { padding: 1rem 1.1rem; background: var(--mz-surface, #fff); border: 1px solid var(--mz-line); border-radius: 1.1rem; }
.mz-bill-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .32rem 0; font-size: .92rem; }
.mz-bill-row[hidden] { display: none; }
.mz-bill-row > span:first-child { display: inline-flex; align-items: center; gap: .55rem; }
.mz-bill-row > span:first-child i { width: 1rem; color: var(--mz-muted); }
.mz-bill-row > span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.mz-bill-minor { color: var(--mz-muted); font-size: .85rem; }
/* Order total: the bill's last line, set off by a rule (the amount checkout will charge before any promo) */
.mz-bill-total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .45rem; padding-top: .6rem;
    border-top: 1px dashed var(--mz-line); font-size: 1rem; font-weight: 700; }
.mz-bill-total > span:last-child { font-variant-numeric: tabular-nums; }
.mz-bill-note { display: flex; align-items: flex-start; gap: .45rem; margin: .55rem 0 0; padding: .5rem .7rem; border-radius: .7rem;
    background: var(--mz-paper); color: var(--mz-muted); font-size: .8rem; line-height: 1.4; }
.mz-bill-note[hidden] { display: none; }
.mz-bill-note i { margin-top: .05rem; color: var(--mz-green); }
.mz-cart-side .mz-rx-note, .mz-cart-side .mz-min-order { margin: 0; border-radius: 1rem; }
.mz-cart-pay { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; background: var(--mz-surface, #fff);
    border: 1px solid var(--mz-line); border-radius: 1.1rem; }
/* A plain .btn-primary like every other button; it only stretches to fill the row */
.mz-cart-go { flex: 1; display: inline-flex; align-items: center; justify-content: center; }

@media (min-width: 992px) { .mz-cart-side { position: sticky; top: 1.5rem; } }
/* Phones and tablets: Checkout is a bar fixed just above the tab bar, so it never scrolls away (app.css: the app's taller tab bar) */
@media (max-width: 991.98px) {
    .mz-cart-page .mz-cart-pay { position: fixed; left: 0; right: 0; bottom: calc(3.7rem + env(safe-area-inset-bottom)); z-index: 1050;
        padding: .7rem 1rem; border: 0; border-radius: 1.15rem 1.15rem 0 0;
        box-shadow: 0 -1px 0 var(--mz-line), 0 -10px 28px rgba(23, 48, 42, .10); }
    body:not(:has(.mz-tabbar)) .mz-cart-page .mz-cart-pay { bottom: 0; padding-bottom: calc(.7rem + env(safe-area-inset-bottom)); }
    /* Room at the end of the page so the last card isn't under the bar, and the assistant sits above it */
    .mz-cart-page:has(.mz-cart-pay) { padding-bottom: 6.5rem; }
    /* Stacked under the products: a clear 2.5rem between the last card and the savings banner / bill (the row gutter gives 1.5rem) */
    .mz-cart-side { margin-top: 1rem; }
    body:has(.mz-cart-pay) .mz-bot { bottom: calc(9rem + env(safe-area-inset-bottom)); }
    body:has(.mz-cart-pay) .mz-bot.is-tucked { bottom: 10rem; }
}
@media (max-width: 575.98px) {
    .mz-cart-item { padding: .8rem; }
    .mz-cart-main { gap: .8rem; }
    .mz-cart-thumb { width: 5.25rem; height: 5.25rem; font-size: 1.9rem; }
}

/* ---------- Sign in with Google, two-step verification ---------- */
/* Google's button rules: white, a grey outline, the four-colour G at 18px, dark text; a dark version on dark pages */
.mz-or { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; color: var(--mz-muted); font-size: .85rem; }
.mz-or::before, .mz-or::after { content: ""; flex: 1; height: 1px; background: var(--mz-line); }
.mz-google-btn { display: flex; align-items: center; justify-content: center; gap: .65rem; width: 100%; min-height: 2.75rem;
    padding: .55rem 1rem; border: 1px solid #747775; border-radius: var(--bs-border-radius); background: #fff; color: #1F1F1F;
    font-family: Roboto, "Figtree", system-ui, sans-serif; font-weight: 500; font-size: .95rem; text-decoration: none;
    transition: background-color .15s ease, box-shadow .15s ease; }
.mz-google-btn:hover { background: #F8FAFF; color: #1F1F1F; box-shadow: 0 1px 3px rgba(60, 64, 67, .2); }
.mz-google-btn:active { background: #EEF2FA; }
.mz-google-btn svg { width: 18px; height: 18px; flex: none; }
.mz-google-btn[hidden] { display: none; }

.mz-2fa-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--mz-mint); color: var(--mz-green); font-size: 1.4rem; }
.mz-otp-input { font-size: 1.5rem; font-weight: 600; text-align: center; letter-spacing: .4em; font-variant-numeric: tabular-nums; }
.mz-otp-input::placeholder { letter-spacing: normal; font-size: 1rem; font-weight: 400; }
.mz-2fa-status { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px;
    font-size: .8rem; font-weight: 600; background: var(--mz-mint); color: var(--mz-green); }
.mz-2fa-status.is-off { background: var(--mz-paper); color: var(--mz-muted); border: 1px solid var(--mz-line); }
.mz-qr { width: 12.5rem; max-width: 100%; padding: .6rem; border: 1px solid var(--mz-line); border-radius: .8rem; background: #fff; }
.mz-qr svg { display: block; width: 100%; height: auto; }
.mz-secret-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; letter-spacing: .05em;
    word-break: break-all; padding: .5rem .75rem; border-radius: .5rem; background: var(--mz-paper); border: 1px dashed var(--mz-line); }
.mz-backup-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: 1rem; margin: 0;
    list-style: none; border-radius: .8rem; background: var(--mz-paper); border: 1px solid var(--mz-line);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: .06em; }
.mz-backup-codes li { padding: .35rem .5rem; text-align: center; border-radius: .4rem; background: #fff; }
@media print {
    body.mz-print-codes * { visibility: hidden; }
    body.mz-print-codes .mz-backup-codes, body.mz-print-codes .mz-backup-codes * { visibility: visible; }
    body.mz-print-codes .mz-backup-codes { position: absolute; top: 0; left: 0; right: 0; }
}

/* ------------------------------------------------------------------ search suggestions (search.js), Amazon style
   Wide screens: a dropdown attached under the header's box, the page dimmed behind. Phones and the app: full screen. */

/* -- the dropdown */
.mz-search.is-suggesting { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mz-sd-shade { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1029; background: rgba(0, 0, 0, .5); }
.mz-sd-shade[hidden], .mz-sd[hidden] { display: none; }
.mz-sd { position: fixed; z-index: 1031; max-height: min(70vh, 34rem); overflow-y: auto; overscroll-behavior: contain;
    background: var(--mz-surface, #fff); color: var(--mz-ink); border-radius: 0 0 .5rem .5rem;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28); padding: .3rem 0; }
.mz-sd-fix { padding: .35rem .9rem .45rem; font-size: .85rem; color: var(--mz-muted); border-bottom: 1px solid var(--mz-line); margin-bottom: .2rem; }
.mz-sd-fix b { color: var(--mz-ink); }
.mz-sd .mz-sx-item { border: 0; }
.mz-sd .mz-sx-link-row { padding: .32rem .9rem; gap: .65rem; }
.mz-sd .mz-sx-ico { font-size: .9rem; }
.mz-sd .mz-sx-title { font-size: 1rem; }
.mz-sd .mz-sx-item.is-active, .mz-sd .mz-sx-item:hover { background: #EEF3F1; }
.mz-sd .mz-sx-del { border: 0; background: none; color: var(--mz-green); font-size: .82rem; padding: 0 .9rem; }
.mz-sd .mz-sx-del:hover { text-decoration: underline; }
.mz-sd .mz-sx-item.is-recent .mz-sx-title { color: #6B4FA0; }        /* searched before, like Amazon's purple */

/* -- rows (both) */
.mz-sx-list { list-style: none; margin: 0; padding: 0; }
.mz-sx-item { display: flex; align-items: center; }
.mz-sx-link-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: .9rem; color: inherit; text-decoration: none; }
.mz-sx-link-row:hover { color: inherit; }
.mz-sx-ico { flex: none; color: var(--mz-muted); }
.mz-sx-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-sx-title { font-weight: 400; }
.mz-sx-title b { font-weight: 700; }
.mz-sx-in { font-size: .85em; color: var(--mz-green); }
html.mz-search-loading .mz-search, html.mz-search-loading .mz-sx-box { background-image: linear-gradient(90deg, transparent, rgba(14, 107, 87, .35), transparent);
    background-size: 40% 2px; background-repeat: no-repeat; background-position-y: 100%; animation: mz-sx-load 1s linear infinite; }
@keyframes mz-sx-load { from { background-position-x: -40%; } to { background-position-x: 140%; } }

/* -- full screen (phones, the app) */
html.mz-sx-open, html.mz-sx-open body { overflow: hidden; }
.mz-sx { position: fixed; inset: 0; z-index: 1075; background: var(--mz-surface, #fff); }
.mz-sx[hidden] { display: none; }
.mz-sx-sheet { height: 100%; display: flex; flex-direction: column; color: var(--mz-ink); padding-top: env(safe-area-inset-top); }
.mz-sx-bar { display: flex; align-items: center; gap: .35rem; padding: .55rem .6rem .55rem .25rem; background: #0B3B31; flex: none; }
.mz-sx-btn { flex: none; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: none; color: #fff; font-size: 1.3rem;
    display: inline-flex; align-items: center; justify-content: center; }
.mz-sx-btn:active { background: rgba(255, 255, 255, .15); }
.mz-sx-box { flex: 1; min-width: 0; display: flex; align-items: center; background: #fff; border-radius: .6rem; height: 2.75rem; overflow: hidden; }
.mz-sx-box:focus-within { box-shadow: 0 0 0 3px #7CE0B4; }
.mz-sx-input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0 .4rem 0 .9rem; font-size: 1rem; background: none; color: #17302A; outline: none; }
.mz-sx-input::-webkit-search-cancel-button { display: none; }
.mz-sx-clear, .mz-sx-mic { flex: none; width: 2.6rem; height: 100%; border: 0; background: none; color: #5B716A; font-size: 1.1rem; }
.mz-sx-mic { color: var(--mz-green); font-size: 1.2rem; }
.mz-sx-clear[hidden], .mz-sx-mic[hidden] { display: none; }
.mz-sx.is-listening .mz-sx-mic { display: inline-block; color: var(--mz-red); animation: mz-blink 1.2s infinite; }
.mz-sx-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.mz-sx-fix { padding: .6rem 1rem; font-size: .88rem; color: var(--mz-muted); background: var(--mz-mint); }
.mz-sx-fix b { color: var(--mz-ink); }
.mz-sx-fix[hidden] { display: none; }
.mz-sx .mz-sx-item { border-bottom: 1px solid var(--mz-line); min-height: 3.1rem; }
.mz-sx .mz-sx-link-row { padding: .7rem 0 .7rem 1rem; }
.mz-sx .mz-sx-ico { font-size: 1.05rem; }
.mz-sx .mz-sx-title { font-size: 1rem; }
.mz-sx .mz-sx-item.is-active, .mz-sx .mz-sx-item:active { background: var(--mz-paper); }
.mz-sx-fill, .mz-sx .mz-sx-del { flex: none; width: 3rem; align-self: stretch; border: 0; background: none; color: var(--mz-muted); font-size: 1.1rem; }
.mz-sx .mz-sx-del { font-size: .95rem; }
.mz-sx-head { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem .4rem; }
.mz-sx-head[hidden], .mz-sx-cats[hidden], .mz-sx-empty[hidden] { display: none; }
.mz-sx-head h2 { font-size: 1rem; font-weight: 700; margin: 0; }
.mz-sx-link { border: 0; background: none; color: var(--mz-green); font-size: .88rem; font-weight: 600; padding: .2rem 0; }
.mz-sx-chips { display: flex; flex-wrap: wrap; gap: .45rem; padding: .3rem 1rem; }
.mz-sx-empty { padding: 2.5rem 1.5rem; text-align: center; color: var(--mz-muted); }
.mz-sx-empty p { margin: 0 0 .3rem; }
@media (prefers-reduced-motion: reduce) {
    html.mz-search-loading .mz-search, html.mz-search-loading .mz-sx-box, .mz-sx.is-listening .mz-sx-mic,
    .mz-bot.is-listening .mz-bot-mic, .mz-bot-msg.is-speaking .mz-bot-say { animation: none; }
}

/* ---------- "Reading your prescription": the page fades behind a spinner while the AI reads it (medizon.js) ---------- */
.mz-reading { position: fixed; inset: 0; z-index: 3100; display: none; flex-direction: column; align-items: center;
    justify-content: center; gap: .35rem; padding: 16px; text-align: center; background: rgba(246, 249, 247, .92); }
html[data-theme="dark"] .mz-reading { background: rgba(15, 23, 21, .92); }
.mz-reading.show { display: flex; animation: mz-reading-in .15s ease-out; }
.mz-reading-spinner { position: relative; width: 4rem; height: 4rem; margin-bottom: 1rem; border-radius: 50%;
    background: var(--mz-mint); color: var(--mz-green); display: grid; place-items: center; font-size: 1.6rem; }
.mz-reading-spinner::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 3px solid transparent;
    border-top-color: var(--mz-green); border-right-color: var(--mz-green); animation: mz-reading-spin .9s linear infinite; }
.mz-reading-title { font-weight: 700; font-size: 1.1rem; color: var(--mz-ink); }
.mz-reading-hint { font-size: .9rem; color: var(--mz-muted); }
@keyframes mz-reading-spin { to { transform: rotate(360deg); } }
@keyframes mz-reading-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .mz-reading.show { animation: none; }
    .mz-reading-spinner::after { animation-duration: 2.5s; }
}