.mp-page {
    max-width:1240px;
    margin:0 auto 72px;
    padding:116px 24px 0;
    color:#202951;
    --mp-ink:#202951;
    --mp-muted:#7a819a;
    --mp-line:#e9ecf5;
    --mp-blue:#4356ed;
    scroll-margin-top:100px;
    font-size:14px;
}

.mp-page * {
    box-sizing:border-box;
}

.mp-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    margin-bottom:28px;
}

.mp-eyebrow {
    font-size:10px;
    font-weight:700;
    letter-spacing:1.8px;
    color:#8690ab;
}

.mp-heading h1 {
    font-size:34px;
    font-weight:700;
    letter-spacing:-1px;
    margin:8px 0 9px;
    display:flex;
    align-items:center;
    gap:12px;
}

.mp-title-dot {
    width:9px;
    height:9px;
    border-radius:50%;
    background:#8993ff;
}

.mp-heading p,.mp-section-head p {
    margin:0;
    color:var(--mp-muted);
    line-height:1.7;
}

.mp-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:11px 16px;
    border-radius:10px;
    font-size:12px;
    font-weight:600;
    border:1px solid transparent;
    cursor:pointer;
    text-decoration:none!important;
    transition:background .15s;
}

.mp-button-light {
    background:#fff;
    border-color:#e2e6f2;
    color:#46516d;
}

.mp-button-light:hover {
    background:#f5f6ff;
    color:#3548d4;
}

.mp-button-primary {
    background:var(--mp-blue);
    color:#fff;
}

.mp-button-primary:hover {
    background:#3044d7;
    color:#fff;
}

.mp-button-disabled {
    background:#f0f2f7;
    color:#959bb0;
    cursor:not-allowed;
}

.mp-full {
    width:100%;
}

.mp-page button:focus-visible,.mp-page a:focus-visible,.mp-page input:focus-visible,.mp-page select:focus-visible,.mp-page textarea:focus-visible {
    outline:3px solid #a5b2ff;
    outline-offset:3px;
}

.mp-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 290px;
    gap:24px;
    align-items:start;
}

.mp-main {
    min-width:0;
}

.mp-side {
    position:sticky;
    top:100px;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.mp-stat-icon {
    display:inline-grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:12px;
    background:#eef0ff;
    color:#5765dd;
    font-size:19px;
    margin-bottom:14px;
}

.mp-icon-green {
    background:#eaf8f2;
    color:#389477;
}

.mp-total {
    padding:22px;
    border:1px solid var(--mp-line);
    border-radius:18px;
    background:#fff;
    box-shadow:0 16px 36px -30px #1e266d;
}

.mp-total-head {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:11.5px;
    font-weight:600;
    color:var(--mp-muted);
}

.mp-total-head .mp-coin {
    width:22px;
    height:22px;
}

.mp-total-number {
    margin:14px 0 16px;
    font-size:30px;
    font-weight:700;
    letter-spacing:-1px;
    color:var(--mp-blue);
}

.mp-total-number span {
    margin-left:6px;
    font-size:12px;
    font-weight:400;
    letter-spacing:0;
    color:var(--mp-muted);
}

.mp-total-rows {
    display:grid;
    gap:12px;
    padding-top:14px;
    border-top:1px solid var(--mp-line);
}

.mp-total-rows>div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:12px;
    color:var(--mp-muted);
}

.mp-total-rows strong {
    font-size:12.5px;
    color:var(--mp-ink);
}

.mp-dot {
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:8px;
    border-radius:50%;
}

.mp-dot-on {
    background:#2fb37f;
}

.mp-dot-hold {
    background:#e2685f;
}

