/* ==========================================================
   PRODUCT SISTEM & MODAL STYLES (CACHED)
   ========================================================== */

/* ==========================================================
   FLOATING HEADER FIX KHUSUS HALAMAN SISTEM PRODUK
   Dipaksa fixed karena overflow halaman produk dapat membuat sticky gagal.
   ========================================================== */
body {
    padding-top: 64px !important;
}

.theme-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    transform: translateZ(0);
    will-change: transform;
    box-shadow:
        0 12px 30px rgba(0,0,0,.12),
        inset 0 1px 0 color-mix(in srgb, white 36%, transparent) !important;
}

/* Jangan menambah jarak dua kali pada overlay/modal fixed. */
#mobileSearchOverlay,
#mobileMenuOverlay,
#fullScreenLoader,
.cpx-entry-transition {
    margin-top: 0 !important;
}

@media (max-width: 1023px) {
    body {
        padding-top: 64px !important;
    }
}

/* ==========================================================
   ORDER PAGE THEME - SINKRON DATABASE
   Mengikuti:
   --theme-primary
   --theme-secondary
   --theme-accent
   --theme-text
   --theme-on-accent
   ========================================================== */

.order-page {
    background:
        radial-gradient(
            circle at top left,
            color-mix(in srgb, var(--theme-accent, #d58a94) 18%, transparent),
            transparent 34%
        ),
        radial-gradient(
            circle at top right,
            color-mix(in srgb, var(--theme-secondary, #FFD1DC) 28%, transparent),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            var(--theme-primary, #ffffff),
            var(--theme-secondary, #FFD1DC)
        ) !important;
    color: var(--theme-text, #000000) !important;
}

.order-page {
    color: var(--theme-text, #000000) !important;
}

/*
 * Jangan memaksa seluruh turunan memakai text_color.
 * Elemen dengan latar gelap/aksen harus tetap dapat memakai warna kontrasnya
 * sendiri (misalnya text-white atau --theme-on-accent).
 */

/* ==========================================================
   HERO
   ========================================================== */

.order-hero {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--theme-primary, #ffffff) 80%, var(--theme-secondary, #FFD1DC)),
            color-mix(in srgb, var(--theme-secondary, #FFD1DC) 85%, var(--theme-primary, #ffffff))
        ) !important;
    isolation: isolate;
}

.order-hero-bg {
    position: absolute;
    inset: -30px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(16px) saturate(1.1) brightness(.8);
    transform: scale(1.08);
    opacity: .55;
    z-index: 0;
}

.order-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--theme-primary, #ffffff) 70%, transparent),
            color-mix(in srgb, var(--theme-secondary, #FFD1DC) 76%, transparent)
        ),
        radial-gradient(
            circle at top left,
            color-mix(in srgb, var(--theme-accent, #d58a94) 24%, transparent),
            transparent 34%
        ) !important;
    backdrop-filter: blur(2px);
}

.order-hero-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 20%, color-mix(in srgb, white 30%, transparent), transparent 20%),
        radial-gradient(circle at 78% 15%, color-mix(in srgb, var(--theme-accent, #d58a94) 18%, transparent), transparent 24%),
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--theme-secondary, #FFD1DC) 22%, transparent), transparent 36%);
}

.hero-art-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

.hero-art-glow {
    position: absolute;
    inset: 12% 10%;
    border-radius: 32px;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--theme-accent, #d58a94) 34%, transparent),
        transparent 68%
    );
    filter: blur(22px);
    opacity: .9;
    z-index: 0;
}

.hero-art-3d {
    position: relative;
    z-index: 2;
    transform: rotateY(-14deg) rotateX(7deg) translateY(-2px);
    transform-style: preserve-3d;
    box-shadow:
        0 24px 40px rgba(0,0,0,.18),
        0 10px 24px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.35);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 26%, transparent);
    background: color-mix(in srgb, var(--theme-primary, #ffffff) 72%, transparent);
}

.hero-art-3d::after {
    content: "";
    position: absolute;
    inset: auto 10% -16px 10%;
    height: 26px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-accent, #d58a94) 28%, transparent);
    filter: blur(12px);
    z-index: -1;
}

.hero-art-badge,
.hero-art-plate {
    position: relative;
    z-index: 3;
}

.hero-art-plate {
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 26%, transparent);
    background: color-mix(in srgb, var(--theme-primary, #ffffff) 72%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

/* ==========================================================
   CARD / STEP
   ========================================================== */

.order-card {
    background: color-mix(in srgb, var(--theme-primary, #ffffff) 82%, var(--theme-secondary, #FFD1DC)) !important;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 28%, transparent) !important;
    border-radius: 18px;
    box-shadow: 0 16px 34px rgba(0,0,0,.12);
    color: var(--theme-text, #000000) !important;
}

.order-step-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 20%, transparent);
    background: color-mix(in srgb, var(--theme-secondary, #FFD1DC) 42%, transparent) !important;
}

.order-step-num {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--theme-accent, #d58a94) !important;
    color: var(--theme-on-accent, #000000) !important;
    font-weight: 900;
}

/* ==========================================================
   INPUT
   ========================================================== */

.order-input,
.order-page input,
.order-page textarea,
.order-page select {
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 28%, transparent) !important;
    background: color-mix(in srgb, var(--theme-primary, #ffffff) 78%, transparent) !important;
    color: var(--theme-text, #000000) !important;
    padding: 0 14px;
    outline: none;
}

.order-page textarea {
    padding-top: 12px;
    padding-bottom: 12px;
}

.order-input::placeholder,
.order-page input::placeholder,
.order-page textarea::placeholder {
    color: color-mix(in srgb, var(--theme-text, #000000) 50%, transparent) !important;
}

.order-input:focus,
.order-page input:focus,
.order-page textarea:focus,
.order-page select:focus {
    border-color: var(--theme-accent, #d58a94) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent, #d58a94) 18%, transparent) !important;
}

/* ==========================================================
   PRODUCT / METHOD
   ========================================================== */

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

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

.product-choice,
.method-choice {
    width: 100%;
    position: relative;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 24%, transparent) !important;
    background:
        radial-gradient(
            circle at top right,
            color-mix(in srgb, var(--theme-accent, #d58a94) 10%, transparent),
            transparent 44%
        ),
        color-mix(in srgb, var(--theme-primary, #ffffff) 78%, var(--theme-secondary, #FFD1DC)) !important;
    color: var(--theme-text, #000000) !important;
    border-radius: 16px;
    padding: 13px;
    transition: .18s ease;
}

/* Card produk perlu memotong footer pada sudut luar card.
   Footer sendiri tetap berbentuk kotak seperti referensi. */
.product-choice {
    overflow: hidden;
}

.product-choice:hover,
.method-choice:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--theme-accent, #d58a94) 58%, transparent) !important;
    background:
        radial-gradient(
            circle at top right,
            color-mix(in srgb, var(--theme-accent, #d58a94) 18%, transparent),
            transparent 45%
        ),
        color-mix(in srgb, var(--theme-primary, #ffffff) 72%, var(--theme-secondary, #FFD1DC)) !important;
}

.product-choice.active,
.method-choice.active {
    border-color: var(--theme-accent, #d58a94) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #d58a94) 20%, transparent) !important;
    background:
        radial-gradient(
            circle at top right,
            color-mix(in srgb, var(--theme-accent, #d58a94) 26%, transparent),
            transparent 44%
        ),
        color-mix(in srgb, var(--theme-primary, #ffffff) 66%, var(--theme-secondary, #FFD1DC)) !important;
}


/* Status proses pada bagian bawah card nominal.
   Primary dan secondary dapat memiliki warna yang sama. Karena itu footer
   dibedakan memakai sedikit warna teks: pada tema terang footer otomatis
   sedikit lebih gelap, sedangkan pada tema gelap otomatis sedikit lebih terang. */
.product-process-row {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 32px;
    margin: 12px -13px -13px;
    padding: 7px 10px;
    border-top: 1px solid color-mix(in srgb, var(--theme-text, #000000) 15%, transparent);
    border-radius: 0 !important;
    background: color-mix(
        in srgb,
        color-mix(
            in srgb,
            var(--theme-primary, #ffffff) 78%,
            var(--theme-secondary, #FFD1DC)
        ) 90%,
        var(--theme-text, #000000) 10%
    ) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent),
        0 -4px 10px color-mix(in srgb, var(--theme-text, #000000) 5%, transparent);
}

/* Label dibuat menyatu dengan footer, bukan kapsul/pill. */
.product-process-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 18px;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .02em;
    white-space: nowrap;
    background: transparent !important;
    box-shadow: none !important;
}

.product-process-badge i { font-size: 9px; }

.product-process-instant {
    color: #15803d !important;
}

.product-process-fast {
    color: #c2410c !important;
}

.product-choice.active .product-process-badge {
    box-shadow: none !important;
}

.flash-sale-choice .product-process-row {
    background: color-mix(
        in srgb,
        color-mix(in srgb, var(--theme-primary, #ffffff) 76%, rgba(239, 68, 68, .24)) 88%,
        var(--theme-text, #000000) 12%
    ) !important;
}

/* ==========================================================
   FLASH SALE FEATURED BOX
   ========================================================== */

.flash-sale-featured {
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid rgba(239, 68, 68, .48) !important;
    border-radius: 20px;
    background:
        radial-gradient(circle at 92% 5%, rgba(239,68,68,.22), transparent 34%),
        radial-gradient(circle at 5% 100%, rgba(251,191,36,.14), transparent 34%),
        color-mix(in srgb, var(--theme-primary, #ffffff) 74%, var(--theme-secondary, #FFD1DC)) !important;
    box-shadow: 0 16px 34px rgba(239, 68, 68, .10);
}

.flash-sale-featured::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 0 38%, rgba(255,255,255,.06) 38% 39%, transparent 39% 65%, rgba(255,255,255,.04) 65% 66%, transparent 66%);
}

.flash-sale-featured-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

.flash-sale-featured-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.flash-sale-featured-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(135deg, #ef4444, #f97316) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(239,68,68,.24);
    font-size: 18px;
}

.flash-sale-featured-title strong {
    display: block;
    color: var(--theme-text, #000000) !important;
    font-size: 15px;
    font-weight: 950;
}

.flash-sale-featured-title small {
    display: block;
    margin-top: 2px;
    color: color-mix(in srgb, var(--theme-text, #000000) 62%, transparent) !important;
    font-size: 11px;
}

.flash-sale-featured-count {
    flex: 0 0 auto;
    border: 1px solid rgba(239,68,68,.34) !important;
    background: rgba(239,68,68,.12) !important;
    color: #ef4444 !important;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 950;
}

.flash-sale-grid {
    position: relative;
    z-index: 1;
}

.flash-sale-choice {
    overflow: hidden;
    border-color: rgba(239,68,68,.38) !important;
}

.flash-sale-choice:hover,
.flash-sale-choice.active {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.14) !important;
}

.flash-sale-choice-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 9px;
    border-radius: 999px;
    padding: 5px 8px;
    background: linear-gradient(135deg, #ef4444, #f97316) !important;
    color: #ffffff !important;
    font-size: 9px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: .04em;
}

.flash-sale-choice-badge * {
    color: #ffffff !important;
}

.flash-sale-price-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
}

.flash-sale-old-price {
    color: color-mix(in srgb, var(--theme-text, #000000) 48%, transparent) !important;
    font-size: 10px;
    line-height: 1;
    text-decoration: line-through;
}

.flash-sale-new-price {
    margin-top: 4px;
    color: var(--theme-text, #000000) !important;
    font-size: 14px;
    line-height: 1;
    font-weight: 950;
}

.flash-sale-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.flash-sale-meta span {
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 22%, transparent) !important;
    background: color-mix(in srgb, var(--theme-primary, #ffffff) 70%, transparent) !important;
    color: color-mix(in srgb, var(--theme-text, #000000) 68%, transparent) !important;
    border-radius: 999px;
    padding: 4px 7px;
    font-size: 9px;
    font-weight: 800;
}

@media (max-width: 560px) {
    .flash-sale-featured {
        padding: 12px;
        border-radius: 17px;
    }

    .flash-sale-featured-head {
        align-items: flex-start;
    }

    .flash-sale-featured-title small {
        max-width: 190px;
    }
}

/* ==========================================================
   TAB
   ========================================================== */

.tab-button-order {
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 26%, transparent) !important;
    background: color-mix(in srgb, var(--theme-primary, #ffffff) 72%, transparent) !important;
    color: var(--theme-text, #000000) !important;
    border-radius: 999px;
    padding: 8px 14px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 800;
}

.tab-button-order.active {
    background: var(--theme-accent, #d58a94) !important;
    color: var(--theme-on-accent, #000000) !important;
    border-color: var(--theme-accent, #d58a94) !important;
}

/* ==========================================================
   BUTTON / BADGE
   ========================================================== */

.buy-button {
    width: 100%;
    border: 0;
    border-radius: 16px;
    padding: 14px 18px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--theme-accent, #d58a94) 88%, white),
        var(--theme-accent, #d58a94)
    ) !important;
    color: var(--theme-on-accent, #000000) !important;
    font-weight: 900;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--theme-accent, #d58a94) 30%, transparent);
}

.buy-button * {
    color: var(--theme-on-accent, #000000) !important;
}

.buy-button:disabled {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(.4);
    box-shadow: none;
}

.badge-soft {
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 24%, transparent) !important;
    background: color-mix(in srgb, var(--theme-accent, #d58a94) 12%, transparent) !important;
    color: var(--theme-text, #000000) !important;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 800;
}

/* ==========================================================
   HELP / CONTACT / SUMMARY
   ========================================================== */

.order-help {
    border: 1px dashed color-mix(in srgb, var(--theme-accent, #d58a94) 40%, transparent) !important;
    background: color-mix(in srgb, var(--theme-accent, #d58a94) 10%, transparent) !important;
    color: var(--theme-text, #000000) !important;
    border-radius: 16px;
    padding: 12px;
    font-size: 13px;
    line-height: 1.55;
}

.contact-card {
    background:
        radial-gradient(
            circle at top left,
            color-mix(in srgb, var(--theme-accent, #d58a94) 16%, transparent),
            transparent 42%
        ),
        color-mix(in srgb, var(--theme-primary, #ffffff) 82%, var(--theme-secondary, #FFD1DC)) !important;
}

.summary-box {
    /*
     * PC FIX:
     * Ringkasan / tombol beli dibuat sticky di sisi kanan agar tetap terlihat saat discroll.
     */
    position: sticky !important;
    top: 92px !important;
    z-index: 30;
}

.summary-desktop-wrap {
    align-self: start;
}

.desktop-checkout-card {
    display: none;
}

@media (min-width: 1024px) {
    .desktop-checkout-card {
        display: block;
    }

    .desktop-checkout-card .buy-button {
        max-width: 260px;
        flex: 0 0 260px;
    }
}

.mobile-summary-bar {
    display: none;
}

.pc-floating-buy-bar {
    display: none;
}

@media (min-width: 1024px) {
    .pc-floating-buy-bar {
        position: fixed;
        left: 50%;
        bottom: 18px;
        z-index: 80;
        width: min(760px, calc(100vw - 48px));
        transform: translate(-50%, 140%);
        transition: transform .25s ease, opacity .25s ease;
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 12px 14px;
        border-radius: 22px;
        border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 34%, transparent) !important;
        background: color-mix(in srgb, var(--theme-primary, #ffffff) 94%, var(--theme-secondary, #FFD1DC)) !important;
        backdrop-filter: blur(16px);
        box-shadow: 0 18px 46px rgba(0,0,0,.18);
        color: var(--theme-text, #000000) !important;
    }

    .pc-floating-buy-bar.show {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    .pc-floating-buy-info {
        min-width: 0;
        flex: 1 1 auto;
    }

    .pc-floating-buy-title {
        font-size: 13px;
        opacity: .72;
        font-weight: 800;
        line-height: 1.2;
    }

    .pc-floating-buy-product {
        margin-top: 2px;
        font-size: 15px;
        font-weight: 950;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pc-floating-buy-price {
        font-size: 16px;
        font-weight: 950;
        color: var(--theme-accent, #d58a94) !important;
        white-space: nowrap;
    }

    .pc-floating-buy-bar .buy-button {
        width: auto;
        min-width: 180px;
        padding: 13px 18px;
        flex: 0 0 auto;
    }

    body.has-pc-floating-buy {
        padding-bottom: 92px;
    }
}

.summary-toggle {
    display: none;
}

/* ==========================================================
   LOCKED / STEP FLOW
   ========================================================== */

.step-locked {
    opacity: .34;
    filter: saturate(.58) grayscale(.18);
    transition: opacity .24s ease, filter .24s ease;
}

/*
 * Kartu nominal dan metode tetap menerima klik supaya JavaScript bisa
 * menjelaskan langkah yang harus dilakukan. Input lain dibuat tidak aktif;
 * kliknya jatuh ke section dan ditangani sebagai notifikasi yang ramah.
 */
.step-locked .product-choice,
.step-locked .method-choice,
.step-locked .tab-button-order {
    pointer-events: auto;
}
.step-locked input,
.step-locked select,
.step-locked textarea,
.step-locked button:not(.tab-button-order):not(.product-choice):not(.method-choice) {
    pointer-events: none;
}

.step-locked .order-step-head {
    opacity: .82;
}

/* ==========================================================
   ACCORDION
   ========================================================== */

.accordion-arrow {
    display: inline-flex;
    transition: transform .2s ease;
}

.accordion-arrow.rotate-open {
    transform: rotate(180deg);
}

.summary-toggle.rotate-open {
    transform: rotate(180deg);
}

/* ==========================================================
   PAYMENT CATEGORY
   ========================================================== */

.payment-feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

@media (min-width: 768px) {
    .payment-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.payment-category-block {
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 24%, transparent) !important;
    background: color-mix(in srgb, var(--theme-primary, #ffffff) 76%, var(--theme-secondary, #FFD1DC)) !important;
    margin-top: 12px;
}

.payment-category-head {
    width: 100%;
    min-height: 50px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    color: var(--theme-text, #000000) !important;
    background: color-mix(in srgb, var(--theme-secondary, #FFD1DC) 42%, transparent) !important;
    cursor: pointer;
    text-align: left;
}

.payment-category-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.payment-category-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-accent, #d58a94) !important;
    color: var(--theme-on-accent, #000000) !important;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 32%, transparent) !important;
}

.payment-category-icon * {
    color: var(--theme-on-accent, #000000) !important;
}

.payment-category-title strong {
    display: block;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.1;
    color: var(--theme-text, #000000) !important;
}

.payment-category-title small {
    display: block;
    margin-top: 3px;
    color: var(--theme-text, #000000) !important;
    opacity: .72;
    font-size: 11px;
    line-height: 1.35;
}

.payment-category-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-text, #000000) !important;
    opacity: .75;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.payment-category-arrow {
    transition: transform .18s ease;
}

.payment-category-block.open .payment-category-arrow {
    transform: rotate(180deg);
}

.payment-category-body {
    display: none;
    padding: 12px;
}

.payment-category-block.open .payment-category-body {
    display: grid;
    gap: 10px;
}

/* ==========================================================
   PAYMENT METHOD DETAIL
   ========================================================== */

.method-choice.disabled-method,
.method-choice.method-min-disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(.35);
    border-color: color-mix(in srgb, var(--theme-accent, #d58a94) 28%, transparent) !important;
}

.method-logo {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    object-fit: contain;
    background: color-mix(in srgb, white 88%, var(--theme-primary, #ffffff)) !important;
    padding: 5px;
    flex: 0 0 auto;
}

.method-logo-qris {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 3px !important;
    background: #ffffff !important;
}

.method-logo-qris svg {
    display: block;
    width: 100%;
    height: 100%;
}

.method-logo-fallback {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-accent, #d58a94) !important;
    color: var(--theme-on-accent, #000000) !important;
    font-weight: 950;
    flex: 0 0 auto;
}

.method-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}

.method-badge-reco,
.method-badge-suggest,
.method-badge-auto {
    background: color-mix(in srgb, var(--theme-accent, #d58a94) 16%, transparent) !important;
    color: var(--theme-text, #000000) !important;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 28%, transparent) !important;
}

.method-badge-schedule {
    background: rgba(34, 197, 94, .12) !important;
    color: #15803d !important;
    border: 1px solid rgba(34, 197, 94, .24) !important;
}

.method-badge-closed {
    background: rgba(239, 68, 68, .12) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(239, 68, 68, .24) !important;
}

.method-min-text,
.method-sub-text {
    color: var(--theme-text, #000000) !important;
    opacity: .72;
}

.method-min-text {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.35;
}

.method-sub-text {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
}

/* ==========================================================
   PRODUCT PRICE IMAGE
   ========================================================== */

.product-price-img {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 7px;
    object-fit: cover;
    padding: 2px;
    background: color-mix(in srgb, var(--theme-primary, #ffffff) 72%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 22%, transparent) !important;
}

/* ==========================================================
   MOBILE SUMMARY
   ========================================================== */

@media (max-width: 1023px) {
    .summary-desktop-wrap {
        display: none;
    }

    .mobile-summary-bar {
        display: block;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 90;
        border-radius: 20px;
        border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 28%, transparent) !important;
        background: color-mix(in srgb, var(--theme-primary, #ffffff) 92%, var(--theme-secondary, #FFD1DC)) !important;
        backdrop-filter: blur(16px);
        box-shadow: 0 18px 45px rgba(0,0,0,.18);
        overflow: hidden;
        transform: translateY(120%);
        transition: .25s ease;
        color: var(--theme-text, #000000) !important;
    }

    .mobile-summary-bar.show {
        transform: translateY(0);
    }

    .mobile-summary-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
    }

    .mobile-summary-detail {
        display: none;
        padding: 0 14px 14px;
        border-top: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 22%, transparent);
    }

    .mobile-summary-bar.open .mobile-summary-detail {
        display: block;
    }

    .summary-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 12px;
        border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 26%, transparent) !important;
        background: color-mix(in srgb, var(--theme-secondary, #FFD1DC) 42%, transparent) !important;
        color: var(--theme-text, #000000) !important;
    }

    body.has-mobile-summary {
        padding-bottom: 118px;
    }
}

/* ==========================================================
   RESPONSIVE HERO
   ========================================================== */

@media (max-width: 767px) {
    .order-hero {
        min-height: 330px;
    }

    .order-hero-bg {
        inset: -20px;
        filter: blur(12px) saturate(1.1) brightness(.75);
    }

    .hero-art-3d {
        transform: rotateY(-10deg) rotateX(5deg);
    }
}

@media (max-width: 480px) {
    .payment-category-head {
        padding: 11px 12px;
    }

    .method-choice {
        padding: 11px;
        border-radius: 16px;
    }

    .method-logo,
    .method-logo-fallback {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }
}

/* ==========================================================
   WARNA TEKS SEMANTIK
   Teks informasi mengikuti text_color tanpa merusak tombol gelap.
   ========================================================== */

.order-muted-75,
.order-muted-70,
.order-muted-65,
.order-muted-60,
.order-muted-55,
.order-muted-50,
.order-muted-45,
.order-muted-40 {
    color: var(--theme-text, #000000) !important;
}
.order-muted-75 { opacity: .75; }
.order-muted-70 { opacity: .70; }
.order-muted-65 { opacity: .65; }
.order-muted-60 { opacity: .60; }
.order-muted-55 { opacity: .55; }
.order-muted-50 { opacity: .50; }
.order-muted-45 { opacity: .45; }
.order-muted-40 { opacity: .40; }

.order-page .bg-white\/5,
.order-page .bg-white\/10,
.order-page .bg-white\/15,
.order-page .bg-cyan-400\/10,
.order-page .bg-cyan-300\/10 {
    background: color-mix(in srgb, var(--theme-primary, #ffffff) 74%, transparent) !important;
}

.order-page .border-white\/10,
.order-page .border-white\/15,
.order-page .border-cyan-300\/30,
.order-page .border-cyan-400\/30 {
    border-color: color-mix(in srgb, var(--theme-accent, #d58a94) 28%, transparent) !important;
}

.order-page .hover\:bg-white\/10:hover,
.order-page .hover\:bg-white\/15:hover,
.order-page .hover\:bg-cyan-400\/20:hover {
    background: color-mix(in srgb, var(--theme-accent, #d58a94) 18%, var(--theme-primary, #ffffff)) !important;
}

.order-page .line-through {
    opacity: .6;
}

.order-page button.bg-cyan-400,
.order-page a.bg-cyan-400 {
    background: var(--theme-accent, #d58a94) !important;
    color: var(--theme-on-accent, #ffffff) !important;
}

.order-page button.bg-cyan-400 *,
.order-page a.bg-cyan-400 * {
    color: var(--theme-on-accent, #ffffff) !important;
}

/* ==========================================================
   BULK CHECKBOX THEME
   ========================================================== */
.bulk-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    font-weight: 800;
    color: var(--theme-text, #000000) !important;
}

.bulk-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bulk-toggle-box {
    width: 42px;
    height: 24px;
    border-radius: 999px;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    background: color-mix(in srgb, var(--theme-text, #000000) 12%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 35%, transparent) !important;
    transition: .2s ease;
    flex: 0 0 auto;
}

.bulk-toggle-check {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-primary, #ffffff) !important;
    color: transparent !important;
    font-size: 12px;
    font-weight: 900;
    transform: translateX(0);
    transition: .2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.14);
}

.bulk-toggle input:checked + .bulk-toggle-box {
    justify-content: flex-start;
    background: var(--theme-accent, #d58a94) !important;
    border-color: var(--theme-accent, #d58a94) !important;
}

.bulk-toggle input:checked + .bulk-toggle-box .bulk-toggle-check {
    transform: translateX(18px);
    background: var(--theme-on-accent, #000000) !important;
    color: var(--theme-accent, #d58a94) !important;
}

.bulk-toggle input:focus + .bulk-toggle-box {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent, #d58a94) 20%, transparent);
}

.bulk-toggle-text {
    color: var(--theme-text, #000000) !important;
    line-height: 1.35;
}
/* ==========================================================
   FIX HORIZONTAL SCROLL / GESER KANAN
   ========================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

.order-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

.order-page *,
.order-page *::before,
.order-page *::after {
    box-sizing: border-box;
}

.order-page img,
.order-page svg,
.order-page video,
.order-page canvas {
    max-width: 100%;
}

/* Container utama jangan sampai lebih dari layar */
.order-page .mx-auto,
.order-page .max-w-7xl,
.order-page .invoice-container,
.order-page .order-container {
    max-width: 100% !important;
}

/* Grid dan card wajib bisa mengecil */
.order-page .grid,
.order-page .product-grid,
.order-page .payment-feature-grid,
.order-page .payment-category-body {
    min-width: 0 !important;
    max-width: 100% !important;
}

.order-page .order-card,
.order-page .product-choice,
.order-page .method-choice,
.order-page .payment-category-block,
.order-page .payment-category-head,
.order-page .payment-category-title,
.order-page .payment-category-title > div,
.order-page .payment-category-count,
.order-page .summary-box,
.order-page .contact-card {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Text panjang jangan dorong layout */
.order-page .product-choice,
.order-page .method-choice,
.order-page .payment-category-head,
.order-page .invoice-row,
.order-page .order-help,
.order-page .badge-soft {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Bagian yang memang horizontal, scroll-nya hanya di dalam elemen */
.order-page .hide-scrollbar,
.order-page .overflow-x-auto {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
}

/* Tombol tab jangan bikin page ikut melebar */
.order-page .tab-button-order {
    max-width: 82vw;
    white-space: nowrap;
}

/* Payment category kanan sering bikin overflow */
.payment-category-count {
    flex-shrink: 0;
}

.payment-category-title {
    flex: 1 1 auto;
}

.payment-category-title strong,
.payment-category-title small {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile summary jangan melebar */
@media (max-width: 1023px) {
    .mobile-summary-bar {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
    }

    .mobile-summary-head,
    .mobile-summary-detail {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* HP kecil: grid produk jangan maksa 2 kolom kalau terlalu sempit */
@media (max-width: 360px) {
    .product-grid {
        grid-template-columns: 1fr !important;
    }
}




/* ===============================
   TAB NOTE SCROLL FIX
   yang gerak hanya tab, layanan diam
   =============================== */

#sectionNominal {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

#sectionNominal > .p-4 {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible !important;
}

.note-tabs-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 20%, transparent);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--theme-accent, #d58a94) 10%, transparent), transparent 38%),
        color-mix(in srgb, var(--theme-primary, #ffffff) 84%, var(--theme-secondary, #FFD1DC));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 30%, transparent),
        0 12px 24px color-mix(in srgb, var(--theme-text, #000000) 7%, transparent);
}

.note-tabs-heading-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-accent, #d58a94);
    color: var(--theme-on-accent, #ffffff);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--theme-accent, #d58a94) 24%, transparent);
}

.note-tabs-heading-icon i {
    color: inherit !important;
    font-size: 16px;
}

.note-tabs-heading-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.note-tabs-heading-copy strong {
    font-size: 14px;
    line-height: 1.2;
    color: var(--theme-text, #000000);
}

.note-tabs-heading-copy small {
    font-size: 11px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--theme-text, #000000) 66%, transparent);
}

/* wrapper tombol tab */
.note-tabs-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 10px;
    align-items: center;
    overflow: hidden;
    margin-bottom: 16px;
    padding: 8px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 18%, transparent);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--theme-primary, #ffffff) 88%, transparent),
            color-mix(in srgb, var(--theme-secondary, #FFD1DC) 28%, var(--theme-primary, #ffffff))
        );
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent);
}

/* masker tab saja */
.note-tabs-mask {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* hanya bagian ini yang boleh scroll */
.note-tabs-slider {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    padding: 2px 2px 4px;
}

/* tab item */
.note-tab-item {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 16px !important;
    border-radius: 14px !important;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.note-tab-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--theme-accent, #d58a94) 16%, transparent);
}

.note-tab-item.active {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-accent, #d58a94) 22%, transparent);
}

/* tombol kiri kanan */
.note-tabs-nav {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
    color: inherit;
    border-radius: 12px;
    font-size: 19px;
    font-weight: 900;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.note-tabs-nav:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--theme-accent, #d58a94) 12%, transparent);
}

/* produk/layanan jangan ikut horizontal */
.tab-panel,
.product-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible !important;
    transform: none !important;
}

/* sembunyikan scrollbar tab */
.note-tabs-slider::-webkit-scrollbar {
    display: none;
}

.note-tabs-slider {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

@media (max-width: 480px) {
    .note-tabs-heading {
        padding: 10px 12px;
        gap: 10px;
    }

    .note-tabs-heading-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 12px;
    }

    .note-tabs-heading-copy strong {
        font-size: 13px;
    }

    .note-tabs-heading-copy small {
        font-size: 10px;
    }

    .note-tabs-shell {
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        gap: 6px;
        padding: 7px;
    }

    .note-tabs-nav {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .note-tab-item {
        max-width: 132px;
        min-height: 40px;
        padding: 9px 14px !important;
    }
}


/* ==========================================================
   FIX PC: RINGKASAN BENAR-BENAR MELAYANG
   Sticky CSS sering gagal jika parent punya overflow hidden/auto.
   Karena itu posisi ringkasan PC dikunci via JS menjadi fixed.
   ========================================================== */
@media (min-width: 1024px) {
    .summary-desktop-wrap {
        position: relative !important;
        align-self: stretch !important;
        min-height: 280px !important;
        overflow: visible !important;
    }

    #desktopSummary {
        z-index: 120 !important;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overscroll-behavior: contain;
        will-change: top, left, width, position;
    }

    #desktopSummary.pc-summary-fixed {
        position: fixed !important;
        top: 96px !important;
        bottom: auto !important;
    }

    #desktopSummary.pc-summary-bottom {
        position: absolute !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
    }
}



/* ==========================================================
   CONTRAST & COMPONENT HARDENING
   Aman untuk kombinasi tema ekstrem, termasuk:
   primary putih, secondary putih, accent hitam, text hitam.
   ========================================================== */

/* Semua komponen dengan latar aksen wajib memakai warna kontras aksen. */
.order-page .buy-button,
.order-page .buy-button:hover,
.order-page .buy-button:focus,
.order-page .buy-button:active,
.order-page .tab-button-order.active,
.order-page .order-step-num,
.order-page .payment-category-icon,
.order-page .method-logo-fallback {
    color: var(--theme-on-accent, #ffffff) !important;
}

.order-page .buy-button *,
.order-page .tab-button-order.active *,
.order-page .order-step-num *,
.order-page .payment-category-icon *,
.order-page .method-logo-fallback * {
    color: var(--theme-on-accent, #ffffff) !important;
}

/* Tombol beli tetap terbaca saat accent_color hitam. */
.order-page .buy-button {
    min-height: 48px;
    position: relative;
    isolation: isolate;
    border: 1px solid color-mix(in srgb, var(--theme-on-accent, #ffffff) 22%, transparent) !important;
    text-shadow: none !important;
}

.order-page .buy-button:not(:disabled):hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.order-page .buy-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--theme-accent, #000000) 35%, transparent);
    outline-offset: 3px;
}

.order-page .buy-button:disabled {
    opacity: .52;
    color: var(--theme-on-accent, #ffffff) !important;
}

/* Tombol lama dari file target tetap menghormati text-white. */
.order-page .text-white {
    color: #ffffff !important;
}

/* Tombol navigasi dan tombol utilitas punya batas yang jelas. */
.order-page .note-tabs-nav,
.order-page #btnValidateId,
.order-page .summary-toggle,
.order-page #btnNote {
    color: var(--theme-text, #000000) !important;
}

.order-page .note-tabs-nav {
    border-color: color-mix(in srgb, var(--theme-accent, #000000) 28%, transparent) !important;
    background: color-mix(in srgb, var(--theme-primary, #ffffff) 88%, var(--theme-secondary, #ffffff)) !important;
}

.order-page .note-tabs-nav:hover,
.order-page #btnValidateId:hover,
.order-page .summary-toggle:hover {
    border-color: var(--theme-accent, #000000) !important;
    background: color-mix(in srgb, var(--theme-accent, #000000) 10%, var(--theme-primary, #ffffff)) !important;
}

/* Status/badge berwarna jangan ditimpa oleh text_color global. */
.order-page .bg-red-500\/20 {
    background: rgba(239, 68, 68, .16) !important;
}
.order-page .text-red-200,
.order-page .text-red-300 {
    color: #b91c1c !important;
}
.order-page .text-green-200,
.order-page .text-green-300 {
    color: #15803d !important;
}
.order-page .text-yellow-200,
.order-page .text-yellow-300 {
    color: #a16207 !important;
}

/* Loader berada di luar .order-page, jadi beri kontrak warna sendiri. */
#fullScreenLoader .bg-zinc-950,
#fullScreenLoader > div {
    background: #09090b !important;
    color: #ffffff !important;
}
#fullScreenLoader #loaderText,
#fullScreenLoader #successIcon,
#fullScreenLoader #successIcon * {
    color: #ffffff !important;
}

/* SweetAlert mengikuti tema dan tombol konfirmasinya selalu kontras. */
.swal2-popup {
    background: color-mix(in srgb, var(--theme-primary, #ffffff) 92%, var(--theme-secondary, #ffffff)) !important;
    color: var(--theme-text, #000000) !important;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #000000) 22%, transparent) !important;
}
.swal2-title,
.swal2-html-container {
    color: var(--theme-text, #000000) !important;
}
.swal2-confirm {
    background: var(--theme-accent, #000000) !important;
    color: var(--theme-on-accent, #ffffff) !important;
    box-shadow: none !important;
}
.swal2-confirm * {
    color: var(--theme-on-accent, #ffffff) !important;
}
.swal2-cancel,
.swal2-deny {
    color: var(--theme-text, #000000) !important;
}

/* Fokus keyboard terlihat pada seluruh tombol pilihan. */
.order-page button:focus-visible,
.order-page a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--theme-accent, #000000) 32%, transparent);
    outline-offset: 2px;
}


/* ==========================================================
   TARGET FORM HOST
   Semua form dari /id/target mengikuti tampilan sistem.php.
   Override ini sengaja lebih spesifik dan memakai !important
   agar CSS lama yang tertanam di file target tidak membuat
   kartu putih di dalam order card.
   ========================================================== */
.system-target-host {
    width: 100%;
    min-width: 0;
    color: var(--theme-text, #000000) !important;
}

.order-page .order-card#section-input .system-target-host .form-target-wrap {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--theme-text, #000000) !important;
}

.order-page .order-card#section-input .system-target-host .form-target-head {
    margin: 0 0 14px !important;
}

.order-page .order-card#section-input .system-target-host .form-target-eyebrow {
    color: var(--theme-accent, #d58a94) !important;
}

.order-page .order-card#section-input .system-target-host .form-target-title,
.order-page .order-card#section-input .system-target-host .form-target-field,
.order-page .order-card#section-input .system-target-host .form-target-field > span,
.order-page .order-card#section-input .system-target-host label,
.order-page .order-card#section-input .system-target-host small {
    color: var(--theme-text, #000000) !important;
}

.order-page .order-card#section-input .system-target-host small {
    opacity: .62 !important;
}

.order-page .order-card#section-input .system-target-host .form-target-badge {
    border-color: color-mix(in srgb, var(--theme-accent, #d58a94) 52%, transparent) !important;
    background: var(--theme-accent, #d58a94) !important;
    color: var(--theme-on-accent, #ffffff) !important;
    box-shadow: none !important;
}

.order-page .order-card#section-input .system-target-host .form-target-control,
.order-page .order-card#section-input .system-target-host .order-input,
.order-page .order-card#section-input .system-target-host input:not([type="hidden"]),
.order-page .order-card#section-input .system-target-host select,
.order-page .order-card#section-input .system-target-host textarea {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 34%, transparent) !important;
    background: color-mix(in srgb, var(--theme-text, #000000) 10%, transparent) !important;
    color: var(--theme-text, #000000) !important;
    box-shadow: none !important;
    outline: none !important;
}

.order-page .order-card#section-input .system-target-host input::placeholder,
.order-page .order-card#section-input .system-target-host textarea::placeholder {
    color: color-mix(in srgb, var(--theme-text, #000000) 54%, transparent) !important;
    opacity: 1 !important;
}

.order-page .order-card#section-input .system-target-host input:focus,
.order-page .order-card#section-input .system-target-host select:focus,
.order-page .order-card#section-input .system-target-host textarea:focus {
    border-color: var(--theme-accent, #d58a94) !important;
    background: color-mix(in srgb, var(--theme-text, #000000) 13%, transparent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent, #d58a94) 18%, transparent) !important;
}

.order-page .order-card#section-input .system-target-host select option {
    background: var(--theme-primary, #ffffff) !important;
    color: var(--theme-text, #000000) !important;
}

.order-page .order-card#section-input .system-target-host .form-target-help-btn,
.order-page .order-card#section-input .system-target-host button.btn-outline-primary,
.order-page .order-card#section-input .system-target-host button.bg-\[\#0D47A1\] {
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 52%, transparent) !important;
    background: var(--theme-accent, #d58a94) !important;
    color: var(--theme-on-accent, #ffffff) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-accent, #d58a94) 18%, transparent) !important;
}

.order-page .order-card#section-input .system-target-host .form-target-help-btn *,
.order-page .order-card#section-input .system-target-host button.btn-outline-primary *,
.order-page .order-card#section-input .system-target-host button.bg-\[\#0D47A1\] * {
    color: var(--theme-on-accent, #ffffff) !important;
}

/* Form target lama yang masih menggunakan kelas murky/Tailwind. */
.order-page .order-card#section-input .system-target-host .bg-murky-200,
.order-page .order-card#section-input .system-target-host .focus\:bg-white:focus,
.order-page .order-card#section-input .system-target-host .bg-white {
    background: color-mix(in srgb, var(--theme-text, #000000) 10%, transparent) !important;
}

.order-page .order-card#section-input .system-target-host .text-murky-800,
.order-page .order-card#section-input .system-target-host .placeholder-murky-800,
.order-page .order-card#section-input .system-target-host .text-white {
    color: var(--theme-text, #000000) !important;
}

@supports not (background: color-mix(in srgb, #000 10%, transparent)) {
    .order-page .order-card#section-input .system-target-host .form-target-control,
    .order-page .order-card#section-input .system-target-host .order-input,
    .order-page .order-card#section-input .system-target-host input:not([type="hidden"]),
    .order-page .order-card#section-input .system-target-host select,
    .order-page .order-card#section-input .system-target-host textarea {
        background: transparent !important;
        border-color: var(--theme-accent, #d58a94) !important;
    }
}



/* ==========================================================
   CPX PREMIUM ENTRY TRANSITION — halaman sistem produk
   Prefix unik: cpx-entry- (tidak mengubah komponen order lama)
   ========================================================== */
html.cpx-entry-lock,
html.cpx-entry-lock body {
    overflow: hidden !important;
}

.cpx-entry-transition {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    background:
        radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--theme-accent, #d58a94) 25%, transparent), transparent 34%),
        radial-gradient(circle at 82% 86%, color-mix(in srgb, var(--theme-secondary, #FFD1DC) 42%, transparent), transparent 38%),
        color-mix(in srgb, var(--theme-primary, #ffffff) 72%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(1.12);
    backdrop-filter: blur(24px) saturate(1.12);
    transition:
        opacity .52s cubic-bezier(.22,.72,.24,1),
        visibility .52s ease,
        -webkit-backdrop-filter .52s ease,
        backdrop-filter .52s ease;
}

.cpx-entry-transition::before,
.cpx-entry-transition::after {
    content: "";
    position: absolute;
    width: min(62vw, 720px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .28;
    pointer-events: none;
}

.cpx-entry-transition::before {
    left: -24vw;
    top: -30vw;
    background: var(--theme-accent, #d58a94);
    animation: cpxEntryAura 4.8s ease-in-out infinite alternate;
}

.cpx-entry-transition::after {
    right: -26vw;
    bottom: -34vw;
    background: var(--theme-secondary, #FFD1DC);
    animation: cpxEntryAura 5.6s ease-in-out infinite alternate-reverse;
}

.cpx-entry-center {
    position: relative;
    z-index: 2;
    width: min(88vw, 360px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: translateY(18px) scale(.96);
    filter: blur(8px);
    transition:
        opacity .56s cubic-bezier(.16,1,.3,1),
        transform .56s cubic-bezier(.16,1,.3,1),
        filter .56s ease;
}

.cpx-entry-transition.cpx-entry-ready .cpx-entry-center {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.cpx-entry-logo-shell {
    position: relative;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 29px;
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--theme-primary, #fff) 92%, white),
            color-mix(in srgb, var(--theme-secondary, #FFD1DC) 72%, var(--theme-primary, #fff))
        );
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 42%, transparent);
    box-shadow:
        0 26px 70px rgba(0,0,0,.18),
        0 0 0 10px color-mix(in srgb, var(--theme-accent, #d58a94) 9%, transparent),
        inset 0 1px 0 rgba(255,255,255,.68);
    overflow: hidden;
}

.cpx-entry-logo-shell::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(
        from 0deg,
        transparent 0 28%,
        color-mix(in srgb, var(--theme-accent, #d58a94) 86%, white) 38%,
        transparent 48% 100%
    );
    animation: cpxEntryOrbit 1.9s linear infinite;
    opacity: .72;
}

.cpx-entry-logo-shell::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 27px;
    background: color-mix(in srgb, var(--theme-primary, #fff) 88%, var(--theme-secondary, #FFD1DC));
}

.cpx-entry-logo {
    position: relative;
    z-index: 2;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    object-fit: contain;
    filter: drop-shadow(0 9px 18px rgba(0,0,0,.14));
}

.cpx-entry-title {
    margin-top: 20px;
    color: var(--theme-text, #111827) !important;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 950;
    letter-spacing: -.02em;
}

.cpx-entry-status {
    margin-top: 7px;
    color: var(--theme-text, #111827) !important;
    opacity: .62;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .02em;
}

.cpx-entry-line {
    width: 168px;
    height: 4px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-text, #111827) 10%, transparent);
}

.cpx-entry-line > span {
    display: block;
    width: 44%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,
        transparent,
        var(--theme-accent, #d58a94),
        color-mix(in srgb, var(--theme-accent, #d58a94) 58%, white),
        transparent
    );
    animation: cpxEntryLine 1.15s cubic-bezier(.4,0,.2,1) infinite;
}

.cpx-entry-transition.cpx-entry-exit {
    opacity: 0;
    visibility: hidden;
    -webkit-backdrop-filter: blur(5px) saturate(1);
    backdrop-filter: blur(5px) saturate(1);
    pointer-events: none;
}

.cpx-entry-transition.cpx-entry-exit .cpx-entry-center {
    opacity: 0;
    transform: translateY(-16px) scale(1.045);
    filter: blur(10px);
}

@keyframes cpxEntryOrbit {
    to { transform: rotate(360deg); }
}

@keyframes cpxEntryLine {
    0% { transform: translateX(-135%); }
    100% { transform: translateX(330%); }
}

@keyframes cpxEntryAura {
    from { transform: translate3d(0,0,0) scale(.92); }
    to { transform: translate3d(5vw,3vw,0) scale(1.08); }
}

@media (max-width: 520px) {
    .cpx-entry-logo-shell {
        width: 82px;
        height: 82px;
        border-radius: 25px;
    }

    .cpx-entry-logo-shell::after {
        border-radius: 23px;
    }

    .cpx-entry-logo {
        width: 56px;
        height: 56px;
        border-radius: 17px;
    }
}


/* ==========================================================
   AJAX NOMINAL PER KATEGORI
   Kartu masuk dengan pop ringan tanpa rotate. Hanya kategori yang
   sedang dibuka yang dirender sehingga initial DOM jauh lebih kecil.
   ========================================================== */
.nominal-ajax-state {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px dashed color-mix(in srgb, var(--theme-border) 55%, transparent);
    border-radius: 14px;
    color: var(--theme-muted);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    padding: 18px;
}

.nominal-ajax-state.hidden {
    display: none;
}

.nominal-ajax-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 999px;
    background: var(--theme-primary);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-primary) 35%, transparent);
    animation: nominalAjaxPulse 1s ease-in-out infinite;
}

.ajax-nominal-panel[data-loading="0"] .nominal-ajax-dot {
    animation: none;
    opacity: .55;
}

.product-choice.nominal-pop-in {
    opacity: 0;
    translate: 0 12px;
    scale: .97;
    animation: nominalAjaxPop .42s cubic-bezier(.2,.8,.2,1) forwards;
    will-change: opacity, translate, scale;
}

@keyframes nominalAjaxPulse {
    0%, 100% { opacity: .45; box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-primary) 28%, transparent); }
    50% { opacity: 1; box-shadow: 0 0 0 7px transparent; }
}

@keyframes nominalAjaxPop {
    0% { opacity: 0; translate: 0 12px; scale: .97; }
    70% { opacity: 1; translate: 0 -2px; scale: 1.008; }
    100% { opacity: 1; translate: 0 0; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cpx-entry-transition *,
    .cpx-entry-transition *::before,
    .cpx-entry-transition *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .18s !important;
    }
}


/* ==========================================================
   HERO GAME 3D + METEOR MOTION
   Ringan: hanya transform, opacity, filter, dan box-shadow.
   ========================================================== */

.order-hero {
    --hero-meteor-angle: 34deg;
}

.hero-meteor-field {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
    contain: layout paint;
}

/* Garis meteor utama */
.hero-meteor {
    position: absolute;
    left: -260px;
    top: -90px;
    width: 220px;
    height: 3px;
    border-radius: 999px;
    opacity: 0;
    transform-origin: right center;
    transform: translate3d(0, 0, 0) rotate(var(--hero-meteor-angle));
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--theme-accent, #d58a94) 12%, transparent) 28%,
            color-mix(in srgb, var(--theme-accent, #d58a94) 72%, white) 72%,
            #ffffff 100%
        );
    filter:
        drop-shadow(0 0 7px color-mix(in srgb, var(--theme-accent, #d58a94) 66%, transparent))
        drop-shadow(0 0 16px color-mix(in srgb, white 46%, transparent));
    will-change: transform, opacity;
}

.hero-meteor::before {
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    transform: translateY(-50%);
    background:
        radial-gradient(
            circle at 34% 30%,
            #ffffff 0 18%,
            color-mix(in srgb, var(--theme-accent, #d58a94) 68%, white) 38%,
            var(--theme-accent, #d58a94) 72%,
            transparent 74%
        );
    box-shadow:
        0 0 10px color-mix(in srgb, white 80%, transparent),
        0 0 24px color-mix(in srgb, var(--theme-accent, #d58a94) 58%, transparent);
}

.hero-meteor::after {
    content: "";
    position: absolute;
    right: 7px;
    top: 50%;
    width: 42px;
    height: 13px;
    border-radius: 999px;
    transform: translateY(-50%);
    background: radial-gradient(
        ellipse at right,
        color-mix(in srgb, white 62%, transparent),
        transparent 70%
    );
    filter: blur(3px);
}

.hero-meteor-main {
    animation: heroMeteorFall 7.4s cubic-bezier(.18,.72,.22,1) infinite;
}

.hero-meteor-mid {
    top: -120px;
    width: 178px;
    height: 2.5px;
    opacity: 0;
    filter:
        drop-shadow(0 0 6px color-mix(in srgb, var(--theme-accent, #d58a94) 60%, transparent))
        drop-shadow(0 0 13px color-mix(in srgb, white 38%, transparent));
    animation: heroMeteorFall 7.4s cubic-bezier(.18,.72,.22,1) infinite;
    animation-delay: .72s;
}

.hero-meteor-small {
    top: -150px;
    width: 138px;
    height: 2px;
    opacity: 0;
    filter:
        drop-shadow(0 0 5px color-mix(in srgb, var(--theme-accent, #d58a94) 56%, transparent))
        drop-shadow(0 0 11px color-mix(in srgb, white 35%, transparent));
    animation: heroMeteorFallSmall 7.4s cubic-bezier(.2,.74,.24,1) infinite;
    animation-delay: 1.15s;
}

.hero-meteor-small-2 {
    top: -112px;
    width: 116px;
    height: 2px;
    opacity: 0;
    filter:
        drop-shadow(0 0 4px color-mix(in srgb, var(--theme-accent, #d58a94) 52%, transparent))
        drop-shadow(0 0 9px color-mix(in srgb, white 30%, transparent));
    animation: heroMeteorFallSmall 7.4s cubic-bezier(.2,.74,.24,1) infinite;
    animation-delay: 2.2s;
}

.hero-meteor-tiny {
    top: -170px;
    width: 84px;
    height: 1.5px;
    opacity: 0;
    filter:
        drop-shadow(0 0 4px color-mix(in srgb, var(--theme-accent, #d58a94) 46%, transparent))
        drop-shadow(0 0 8px color-mix(in srgb, white 28%, transparent));
    animation: heroMeteorFallSmall 7.4s cubic-bezier(.2,.74,.24,1) infinite;
    animation-delay: 3.05s;
}

.hero-meteor-small::before,
.hero-meteor-small-2::before,
.hero-meteor-tiny::before,
.hero-meteor-mid::before {
    width: 8px;
    height: 8px;
}

.hero-meteor-tiny::before {
    width: 6px;
    height: 6px;
}

/* Debu cahaya kecil mengikuti meteor. */
.hero-meteor-spark {
    position: absolute;
    left: 4%;
    top: 7%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    opacity: 0;
    background: #ffffff;
    box-shadow:
        0 0 7px #ffffff,
        0 0 13px color-mix(in srgb, var(--theme-accent, #d58a94) 70%, transparent);
    will-change: transform, opacity;
}

.hero-meteor-spark.is-1 {
    animation: heroMeteorSparkOne 7.4s ease-in-out infinite;
}

.hero-meteor-spark.is-2 {
    width: 3px;
    height: 3px;
    animation: heroMeteorSparkTwo 7.4s ease-in-out infinite;
    animation-delay: .55s;
}

.hero-meteor-spark.is-3 {
    width: 3px;
    height: 3px;
    animation: heroMeteorSparkOne 7.4s ease-in-out infinite;
    animation-delay: 1.4s;
}

.hero-meteor-spark.is-4 {
    width: 2.5px;
    height: 2.5px;
    animation: heroMeteorSparkTwo 7.4s ease-in-out infinite;
    animation-delay: 2.4s;
}

/* Wrapper 3D agar gambar punya sisi dan kedalaman nyata. */
.hero-art-card3d {
    position: relative;
    z-index: 4;
    display: inline-block;
    border-radius: 26px;
    transform-style: preserve-3d;
    perspective: 1100px;
    animation: heroGameFloat3d 6.8s cubic-bezier(.45,.05,.2,1) infinite;
    will-change: transform;
}

.hero-art-card3d::before {
    content: "";
    position: absolute;
    inset: 8px -11px -11px 10px;
    z-index: -1;
    border-radius: 26px;
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--theme-accent, #d58a94) 72%, #111827),
            color-mix(in srgb, var(--theme-secondary, #FFD1DC) 60%, #111827)
        );
    transform: translateZ(-18px);
    box-shadow: 0 24px 34px rgba(0,0,0,.20);
    opacity: .78;
}

.hero-art-card3d::after {
    content: "";
    position: absolute;
    inset: 7% 8% -20px 8%;
    z-index: -2;
    border-radius: 50%;
    background: color-mix(in srgb, var(--theme-accent, #d58a94) 34%, transparent);
    filter: blur(15px);
    transform: translateZ(-32px);
    opacity: .8;
}

.hero-art-3d {
    display: block;
    position: relative;
    z-index: 2;
    transform: translateZ(24px) rotateY(-13deg) rotateX(6deg);
    transform-style: preserve-3d;
    border: 1px solid color-mix(in srgb, white 44%, var(--theme-accent, #d58a94));
    box-shadow:
        0 26px 44px rgba(0,0,0,.22),
        0 11px 22px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.52),
        inset -8px -9px 16px rgba(0,0,0,.08);
    backface-visibility: hidden;
}

/* Kilau tipis di depan kartu, tidak menutupi gambar. */
.hero-art-card3d-shine {
    position: absolute;
    inset: 1px;
    z-index: 5;
    overflow: hidden;
    border-radius: 25px;
    pointer-events: none;
    transform: translateZ(30px) rotateY(-13deg) rotateX(6deg);
}

.hero-art-card3d-shine::before {
    content: "";
    position: absolute;
    top: -24%;
    bottom: -24%;
    left: -48%;
    width: 28%;
    transform: skewX(-17deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.30),
        transparent
    );
    animation: heroCardShine 6.8s ease-in-out infinite;
}

@keyframes heroMeteorFall {
    0%, 7% {
        opacity: 0;
        transform: translate3d(-8vw, -7vh, 0) rotate(var(--hero-meteor-angle)) scale(.76);
    }
    11% {
        opacity: .18;
    }
    18% {
        opacity: 1;
        transform: translate3d(15vw, 9vh, 0) rotate(var(--hero-meteor-angle)) scale(.94);
    }
    48% {
        opacity: 1;
        transform: translate3d(74vw, 58vh, 0) rotate(var(--hero-meteor-angle)) scale(1.04);
    }
    64% {
        opacity: .82;
        transform: translate3d(112vw, 88vh, 0) rotate(var(--hero-meteor-angle)) scale(.96);
    }
    70%, 100% {
        opacity: 0;
        transform: translate3d(132vw, 104vh, 0) rotate(var(--hero-meteor-angle)) scale(.82);
    }
}

@keyframes heroMeteorFallSmall {
    0%, 23% {
        opacity: 0;
        transform: translate3d(-5vw, -4vh, 0) rotate(var(--hero-meteor-angle)) scale(.68);
    }
    28% {
        opacity: .72;
    }
    47% {
        opacity: .88;
        transform: translate3d(58vw, 45vh, 0) rotate(var(--hero-meteor-angle)) scale(.92);
    }
    65% {
        opacity: .32;
        transform: translate3d(110vw, 88vh, 0) rotate(var(--hero-meteor-angle)) scale(.8);
    }
    71%, 100% {
        opacity: 0;
        transform: translate3d(130vw, 102vh, 0) rotate(var(--hero-meteor-angle)) scale(.68);
    }
}

@keyframes heroMeteorSparkOne {
    0%, 14%, 70%, 100% {
        opacity: 0;
        transform: translate3d(0,0,0) scale(.4);
    }
    24% {
        opacity: .8;
        transform: translate3d(25vw,18vh,0) scale(1);
    }
    49% {
        opacity: .58;
        transform: translate3d(73vw,60vh,0) scale(.76);
    }
    64% {
        opacity: 0;
        transform: translate3d(108vw,88vh,0) scale(.3);
    }
}

@keyframes heroMeteorSparkTwo {
    0%, 23%, 75%, 100% {
        opacity: 0;
        transform: translate3d(0,0,0) scale(.35);
    }
    32% {
        opacity: .66;
        transform: translate3d(32vw,25vh,0) scale(.9);
    }
    55% {
        opacity: .4;
        transform: translate3d(82vw,66vh,0) scale(.62);
    }
    69% {
        opacity: 0;
        transform: translate3d(114vw,92vh,0) scale(.25);
    }
}

@keyframes heroGameFloat3d {
    0%, 100% {
        transform: translate3d(0,0,0) rotateY(-3deg) rotateX(1deg);
    }
    28% {
        transform: translate3d(0,-5px,0) rotateY(2deg) rotateX(-1deg);
    }
    56% {
        transform: translate3d(0,-9px,0) rotateY(5deg) rotateX(-2deg);
    }
    78% {
        transform: translate3d(0,-3px,0) rotateY(0deg) rotateX(1deg);
    }
}

@keyframes heroCardShine {
    0%, 17%, 100% {
        left: -48%;
        opacity: 0;
    }
    25% {
        opacity: .2;
    }
    43% {
        left: 126%;
        opacity: .34;
    }
    49% {
        left: 126%;
        opacity: 0;
    }
}

@media (max-width: 767px) {
    .hero-meteor {
        width: 150px;
        left: -185px;
    }

    .hero-meteor-small {
        width: 100px;
    }

    .hero-art-card3d {
        border-radius: 22px;
    }

    .hero-art-card3d::before {
        inset: 7px -8px -9px 8px;
        border-radius: 22px;
    }

    .hero-art-card3d-shine {
        border-radius: 21px;
    }

    .hero-art-3d {
        transform: translateZ(18px) rotateY(-10deg) rotateX(5deg);
    }

    .hero-art-card3d-shine {
        transform: translateZ(22px) rotateY(-10deg) rotateX(5deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-meteor-field {
        display: none !important;
    }

    .hero-art-card3d,
    .hero-art-card3d-shine::before {
        animation: none !important;
    }
}


/* ==========================================================
   PLAYSTORE REVIEW STYLE
   ========================================================== */
.play-review-card {
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 22%, transparent);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--theme-accent, #d58a94) 8%, transparent), transparent 36%),
        color-mix(in srgb, var(--theme-primary, #ffffff) 78%, var(--theme-secondary, #FFD1DC));
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 16px 34px rgba(0,0,0,.10);
}

.play-review-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.play-review-eyebrow {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--theme-accent, #d58a94);
}

.play-review-title {
    margin-top: 4px;
    font-size: 18px;
    line-height: 1.15;
    font-weight: 950;
    color: var(--theme-text, #000000);
}

.play-review-subtitle {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    opacity: .68;
    color: var(--theme-text, #000000);
}

.play-review-trust {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    color: var(--theme-text, #000000);
    background: color-mix(in srgb, var(--theme-primary, #ffffff) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 20%, transparent);
}

.play-review-trust-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}

.play-review-summary {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
}

.play-review-score {
    padding: 14px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--theme-primary, #ffffff) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 18%, transparent);
}

.play-review-score-number {
    font-size: 42px;
    line-height: 1;
    font-weight: 1000;
    letter-spacing: -.04em;
    color: var(--theme-text, #000000);
}

.play-review-stars {
    display: inline-flex;
    gap: 2px;
    margin-top: 8px;
    color: rgba(161,161,170,.55);
    font-size: 17px;
    line-height: 1;
}

.play-review-stars.small {
    margin-top: 0;
    font-size: 14px;
}

.play-review-stars .is-on {
    color: #f59e0b;
    text-shadow: 0 0 8px rgba(245,158,11,.16);
}

.play-review-meta {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 800;
    opacity: .68;
    color: var(--theme-text, #000000);
}

.play-review-bars {
    display: grid;
    gap: 8px;
}

.play-review-bar-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 34px;
    gap: 8px;
    align-items: center;
}

.play-review-bar-label,
.play-review-bar-count {
    font-size: 12px;
    font-weight: 900;
    color: var(--theme-text, #000000);
}

.play-review-bar-count {
    text-align: right;
    opacity: .68;
}

.play-review-bar-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--theme-text, #000000) 10%, transparent);
}

.play-review-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f59e0b, color-mix(in srgb, var(--theme-accent, #d58a94) 70%, #f59e0b));
}

.play-review-list {
    display: grid;
    gap: 12px;
}

.play-review-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 13px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 16%, transparent);
    background: color-mix(in srgb, var(--theme-primary, #ffffff) 76%, transparent);
}

.play-review-avatar {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 950;
    color: var(--theme-on-accent, #ffffff);
    background: linear-gradient(135deg, var(--theme-accent, #d58a94), color-mix(in srgb, var(--theme-accent, #d58a94) 74%, #111827));
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.play-review-content { min-width: 0; }

.play-review-user-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.play-review-user-main {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.play-review-user {
    font-size: 13px;
    font-weight: 950;
    color: var(--theme-text, #000000);
}

.play-review-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    color: #166534;
    background: rgba(34,197,94,.12);
    border: 1px solid rgba(34,197,94,.20);
}

.play-review-date {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    opacity: .58;
    color: var(--theme-text, #000000);
}

.play-review-stars-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.play-review-rating-text {
    font-size: 11px;
    font-weight: 900;
    opacity: .58;
    color: var(--theme-text, #000000);
}

.play-review-comment {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.65;
    color: var(--theme-text, #000000);
    opacity: .8;
}

.play-review-empty {
    border-radius: 16px;
    padding: 14px;
    font-size: 13px;
    font-weight: 800;
    opacity: .7;
    color: var(--theme-text, #000000);
    background: color-mix(in srgb, var(--theme-primary, #ffffff) 76%, transparent);
}

.play-review-more {
    display: block;
    margin-top: 12px;
    text-align: center;
    padding: 12px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 900;
    color: var(--theme-text, #000000);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 20%, transparent);
    background: color-mix(in srgb, var(--theme-primary, #ffffff) 76%, transparent);
}

.play-review-more:hover {
    background: color-mix(in srgb, var(--theme-accent, #d58a94) 10%, var(--theme-primary, #ffffff));
}

@media (max-width: 767px) {
    .play-review-card {
        padding: 14px;
        border-radius: 20px;
    }

    .play-review-head,
    .play-review-summary {
        display: grid;
        grid-template-columns: 1fr;
    }

    .play-review-trust { width: fit-content; }
    .play-review-score-number { font-size: 36px; }

    .play-review-item {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .play-review-avatar {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }
}



/* ===== PRODUCT LAYOUT V45 ===== */
.order-page{background:linear-gradient(180deg,color-mix(in srgb,var(--theme-primary) 92%,var(--theme-secondary)),color-mix(in srgb,var(--theme-secondary) 82%,var(--theme-primary)))}
.order-page .order-hero{min-height:300px;margin-bottom:112px;overflow:visible;border-bottom:1px solid color-mix(in srgb,var(--theme-accent) 22%,transparent);box-shadow:0 18px 50px rgba(0,0,0,.12)}
.order-page .order-hero-bg{background-size:cover!important;background-position:center!important;filter:saturate(1.04) contrast(1.02)}
.order-page .order-hero-overlay{background:linear-gradient(180deg,color-mix(in srgb,var(--theme-secondary) 8%,transparent),color-mix(in srgb,var(--theme-secondary) 55%,transparent))!important}
.order-page .order-hero>.container{min-height:300px!important;align-items:flex-end!important;padding-bottom:0!important;transform:translateY(92px)}
.order-page .order-hero>.container>.flex{width:100%;min-height:150px;align-items:center!important;padding:20px 24px;border:1px solid color-mix(in srgb,var(--theme-accent) 20%,transparent);border-radius:22px;background:radial-gradient(circle at 90% 0%,color-mix(in srgb,var(--theme-accent) 9%,transparent),transparent 36%),color-mix(in srgb,var(--theme-primary) 88%,var(--theme-secondary));box-shadow:0 24px 58px rgba(0,0,0,.20),inset 0 1px 0 color-mix(in srgb,white 30%,transparent);backdrop-filter:blur(18px)}
.order-page .hero-art-wrap{flex:0 0 auto;margin-top:-78px}
.order-page .hero-art-card3d{width:176px;height:176px;border-radius:24px;transform:rotateY(-7deg) rotateX(3deg)}
.order-page .hero-art-3d{width:100%!important;height:100%!important;border-radius:24px!important}
.order-page .hero-art-badge{padding:5px 9px!important;font-size:10px!important}
.order-product-benefits{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.order-product-benefits span{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:850;color:color-mix(in srgb,var(--theme-text) 78%,transparent)!important}
.order-product-benefits b{display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;border-radius:9px;color:var(--theme-on-accent)!important;background:var(--theme-accent);box-shadow:0 8px 18px color-mix(in srgb,var(--theme-accent) 24%,transparent)}
.order-mobile-tabs{display:none}
#form-order>.container{grid-template-columns:minmax(0,1.92fr) minmax(300px,.88fr)!important;grid-template-areas:"transaction sideinfo" "transaction summary"!important;align-items:start;gap:24px!important;padding-top:28px!important}
#form-order>.container>main{grid-area:transaction;min-width:0}
#form-order>.container>aside.space-y-5{grid-area:sideinfo;min-width:0;display:flex;flex-direction:column;gap:16px}
#form-order>.container>aside.space-y-5>:nth-child(3){order:1}
#form-order>.container>aside.space-y-5>:nth-child(1){order:2}
#form-order>.container>aside.space-y-5>:nth-child(2){order:3}
#form-order>.container>.summary-desktop-wrap{grid-area:summary;min-width:0;align-self:start;position:sticky!important;top:88px!important}
#pcFloatingBuyBar,#sectionCheckoutDesktop{display:none!important}
#form-order main>.order-card{overflow:hidden;border-radius:16px!important;border:1px solid color-mix(in srgb,var(--theme-text) 10%,transparent)!important;background:color-mix(in srgb,var(--theme-primary) 82%,var(--theme-secondary))!important;box-shadow:0 18px 42px rgba(0,0,0,.14),inset 0 1px 0 color-mix(in srgb,white 18%,transparent)!important}
#form-order .order-step-head{min-height:44px;padding:0!important;gap:0!important;overflow:hidden;border-bottom:1px solid color-mix(in srgb,var(--theme-text) 8%,transparent);background:color-mix(in srgb,var(--theme-secondary) 84%,var(--theme-primary))!important}
#form-order .order-step-head strong{padding:0 14px;font-size:13px;font-weight:900}
#form-order .order-step-num{flex:0 0 44px;width:44px!important;height:44px!important;border-radius:0!important;font-size:14px!important;background:var(--theme-accent)!important;color:var(--theme-on-accent)!important;box-shadow:none!important}
#form-order .order-input{min-height:42px;border-radius:10px!important}
#form-order .product-grid{gap:12px!important}
#form-order .product-choice,#form-order .method-choice{border-radius:13px!important}
#form-order>.container>aside .order-card,#form-order>.container>aside .play-review-card,#form-order>.container>.summary-desktop-wrap .order-card{border-radius:16px!important;border:1px solid color-mix(in srgb,var(--theme-text) 10%,transparent)!important;background:color-mix(in srgb,var(--theme-primary) 80%,var(--theme-secondary))!important;box-shadow:0 18px 42px rgba(0,0,0,.14)!important}
#form-order>.container>aside .play-review-card{padding:16px!important}
#form-order>.container>aside .play-review-subtitle,#form-order>.container>aside .play-review-list,#form-order>.container>aside .play-review-more{display:none!important}
#form-order>.container>aside .play-review-summary{margin-bottom:0!important}
#form-order>.container>aside .play-review-score-number{font-size:44px!important}
@media(max-width:1023px){
.order-page .order-hero{min-height:230px;margin-bottom:104px}.order-page .order-hero>.container{min-height:230px!important;transform:translateY(88px)}.order-page .order-hero>.container>.flex{min-height:138px;padding:15px 16px;border-radius:18px}.order-page .hero-art-wrap{margin-top:-54px}.order-page .hero-art-card3d{width:122px;height:122px;border-radius:20px}.order-page .hero-art-3d{border-radius:20px!important}
#form-order>.container{display:block!important;padding-top:18px!important}#form-order>.container>aside.space-y-5,#form-order>.container>.summary-desktop-wrap{display:none!important}
.order-mobile-tabs{display:flex;width:min(calc(100% - 28px),1180px);margin:0 auto 14px;padding:4px;gap:4px;border-radius:13px;background:color-mix(in srgb,var(--theme-secondary) 84%,var(--theme-primary));border:1px solid color-mix(in srgb,var(--theme-text) 8%,transparent)}
.order-mobile-tabs button{flex:1;min-height:38px;border:0;border-radius:10px;background:transparent;color:color-mix(in srgb,var(--theme-text) 62%,transparent);font-size:12px;font-weight:900}.order-mobile-tabs button.is-active{background:var(--theme-accent);color:var(--theme-on-accent);box-shadow:0 8px 20px color-mix(in srgb,var(--theme-accent) 22%,transparent)} }
@media(max-width:640px){
.order-page .order-hero{min-height:178px;margin-bottom:112px}.order-page .order-hero>.container{min-height:178px!important;transform:translateY(96px);padding-left:14px!important;padding-right:14px!important}.order-page .order-hero>.container>.flex{min-height:142px;padding:12px;align-items:center!important}.order-page .order-hero>.container>.flex>.flex{width:100%;align-items:center!important;gap:12px!important}.order-page .hero-art-wrap{margin-top:-44px}.order-page .hero-art-card3d{width:96px;height:96px;border-radius:17px;transform:none!important}.order-page .hero-art-3d{border-radius:17px!important}.order-page .hero-art-badge{display:none!important}.order-page .order-hero h1{font-size:17px!important;line-height:1.2}.order-page .order-hero h1+p{margin-top:4px!important;font-size:11px!important}
.order-product-benefits{width:calc(100vw - 54px);margin-top:10px;gap:8px;transform:translateX(-108px)}.order-product-benefits span{flex:1 1 28%;justify-content:center;gap:4px;min-width:0;font-size:9px;text-align:center;white-space:nowrap}.order-product-benefits b{width:20px;height:20px;border-radius:7px;font-size:9px}
#form-order>.container{padding-left:14px!important;padding-right:14px!important;padding-bottom:150px!important}#form-order main{gap:14px!important}#form-order main>.order-card{border-radius:14px!important}#form-order .order-step-head{min-height:42px}#form-order .order-step-num{flex-basis:42px;width:42px!important;height:42px!important}#form-order .order-step-head strong{padding:0 12px;font-size:12px}#form-order main>.order-card>.p-4{padding:13px!important}.mobile-summary-bar{border-radius:15px 15px 0 0!important;box-shadow:0 -16px 44px rgba(0,0,0,.25)!important}

/* Gambar produk dinaikkan agar tidak menutup judul pada layar kecil. */
.order-page .order-hero>.container>.flex>.flex{align-items:flex-start!important}
.order-page .hero-art-wrap{margin-top:-66px!important;transform:translateY(-8px);align-self:flex-start;position:relative;z-index:3}
.order-page .hero-art-card3d{width:92px;height:92px}
.order-page .order-hero .pb-2{min-width:0;padding-top:2px!important}
.order-page .order-hero h1{padding-right:2px}
.order-product-benefits{margin-left:-104px;width:calc(100vw - 52px);transform:none!important;padding-top:6px}
}

.order-mobile-details{display:none}

@media(max-width:1023px){
#form-order.order-mobile-tab-hidden{display:none!important}
.order-mobile-details.is-active{display:block;padding-bottom:42px}
.order-mobile-details-inner{width:min(calc(100% - 28px),1180px);margin:0 auto;padding:4px 0 130px;display:grid;gap:14px}
.order-mobile-details .order-card,.order-mobile-details .play-review-card{border-radius:16px!important;border:1px solid color-mix(in srgb,var(--theme-text) 10%,transparent)!important;background:color-mix(in srgb,var(--theme-primary) 82%,var(--theme-secondary))!important;box-shadow:0 18px 42px rgba(0,0,0,.14)!important}
.order-mobile-details .order-step-head{min-height:42px;padding:0!important;gap:0!important;overflow:hidden;border-bottom:1px solid color-mix(in srgb,var(--theme-text) 8%,transparent);background:color-mix(in srgb,var(--theme-secondary) 84%,var(--theme-primary))!important}
.order-mobile-details .order-step-num{flex:0 0 42px;width:42px!important;height:42px!important;border-radius:0!important;background:var(--theme-accent)!important;color:var(--theme-on-accent)!important;box-shadow:none!important}
.order-mobile-details .order-step-head strong{padding:0 12px;font-size:12px;font-weight:900}
.order-mobile-product-note img{max-width:100%;height:auto;border-radius:12px}
.order-mobile-product-note a{color:var(--theme-accent)!important;text-decoration:underline}
.order-mobile-review-wrap .play-review-card{margin:0!important}
.order-mobile-review-wrap .play-review-subtitle{display:block!important}
.order-mobile-review-wrap .play-review-list{display:grid!important}
.order-mobile-review-wrap .play-review-more{display:flex!important}
}


/* ==========================================================
   MOBILE POLISH V47
   Hero dibuat lebih ringkas, tidak ada ruang kosong besar,
   tab lebih tegas, dan isi Keterangan lebih nyaman dibaca.
   ========================================================== */
@media (max-width: 640px) {
    .order-page .order-hero {
        min-height: 230px !important;
        margin-bottom: 96px !important;
        overflow: visible !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
    }

    .order-page .order-hero-bg {
        background-position: center 32% !important;
    }

    .order-page .order-hero-overlay {
        background:
            linear-gradient(180deg,
                rgba(0,0,0,.08) 0%,
                color-mix(in srgb, var(--theme-secondary) 28%, transparent) 48%,
                color-mix(in srgb, var(--theme-secondary) 72%, transparent) 100%
            ) !important;
    }

    .order-page .order-hero > .container {
        min-height: 230px !important;
        padding: 0 14px !important;
        transform: translateY(74px) !important;
        align-items: flex-end !important;
    }

    .order-page .order-hero > .container > .flex {
        position: relative;
        display: block !important;
        min-height: 0 !important;
        padding: 14px 14px 62px !important;
        border-radius: 20px !important;
        border: 1px solid color-mix(in srgb, var(--theme-accent) 26%, transparent) !important;
        background:
            radial-gradient(circle at 95% 0%, color-mix(in srgb, var(--theme-accent) 11%, transparent), transparent 38%),
            linear-gradient(145deg,
                color-mix(in srgb, var(--theme-primary) 94%, #000),
                color-mix(in srgb, var(--theme-secondary) 88%, #000)
            ) !important;
        box-shadow:
            0 18px 42px rgba(0,0,0,.30),
            inset 0 1px 0 color-mix(in srgb, white 13%, transparent) !important;
        backdrop-filter: blur(16px);
    }

    .order-page .order-hero > .container > .flex > .flex {
        display: grid !important;
        grid-template-columns: 86px minmax(0, 1fr);
        align-items: center !important;
        gap: 13px !important;
        width: 100% !important;
    }

    .order-page .hero-art-wrap {
        width: 86px !important;
        margin: -42px 0 0 !important;
        transform: translateZ(0);
        align-self: start !important;
        position: relative;
        z-index: 3;
    }

    .order-page .hero-art-glow {
        inset: 7px !important;
        opacity: .55 !important;
        filter: blur(14px) !important;
    }

    .order-page .hero-art-card3d {
        width: 86px !important;
        height: 86px !important;
        border-radius: 18px !important;
        transform: none !important;
        box-shadow:
            0 14px 28px rgba(0,0,0,.32),
            0 0 0 1px color-mix(in srgb, var(--theme-accent) 48%, transparent) !important;
    }

    .order-page .hero-art-3d {
        border-radius: 18px !important;
    }

    .order-page .order-hero .pb-2 {
        min-width: 0;
        padding: 0 !important;
    }

    .order-page .order-hero h1 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 18px !important;
        line-height: 1.22 !important;
        letter-spacing: -.02em;
        overflow-wrap: anywhere;
    }

    .order-page .order-hero h1 + p {
        display: -webkit-box;
        margin: 6px 0 0 !important;
        font-size: 10.5px !important;
        line-height: 1.45 !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .order-page .hero-art-badge {
        display: none !important;
    }

    .order-product-benefits {
        position: absolute !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px !important;
    }

    .order-product-benefits span {
        min-width: 0 !important;
        min-height: 36px;
        padding: 5px 4px;
        border-radius: 10px;
        justify-content: center !important;
        gap: 4px !important;
        border: 1px solid color-mix(in srgb, var(--theme-text) 7%, transparent);
        background: color-mix(in srgb, var(--theme-text) 4%, transparent);
        font-size: 8.3px !important;
        line-height: 1.2;
        text-align: center;
        white-space: normal !important;
    }

    .order-product-benefits b {
        flex: 0 0 19px;
        width: 19px !important;
        height: 19px !important;
        border-radius: 7px !important;
        font-size: 8px !important;
        box-shadow: 0 6px 14px color-mix(in srgb, var(--theme-accent) 22%, transparent) !important;
    }

    .order-mobile-tabs {
        width: calc(100% - 28px) !important;
        margin: 0 auto 16px !important;
        padding: 5px !important;
        gap: 5px !important;
        border-radius: 16px !important;
        border: 1px solid color-mix(in srgb, var(--theme-text) 8%, transparent) !important;
        background: color-mix(in srgb, var(--theme-secondary) 90%, #000) !important;
        box-shadow: 0 12px 30px rgba(0,0,0,.18);
    }

    .order-mobile-tabs button {
        min-height: 42px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        letter-spacing: .01em;
        transition: transform .18s ease, background .18s ease, color .18s ease;
    }

    .order-mobile-tabs button.is-active {
        transform: translateY(-1px);
        box-shadow: 0 9px 20px color-mix(in srgb, var(--theme-accent) 24%, transparent) !important;
    }

    .order-mobile-details.is-active {
        padding-bottom: 8px !important;
    }

    .order-mobile-details-inner {
        width: calc(100% - 28px) !important;
        padding: 0 0 20px !important;
        gap: 12px !important;
    }

    body.showing-order-mobile-details {
        padding-bottom: 0 !important;
    }

    body.showing-order-mobile-details .mobile-summary-bar {
        display: none !important;
    }

    .order-mobile-details .order-card,
    .order-mobile-details .play-review-card {
        overflow: hidden;
        border-radius: 17px !important;
        border: 1px solid color-mix(in srgb, var(--theme-text) 8%, transparent) !important;
        background:
            linear-gradient(145deg,
                color-mix(in srgb, var(--theme-primary) 91%, #000),
                color-mix(in srgb, var(--theme-secondary) 89%, #000)
            ) !important;
        box-shadow: 0 13px 32px rgba(0,0,0,.16) !important;
    }

    .order-mobile-details .order-step-head {
        min-height: 54px !important;
        padding: 0 13px !important;
        gap: 10px !important;
        border-bottom: 1px solid color-mix(in srgb, var(--theme-text) 7%, transparent) !important;
        background: color-mix(in srgb, var(--theme-secondary) 78%, var(--theme-primary)) !important;
    }

    .order-mobile-details .order-step-num {
        flex: 0 0 34px !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 11px !important;
        font-size: 14px !important;
        font-weight: 950 !important;
        box-shadow: 0 7px 16px color-mix(in srgb, var(--theme-accent) 20%, transparent) !important;
    }

    .order-mobile-details .order-step-head strong {
        padding: 0 !important;
        font-size: 13px !important;
        letter-spacing: .01em;
    }

    .order-mobile-detail-card > .p-4 {
        padding: 14px !important;
    }

    .order-mobile-detail-card:first-child > .p-4 .grid {
        gap: 8px !important;
    }

    .order-mobile-detail-card:first-child > .p-4 .grid > div {
        display: flex;
        align-items: center;
        min-height: 42px;
        padding: 9px 11px;
        border-radius: 12px;
        border: 1px solid color-mix(in srgb, var(--theme-text) 7%, transparent);
        background: color-mix(in srgb, var(--theme-text) 4%, transparent);
        font-size: 12px !important;
        line-height: 1.35;
    }

    .order-mobile-product-note {
        padding: 15px !important;
        font-size: 12.5px !important;
        line-height: 1.75 !important;
    }

    .order-mobile-product-note p:first-child {
        margin-top: 0;
    }

    .order-mobile-product-note p:last-child {
        margin-bottom: 0;
    }

    .order-mobile-review-wrap .play-review-card {
        padding: 15px !important;
    }

    .order-mobile-review-wrap .play-review-title {
        font-size: 15px !important;
    }

    .order-mobile-review-wrap .play-review-score-number {
        font-size: 40px !important;
    }

    #form-order > .container {
        padding-top: 0 !important;
    }

    /* Texture modern khusus mobile: halus, tidak ramai, dan mengikuti tema. */
    .order-mobile-details .order-card,
    .order-mobile-details .play-review-card,
    #form-order main > .order-card,
    .order-mobile-tabs,
    .order-product-identity {
        position: relative;
        isolation: isolate;
    }

    .order-mobile-details .order-card::before,
    .order-mobile-details .play-review-card::before,
    #form-order main > .order-card::before,
    .order-product-identity::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        border-radius: inherit;
        background:
            radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--theme-accent) 11%, transparent) 0 1px, transparent 2px),
            radial-gradient(circle at 88% 92%, color-mix(in srgb, var(--theme-text) 8%, transparent) 0 1px, transparent 2px),
            linear-gradient(135deg, color-mix(in srgb, var(--theme-text) 4%, transparent), transparent 38%, color-mix(in srgb, var(--theme-accent) 5%, transparent));
        background-size: 22px 22px, 28px 28px, 100% 100%;
        opacity: .72;
    }

    .order-mobile-details .order-card::after,
    #form-order main > .order-card::after,
    .order-product-identity::after {
        content: "";
        position: absolute;
        top: 0;
        left: 18px;
        right: 18px;
        height: 1px;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--theme-accent) 42%, transparent), transparent);
        opacity: .75;
    }

    .order-mobile-details .order-step-head,
    #form-order .order-step-head {
        position: relative;
        overflow: hidden;
    }

    .order-mobile-details .order-step-head::after,
    #form-order .order-step-head::after {
        content: "";
        position: absolute;
        width: 110px;
        height: 110px;
        right: -54px;
        top: -72px;
        border-radius: 999px;
        pointer-events: none;
        background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent) 16%, transparent), transparent 70%);
    }

    .order-mobile-detail-card:first-child > .p-4 .grid > div {
        position: relative;
        overflow: hidden;
        box-shadow: inset 0 1px 0 color-mix(in srgb, var(--theme-text) 5%, transparent);
    }

    .order-mobile-detail-card:first-child > .p-4 .grid > div::after {
        content: "";
        position: absolute;
        inset: auto -20px -30px auto;
        width: 72px;
        height: 72px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--theme-accent) 8%, transparent);
        filter: blur(2px);
        pointer-events: none;
    }

    .order-mobile-product-note {
        position: relative;
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--theme-text) 2.5%, transparent), transparent 70%);
    }

    .order-mobile-tabs::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        pointer-events: none;
        background:
            linear-gradient(115deg, color-mix(in srgb, var(--theme-accent) 7%, transparent), transparent 30%, color-mix(in srgb, var(--theme-text) 4%, transparent));
    }

    .order-mobile-review-wrap {
        margin-bottom: 0 !important;
    }

    .order-mobile-review-wrap:empty {
        display: none;
    }
}


/* ==========================================================
   MOBILE HEX TEXTURE V49
   - Pangkas ruang kosong di bawah tab Transaksi
   - Ganti pola titik menjadi pola hexagon modern
   - Beri tekstur juga pada kartu identitas/gambar produk
   ========================================================== */
@media (max-width: 640px) {
    /* Jarak bawah transaksi dibuat proporsional. Ruang untuk bottom bar
       hanya diberikan oleh body ketika ringkasan memang muncul. */
    #form-order > .container {
        padding-bottom: 26px !important;
    }

    body.has-mobile-summary {
        padding-bottom: 96px !important;
    }

    body.has-mobile-summary #form-order > .container {
        padding-bottom: 26px !important;
    }

    #form-order main {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    #form-order main > .order-card:last-child {
        margin-bottom: 0 !important;
    }

    /* Matikan tekstur titik V48. */
    .order-mobile-details .order-card::before,
    .order-mobile-details .play-review-card::before,
    #form-order main > .order-card::before,
    .order-product-identity::before {
        background: none !important;
        opacity: 1 !important;
    }

    /* Pola hexagon tipis dan modern untuk semua kartu transaksi/keterangan. */
    .order-mobile-details .order-card::before,
    .order-mobile-details .play-review-card::before,
    #form-order main > .order-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        pointer-events: none;
        background-image:
            linear-gradient(30deg, color-mix(in srgb, var(--theme-accent) 10%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, var(--theme-accent) 10%, transparent) 87.5%, color-mix(in srgb, var(--theme-accent) 10%, transparent)),
            linear-gradient(150deg, color-mix(in srgb, var(--theme-accent) 10%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, var(--theme-accent) 10%, transparent) 87.5%, color-mix(in srgb, var(--theme-accent) 10%, transparent)),
            linear-gradient(30deg, color-mix(in srgb, var(--theme-text) 5%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, var(--theme-text) 5%, transparent) 87.5%, color-mix(in srgb, var(--theme-text) 5%, transparent)),
            linear-gradient(150deg, color-mix(in srgb, var(--theme-text) 5%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, var(--theme-text) 5%, transparent) 87.5%, color-mix(in srgb, var(--theme-text) 5%, transparent)),
            linear-gradient(60deg, color-mix(in srgb, var(--theme-accent) 6%, transparent) 25%, transparent 25.5%, transparent 75%, color-mix(in srgb, var(--theme-accent) 6%, transparent) 75%, color-mix(in srgb, var(--theme-accent) 6%, transparent)),
            linear-gradient(60deg, color-mix(in srgb, var(--theme-text) 4%, transparent) 25%, transparent 25.5%, transparent 75%, color-mix(in srgb, var(--theme-text) 4%, transparent) 75%, color-mix(in srgb, var(--theme-text) 4%, transparent));
        background-size: 28px 49px;
        background-position: 0 0, 0 0, 14px 24.5px, 14px 24.5px, 0 0, 14px 24.5px;
        opacity: .58 !important;
        -webkit-mask-image: linear-gradient(135deg, #000 0%, rgba(0,0,0,.78) 42%, transparent 100%);
        mask-image: linear-gradient(135deg, #000 0%, rgba(0,0,0,.78) 42%, transparent 100%);
    }

    /* Kartu besar yang memuat gambar, judul, dan benefit ikut diberi tekstur. */
    .order-page .order-hero > .container > .flex {
        position: relative;
        isolation: isolate;
        overflow: hidden !important;
        background:
            radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--theme-accent) 13%, transparent), transparent 34%),
            linear-gradient(145deg,
                color-mix(in srgb, var(--theme-primary) 91%, #000),
                color-mix(in srgb, var(--theme-secondary) 87%, #000)
            ) !important;
    }

    .order-page .order-hero > .container > .flex::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        border-radius: inherit;
        background-image:
            linear-gradient(30deg, color-mix(in srgb, var(--theme-accent) 13%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, var(--theme-accent) 13%, transparent) 87.5%, color-mix(in srgb, var(--theme-accent) 13%, transparent)),
            linear-gradient(150deg, color-mix(in srgb, var(--theme-accent) 13%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, var(--theme-accent) 13%, transparent) 87.5%, color-mix(in srgb, var(--theme-accent) 13%, transparent)),
            linear-gradient(30deg, color-mix(in srgb, white 6%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, white 6%, transparent) 87.5%, color-mix(in srgb, white 6%, transparent)),
            linear-gradient(150deg, color-mix(in srgb, white 6%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, white 6%, transparent) 87.5%, color-mix(in srgb, white 6%, transparent)),
            linear-gradient(60deg, color-mix(in srgb, var(--theme-accent) 8%, transparent) 25%, transparent 25.5%, transparent 75%, color-mix(in srgb, var(--theme-accent) 8%, transparent) 75%, color-mix(in srgb, var(--theme-accent) 8%, transparent)),
            linear-gradient(60deg, color-mix(in srgb, white 4%, transparent) 25%, transparent 25.5%, transparent 75%, color-mix(in srgb, white 4%, transparent) 75%, color-mix(in srgb, white 4%, transparent));
        background-size: 34px 59px;
        background-position: 0 0, 0 0, 17px 29.5px, 17px 29.5px, 0 0, 17px 29.5px;
        opacity: .66;
        -webkit-mask-image: linear-gradient(105deg, #000 0%, rgba(0,0,0,.85) 55%, transparent 100%);
        mask-image: linear-gradient(105deg, #000 0%, rgba(0,0,0,.85) 55%, transparent 100%);
    }

    .order-page .order-hero > .container > .flex::after {
        content: "";
        position: absolute;
        left: 16px;
        right: 16px;
        top: 0;
        height: 1px;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--theme-accent) 58%, transparent), transparent);
        box-shadow: 0 5px 18px color-mix(in srgb, var(--theme-accent) 20%, transparent);
    }

    /* Frame gambar dibuat senada dengan pola hexagon. */
    .order-page .hero-art-card3d {
        position: relative;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--theme-accent) 48%, transparent) !important;
        box-shadow:
            0 14px 30px rgba(0,0,0,.28),
            0 0 0 3px color-mix(in srgb, var(--theme-accent) 7%, transparent),
            inset 0 1px 0 color-mix(in srgb, white 24%, transparent) !important;
    }

    .order-page .hero-art-card3d::before {
        background:
            linear-gradient(135deg, color-mix(in srgb, white 18%, transparent), transparent 38%),
            repeating-linear-gradient(60deg,
                transparent 0 8px,
                color-mix(in srgb, var(--theme-accent) 8%, transparent) 8px 9px,
                transparent 9px 17px
            ) !important;
        opacity: .68 !important;
    }

    .order-mobile-tabs::before {
        background:
            linear-gradient(115deg, color-mix(in srgb, var(--theme-accent) 9%, transparent), transparent 34%, color-mix(in srgb, var(--theme-text) 4%, transparent)),
            repeating-linear-gradient(60deg,
                transparent 0 14px,
                color-mix(in srgb, var(--theme-accent) 5%, transparent) 14px 15px,
                transparent 15px 29px
            ) !important;
        opacity: .8;
    }
}



/* ==========================================================
   MOBILE IMAGE 3D ZOOM V52
   Thumbnail mobile dibuat lebih terasa 3D dan sedikit zoom,
   bukan dipaksa 100% flat seperti versi sebelumnya.
   ========================================================== */
@media (max-width: 640px) {
    .order-page .order-hero > .container > .flex {
        overflow: visible !important;
    }

    .order-page .order-hero > .container > .flex::before,
    .order-page .order-hero > .container > .flex::after {
        border-radius: inherit;
    }

    .order-page .hero-art-wrap {
        overflow: visible !important;
        z-index: 8 !important;
        perspective: 980px;
        transform-style: preserve-3d;
    }

    .order-page .hero-art-card3d {
        position: relative;
        overflow: hidden !important;
        isolation: isolate;
        padding: 0 !important;
        background:
            radial-gradient(circle at 20% 18%, rgba(255,255,255,.16), transparent 34%),
            linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.01)) !important;
        border: 1px solid color-mix(in srgb, var(--theme-accent) 34%, rgba(255,255,255,.06)) !important;
        box-shadow:
            0 20px 34px rgba(0,0,0,.24),
            0 10px 18px rgba(0,0,0,.18),
            inset 0 1px 0 rgba(255,255,255,.20) !important;
        transform:
            perspective(980px)
            rotateY(-11deg)
            rotateX(7deg)
            translateZ(0)
            scale(1.02) !important;
        transform-style: preserve-3d;
        will-change: transform;
    }

    .order-page .hero-art-card3d::before {
        inset: 7px -8px -8px 8px !important;
        opacity: .78 !important;
        transform: translateZ(-18px) !important;
        box-shadow: 0 18px 24px rgba(0,0,0,.24) !important;
    }

    .order-page .hero-art-card3d::after {
        opacity: .72 !important;
        transform: translateZ(-28px) !important;
        filter: blur(16px) !important;
    }

    /* Gambar dibuat cover + sedikit zoom agar terasa penuh dan premium. */
    .order-page .hero-art-card3d > img.hero-art-3d {
        position: absolute !important;
        inset: -5% !important;
        display: block !important;
        width: 110% !important;
        height: 110% !important;
        min-width: 110% !important;
        min-height: 110% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: inherit !important;
        transform:
            translate3d(0, 0, 28px)
            scale(1.11) !important;
        filter: saturate(1.08) contrast(1.04) brightness(1.02);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    }

    .order-page .hero-art-card3d-shine {
        inset: 0 !important;
        border-radius: inherit !important;
        transform:
            translateZ(34px)
            rotateY(-11deg)
            rotateX(7deg) !important;
        mix-blend-mode: screen;
        opacity: .92;
    }

    /* Efek frame tetap ada, tetapi tidak mengurangi area gambar. */
    .order-page .hero-art-card3d::before,
    .order-page .hero-art-card3d::after,
    .order-page .hero-art-card3d-shine {
        pointer-events: none;
    }
}


/* FINAL OVERRIDE: footer nominal mengikuti warna theme/database,
   bukan abu-abu permanen. Struktur card tetap sama, hanya paletnya
   yang disinkronkan agar selaras dengan warna template. */
#form-order .product-choice {
    --product-footer-bg-top: color-mix(
        in srgb,
        var(--theme-secondary, #FFD1DC) 70%,
        var(--theme-primary, #ffffff)
    );
    --product-footer-bg-bottom: color-mix(
        in srgb,
        var(--theme-secondary, #FFD1DC) 84%,
        var(--theme-primary, #ffffff)
    );
    --product-footer-border: color-mix(
        in srgb,
        var(--theme-accent, #d58a94) 28%,
        var(--theme-text, #000000) 12%
    );
    --product-footer-badge-bg: color-mix(
        in srgb,
        var(--theme-primary, #ffffff) 86%,
        var(--theme-secondary, #FFD1DC)
    );
    --product-footer-badge-border: color-mix(
        in srgb,
        var(--theme-accent, #d58a94) 26%,
        rgba(255,255,255,.42)
    );
    --product-footer-badge-text: color-mix(
        in srgb,
        var(--theme-text, #000000) 74%,
        var(--theme-accent, #d58a94)
    );
}
#form-order .product-choice .product-process-row {
    margin: 12px -13px -13px !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
    border-radius: 0 !important;
    border-top: 1px solid var(--product-footer-border) !important;
    background:
        linear-gradient(
            180deg,
            var(--product-footer-bg-top),
            var(--product-footer-bg-bottom)
        ) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 34%, transparent),
        0 -3px 10px color-mix(in srgb, var(--theme-text, #000000) 8%, transparent) !important;
}

/* Badge tetap rapi, tetapi ikut warna template. */
#form-order .product-choice .product-process-badge {
    min-height: 22px !important;
    padding: 3px 8px !important;
    border: 1px solid var(--product-footer-badge-border) !important;
    border-radius: 5px !important;
    background: var(--product-footer-badge-bg) !important;
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--theme-text, #000000) 10%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 55%, transparent) !important;
    color: var(--product-footer-badge-text) !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}
#form-order .product-choice .product-process-badge i {
    font-size: 9px !important;
}

/* Potongan Flash Sale ditampilkan sejajar dengan status proses. */
#form-order .product-choice .product-process-row {
    gap: 6px !important;
}
/* Seperti referensi: potongan di kiri, status Instant/Fast di kanan. */
#form-order .product-choice .product-process-row.has-flash-discount {
    justify-content: space-between !important;
}
#form-order .product-choice .product-flash-discount-badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 22px !important;
    padding: 3px 8px !important;
    border: 1px solid #dc5d36 !important;
    border-radius: 5px !important;
    background: #ef6b3a !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.12) !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}
#form-order .product-choice .product-process-instant {
    color: #15803d !important;
}
#form-order .product-choice .product-process-fast {
    color: #c2410c !important;
}
#form-order .product-choice.active .product-process-row,
#form-order .product-choice:hover .product-process-row,
#form-order .flash-sale-choice .product-process-row {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--product-footer-bg-top) 92%, var(--theme-accent, #d58a94)),
            color-mix(in srgb, var(--product-footer-bg-bottom) 86%, var(--theme-accent, #d58a94))
        ) !important;
    border-top-color: color-mix(in srgb, var(--theme-accent, #d58a94) 40%, var(--theme-text, #000000) 10%) !important;
}

/* FIX TINGGI CARD BERBEDA:
   Ruang kosong diletakkan DI ATAS footer, bukan memadatkan footer ke isi.
   Grid 1fr + auto memastikan footer abu-abu selalu berada di dasar card. */
#form-order .product-grid {
    align-items: stretch !important;
}
#form-order .product-grid > .product-choice {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 100% !important;
}
#form-order .product-choice > .min-w-0 {
    align-self: start !important;
}
#form-order .product-choice > .product-process-row {
    align-self: end !important;
    width: auto !important;
    margin-top: 12px !important;
    margin-right: -13px !important;
    margin-bottom: -13px !important;
    margin-left: -13px !important;
}
#form-order .flash-sale-choice > .flash-sale-choice-badge {
    justify-self: start !important;
    align-self: start !important;
}


/* ==========================================================
   MOBILE FLOATING PURCHASE SUMMARY - GAYA BOTTOM ACTION MODERN
   Terinspirasi pola bottom action aplikasi pembayaran, tetapi tetap
   memakai warna theme/database website sendiri.
   ========================================================== */
@media (max-width: 1023px) {
    .mobile-summary-bar {
        display: block !important;
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        bottom: 0 !important;
        z-index: 190 !important;
        width: min(100%, 520px) !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        border: 0 !important;
        border-top: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 28%, transparent) !important;
        border-radius: 24px 24px 0 0 !important;
        background: color-mix(in srgb, var(--theme-primary, #ffffff) 96%, var(--theme-secondary, #FFD1DC)) !important;
        color: var(--theme-text, #000000) !important;
        box-shadow:
            0 -20px 54px rgba(0,0,0,.28),
            inset 0 1px 0 color-mix(in srgb, #ffffff 36%, transparent) !important;
        backdrop-filter: blur(18px) saturate(1.15);
        -webkit-backdrop-filter: blur(18px) saturate(1.15);
        transform: translate(-50%, 115%) !important;
        opacity: 0;
        transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s ease !important;
    }

    .mobile-summary-bar.show {
        transform: translate(-50%, 0) !important;
        opacity: 1;
    }

    .mobile-summary-head {
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        display: block !important;
    }

    .mobile-summary-trigger {
        width: 100%;
        min-height: 46px;
        padding: 10px 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0;
        border-radius: 0;
        background:
            linear-gradient(
                100deg,
                color-mix(in srgb, var(--theme-accent, #d58a94) 86%, #ffffff),
                var(--theme-accent, #d58a94)
            ) !important;
        color: var(--theme-on-accent, #ffffff) !important;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: .005em;
        cursor: pointer;
    }

    .mobile-summary-trigger *,
    .mobile-summary-trigger i {
        color: inherit !important;
    }

    .mobile-summary-trigger-label {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .mobile-summary-chevron {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 1px;
        font-size: 15px;
        line-height: 1;
        transition: transform .22s ease;
    }

    .mobile-summary-bar:not(.open) .mobile-summary-chevron {
        transform: rotate(180deg);
    }

    .mobile-summary-detail {
        display: none !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 9px 15px 14px !important;
        border-top: 0 !important;
        background:
            radial-gradient(circle at 94% 0%, color-mix(in srgb, var(--theme-accent, #d58a94) 8%, transparent), transparent 36%),
            color-mix(in srgb, var(--theme-primary, #ffffff) 96%, var(--theme-secondary, #FFD1DC)) !important;
    }

    .mobile-summary-bar.open .mobile-summary-detail {
        display: block !important;
        animation: mobileSummaryReveal .22s ease both;
    }

    @keyframes mobileSummaryReveal {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .mobile-summary-final-note {
        min-height: 37px;
        padding: 8px 12px;
        border: 1px solid rgba(34,197,94,.16);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        background: rgba(220,252,231,.78);
        color: #15803d !important;
        font-size: 11px;
        line-height: 1.35;
        font-weight: 800;
        text-align: center;
    }

    .mobile-summary-final-note i,
    .mobile-summary-final-note span {
        color: inherit !important;
    }

    .mobile-summary-voucher {
        margin-top: 9px;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 18%, transparent);
        border-radius: 12px;
        background:
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--theme-primary, #ffffff) 91%, transparent),
                color-mix(in srgb, var(--theme-secondary, #FFD1DC) 20%, var(--theme-primary, #ffffff))
            );
    }

    .mobile-summary-voucher-toggle {
        width: 100%;
        min-height: 43px;
        padding: 9px 10px;
        border: 0;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        color: var(--theme-text, #000000) !important;
        cursor: pointer;
        text-align: left;
    }

    .mobile-summary-voucher-toggle-main {
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 11px;
        line-height: 1.2;
        font-weight: 900;
    }

    .mobile-summary-voucher-toggle-main i,
    .mobile-summary-voucher-toggle-main span,
    .mobile-summary-voucher-toggle-side,
    .mobile-summary-voucher-chevron {
        color: inherit !important;
    }

    .mobile-summary-voucher-toggle-side {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .mobile-summary-voucher-optional {
        flex: 0 0 auto;
        padding: 3px 7px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--theme-accent, #d58a94) 11%, transparent);
        color: color-mix(in srgb, var(--theme-text, #000000) 68%, transparent) !important;
        font-size: 9px;
        font-weight: 800;
    }

    .mobile-summary-voucher-optional.has-code {
        background: rgba(220,252,231,.88);
        color: #15803d !important;
    }

    .mobile-summary-voucher-chevron {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        font-size: 14px;
        line-height: 1;
        transition: transform .2s ease;
    }

    .mobile-summary-voucher.open .mobile-summary-voucher-chevron {
        transform: rotate(180deg);
    }

    .mobile-summary-voucher-content {
        display: none;
        padding: 0 10px 10px;
        border-top: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 12%, transparent);
    }

    .mobile-summary-voucher.open .mobile-summary-voucher-content {
        display: block;
        animation: mobileVoucherReveal .18s ease both;
    }

    @keyframes mobileVoucherReveal {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .mobile-summary-voucher-label {
        display: block;
        margin: 9px 0 7px;
        color: color-mix(in srgb, var(--theme-text, #000000) 72%, transparent) !important;
        font-size: 10px;
        line-height: 1.3;
        font-weight: 800;
    }

    .mobile-summary-voucher-input {
        width: 100%;
        min-height: 40px;
        padding: 9px 12px;
        border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 24%, transparent) !important;
        border-radius: 10px;
        outline: 0;
        background: color-mix(in srgb, var(--theme-primary, #ffffff) 94%, var(--theme-secondary, #FFD1DC)) !important;
        color: var(--theme-text, #000000) !important;
        font-size: 12px;
        line-height: 1.2;
        font-weight: 800;
        text-transform: uppercase;
        box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 32%, transparent);
    }

    .mobile-summary-voucher-input::placeholder {
        color: color-mix(in srgb, var(--theme-text, #000000) 45%, transparent) !important;
        text-transform: none;
        font-weight: 700;
    }

    .mobile-summary-voucher-input:focus {
        border-color: var(--theme-accent, #d58a94) !important;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #d58a94) 14%, transparent) !important;
    }

    .mobile-summary-voucher-status {
        margin-top: 6px;
        color: color-mix(in srgb, var(--theme-text, #000000) 58%, transparent) !important;
        font-size: 9px;
        line-height: 1.35;
        font-weight: 700;
    }

    .mobile-summary-voucher-status.has-code {
        color: #15803d !important;
    }

    .mobile-summary-action-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding-top: 10px;
    }

    .mobile-summary-product {
        min-width: 0;
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 8px;
        align-items: start;
    }

    .mobile-summary-product-icon {
        width: 18px;
        height: 18px;
        margin-top: 2px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: color-mix(in srgb, var(--theme-accent, #d58a94) 14%, transparent);
        color: var(--theme-accent, #d58a94) !important;
        font-size: 9px;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent, #d58a94) 24%, transparent);
    }

    .mobile-summary-product-icon i {
        color: inherit !important;
    }

    .mobile-summary-copy {
        min-width: 0;
    }

    .mobile-summary-title {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--theme-text, #000000) !important;
        font-size: 13px;
        line-height: 1.25;
        font-weight: 900;
    }

    .mobile-summary-meta {
        margin-top: 2px;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: color-mix(in srgb, var(--theme-text, #000000) 62%, transparent) !important;
        font-size: 10px;
        line-height: 1.25;
        font-weight: 700;
    }

    .mobile-summary-price {
        margin-top: 4px;
        color: var(--theme-text, #000000) !important;
        font-size: 16px;
        line-height: 1;
        font-weight: 950;
        letter-spacing: -.02em;
    }

    .mobile-summary-action {
        min-width: 112px;
        min-height: 45px;
        padding: 10px 18px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background:
            linear-gradient(
                135deg,
                color-mix(in srgb, var(--theme-accent, #d58a94) 88%, #ffffff),
                var(--theme-accent, #d58a94)
            ) !important;
        color: var(--theme-on-accent, #ffffff) !important;
        box-shadow: 0 11px 24px color-mix(in srgb, var(--theme-accent, #d58a94) 28%, transparent);
        font-size: 14px;
        line-height: 1;
        font-weight: 950;
        white-space: nowrap;
        transition: transform .18s ease, filter .18s ease, opacity .18s ease;
    }

    .mobile-summary-action:not(:disabled):active {
        transform: scale(.97);
    }

    .mobile-summary-action:disabled {
        opacity: .48;
        box-shadow: none;
        cursor: not-allowed;
    }

    body.has-mobile-summary {
        padding-bottom: 246px !important;
    }

    body.has-mobile-summary:not(.mobile-summary-expanded) {
        padding-bottom: 62px !important;
    }

    body.has-mobile-summary #form-order > .container {
        padding-bottom: 28px !important;
    }

    /* Saat ringkasan pembelian melayang tampil, tombol Chat CS disembunyikan
       supaya tidak bertumpuk dengan area checkout di pojok bawah. */
    body.has-mobile-summary .floating-cs-theme {
        display: none !important;
    }
}

@media (max-width: 360px) {
    .mobile-summary-detail {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .mobile-summary-action-row {
        gap: 8px;
    }

    .mobile-summary-action {
        min-width: 98px;
        padding-left: 14px;
        padding-right: 14px;
        font-size: 13px;
    }
}


/* ==========================================================
   PREMIUM LIGHT MOTION V54
   Animasi premium yang tetap ringan untuk mobile:
   - hanya transform dan opacity untuk animasi berulang
   - meteor dikurangi pada layar kecil
   - animasi otomatis berhenti ketika hero tidak terlihat
   ========================================================== */

.order-page .order-hero-bg {
    transform-origin: center center;
    animation: premiumHeroBgDrift 18s ease-in-out infinite alternate;
    will-change: transform;
}

.order-page .order-hero-shine {
    transform-origin: center center;
    animation: premiumAmbientGlow 10s ease-in-out infinite;
    will-change: transform, opacity;
}

.order-page .hero-art-glow {
    animation: premiumLogoGlow 5.8s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes premiumHeroBgDrift {
    0% {
        transform: translate3d(-.4%, -.25%, 0) scale(1.08);
    }
    100% {
        transform: translate3d(.65%, .35%, 0) scale(1.115);
    }
}

@keyframes premiumAmbientGlow {
    0%, 100% {
        opacity: .78;
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate3d(.4%, -.35%, 0) scale(1.025);
    }
}

@keyframes premiumLogoGlow {
    0%, 100% {
        opacity: .48;
        transform: scale(.94);
    }
    50% {
        opacity: .82;
        transform: scale(1.08);
    }
}

@keyframes premiumLogoFloatMobile {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes premiumHeroPanelFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -2px, 0);
    }
}

@keyframes premiumBenefitPulse {
    0%, 72%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    82% {
        transform: scale(1.07);
        filter: brightness(1.09);
    }
}

@keyframes premiumActiveTabGlow {
    0%, 100% {
        filter: brightness(1);
        box-shadow: 0 9px 20px color-mix(in srgb, var(--theme-accent, #d58a94) 20%, transparent);
    }
    50% {
        filter: brightness(1.035);
        box-shadow: 0 11px 25px color-mix(in srgb, var(--theme-accent, #d58a94) 30%, transparent);
    }
}

@keyframes premiumCardEnter {
    from {
        opacity: 0;
        transform: translate3d(0, 8px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (max-width: 640px) {
    /* Dua meteor saja sudah cukup premium dan lebih ringan. */
    .order-page .hero-meteor-mid,
    .order-page .hero-meteor-small-2,
    .order-page .hero-meteor-tiny,
    .order-page .hero-meteor-spark.is-2,
    .order-page .hero-meteor-spark.is-3,
    .order-page .hero-meteor-spark.is-4 {
        display: none !important;
    }

    .order-page .hero-meteor-main {
        animation-duration: 9.6s !important;
    }

    .order-page .hero-meteor-small {
        animation-duration: 10.8s !important;
        animation-delay: 2.1s !important;
    }

    .order-page .hero-meteor-spark.is-1 {
        animation-duration: 9.6s !important;
    }

    .order-page .hero-art-wrap {
        animation: premiumLogoFloatMobile 5.4s ease-in-out infinite;
        will-change: transform;
    }

    .order-page .order-hero > .container > .flex {
        animation: premiumHeroPanelFloat 7.2s ease-in-out infinite;
        will-change: transform;
    }

    .order-page .order-product-benefits span {
        transition:
            transform .18s ease,
            border-color .18s ease,
            background .18s ease;
    }

    .order-page .order-product-benefits span:active {
        transform: scale(.975);
        border-color: color-mix(in srgb, var(--theme-accent, #d58a94) 32%, transparent);
        background: color-mix(in srgb, var(--theme-accent, #d58a94) 8%, transparent);
    }

    .order-page .order-product-benefits span:nth-child(1) b {
        animation: premiumBenefitPulse 5.4s ease-in-out infinite;
    }

    .order-page .order-product-benefits span:nth-child(2) b {
        animation: premiumBenefitPulse 5.4s ease-in-out 1.1s infinite;
    }

    .order-page .order-product-benefits span:nth-child(3) b {
        animation: premiumBenefitPulse 5.4s ease-in-out 2.2s infinite;
    }

    .order-page .order-mobile-tabs button.is-active {
        animation: premiumActiveTabGlow 4.8s ease-in-out infinite;
    }

    #form-order main > .order-card {
        animation: premiumCardEnter .46s cubic-bezier(.2,.75,.25,1) both;
    }

    #form-order main > .order-card:nth-child(2) { animation-delay: .04s; }
    #form-order main > .order-card:nth-child(3) { animation-delay: .08s; }
    #form-order main > .order-card:nth-child(4) { animation-delay: .12s; }
    #form-order main > .order-card:nth-child(5) { animation-delay: .16s; }
}

/* IntersectionObserver menambahkan class ini ketika hero di luar layar. */
.order-page .order-hero.premium-motion-paused .order-hero-bg,
.order-page .order-hero.premium-motion-paused .order-hero-shine,
.order-page .order-hero.premium-motion-paused .hero-art-wrap,
.order-page .order-hero.premium-motion-paused .hero-art-glow,
.order-page .order-hero.premium-motion-paused .hero-art-card3d,
.order-page .order-hero.premium-motion-paused .hero-art-card3d-shine::before,
.order-page .order-hero.premium-motion-paused .hero-meteor,
.order-page .order-hero.premium-motion-paused .hero-meteor-spark,
.order-page .order-hero.premium-motion-paused .order-product-benefits b,
.order-page .order-hero.premium-motion-paused + .order-mobile-tabs button.is-active,
.order-page .order-hero.premium-page-hidden .order-hero-bg,
.order-page .order-hero.premium-page-hidden .order-hero-shine,
.order-page .order-hero.premium-page-hidden .hero-art-wrap,
.order-page .order-hero.premium-page-hidden .hero-art-glow,
.order-page .order-hero.premium-page-hidden .hero-art-card3d,
.order-page .order-hero.premium-page-hidden .hero-art-card3d-shine::before,
.order-page .order-hero.premium-page-hidden .hero-meteor,
.order-page .order-hero.premium-page-hidden .hero-meteor-spark,
.order-page .order-hero.premium-page-hidden .order-product-benefits b {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    .order-page .order-hero-bg,
    .order-page .order-hero-shine,
    .order-page .hero-art-wrap,
    .order-page .hero-art-glow,
    .order-page .order-product-benefits b,
    .order-page .order-mobile-tabs button.is-active,
    #form-order main > .order-card {
        animation: none !important;
    }
}


/* ==========================================================
   PRODUCT PERFORMANCE + CLEAN 3D BANNER
   Banner tampil utuh tanpa overlay warna dan efek 3D dibuat statis/ringan.
   ========================================================== */
.order-page .order-hero {
    perspective: 1600px;
    perspective-origin: 50% 42%;
}

.order-page .order-hero-bg {
    inset: 10px 12px 12px !important;
    border-radius: 28px;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
    filter: saturate(1.04) contrast(1.02) !important;
    transform:
        perspective(1600px)
        rotateX(1.15deg)
        rotateY(-1.35deg)
        scale(1.045) !important;
    transform-origin: center center;
    box-shadow:
        0 28px 54px rgba(0,0,0,.22),
        0 10px 22px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.26);
    animation: none !important;
    will-change: auto !important;
}

.order-page .order-hero-overlay,
.order-page .order-hero-shine,
.order-page .hero-meteor-field {
    display: none !important;
}

.order-page .hero-art-card3d,
.order-page .hero-art-card3d-shine::before,
.order-page .hero-art-wrap,
.order-page .hero-art-glow,
.order-page .order-product-benefits b,
.order-page .order-mobile-tabs button.is-active,
.order-page .order-hero > .container > .flex {
    animation: none !important;
    will-change: auto !important;
}

.order-mobile-review-wrap,
.play-review-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 280px;
}

.cpx-entry-transition {
    -webkit-backdrop-filter: blur(10px) saturate(1.04) !important;
    backdrop-filter: blur(10px) saturate(1.04) !important;
    transition-duration: .34s !important;
}

.cpx-entry-transition::before,
.cpx-entry-transition::after {
    filter: blur(42px) !important;
    animation: none !important;
}

.cpx-entry-center {
    filter: none !important;
}

@media (max-width: 640px) {
    .order-page .order-hero-bg {
        inset: 8px !important;
        border-radius: 22px;
        background-size: cover !important;
        background-position: center center !important;
        transform:
            perspective(1100px)
            rotateX(.8deg)
            rotateY(-1deg)
            scale(1.07) !important;
        box-shadow:
            0 20px 36px rgba(0,0,0,.20),
            0 8px 16px rgba(0,0,0,.12),
            inset 0 1px 0 rgba(255,255,255,.22);
    }

    .cpx-entry-transition {
        -webkit-backdrop-filter: blur(6px) !important;
        backdrop-filter: blur(6px) !important;
    }
}


/* ==========================================================
   SMOOTH SCROLL
   Gunakan scroll native browser tanpa content-visibility/contain yang bisa
   membuat posisi list terasa loncat ketika nominal sangat banyak.
   ========================================================== */
html {
    scroll-behavior: smooth;
}

body,
.order-page {
    scroll-behavior: smooth;
}

/* Tetap ringan di layar sentuh: tidak ada efek hover yang menggeser card saat scroll. */
@media (max-width: 768px), (pointer: coarse) {
    #sectionNominal .product-choice,
    #sectionPayment .method-choice {
        transition: border-color .14s ease, background-color .14s ease !important;
        box-shadow: none !important;
        transform: none !important;
    }

    #sectionNominal .product-choice:hover,
    #sectionPayment .method-choice:hover,
    #sectionNominal .product-choice:active,
    #sectionPayment .method-choice:active {
        transform: none !important;
    }

    #sectionNominal .product-process-row {
        box-shadow: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html,
    body,
    .order-page {
        scroll-behavior: auto;
    }

    .product-choice.nominal-pop-in,
    .nominal-ajax-dot {
        animation: none !important;
        opacity: 1 !important;
        translate: none !important;
        scale: 1 !important;
    }
}

/* ==========================================================
   STEP LOCK FINAL OVERRIDE + HEADER NOTICE
   Mobile sebelumnya kehilangan opacity karena animasi entry card memiliki
   opacity sendiri. Override ini sengaja diletakkan paling akhir.
   ========================================================== */
#form-order main > .order-card.step-locked,
#sectionNominal.step-locked,
#sectionVoucher.step-locked,
#sectionPayment.step-locked,
#sectionContact.step-locked {
    opacity: .34 !important;
    filter: saturate(.55) grayscale(.20) !important;
    animation: none !important;
    transition: opacity .22s ease, filter .22s ease !important;
}

@media (max-width: 768px) {
    #form-order main > .order-card.step-locked,
    #sectionNominal.step-locked,
    #sectionVoucher.step-locked,
    #sectionPayment.step-locked,
    #sectionContact.step-locked {
        opacity: .30 !important;
        filter: saturate(.48) grayscale(.24) !important;
    }
}

.order-header-notice-wrap {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top, 0px) + 10px);
    left: 50%;
    z-index: 12050;
    width: min(620px, calc(100vw - 28px));
    transform: translateX(-50%);
    pointer-events: none;
}

.order-header-notice {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 10px 10px 10px 12px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 30%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--theme-primary, #ffffff) 92%, transparent);
    color: var(--theme-text, #111827);
    box-shadow: 0 16px 42px rgba(0,0,0,.18), inset 0 1px 0 color-mix(in srgb, white 50%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.12);
    backdrop-filter: blur(14px) saturate(1.12);
    opacity: 0;
    transform: translate3d(0, -14px, 0) scale(.985);
    transition: opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1);
    pointer-events: auto;
    overflow: hidden;
}

.order-header-notice.is-show {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.order-header-notice::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--theme-accent, #d58a94);
    transform-origin: left center;
    animation: orderNoticeProgress 3.6s linear forwards;
}

.order-header-notice-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--theme-accent, #d58a94) 14%, transparent);
    color: var(--theme-accent, #d58a94);
    font-size: 18px;
    font-weight: 950;
}

.order-header-notice-copy { min-width: 0; }
.order-header-notice-title {
    display: block;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 950;
    letter-spacing: -.01em;
}
.order-header-notice-text {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
    color: color-mix(in srgb, var(--theme-text, #111827) 68%, transparent);
}
.order-header-notice-close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--theme-text, #111827) 6%, transparent);
    color: var(--theme-text, #111827);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.order-header-notice[data-type="success"] .order-header-notice-icon { color: #16a34a; background: rgba(22,163,74,.11); }
.order-header-notice[data-type="error"] .order-header-notice-icon { color: #dc2626; background: rgba(220,38,38,.11); }
.order-header-notice[data-type="warning"] .order-header-notice-icon { color: #d97706; background: rgba(217,119,6,.12); }
.order-header-notice[data-type="info"] .order-header-notice-icon { color: var(--theme-accent, #d58a94); }

@keyframes orderNoticeProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (max-width: 640px) {
    .order-header-notice-wrap {
        top: calc(64px + env(safe-area-inset-top, 0px) + 7px);
        width: calc(100vw - 20px);
    }
    .order-header-notice {
        grid-template-columns: 34px minmax(0, 1fr) 28px;
        min-height: 58px;
        gap: 9px;
        padding: 9px;
        border-radius: 14px;
    }
    .order-header-notice-icon {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 16px;
    }
    .order-header-notice-title { font-size: 12px; }
    .order-header-notice-text { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .order-header-notice { transition: none !important; }
    .order-header-notice::after { animation: none !important; }
}



    .checkout-confirm-overlay {
        position: fixed;
        inset: 0;
        z-index: 10020;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(10, 10, 12, .64);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity .30s cubic-bezier(.22, 1, .36, 1),
            visibility 0s linear .30s;
    }
    .checkout-confirm-overlay.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }
    .checkout-confirm-box {
        position: relative;
        width: min(460px, 100%);
        max-height: calc(100vh - 36px);
        overflow: auto;
        border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 26%, transparent);
        border-radius: 28px;
        background: color-mix(in srgb, var(--theme-primary, #fff) 96%, var(--theme-secondary, #f5f5f5));
        color: var(--theme-text, #111);
        box-shadow: 0 30px 90px rgba(0,0,0,.34);
        transform: translate3d(0, 24px, 0) scale(.965);
        transform-origin: 50% 55%;
        opacity: 0;
        will-change: transform, opacity;
        transition:
            transform .48s cubic-bezier(.16, 1, .30, 1),
            opacity .28s ease-out;
    }
    .checkout-confirm-overlay.show .checkout-confirm-box {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
    .checkout-confirm-box::before {
        content: '';
        position: absolute;
        inset: 0 0 auto;
        height: 5px;
        border-radius: 28px 28px 0 0;
        background: linear-gradient(90deg,
            color-mix(in srgb, var(--theme-accent, #d58a94) 90%, #fff),
            #ffd166,
            #7bdff2,
            color-mix(in srgb, var(--theme-accent, #d58a94) 85%, #fff)
        );
    }
    .checkout-confirm-head {
        padding: 28px 24px 16px;
        text-align: center;
    }
    .checkout-confirm-icon {
        width: 64px;
        height: 64px;
        margin: 0 auto 14px;
        display: grid;
        place-items: center;
        border-radius: 22px;
        background: color-mix(in srgb, var(--theme-accent, #d58a94) 14%, transparent);
        border: 1px solid color-mix(in srgb, var(--theme-accent, #d58a94) 26%, transparent);
        font-size: 30px;
        box-shadow: 0 12px 35px color-mix(in srgb, var(--theme-accent, #d58a94) 18%, transparent);
        transform: translateY(8px) scale(.88);
        opacity: 0;
        transition:
            transform .58s cubic-bezier(.16, 1, .30, 1) .07s,
            opacity .24s ease-out .07s;
    }
    .checkout-confirm-overlay.show .checkout-confirm-icon {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    .checkout-confirm-head h3 {
        margin: 0;
        font-size: 22px;
        font-weight: 900;
        letter-spacing: -.02em;
    }
    .checkout-confirm-head p {
        margin: 7px 0 0;
        font-size: 13px;
        opacity: .66;
        line-height: 1.55;
    }
    .checkout-confirm-head h3,
    .checkout-confirm-head p,
    .checkout-confirm-check,
    .checkout-confirm-summary,
    .checkout-confirm-actions {
        transform: translateY(9px);
        opacity: 0;
        transition:
            transform .46s cubic-bezier(.16, 1, .30, 1),
            opacity .28s ease-out;
    }
    .checkout-confirm-overlay.show .checkout-confirm-head h3,
    .checkout-confirm-overlay.show .checkout-confirm-head p,
    .checkout-confirm-overlay.show .checkout-confirm-check,
    .checkout-confirm-overlay.show .checkout-confirm-summary,
    .checkout-confirm-overlay.show .checkout-confirm-actions {
        transform: translateY(0);
        opacity: 1;
    }
    .checkout-confirm-overlay.show .checkout-confirm-head h3 { transition-delay: .10s; }
    .checkout-confirm-overlay.show .checkout-confirm-head p { transition-delay: .13s; }
    .checkout-confirm-overlay.show .checkout-confirm-check { transition-delay: .16s; }
    .checkout-confirm-overlay.show .checkout-confirm-summary { transition-delay: .17s; }
    .checkout-confirm-overlay.show .checkout-confirm-actions { transition-delay: .22s; }
    .checkout-confirm-check {
        display: none;
        width: max-content;
        max-width: calc(100% - 32px);
        margin: 12px auto 0;
        padding: 7px 11px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 900;
        color: #15803d;
        background: rgba(34,197,94,.10);
        border: 1px solid rgba(34,197,94,.20);
    }
    .checkout-confirm-check.show { display: block; }
    .checkout-confirm-summary {
        margin: 0 20px;
        padding: 4px 16px;
        border-radius: 20px;
        background: color-mix(in srgb, var(--theme-secondary, #f5f5f5) 75%, transparent);
        border: 1px solid color-mix(in srgb, var(--theme-text, #111) 8%, transparent);
    }
    .checkout-confirm-row {
        display: flex;
        gap: 18px;
        justify-content: space-between;
        align-items: flex-start;
        padding: 12px 0;
        border-bottom: 1px dashed color-mix(in srgb, var(--theme-text, #111) 10%, transparent);
        font-size: 13px;
    }
    .checkout-confirm-row {
        transform: translateY(5px);
        opacity: 0;
        transition: transform .38s cubic-bezier(.16, 1, .30, 1), opacity .25s ease-out;
    }
    .checkout-confirm-overlay.show .checkout-confirm-row { transform: translateY(0); opacity: 1; }
    .checkout-confirm-overlay.show .checkout-confirm-row:nth-child(1) { transition-delay: .19s; }
    .checkout-confirm-overlay.show .checkout-confirm-row:nth-child(2) { transition-delay: .22s; }
    .checkout-confirm-overlay.show .checkout-confirm-row:nth-child(3) { transition-delay: .25s; }
    .checkout-confirm-overlay.show .checkout-confirm-row:nth-child(4) { transition-delay: .28s; }
    .checkout-confirm-row:last-child { border-bottom: 0; }
    .checkout-confirm-row span:first-child { opacity: .58; flex: 0 0 auto; }
    .checkout-confirm-row strong { text-align: right; font-weight: 900; overflow-wrap: anywhere; }
    .checkout-confirm-row.total strong {
        font-size: 18px;
        color: var(--theme-accent, #d58a94);
    }
    .checkout-confirm-actions {
        display: grid;
        grid-template-columns: .8fr 1.2fr;
        gap: 10px;
        padding: 18px 20px 22px;
    }
    .checkout-confirm-btn {
        min-height: 48px;
        border: 0;
        border-radius: 16px;
        font-size: 13px;
        font-weight: 900;
        cursor: pointer;
        transition: transform .16s ease, opacity .16s ease;
    }
    .checkout-confirm-btn:active { transform: scale(.98); }
    .checkout-confirm-btn.cancel {
        color: var(--theme-text, #111);
        background: color-mix(in srgb, var(--theme-secondary, #eee) 80%, transparent);
        border: 1px solid color-mix(in srgb, var(--theme-text, #111) 10%, transparent);
    }
    .checkout-confirm-btn.pay {
        color: var(--theme-on-accent, #fff);
        background: var(--theme-accent, #d58a94);
        box-shadow: 0 12px 28px color-mix(in srgb, var(--theme-accent, #d58a94) 30%, transparent);
    }
    .checkout-confirm-close {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 4;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 12px;
        background: color-mix(in srgb, var(--theme-secondary, #eee) 74%, transparent);
        color: var(--theme-text, #111);
        cursor: pointer;
        font-size: 20px;
        line-height: 1;
    }
    .checkout-confetti-layer {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        border-radius: inherit;
        z-index: 1;
    }
    .checkout-confirm-head,
    .checkout-confirm-summary,
    .checkout-confirm-actions { position: relative; z-index: 2; }
    .checkout-confetti {
        position: absolute;
        top: -18px;
        width: 7px;
        height: 13px;
        border-radius: 3px;
        opacity: 0;
        animation: checkoutConfettiFall 1.45s cubic-bezier(.16,.76,.24,1) forwards;
    }
    @keyframes checkoutConfettiFall {
        0% { opacity: 0; transform: translate3d(0,-14px,0) rotate(0deg); }
        12% { opacity: 1; }
        100% { opacity: 0; transform: translate3d(var(--drift, 0px), 360px,0) rotate(var(--spin, 420deg)); }
    }
    @media (max-width: 640px) {
        .checkout-confirm-overlay { align-items: flex-end; padding: 12px; }
        .checkout-confirm-box {
            border-radius: 24px;
            transform: translate3d(0, 34px, 0) scale(.985);
        }
        .checkout-confirm-overlay.show .checkout-confirm-box {
            transform: translate3d(0, 0, 0) scale(1);
        }
        .checkout-confirm-head { padding-top: 24px; }
        .checkout-confirm-actions { grid-template-columns: 1fr; }
        .checkout-confirm-btn.pay { order: -1; }
    }
    @media (prefers-reduced-motion: reduce) {
        .checkout-confirm-overlay,
        .checkout-confirm-box,
        .checkout-confirm-icon,
        .checkout-confirm-head h3,
        .checkout-confirm-head p,
        .checkout-confirm-check,
        .checkout-confirm-summary,
        .checkout-confirm-actions,
        .checkout-confirm-row { transition: none !important; }
        .checkout-confirm-overlay.show .checkout-confirm-box,
        .checkout-confirm-overlay.show .checkout-confirm-icon,
        .checkout-confirm-overlay.show .checkout-confirm-head h3,
        .checkout-confirm-overlay.show .checkout-confirm-head p,
        .checkout-confirm-overlay.show .checkout-confirm-check,
        .checkout-confirm-overlay.show .checkout-confirm-summary,
        .checkout-confirm-overlay.show .checkout-confirm-actions,
        .checkout-confirm-overlay.show .checkout-confirm-row { transform: none; opacity: 1; }
        .checkout-confetti { display: none; }
    }