@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap");

/* ==========================================================================
   Order 2026 — "Order Product" page redesign.
   Same token system as pricelist-2026.css / product-2026.css (aliases the
   global :root vars from header.php), scoped under .order2026 so it never
   touches any other page. All functional classes used by script.js /
   inline JS (nom-radio, containerChoice, pay-radio, choicePay,
   accordionHeadPay/Body/Content, floating-label-content, games-input,
   btnYellowPrimary, ticketDetail, etc.) are kept intact — this file only
   restyles them within the .order2026 scope.
   ========================================================================== */

.order2026 {
    --o-primary: var(--yellow-primary);
    --o-primary-soft: color-mix(in srgb, var(--yellow-primary) 12%, var(--white));
    --o-ink: var(--dark-blue);
    --o-bg: var(--bg-body);
    --o-surface: var(--white);
    --o-border: var(--dark-grey);
    --o-text: var(--black);
    --o-muted: var(--black-text);
    --o-radius: 14px;
    --o-radius-lg: 22px;
    --o-shadow: 0 10px 30px -12px rgba(14, 18, 33, 0.12);
    font-family: "Inter", sans-serif;
    color: var(--o-text);
}

/* --o-surface aliased straight to --white above, which never changes in
   dark mode, so every card/panel that uses it (hero logo, product cards,
   nominal picker, payment accordion, ticket detail, etc.) stayed a bright
   white block floating on the dark page. Give it a real dark surface. */
[data-theme="dark"] .order2026 {
    --o-surface: var(--light-blue);
    --o-primary-soft: color-mix(in srgb, var(--yellow-primary) 16%, var(--light-blue));
}

.order2026 * { box-sizing: border-box; }

/* -------- Breadcrumb -------- */
.order2026-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--o-muted);
    margin-bottom: 14px;
}

.order2026-crumb a {
    color: var(--o-muted);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.order2026-crumb a:hover { color: var(--o-primary); }

.order2026-crumb .current {
    color: var(--o-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
}

/* -------- Hero -------- */
.order2026-hero {
    position: relative;
    border-radius: var(--o-radius-lg);
    overflow: hidden;
    background: var(--o-ink);
    margin-bottom: 20px;
    box-shadow: var(--o-shadow);
}

.order2026-hero-cover {
    height: 150px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.order2026-hero-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 18, 33, 0.15) 0%, rgba(14, 18, 33, 0.85) 100%);
}

@media (min-width: 768px) {
    .order2026-hero-cover { height: 190px; }
}

.order2026-hero-body {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 0 20px 18px;
    margin-top: -46px;
}

.order2026-hero-logo {
    flex: none;
    width: 76px;
    height: 76px;
    border-radius: 18px;
    background: var(--o-surface);
    border: 3px solid var(--o-surface);
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.order2026-hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.order2026-hero-info { flex: 1; min-width: 0; padding-bottom: 2px; }

.order2026-hero-info h1 {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.order2026-hero-info h1 i { color: #179cf0; font-size: 16px; }

@media (min-width: 768px) {
    .order2026-hero-body { padding: 0 28px 22px; gap: 20px; }
    .order2026-hero-logo { width: 96px; height: 96px; border-radius: 20px; }
    .order2026-hero-info h1 { font-size: 23px; }
}

.order2026-hero-note {
    background: var(--o-surface);
    padding: 16px 20px 18px;
    color: var(--o-muted);
    font-size: 13.5px;
    line-height: 1.7;
}

@media (min-width: 768px) { .order2026-hero-note { padding: 18px 28px 22px; } }

.order2026-hero-stores {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.order2026-hero-stores img { height: 32px; width: auto; display: block; }

/* -------- Filler content for the shorter column in the equal-height split -------- */
.order2026-trust {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
}

.order2026-trust-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 12px 6px;
    background: var(--o-surface);
    border: 1px solid var(--o-border);
    border-radius: var(--o-radius);
}

.order2026-trust-item i { font-size: 18px; color: var(--o-primary); }
.order2026-trust-item span { font-size: 11px; font-weight: 600; color: var(--o-muted); line-height: 1.2; }

.order2026-cs-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--o-surface);
    border: 1px solid var(--o-border);
    border-radius: var(--o-radius);
    text-decoration: none;
    transition: border-color .15s ease;
}

.order2026-cs-box:hover { border-color: var(--o-primary); }
.order2026-cs-box > i:first-child { font-size: 20px; color: var(--o-primary); flex: none; }
.order2026-cs-box-title { font-size: 13px; font-weight: 700; color: var(--o-text); }
.order2026-cs-box-sub { font-size: 11.5px; color: var(--o-muted); margin-top: 1px; }
.order2026-cs-box-arrow { margin-left: auto; color: var(--o-muted); font-size: 13px; flex: none; }

.order2026-list-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 14px 16px;
    background: var(--o-bg);
    border: 1px dashed var(--o-border);
    border-radius: var(--o-radius);
    font-size: 12.5px;
    color: var(--o-muted);
}