.mp-promo {
    position:relative;
    overflow:hidden;
    padding:22px;
    border:1px solid #dfe4ff;
    border-radius:18px;
    background:linear-gradient(140deg,#eef2ff,#e0e7ff);
}

.mp-promo h3 {
    position:relative;
    z-index:1;
    margin:0 0 10px;
    font-size:14px;
    font-weight:700;
    line-height:1.5;
    color:#28307a;
}

.mp-promo p {
    position:relative;
    z-index:1;
    margin:0;
    font-size:11.5px;
    line-height:1.7;
    color:#5a6285;
}

.mp-promo>i {
    position:absolute;
    right:-16px;
    bottom:-22px;
    font-size:104px;
    color:#c3ccff;
    opacity:.62;
}

.mp-panel {
    border:1px solid var(--mp-line);
    border-radius:18px;
    background:#fff;
    padding:26px;
}

.mp-section-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:22px;
}

.mp-section-head h2 {
    font-size:21px;
    font-weight:700;
    letter-spacing:-.5px;
    margin:7px 0;
}

.mp-section-head p {
    font-size:12px;
}

.mp-count {
    flex-shrink:0;
    background:#f3f5fb;
    padding:6px 10px;
    border-radius:7px;
    color:#79819b;
    font-size:10px;
}

.mp-filter {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
}