.order2026-list-note i { color: var(--o-primary); flex: none; }
.order2026-list-note a { color: var(--o-primary); font-weight: 600; text-decoration: none; }
.order2026-list-note a:hover { text-decoration: underline; }

/* -------- Split-screen layout -------- */
.order2026-split {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.order2026-main,
.order2026-checkout,
.order2026-checkout-sticky {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Same fluid, edge-to-edge padding scale as the home page's content shell
   and the shared navbar/promo bar/footer (see home-2026.css / nav-2026.css)
   — no max-width cap, just growing side padding — so this page's left/right
   edge lines up at the exact same distance from the screen edge as every
   other page instead of using a different (capped+centered) strategy. */
.order2026 .container {
    max-width: none;
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 576px) {
    .order2026 .container { padding-left: 24px; padding-right: 24px; }
}

@media (min-width: 992px) {
    .order2026 .container { padding-left: 40px; padding-right: 40px; }
}

@media (min-width: 1400px) {
    .order2026 .container { padding-left: 64px; padding-right: 64px; }
    .order2026-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .order2026-split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 400px;
        align-items: stretch;
        gap: 0;
        border: 1px solid var(--o-border);
        border-radius: var(--o-radius-lg);
        /* NOTE: intentionally no `overflow: hidden` here — clipping the
           grid this way silently breaks `position: sticky` on anything
           nested inside it (the sticky element's containing block becomes
           this box instead of the viewport), which is why the order-info
           card previously never actually stuck while scrolling. Each
           column gets its own outer-corner radius below instead, so the
           rounded frame still looks correct without clipping. */
        box-shadow: var(--o-shadow);
        background: var(--o-surface);
    }

    /* Both panes stretch to the same height as their grid row (the height
       of the taller of the two) — this is what gives the sticky order-info
       card below room to travel the full length of the product list instead
       of scrolling away partway down. Any leftover space in the shorter
       column is filled with real content (trust badges / CS note) below,
       instead of being left blank. */
    .order2026-main {
        min-width: 0;
        padding: 24px;
        gap: 20px;
        border-radius: var(--o-radius-lg) 0 0 var(--o-radius-lg);
    }

    .order2026-checkout {
        min-width: 0;
        background: var(--o-bg);
        border-left: 1px solid var(--o-border);
        padding: 24px;
        gap: 20px;
        border-radius: 0 var(--o-radius-lg) var(--o-radius-lg) 0;
    }

    /* The sticky behaviour lives on a wrapper around the order-info card,
       trust badges, and CS box (.order2026-checkout-sticky) rather than on
       the form alone. This lets the column itself stretch to full height
       for the equal-height split, while the form + badges + CS box travel
       and stick together as a single block as you scroll — so the form can
       never scroll past and overlap the badges below it — and the group
       naturally stops once it hits the bottom of the (usually taller)
       product-list column. */
    .order2026-checkout-sticky {
        position: sticky;
        top: 76px;
        /* NOTE: align-self only ever controls the CROSS axis. This container
           is flex-direction: column, so its cross axis is width, not height
           — there's no need to opt out of height-stretch here since
           flex-grow already defaults to 0 (it won't grow to fill the
           column's height on its own). The real bug: `align-self: start`
           was overriding the inherited `align-items: stretch` on WIDTH,
           so this item stopped filling the 400px checkout column and
           instead sized itself to its widest child's content (the voucher
           row, ~930px unwrapped) — which is what was blowing the whole
           page out horizontally once the voucher widget was added. Leave
           this at the default (stretch) so width always matches the
           column, no matter what content lands inside it. */
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Panels lose their own border/shadow inside the split frame */
    .order2026-split .order2026-panel {
        border: none;
        box-shadow: none;
        border-radius: var(--o-radius);
        padding: 0;
    }

    .order2026-split .order2026-main .order2026-panel + .order2026-panel {
        padding-top: 20px;
        border-top: 1px solid var(--o-border);
    }

    .order2026-split .order2026-checkout .order2026-panel {
        background: transparent;
    }

    /* The payment accordion now lives on the checkout pane's --o-bg
       backdrop — give it a surface background so it doesn't blend in. */
    .order2026-split .order2026-checkout .accordionHeadPay {
        background: var(--o-surface) !important;
    }
}

/* -------- Sticky order bar (selected product + price + CTA) --------
   Visible on every breakpoint — it's the single, persistent way to buy.
   The non-sticky confirm button inside the order-info panel was removed. */
.order2026-stickybar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: var(--o-surface);
    border-top: 1px solid var(--o-border);
    box-shadow: 0 -8px 24px -12px rgba(14, 18, 33, 0.18);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}

.order2026-stickybar-info { min-width: 0; flex: 1; }

.order2026-stickybar-name {
    font-size: 12px;
    color: var(--o-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order2026-stickybar-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--o-text);
}

.order2026-stickybar-price s {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 11.5px;
    color: var(--o-muted);
    opacity: 0.8;
}

.order2026-stickybar-btn {
    flex: none;
    height: 44px !important;
    padding: 0 22px !important;
    border-radius: 12px !important;
    font-family: "Outfit", sans-serif;
    font-weight: 600 !important;
    font-size: 13.5px !important;
}

/* Keep page content clear of the fixed elements stacked at the bottom-right:
   the stickybar itself (~64-74px incl. safe-area) plus the back-to-top
   button from nav-2026.css, which floats above it with a much higher
   z-index. (The global floating WA button is hidden on this page — see
   the body.site2026:has(.order2026) override in nav-2026.css — since this
   page already has its own inline WA CTA card, .order2026-cs-box.) */
.order2026-split { padding-bottom: 150px; }

@media (max-width: 767px) {
    .order2026-split { padding-bottom: 170px; }
}

@media (min-width: 992px) {
    .order2026-stickybar {
        padding-left: 40px;
        padding-right: 40px;
    }

    .order2026-stickybar-name { font-size: 13px; }
    .order2026-stickybar-price { font-size: 19px; }

    .order2026-stickybar-btn {
        height: 48px !important;
        padding: 0 32px !important;
        font-size: 14.5px !important;
    }
}

@media (min-width: 1400px) {
    .order2026-stickybar { padding-left: 64px; padding-right: 64px; }
}

/* -------- Price wrap (strikethrough + final) -------- */
.order2026-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.order2026-price-wrap s {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 11.5px;
    color: var(--o-muted);
    opacity: 0.75;
    max-width: none !important;
}

/* -------- Panel -------- */
.order2026-panel {
    min-width: 0;
    background: var(--o-surface);
    border: 1px solid var(--o-border);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow);
    padding: 20px;
}

@media (min-width: 768px) { .order2026-panel { padding: 24px; } }

.order2026-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.order2026-step-num {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--o-primary);
    color: #fff;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--o-primary) 60%, transparent);
}

.order2026-panel-title {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 15.5px;
    color: var(--o-text);
    line-height: 1.3;
}

.order2026-panel-sub {
    font-size: 12px;
    color: var(--o-muted);
    margin-top: 1px;
    font-weight: 400;
}

.order2026-note-bill {
    background: var(--o-primary-soft);
    border: 1px dashed color-mix(in srgb, var(--o-primary) 45%, transparent);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--o-muted);
    margin-bottom: 16px;
}

.order2026-note-bill b { color: var(--o-text); }

/* -------- Category quick-jump chips (auto-scroll to a sub-category) -------- */
.order2026-cat-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    margin-bottom: 16px;
    cursor: grab;
    user-select: none;
}

.order2026-cat-nav.is-dragging { cursor: grabbing; }

.order2026-cat-nav::-webkit-scrollbar { display: none; }

.order2026-cat-chip {
    flex: none;
    scroll-snap-align: start;
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--o-muted);
    background: var(--o-bg);
    border: 1.5px solid var(--o-border);
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.order2026-cat-chip:hover {
    border-color: color-mix(in srgb, var(--o-primary) 45%, var(--o-border));
    color: var(--o-text);
}

.order2026-cat-chip.is-active {
    background: var(--o-primary);
    border-color: var(--o-primary);
    color: #fff;
}

/* Scroll offset so a jumped-to section doesn't land flush under the sticky
   mobile header / nav chip row */
.order2026-sub-label { scroll-margin-top: 90px; }

/* -------- Product grid (Pilih Nominal) -------- */
/* Styled like the home page's category section header (product2026-section-head):
   gradient pill, small round accent dot instead of a plain uppercase label. */
.order2026-sub-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Outfit", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--o-ink);
    text-transform: none;
    letter-spacing: normal;
    background: linear-gradient(135deg, var(--o-primary-soft) 0%, var(--o-surface) 100%);
    border: 1px solid color-mix(in srgb, var(--o-primary) 22%, var(--o-surface));
    border-radius: 12px;
    padding: 10px 14px;
    margin: 0 0 12px;
}

.order2026-sub-label::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--o-primary);
}

.order2026-product-grid + .order2026-sub-label {
    margin-top: 22px;
}

.order2026-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 6px;
}