.mp-chips {
    flex:1 1 100%;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.mp-chip {
    margin:0;
    cursor:pointer;
}

.mp-chip input {
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.mp-chip span {
    display:inline-flex;
    align-items:center;
    padding:8px 16px;
    border:1px solid var(--mp-line);
    border-radius:999px;
    background:#fff;
    font-size:12px;
    font-weight:600;
    color:#66708a;
    transition:background .18s ease, color .18s ease, border-color .18s ease;
}

.mp-chip span:hover {
    border-color:rgba(67,86,237,.35);
    color:var(--mp-blue);
}

.mp-chip input:checked + span {
    background:var(--mp-blue);
    border-color:var(--mp-blue);
    color:#fff;
}

.mp-chip input:focus-visible + span {
    outline:2px solid #8993ff;
    outline-offset:2px;
}

.mp-sort {
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    font-size:11px;
    color:var(--mp-muted);
}

.mp-search {
    flex:1;
    display:flex;
    align-items:center;
    gap:10px;
    background:#fafbfe;
    border:1px solid var(--mp-line);
    padding:0 12px;
    border-radius:9px;
    margin:0;
    color:#909ab2;
}

.mp-search input {
    width:100%;
    border:0;
    background:transparent;
    padding:11px 0;
    color:var(--mp-ink);
    font-size:12px;
    min-width:0;
}

.mp-filter select {
    border:1px solid var(--mp-line);
    border-radius:9px;
    padding:8px;
    font-size:11px;
    background:white;
    color:#66708a;
    max-width:155px;
}

.mp-reward-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.mp-reward-grid>.mp-empty,
.mp-reward-grid>.mp-muted {
    grid-column:1 / -1;
}

.mp-reward {
    border:1px solid var(--mp-line);
    border-radius:14px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.mp-reward-visual {
    /* Cover reward rasio 1:1. */
    aspect-ratio:1 / 1;
    height:auto;
    position:relative;
    display:grid;
    place-items:center;
    background:#eff1ff;
    color:#7a85dd;
}

.mp-visual-gift {
    background:#eef7f4;
    color:#66a28f;
}

.mp-reward-visual>i {
    font-size:54px;
    transform:rotate(-12deg);
    opacity:.7;
}

.mp-reward-type {
    position:absolute;
    left:12px;
    top:12px;
    padding:4px 10px;
    border-radius:999px;
    background:#e4e8ff;
    color:#3d4fd6;
    font-size:9px;
    letter-spacing:.6px;
    font-weight:700;
}

.mp-visual-gift .mp-reward-type {
    background:#e2f5ec;
    color:#1f8a63;
}

.mp-reward-mark {
    position:absolute;
    right:12px;
    bottom:12px;
    font-size:9px;
    letter-spacing:2px;
    opacity:.55;
}

.mp-reward-body {
    padding:18px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.mp-reward h3 {
    font-size:13px;
    line-height:1.6;
    font-weight:600;
    margin:0 0 8px;
}

.mp-reward-detail {
    font-size:10px;
    color:var(--mp-muted);
    line-height:1.6;
    margin-bottom:7px;
}

.mp-reward-price {
    display:flex;
    gap:6px;
    align-items:center;
    margin-top:auto;
    padding:14px 0;
}

.mp-reward-price strong {
    font-size:16.5px;
    color:var(--mp-ink);
}

.mp-reward-price .mp-coin {
    width:17px;
    height:17px;
}

.mp-reward-price>span {
    font-size:10px;
    color:var(--mp-muted);
}

/* Kartu "sudah ditukar": badge status + tombol detail. */
.mp-reward-body .mp-status {
    align-self:flex-start;
    margin-bottom:10px;
}

.mp-redeem-detail {
    margin-top:8px;
}

.mp-availability {
    text-align:center;
    color:#939bb2;
    font-size:10px;
    margin:8px 0 0;
}

.mp-reward-unavailable .mp-reward-visual {
    filter:grayscale(.55);
}

.mp-history {
    scroll-margin-top:100px;
}

.mp-catalog {
    scroll-margin-top:100px;
}

.mp-table-wrap {
    overflow-x:auto;
}

.mp-table {
    width:100%;
    border-collapse:collapse;
    text-align:left;
    font-size:11px;
}

.mp-table th {
    color:#8a93aa;
    font-size:10px;
    font-weight:500;
    background:#fafbfe;
    padding:13px 12px;
    white-space:nowrap;
}

.mp-table td {
    padding:18px 12px;
    border-bottom:1px solid #f0f2f8;
    vertical-align:middle;
}

.mp-table td:first-child {
    min-width:200px;
    max-width:320px;
}

.mp-table strong {
    font-size:11px;
    font-weight:600;
}

.mp-table small {
    display:block;
    color:var(--mp-muted);
    font-size:10px;
    margin-top:5px;
}

.mp-table td:not(:first-child) {
    white-space:nowrap;
}

.mp-status {
    border-radius:6px;
    font-size:9px;
    padding:6px 8px;
    background:#f3f4fa;
    color:#7a819a;
}

.mp-status-0 {
    background:#fff6e5;
    color:#af8540;
}

.mp-status-1 {
    background:#eef1ff;
    color:#667bca;
}

.mp-status-2 {
    background:#eaf7ef;
    color:#448c65;
}

.mp-voucher {
    display:flex;
    align-items:center;
    gap:6px;
}

.mp-table code {
    font-size:10px;
    color:#6876ad;
    word-break:break-all;
}

.mp-copy {
    border:0;
    border-radius:5px;
    background:#f1f3fc;
    color:#6876ad;
    cursor:pointer;
    padding:4px 6px;
}

.mp-history-note {
    font-size:10px;
    color:#98a0b4;
    margin:14px 0 0;
}

.mp-pagination {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    margin-top:20px;
    font-size:11px;
}

.mp-pagination a {
    color:var(--mp-blue);
}

.mp-pagination span {
    color:var(--mp-muted);
}

.mp-empty {
    text-align:center;
    padding:46px 20px;
}

.mp-empty>i {
    display:block;
    font-size:36px;
    color:#99a3d4;
    margin-bottom:14px;
}

.mp-empty h3,.mp-empty h2 {
    font-size:17px;
    font-weight:600;
    margin-bottom:10px;
}

.mp-empty p {
    font-size:12px;
    color:var(--mp-muted);
    line-height:1.7;
}

.mp-empty a {
    font-size:12px;
    color:var(--mp-blue);
}

.mp-notice {
    border-radius:12px;
    padding:14px 18px;
    margin-bottom:22px;
    font-size:13px;
}

.mp-notice-success {
    background:#ebf8f0;
    color:#3c8058;
}

.mp-notice-error {
    background:#fff0f0;
    color:#a34040;
}

.mp-shipping {
    margin-bottom:12px;
    font-size:11px;
}

.mp-shipping summary {
    cursor:pointer;
    color:var(--mp-blue);
    padding:6px 0;
}

.mp-shipping label {
    display:block;
    margin:10px 0;
    color:var(--mp-muted);
}

.mp-shipping input,.mp-shipping textarea {
    display:block;
    width:100%;
    margin-top:4px;
    border:1px solid #e1e5f0;
    border-radius:6px;
    padding:8px;
    color:var(--mp-ink);
}

.mp-dialog {
    border:0;
    border-radius:20px;
    padding:0;
    width:calc(100% - 32px);
    max-width:440px;
    max-height:calc(100vh - 44px);
    max-height:calc(100dvh - 44px);
    overflow:hidden;
    color:var(--mp-ink);
    box-shadow:0 24px 80px #1f275440;
}

/* Modal terbuka: kunci scroll halaman, hanya isi modal yang boleh di-scroll. */
html.mp-modal-open,
html.mp-modal-open body {
    overflow:hidden;
}

/* styles.css legacy men-set `dialog {display:block}`, jadi dialog tertutup ikut tampil. */
.mp-dialog:not([open]) {
    display:none;
}

.mp-dialog::backdrop {
    background:#16204570;
    backdrop-filter:blur(3px);
}

.mp-dialog-content {
    position:relative;
    padding:30px;
    max-height:calc(100vh - 44px);
    max-height:calc(100dvh - 44px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}

.mp-dialog h2 {
    font-size:21px;
    font-weight:700;
    margin-bottom:16px;
}

.mp-dialog p {
    font-size:13px;
    line-height:1.7;
}

.mp-confirm-summary {
    background:#f5f6ff;
    border-radius:12px;
    padding:18px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    margin:20px 0;
}

.mp-confirm-summary span {
    font-size:11px;
    color:var(--mp-muted);
}

.mp-confirm-summary strong {
    display:block;
    color:var(--mp-blue);
    font-size:21px;
    margin-top:5px;
}

.mp-dialog-actions {
    display:flex;
    gap:10px;
    justify-content:flex-end;
    margin-top:22px;
}

.mp-muted {
    color:var(--mp-muted);
}

.mp-sr-only {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
}

@media(max-width:1000px) {
    .mp-layout {
        grid-template-columns:minmax(0,1fr) 250px;
        gap:18px;
    }
    .mp-reward-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .mp-panel {
        padding:20px;
    }
}

@media(max-width:767px) {
    .mp-page {
        padding:100px 18px 0;
        margin-bottom:48px;
    }
    .mp-heading {
        align-items:flex-start;
    }
    .mp-heading h1 {
        font-size:28px;
    }
    .mp-heading p {
        font-size:12px;
    }
    .mp-stat-icon {
        width:34px;
        height:34px;
        font-size:16px;
        margin-bottom:10px;
    }
    .mp-layout {
        grid-template-columns:1fr;
        gap:20px;
    }
    .mp-side {
        position:static;
        flex-direction:row;
        align-items:stretch;
    }
    .mp-total,.mp-promo {
        flex:1 1 0;
        min-width:0;
    }
    .mp-section-head h2 {
        font-size:19px;
    }
    .mp-reward-grid {
        gap:12px;
    }
    .mp-reward-body {
        padding:14px;
    }
    .mp-filter {
        flex-wrap:wrap;
    }
    .mp-search {
        flex-basis:100%;
    }
    .mp-filter select {
        flex:1;
        max-width:none;
    }
    .mp-panel {
        padding:18px;
    }
    .mp-table td:first-child {
        min-width:175px;
    }
}

@media(max-width:420px) {
    .mp-heading {
        flex-direction:column;
        gap:12px;
    }
    .mp-reward-grid {
        grid-template-columns:1fr;
    }
    .mp-side {
        flex-direction:column;
    }
    .mp-count {
        font-size:9px;
    }
}

.mp-tabs {
    display:flex;
    gap:6px;
    padding:6px;
    margin-bottom:24px;
    border:1px solid var(--mp-line);
    border-radius:14px;
    background:#fff;
    overflow-x:auto;
    scrollbar-width:thin;
}

.mp-tab {
    flex:1 1 0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 16px;
    border:0;
    border-radius:10px;
    background:transparent;
    font-family:inherit;
    font-size:13.5px;
    font-weight:600;
    white-space:nowrap;
    color:#6c7392;
    cursor:pointer;
    transition:background .18s ease, color .18s ease;
}

.mp-tab:hover {
    background:#f4f6fd;
    color:#1e266d;
}

.mp-tab.is-active {
    color:var(--mp-blue);
    background:#eef0ff;
    box-shadow:inset 0 -2px 0 var(--mp-blue);
}

.mp-tab i {
    font-size:15px;
}

.mp-tab:focus-visible {
    outline:2px solid #8993ff;
    outline-offset:2px;
}

.mp-earn-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
    gap:16px;
}

.mp-earn-card {
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:20px;
    border:1px solid var(--mp-line);
    border-radius:16px;
    background:#fafbfe;
    color:inherit;
    text-decoration:none;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.mp-earn-card:hover {
    border-color:rgba(67,86,237,.35);
    box-shadow:0 16px 34px -26px #1e266d;
    transform:translateY(-2px);
    color:inherit;
    text-decoration:none;
}

.mp-earn-media {
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:88px;
    height:88px;
}

.mp-earn-media img {
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.mp-earn-glyph {
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    border-radius:16px;
    background:#eef0ff;
    color:#5765dd;
    font-size:24px;
}

.mp-earn-text {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    min-width:0;
    flex:1;
    padding-right:26px;
}

.mp-earn-text h3 {
    margin:0;
    font-size:15px;
    font-weight:700;
    line-height:1.4;
    color:var(--mp-ink);
}

.mp-earn-desc {
    font-size:12.5px;
    line-height:1.6;
    color:var(--mp-muted);
}

.mp-earn-points {
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin:2px 0;
    padding:5px 12px;
    border:1px solid var(--mp-line);
    border-radius:999px;
    background:#fff;
    color:var(--mp-blue);
    font-size:12px;
    font-weight:700;
}

/* Koin emas dengan huruf P di pill poin */
.mp-coin {
    width:18px;
    height:18px;
    flex:0 0 auto;
}

.mp-coin text {
    font-family:inherit;
    font-size:12px;
    font-weight:800;
}

.mp-earn-link {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12.5px;
    font-weight:700;
    color:var(--mp-blue);
}

.mp-earn-card:hover .mp-earn-link {
    text-decoration:underline;
}

.mp-earn-go {
    position:absolute;
    right:14px;
    top:14px;
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:#eef2ff;
    color:var(--mp-blue);
    font-size:13px;
}

/* Blok poin lifetime di tab Cara Dapat Poin */
.mp-earn-life {
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:20px;
    padding:18px 22px;
    border:1px solid #dfe4ff;
    border-radius:16px;
    background:linear-gradient(140deg,#eef2ff,#e6ecff);
}

.mp-earn-life>i {
    flex:0 0 auto;
    font-size:26px;
    color:#5765dd;
}

.mp-earn-life>div {
    flex:1;
    min-width:0;
}

.mp-earn-life h3 {
    margin:0 0 4px;
    font-size:13.5px;
    font-weight:700;
    color:#28307a;
}

.mp-earn-life p {
    margin:0;
    font-size:11.5px;
    line-height:1.6;
    color:#5a6285;
}

@media(max-width:767px) {
    .mp-tab {
        flex:0 0 auto;
        padding:10px 14px;
        font-size:12.5px;
    }
    .mp-earn-card {
        padding:16px;
        gap:12px;
    }
    .mp-earn-media {
        width:72px;
        height:72px;
    }
    .mp-earn-text {
        padding-right:22px;
    }
    .mp-earn-life {
        flex-direction:column;
        align-items:flex-start;
    }
    .mp-earn-life .mp-button {
        width:100%;
    }
}

.mp-reward-cover {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.mp-option-list {
    display:grid;
    gap:10px;
    margin:18px 0;
    max-height:280px;
    overflow:auto;
}

.mp-option {
    display:flex;
    align-items:center;
    gap:12px;
    margin:0;
    padding:12px 14px;
    border:1px solid var(--mp-line);
    border-radius:12px;
    background:#fafbfe;
    cursor:pointer;
}

.mp-option:hover {
    border-color:rgba(67,86,237,.35);
}

.mp-option input {
    flex:0 0 auto;
    accent-color:var(--mp-blue);
}

.mp-option-body {
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}

.mp-option-body strong {
    font-size:12.5px;
    color:var(--mp-ink);
}

.mp-option-body small {
    font-size:11px;
    color:var(--mp-muted);
}

.mp-option input:checked + .mp-option-body strong {
    color:var(--mp-blue);
}

/* --- Poin & Reward: sub-tab riwayat, wizard ongkir, modal detail (v18) --- */
.mp-subtabs { display:flex; gap:8px; margin:0 0 14px; flex-wrap:wrap; }
.mp-subtab { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid var(--mp-line,#e3e8f0); background:#fff; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--mp-muted,#5b6b82); cursor:pointer; }
.mp-subtab.is-active { background:var(--mp-blue,#2b6ef6); border-color:var(--mp-blue,#2b6ef6); color:#fff; }
.mp-subpanel { margin-top:4px; }
.mp-subfilter { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:14px; }
.mp-subfilter label { display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:600; color:var(--mp-muted,#5b6b82); }
.mp-subfilter select, .mp-subfilter input[type=date] { padding:7px 10px; border:1px solid var(--mp-line,#e3e8f0); border-radius:8px; font-size:12.5px; background:#fff; }
.mp-point-in { color:#1a9e63; }
.mp-point-out { color:#d1495b; }
.mp-dialog-wide { width:min(600px, 94vw); }
.mp-ship-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0; }
.mp-dialog-content label { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:var(--mp-muted,#5b6b82); margin-bottom:8px; }
.mp-dialog-content input, .mp-dialog-content textarea { padding:9px 11px; border:1px solid var(--mp-line,#e3e8f0); border-radius:8px; font-size:13px; font-family:inherit; }
.mp-dialog-content input[readonly] { background:#f6f8fb; }
.mp-dest-list { display:flex; flex-direction:column; gap:6px; max-height:180px; overflow:auto; margin-bottom:8px; }
.mp-dest-option { display:flex; flex-direction:column; gap:2px; text-align:left; padding:9px 11px; border:1px solid var(--mp-line,#e3e8f0); border-radius:8px; background:#fff; cursor:pointer; }
.mp-dest-option:hover { border-color:var(--mp-blue,#2b6ef6); background:#f5f9ff; }
.mp-dest-option small, .mp-service-body small { color:var(--mp-muted,#5b6b82); font-size:11px; }
.mp-ship-services { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.mp-service { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--mp-line,#e3e8f0); border-radius:10px; cursor:pointer; }
.mp-service:has(input:checked) { border-color:var(--mp-blue,#2b6ef6); background:#f5f9ff; }
.mp-service-body { display:flex; flex-direction:column; gap:2px; flex:1; }
.mp-service-cost { font-weight:700; color:var(--mp-ink,#0f1c2e); }
/* --- Popup detail / voucher --- */
.mp-detail { display:flex; flex-direction:column; gap:18px; }
.mp-detail-top { display:flex; align-items:flex-start; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--mp-line,#eef2f7); }
.mp-detail-avatar { flex:0 0 46px; width:46px; height:46px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; font-size:20px; }
.mp-detail-avatar.is-digital { background:linear-gradient(140deg,#eaf0ff,#dbe5ff); color:#4356ed; }
.mp-detail-avatar.is-physical { background:linear-gradient(140deg,#e7f7ee,#d3f0e0); color:#2f9e6b; }
.mp-detail-top-text { flex:1; min-width:0; }
.mp-detail-top-text h2 { margin:0 0 9px; font-size:17px; line-height:1.35; }
.mp-detail-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.mp-detail-chip { padding:4px 10px; border-radius:999px; background:#f2f4fa; color:#5b6b82; font-size:11px; font-weight:600; }
.mp-detail-chips .mp-status { padding:4px 10px; font-weight:700; }
.mp-detail-section { margin:0; padding:16px; border:1px solid #eef2f7; border-radius:14px; background:#fbfcff; }
.mp-detail-section + .mp-detail-section { margin-top:12px; }
.mp-detail-section h3 { display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:12.5px; color:var(--mp-ink,#202951); }
.mp-detail-section h3 i { color:#4356ed; }
.mp-detail-section p { margin:0; font-size:12px; color:#5b6b82; line-height:1.7; }
.mp-detail-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.mp-voucher-box { display:flex; align-items:center; gap:10px; justify-content:space-between; padding:12px 14px; border:1px dashed #b9c6f5; border-radius:12px; background:#f6f8ff; margin:0; }
.mp-voucher-box code { font-size:13.5px; font-weight:700; letter-spacing:.6px; color:var(--mp-ink,#202951); word-break:break-all; }
.mp-pagination button { padding:7px 12px; border:1px solid var(--mp-line,#e3e8f0); border-radius:8px; background:#fff; cursor:pointer; font-size:12px; }
.mp-pagination button:disabled { opacity:.5; cursor:not-allowed; }
@media (max-width:560px){ .mp-ship-grid { grid-template-columns:1fr; } }

/* --- Poin & Reward: dialog pilih opsi voucher (v19) --- */
.mp-dialog-options { width:min(920px, 96vw); max-width:920px; }
.mp-dialog-options .mp-dialog-content { padding:24px 26px 22px; }
.mp-options-head { display:flex; align-items:flex-start; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--mp-line,#e9ecf5); }
.mp-options-head .mp-stat-icon { margin-bottom:0; flex:0 0 auto; }
.mp-options-heading { flex:1; min-width:0; }
.mp-options-heading h2 { margin:0 0 6px; font-size:19px; line-height:1.3; }
.mp-options-heading p { margin:0; font-size:12.5px; line-height:1.65; }
.mp-options-close { flex:0 0 auto; width:32px; height:32px; border:1px solid var(--mp-line,#e9ecf5); border-radius:50%; background:#fff; color:var(--mp-muted,#7a819a); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.mp-options-close:hover { color:var(--mp-ink,#202951); border-color:#c9d1e6; }
.mp-options-grid { display:grid; grid-template-columns:minmax(0,1fr) 268px; gap:22px; align-items:start; }
.mp-options-main h3 { margin:18px 0 4px; font-size:14px; }
.mp-options-main > p { margin:0; font-size:12.5px; }
.mp-options-side { display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.mp-options-card { background:#f5f6ff; border-radius:14px; padding:16px; }
.mp-options-card h4, .mp-options-note h4 { display:flex; align-items:center; gap:7px; margin:0 0 12px; font-size:12px; }
.mp-options-picked { display:flex; flex-direction:column; gap:2px; margin:0 0 10px; padding:10px 12px; border-radius:10px; background:#fff; }
.mp-options-picked strong { font-size:12.5px; color:var(--mp-blue,#4356ed); }
.mp-options-picked small { font-size:11px; color:var(--mp-muted,#7a819a); }
.mp-options-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px dashed #dfe4f5; font-size:12px; color:var(--mp-muted,#7a819a); }
.mp-options-row strong { font-size:12.5px; color:var(--mp-ink,#202951); }
.mp-options-note { padding:14px 16px; border-radius:14px; background:#f7f9fc; }
.mp-options-note h4 { margin-bottom:8px; }
.mp-options-note p, .mp-options-note ul { margin:0; font-size:11.5px; line-height:1.65; color:var(--mp-muted,#7a819a); }
.mp-options-note ul { padding-left:16px; }
.mp-options-note li + li { margin-top:4px; }

/* Isi catatan penukaran dari Dapur berbentuk HTML (rich text). */
.mp-options-note .mp-options-rich { font-size:11.5px; line-height:1.65; color:var(--mp-muted,#7a819a); }
.mp-options-note .mp-options-rich>*:first-child { margin-top:0; }
.mp-options-note .mp-options-rich>*:last-child { margin-bottom:0; }
.mp-options-note .mp-options-rich p { margin:0 0 8px; }
.mp-options-note .mp-options-rich ul, .mp-options-note .mp-options-rich ol { margin:0 0 8px; padding-left:16px; }
.mp-options-note .mp-options-rich li+li { margin-top:4px; }
.mp-options-note .mp-options-rich strong { color:var(--mp-ink,#202951); }
.mp-dialog-options .mp-option-list { max-height:none; overflow:visible; margin:12px 0 0; }
.mp-dialog-options .mp-option { flex-direction:row; align-items:center; gap:12px; margin:0; padding:12px 14px; font-weight:400; cursor:pointer; transition:border-color .15s, background .15s; }
.mp-dialog-options .mp-option input[type=radio] { flex:0 0 auto; width:16px; height:16px; padding:0; accent-color:var(--mp-blue,#4356ed); }
.mp-option-icon { flex:0 0 auto; width:32px; height:32px; border-radius:9px; background:#eef1ff; color:var(--mp-blue,#4356ed); display:inline-flex; align-items:center; justify-content:center; font-size:15px; }
.mp-option-go { margin-left:auto; color:#c3cadf; font-size:13px; }
.mp-dialog-options .mp-option:has(input:checked) { border-color:var(--mp-blue,#4356ed); background:#f5f8ff; }
.mp-dialog-options .mp-option:has(input:checked) .mp-option-go { color:var(--mp-blue,#4356ed); }
.mp-option-thumb { flex:0 0 auto; width:46px; height:46px; border-radius:10px; object-fit:cover; background:#eef1ff; }
.mp-option-desc { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mp-dialog-close { flex:0 0 auto; width:32px; height:32px; border:0; border-radius:50%; background:#f2f4fa; color:var(--mp-muted,#7a819a); font-size:13px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.mp-dialog-close:hover { background:#e8ecf8; color:var(--mp-ink,#202951); }
.mp-dialog-close-abs { position:absolute; top:14px; right:14px; }
.mp-voucher { display:flex; flex-direction:column; gap:12px; padding:16px; border:1px solid #e8ecfa; border-radius:16px; background:#fff; box-shadow:0 16px 34px -30px #20295166; }
.mp-voucher + .mp-voucher { margin-top:14px; }
.mp-voucher-head { display:flex; align-items:flex-start; gap:12px; }
.mp-voucher-headtext { min-width:0; }
.mp-voucher-headtext h3 { margin:0; font-size:13.5px; line-height:1.4; }
.mp-detail-thumb { flex:0 0 auto; width:52px; height:52px; border-radius:12px; object-fit:cover; background:#eef1ff; }
.mp-detail-thumb-ph { display:inline-flex; align-items:center; justify-content:center; color:#4356ed; font-size:20px; }
.mp-voucher-exp { display:flex; align-items:center; gap:7px; margin:0; font-size:11.5px; color:var(--mp-muted,#7a819a); }
.mp-voucher-exp strong { color:var(--mp-ink,#202951); }
.mp-detail-desc { margin:4px 0 0; font-size:11.5px; line-height:1.6; }
.mp-dialog-options .mp-dialog-actions { position:sticky; bottom:0; padding:12px 0 2px; background:#fff; box-shadow:0 -12px 16px -12px #20295126; }
@media (max-width:820px) {
    .mp-options-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
    .mp-options-side { margin-top:0; }
    .mp-dialog-options .mp-dialog-content { padding:20px 18px 18px; }
}

/* Opsi reward yang sudah dimiliki pelanggan: tidak bisa dipilih lagi. */
.mp-option.is-owned {
    opacity: .62;
    cursor: not-allowed;
}

.mp-option.is-owned input {
    cursor: not-allowed;
}

.mp-option-owned {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e7f7ee;
    color: #12864a;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .02em;
}

/* Pesan status di dialog pilihan (poin belum cukup / opsi sudah dimiliki). */
.mp-options-alert {
    margin: 0 0 12px;
    padding: 11px 14px;
    border: 1px solid #ffe1a6;
    border-radius: 12px;
    background: #fff8e8;
    color: #a9761a;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.6;
}