@media (min-width: 576px) {
    .order2026-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.order2026 .containerChoice {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    min-height: 96px;
    padding: 14px 10px;
    border-radius: 14px;
    border: 1.5px solid var(--o-border);
    background: var(--o-bg);
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.order2026 .containerChoice:hover {
    border-color: color-mix(in srgb, var(--o-primary) 50%, var(--o-border));
    transform: translateY(-1px);
}

.order2026 .containerChoice img { width: 26px; height: 26px; object-fit: contain; }

.order2026 .containerChoice .text .desc {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--o-text);
    line-height: 1.3;
}

.order2026 .containerChoice .text .count {
    font-size: 12px;
    color: var(--o-muted);
    margin-top: 2px;
}

.order2026 .containerChoice .text .count s { opacity: 0.6; margin-right: 3px; }

.order2026 .containerChoice .containerIcon {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--o-primary);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.order2026 .nom-radio:checked + .containerChoice .containerIcon {
    display: flex;
}

/* style.css (loaded sitewide) styles this same state with a GENERAL sibling
   selector (".nom-radio:checked:checked ~ .containerChoice"), which matches
   every later .containerChoice in the grid — not just the one right after
   the checked radio. That's why picking one nominal visually "checked" all
   of them. Reset it here, then re-apply the real state to only the actual
   adjacent (checked + .containerChoice) sibling, with !important so it wins
   regardless of load order. */
.order2026 .nom-radio ~ .containerChoice {
    border-color: var(--o-border) !important;
    background: var(--o-bg) !important;
    box-shadow: none !important;
}

.order2026 .nom-radio ~ .containerChoice .text .desc,
.order2026 .nom-radio ~ .containerChoice .text .count {
    color: inherit !important;
}

.order2026 .nom-radio:checked + .containerChoice {
    border-color: var(--o-primary) !important;
    background: var(--o-primary-soft) !important;
    box-shadow: 0 0 0 1px var(--o-primary) !important;
}

.order2026 .nom-radio:checked + .containerChoice .text .desc {
    color: var(--o-text) !important;
}

.order2026-outofstock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 10px;
    text-align: center;
    color: var(--o-muted);
}

.order2026-outofstock img { width: 90px; }
.order2026-outofstock .head { font-family: "Outfit", sans-serif; font-weight: 700; color: var(--o-text); font-size: 15px; }

/* -------- Floating fields (Masukkan Data) -------- */
.order2026 .floating-label-content { margin-bottom: 2px; }

.order2026 .floating-label-content .floating-input,
.order2026 .floating-label-content .floating-select {
    border-radius: 14px;
    border: 1.5px solid var(--o-border);
    background: var(--o-bg);
    height: 54px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.order2026 .floating-label-content .floating-input:hover,
.order2026 .floating-label-content .floating-select:hover {
    border-color: color-mix(in srgb, var(--o-primary) 35%, var(--o-border));
}

.order2026 .floating-label-content .floating-input:focus,
.order2026 .floating-label-content .floating-select:focus {
    border-color: var(--o-primary);
    box-shadow: 0 0 0 4px var(--o-primary-soft);
    background: var(--o-surface);
}

.order2026 .floating-input:focus ~ .floating-label,
.order2026 .floating-input:not(:placeholder-shown) ~ .floating-label,
.order2026 .floating-select:not([value=""]):valid ~ .floating-label {
    color: var(--o-primary);
}

.order2026 .floating-label-content .note {
    font-size: 11.5px;
    color: var(--o-muted);
    margin-top: 6px;
}

/* Leading icon inside a field (target ID, WhatsApp, PIN, server select) */
.order2026 .floating-label-content.has-icon { position: relative; }

.order2026 .floating-label-content.has-icon .field-icon {
    position: absolute;
    left: 17px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--o-muted);
    pointer-events: none;
    z-index: 2;
    transition: color 0.15s ease;
}

.order2026 .floating-label-content.has-icon .floating-input,
.order2026 .floating-label-content.has-icon .floating-select {
    padding-left: 46px;
}

.order2026 .floating-label-content.has-icon .floating-label {
    left: 46px;
}

.order2026 .floating-label-content.has-icon .floating-input:focus ~ .floating-label,
.order2026 .floating-label-content.has-icon .floating-input:not(:placeholder-shown) ~ .floating-label,
.order2026 .floating-label-content.has-icon .floating-select:not([value=""]):valid ~ .floating-label {
    left: 46px;
}

.order2026 .floating-label-content.has-icon .floating-input:focus ~ .field-icon {
    color: var(--o-primary);
}

/* Sub-heading used to introduce a grouped section inside a merged panel
   (e.g. "Metode Pembayaran" under the order-info form) */
.order2026-subhead {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--o-text);
    padding-top: 14px;
    margin-top: 2px;
    border-top: 1px dashed var(--o-border);
}

/* ==================== Voucher & Promo (horizontal swipe list) ====================
   Ticket-style cards in a snap-scrolling row. The "torn ticket" notches are two
   small circles cut out of the card via mask-image, colored to match whatever
   sits behind the card (the panel surface), so the divider between the value
   side and detail side reads as a real perforation regardless of theme. */
.voucher2026 {
    padding-top: 14px;
    margin-top: 2px;
    border-top: 1px dashed var(--o-border);
    /* .voucher2026 sits as a flex item inside the "d-flex flex-column gap-4"
       field stack, which itself sits inside the sticky checkout column.
       Flex items default to min-width: auto, so without this the row of
       fixed-width cards below (~950px unwrapped) was reported as this
       item's minimum content size and dragged the whole checkout column —
       and with it the page — wider than the viewport, instead of being
       clipped/scrolled by voucher2026-scroller-wrap's own overflow:hidden.
       min-width: 0 here lets it shrink to the column's actual width so the
       scroller below can do its job. */
    min-width: 0;
}

.voucher2026-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.voucher2026-subhead {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--o-text);
}

.voucher2026-subhead i { color: var(--o-primary); font-size: 15px; }

.voucher2026-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--o-primary);
    background: var(--o-primary-soft);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.voucher2026-scroller-wrap { position: relative; overflow: hidden; min-width: 0; }

.voucher2026-scroller {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 4px 16px 10px 2px;
    margin: -4px -16px -10px -2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}

.voucher2026-scroller.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}
.voucher2026-scroller.is-dragging .voucher2026-card { pointer-events: none; }

.voucher2026-scroller::-webkit-scrollbar { display: none; }

/* Fade hint at the edges so it's obvious there's more to swipe to */
.voucher2026-scroller-wrap::before,
.voucher2026-scroller-wrap::after {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 10px;
    width: 22px;
    pointer-events: none;
    z-index: 2;
}
.voucher2026-scroller-wrap::before {
    left: 0;
    background: linear-gradient(90deg, var(--o-bg), transparent);
}
.voucher2026-scroller-wrap::after {
    right: 0;
    background: linear-gradient(270deg, var(--o-bg), transparent);
}

.voucher2026-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.voucher2026-card {
    flex: 0 0 auto;
    width: 224px;
    scroll-snap-align: start;
    display: flex;
    align-items: stretch;
    background: var(--o-bg);
    border: 1.5px solid var(--o-border);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 6px 16px -10px rgba(14, 18, 33, 0.18);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.voucher2026-card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(14, 18, 33, 0.24); }

.voucher2026-value {
    position: relative;
    flex: none;
    width: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    padding: 10px 6px;
    background: linear-gradient(160deg, var(--o-primary), color-mix(in srgb, var(--o-primary) 78%, #b8860b));
    color: #fff;
}

.voucher2026-value-num {
    font-family: "Outfit", sans-serif;
    font-weight: 800;
    font-size: 17px;
    line-height: 1.1;
}

.voucher2026-value-label {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.voucher2026-value-cap {
    font-size: 8px;
    font-weight: 600;
    opacity: 0.85;
    margin-top: 2px;
}

/* Perforation notches: two circles matching the card's own background
   (same --o-bg token as the card, so the "punched hole" still blends
   seamlessly in both light and dark). */
.voucher2026-value::before,
.voucher2026-value::after {
    content: "";
    position: absolute;
    right: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--o-bg);
    z-index: 1;
}
.voucher2026-value::before { top: -7px; }
.voucher2026-value::after { bottom: -7px; }

.voucher2026-detail {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 10px 12px 10px 14px;
    border-left: 1.5px dashed var(--o-border);
}

.voucher2026-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--o-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    background: var(--o-bg);
    transition: all 0.15s ease;
}
.voucher2026-check i { font-size: 11px; }

.voucher2026-title {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--o-text);
    padding-right: 20px;
    line-height: 1.25;
}

.voucher2026-min {
    font-size: 10.5px;
    color: var(--o-muted);
}

.voucher2026-expiry {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--o-muted);
    margin-top: 2px;
}
.voucher2026-expiry i { font-size: 10px; }

/* Selected state */
.voucher2026-radio:checked + .voucher2026-card {
    border-color: var(--o-primary);
    box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--o-primary) 55%, transparent);
}
.voucher2026-radio:checked + .voucher2026-card .voucher2026-detail { border-left-color: color-mix(in srgb, var(--o-primary) 45%, var(--o-border)); }
.voucher2026-radio:checked + .voucher2026-card .voucher2026-check {
    background: var(--o-primary);
    border-color: var(--o-primary);
    color: #fff;
}

/* -------- Payment method accordion -------- */
.order2026-pay-group + .order2026-pay-group { margin-top: 10px; }

.order2026 .accordionHeadPay {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 12px;
    background: var(--o-bg) !important;
    border: 1.5px solid var(--o-border);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.order2026 .accordionHeadPay:hover { border-color: color-mix(in srgb, var(--o-primary) 40%, var(--o-border)); }

.order2026 .accordionHeadPay.is-open {
    border-color: var(--o-primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.order2026 .accordionHeadPay .title {
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--o-text);
    flex: 1;
}

.order2026 .accordionHeadPay .containers {
    display: flex;
    align-items: center;
    gap: 4px;
}

.order2026 .accordionHeadPay .containers img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
    padding: 2px;
}

.order2026 .accordionHeadPay i {
    position: static;
    flex: none;
    color: var(--o-muted);
    font-size: 12px;
    transition: transform 0.2s ease;
}

.order2026 .accordionHeadPay.is-open i { transform: rotate(90deg); color: var(--o-primary); }

.order2026 .accordionBodyPay {
    max-height: 0;
    overflow: hidden;
    border: 1.5px solid var(--o-primary);
    border-top: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    transition: max-height 0.25s ease;
}

.order2026 .accordionHeadPay:not(.is-open) + .accordionBodyPay { border-color: transparent; }

.order2026 .accordionContent { padding: 10px; }

.order2026 .choicePay {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--o-border);
    background: var(--o-surface);
    cursor: pointer;
    margin-bottom: 8px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.order2026 .choicePay:last-child { margin-bottom: 0; }

.order2026 .choicePay:hover { border-color: color-mix(in srgb, var(--o-primary) 45%, var(--o-border)); }

.order2026 .choicePay .containers { display: flex; align-items: center; gap: 10px; }

.order2026 .choicePay .containers .icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--o-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.order2026 .choicePay .containers .icon i { font-size: 10px; color: transparent; }

.order2026 .choicePay .containers .text .name {
    font-size: 13px;
    font-weight: 600;
    color: var(--o-text);
}

.order2026 .choicePay .containers .text .price {
    font-size: 12px;
    color: var(--o-muted);
    margin-top: 1px;
}

.order2026 .choicePay img { width: 44px; height: auto; object-fit: contain; }

/* Same root cause as the product cards above: style.css uses a general
   sibling selector (".pay-radio:checked:checked ~ .choicePay") that marks
   every payment option after the selected one as "checked" too. Reset all
   siblings first, then re-apply the real look to only the true adjacent
   (checked + .choicePay) match — !important to beat that legacy rule. */
.order2026 .pay-radio ~ .choicePay {
    border-color: var(--o-border) !important;
    background: var(--o-surface) !important;
}

.order2026 .pay-radio ~ .choicePay .containers .icon {
    background: transparent !important;
    border-color: var(--o-border) !important;
}

.order2026 .pay-radio ~ .choicePay .containers .icon i { color: transparent !important; }

.order2026 .pay-radio ~ .choicePay .containers .text .price { color: var(--o-muted) !important; font-weight: 400 !important; }

.order2026 .pay-radio:checked + .choicePay {
    border-color: var(--o-primary) !important;
    background: var(--o-primary-soft) !important;
}

.order2026 .pay-radio:checked + .choicePay .containers .icon {
    background: var(--o-primary) !important;
    border-color: var(--o-primary) !important;
}

.order2026 .pay-radio:checked + .choicePay .containers .icon i { color: #fff !important; }

.order2026 .pay-radio:checked + .choicePay .containers .text .price { color: var(--o-primary) !important; font-weight: 600 !important; }

.order2026 .pay-radio:disabled + .choicePay { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* -------- Sticky summary -------- */
.order2026-summary {
    background: linear-gradient(135deg, var(--o-ink) 0%, color-mix(in srgb, var(--o-ink) 78%, var(--o-primary)) 100%);
    border-radius: var(--o-radius-lg);
    padding: 18px 20px;
    color: #fff;
    box-shadow: var(--o-shadow);
}

.order2026-summary-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
}

.order2026-summary-product {
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    margin-bottom: 12px;
}

.order2026-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.order2026-summary-row .amount {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 20px;
}

/* -------- Contact card -------- */
.order2026-btn-confirm {
    height: 48px !important;
    border-radius: 12px !important;
    font-family: "Outfit", sans-serif;
    font-weight: 600 !important;
    font-size: 14.5px !important;
}

.order2026 .icon-paddword.close {
    background: none;
    border: none;
    position: absolute;
    right: 16px;
    top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    cursor: pointer;
}

/* style.css's generic ".floating-label-content i" rule (meant for a single
   right-aligned field icon) also matches this icon since it's just any <i>
   nested inside .floating-label-content. That made the icon position:absolute
   on its own, which left its parent <button> with no in-flow content to size
   around — the button collapsed to ~0px and silently ate no clicks at all,
   even though the eye icon still rendered fine. Put the icon back in normal
   flow inside the (now properly sized) button. */
.order2026 .icon-paddword.close i {
    position: static;
    transform: none;
    right: auto;
    top: auto;
    color: var(--o-muted);
    font-size: 15px;
}

.order2026 .cf-turnstile { display: flex; justify-content: center; }

/* -------- Modal polish (kept structurally identical) -------- */
.order2026-modal .ticketDetail .head {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
}

/* -------- Thumbnail header (single asset, same one used on home/search) -------- */
.order2026-thumbhead {
    display: flex;
    gap: 16px;
    background: var(--o-surface);
    border: 1px solid var(--o-border);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow);
    padding: 18px;
    margin-bottom: 20px;
}

.order2026-thumbhead-img {
    flex: none;
    width: 84px;
    height: 84px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--o-bg);
    border: 1px solid var(--o-border);
}

.order2026-thumbhead-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 'image' assets are portrait poster art (~4:5) — anchoring the crop to
       the top keeps the character/logo visible instead of cutting through
       the middle when the source is squeezed into a square box. */
    object-position: top;
    display: block;
}

.order2026-thumbhead-info { flex: 1; min-width: 0; }

.order2026-thumbhead-info h1 {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--o-text);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.order2026-thumbhead-info h1 i { color: #179cf0; font-size: 15px; }

.order2026-thumbhead-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.order2026-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--o-bg);
    border: 1px solid var(--o-border);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--o-muted);
}

.order2026-tag i { font-size: 10px; }

.order2026-tag-accent {
    background: var(--o-primary-soft);
    border-color: color-mix(in srgb, var(--o-primary) 35%, transparent);
    color: color-mix(in srgb, var(--o-primary) 75%, var(--o-ink));
}

.order2026-thumbhead-note {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--o-muted);
    margin: 8px 0 0;
}

.order2026-readmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding: 0;
    border: none;
    background: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--o-primary);
    cursor: pointer;
}

.order2026-readmore-btn i {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.order2026-readmore.is-expanded .order2026-readmore-btn i {
    transform: rotate(180deg);
}

.order2026-readmore { margin-bottom: 8px; }

@media (min-width: 768px) {
    .order2026-thumbhead { padding: 22px; gap: 20px; }
    .order2026-thumbhead-img { width: 104px; height: 104px; border-radius: 18px; }
    .order2026-thumbhead-info h1 { font-size: 20px; }
}

@media (max-width: 575.98px) {
    .order2026-thumbhead { padding: 14px; gap: 12px; border-radius: 18px; }
    .order2026-thumbhead-img { width: 60px; height: 60px; border-radius: 12px; }
    .order2026-thumbhead-info h1 { font-size: 14.5px; }
}

/* -------- Discount badge on nominal cards -------- */
.order2026 .containerChoice { position: relative; }

.order2026-discount-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: #DC2626;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    z-index: 1;
}

/* -------- Merged "Informasi Pesanan" sidebar card -------- */
.order2026-orderinfo-summary {
    background: var(--o-bg);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order2026-orderinfo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: var(--o-muted);
}

.order2026-orderinfo-row span:last-child {
    color: var(--o-text);
    font-weight: 600;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

.order2026-orderinfo-total {
    padding-top: 8px;
    border-top: 1px dashed var(--o-border);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--o-text);
}

.order2026-orderinfo-total span:last-child {
    color: var(--o-primary);
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 17px;
    max-width: none;
}

/* -------- Responsive tightening -------- */
@media (max-width: 575.98px) {
    .order2026-hero-body { margin-top: -40px; }
    .order2026-hero-logo { width: 64px; height: 64px; border-radius: 14px; }
    .order2026-panel { padding: 16px; border-radius: 18px; }
    .order2026-hero { border-radius: 18px; }
}

/* ==========================================================================
   Step indicator — 1 Pilih Nominal / 2 Metode Bayar / 3 Data & Bayar
   ========================================================================== */
.order2026-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    background: var(--o-surface);
    border: 1px solid var(--o-border);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow);
    padding: 16px 14px;
    margin-bottom: 16px;
}

.order2026-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 0;
    gap: 6px;
}

.order2026-step-num {
    position: relative;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--o-bg);
    border: 1.5px solid var(--o-border);
    color: var(--o-muted);
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.order2026-step-num .check { display: none; font-size: 13px; }

.order2026-step-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--o-muted);
    line-height: 1.25;
    max-width: 90px;
    transition: color 0.2s ease;
}

.order2026-step.is-active .order2026-step-num {
    background: var(--o-primary);
    border-color: var(--o-primary);
    color: #fff;
    box-shadow: 0 0 0 4px var(--o-primary-soft);
}

.order2026-step.is-active .order2026-step-label { color: var(--o-text); }

.order2026-step.is-done .order2026-step-num {
    background: var(--o-ink);
    border-color: var(--o-ink);
    color: #fff;
}

.order2026-step.is-done .order2026-step-num .num { display: none; }
.order2026-step.is-done .order2026-step-num .check { display: inline-flex; }

.order2026-step-line {
    flex: none;
    width: 100%;
    max-width: 64px;
    height: 1.5px;
    background: var(--o-border);
    margin-top: 14px;
    transition: background 0.2s ease;
}

.order2026-step-line.is-done { background: var(--o-ink); }

@media (min-width: 768px) {
    .order2026-step-num { width: 32px; height: 32px; font-size: 13.5px; }
    .order2026-step-label { font-size: 12.5px; max-width: none; }
}

@media (max-width: 400px) {
    .order2026-step-label { display: none; }
    .order2026-stepper { padding: 12px 10px; }
}

/* ==========================================================================
   Bottom-sheet modal (mobile / tablet) — same modal markup, restyled to
   slide up from the bottom with a drag handle instead of a centered dialog.
   ========================================================================== */
@media (max-width: 991.98px) {
    .order2026-modal .modal-dialog {
        display: block !important;
        min-height: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100%;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto !important;
        transform: translateY(100%);
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .order2026-modal.show .modal-dialog { transform: translateY(0); }

    .order2026-modal .modal-content {
        border-radius: 20px 20px 0 0 !important;
        max-height: 88vh;
        overflow-y: auto;
        padding: 8px 20px calc(18px + env(safe-area-inset-bottom)) !important;
    }

    .order2026-sheet-handle {
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: var(--o-border);
        margin: 0 auto 14px;
        touch-action: none;
    }
}

.order2026-sheet-handle { display: none; }

/* ==========================================================================
   Mobile fixes
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Prevent iOS auto-zoom on focus (inputs/selects need >=16px font) */
    .order2026 .floating-label-content .floating-input,
    .order2026 .floating-label-content .floating-select,
    .order2026 input[type="number"],
    .order2026 input[type="password"] {
        font-size: 16px;
    }

    /* Comfortable tap targets */
    .order2026 .choicePay,
    .order2026 .accordionHeadPay {
        min-height: 48px;
    }

    .order2026 .containerChoice { min-height: 92px; }

    /* Sticky bar: don't let long product names push the button off-screen */
    .order2026-stickybar-btn { min-width: 108px; }

    /* Ticket detail modal readability */
    .order2026-modal .ticketDetail.page .containers {
        padding: 8px 0;
    }

    /* Breadcrumb: avoid wrapping to a second line on narrow screens */
    .order2026-crumb { font-size: 12px; }
}

@media (max-width: 575.98px) {
    .order2026-stepper { border-radius: 16px; }
    .order2026-thumbhead-tags { row-gap: 6px; }
    .order2026-product-grid { gap: 8px; }
    .order2026-modal .modal-content.py-5 { padding: 8px 16px calc(18px + env(safe-area-inset-bottom)) !important; }
}

/* ==========================================================================
   Purchase confirmation modal — modern invoice / receipt redesign (2026)
   Bootstrap's --bs-modal-bg is a hardcoded #fff with no dark variant, so
   give this specific modal a proper dark surface too instead of staying a
   bright white card on a dark page.
   ========================================================================== */
[data-theme="dark"] .order2026-modal .modal-content {
    background-color: var(--o-surface);
}

.order2026-invoice { padding: 4px 22px 0; }

.order2026-invoice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.order2026-invoice-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.order2026-invoice-mark {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--o-primary-soft);
    color: var(--o-primary);
    font-size: 17px;
}

.order2026-invoice-brand-text { min-width: 0; }

.order2026-invoice-title {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--o-text);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order2026-invoice-sub {
    font-size: 11.5px;
    color: var(--o-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order2026-invoice-status {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, #F59E0B 16%, var(--o-surface));
    color: #B45309;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

[data-theme="dark"] .order2026-invoice-status { color: #FBBF24; }
.order2026-invoice-status i { font-size: 10px; }

.order2026-invoice-card {
    background: var(--o-bg);
    border: 1px solid var(--o-border);
    border-radius: var(--o-radius);
    padding: 2px 14px;
}

.order2026-invoice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
}

.order2026-invoice-row + .order2026-invoice-row { border-top: 1px dashed var(--o-border); }

.order2026-invoice-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--o-muted);
    font-weight: 500;
    flex: none;
}

.order2026-invoice-label i { font-size: 12px; color: var(--o-muted); }

.order2026-invoice-value {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--o-text);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

.order2026-invoice-value.mono { font-family: "Outfit", sans-serif; letter-spacing: 0.01em; }

.order2026-invoice-value-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.order2026-invoice-copy {
    flex: none;
    border: none;
    background: none;
    color: var(--o-muted);
    font-size: 13px;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}

.order2026-invoice-copy:hover { color: var(--o-primary); background: var(--o-primary-soft); }
.order2026-invoice-copy.is-copied { color: #16A34A; }

/* Perforated ticket-stub divider, punched into the modal surface */
.order2026-invoice-perf {
    position: relative;
    height: 1px;
    margin: 18px -22px;
    background-image: repeating-linear-gradient(to right, var(--o-border) 0 8px, transparent 8px 17px);
}

.order2026-invoice-perf::before,
.order2026-invoice-perf::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--o-surface);
    transform: translateY(-50%);
}

.order2026-invoice-perf::before { left: -10px; }
.order2026-invoice-perf::after { right: -10px; }

.order2026-invoice-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
    margin-bottom: 4px;
}

.order2026-invoice-total-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--o-muted);
}

.order2026-invoice-total-amount {
    font-family: "Outfit", sans-serif;
    font-weight: 800;
    font-size: 25px;
    color: var(--o-primary);
    letter-spacing: -0.01em;
}

.order2026-invoice-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: var(--o-muted);
    margin-top: 14px;
}

.order2026-invoice-note i { color: #16A34A; font-size: 12px; }

@media (max-width: 575.98px) {
    .order2026-invoice { padding: 4px 4px 0; }
    .order2026-invoice-perf { margin: 16px -4px; }
    .order2026-invoice-total-amount { font-size: 22px; }
}