/* ============================================================
   MVSTORE — Inner Pages Design System
   Scope: body.mv-page
   Mengikuti palet & token homepage (mv-home.css):
   aksen dari set_color_primary / set_color_secondary,
   tema dari set_dark.
   ============================================================ */

body.mv-page {
    --mvx-bg: #f4f6fc;
    --mvx-bg-soft: #eef2fa;
    --mvx-card: #ffffff;
    --mvx-card-2: #f8faff;
    --mvx-border: #dfe5f2;
    --mvx-border-soft: #e8edf8;
    --mvx-text: #101828;
    --mvx-muted: #5f6b84;
    --mvx-dim: #8b95aa;
    --mvx-media-bg: #eef2fa;
    --mvx-grid-line: rgba(16, 24, 40, 0.045);
    --mvx-shadow: 0 18px 44px -30px rgba(16, 24, 40, 0.45);
    --mvx-accent-ink: color-mix(in srgb, var(--ar-primary) 72%, #101828);
    --mvx-grad: linear-gradient(135deg, var(--ar-primary), var(--ar-primary-hover));
    --mvx-radius: 14px;
    --mvx-radius-sm: 10px;
    --mvx-transition: all 0.2s ease;

    /* Selaraskan token tema lama agar komponen inner page ikut palet baru */
    --mv-bg-card: var(--mvx-card);
    --mv-bg-section: var(--mvx-bg-soft);
    --mv-border-color: var(--mvx-border-soft);
    --mv-text-muted: var(--mvx-muted);
    --mv-text-dark: var(--mvx-text);
    --mv-radius: var(--mvx-radius);
    --mv-radius-sm: var(--mvx-radius-sm);
    --mv-radius-lg: 16px;
    --mv-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    --mv-card-shadow-hover: 0 14px 32px -20px rgba(16, 24, 40, 0.25);
    --mv-transition: var(--mvx-transition);

    background-color: #f4f6fc !important;
    background-image:
        linear-gradient(var(--mvx-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--mvx-grid-line) 1px, transparent 1px);
    background-size: 56px 56px;
    background-attachment: fixed;
    color: var(--mvx-text);
}

html[data-bs-theme="dark"] body.mv-page {
    --mvx-bg: #05070d;
    --mvx-bg-soft: #070a14;
    --mvx-card: #0b1020;
    --mvx-card-2: #0d1324;
    --mvx-border: #1a2440;
    --mvx-border-soft: #141c31;
    --mvx-text: #eef2ff;
    --mvx-muted: #8b97b4;
    --mvx-dim: #64708c;
    --mvx-media-bg: #080d18;
    --mvx-grid-line: rgba(120, 150, 220, 0.055);
    --mvx-shadow: 0 20px 44px -28px rgba(0, 0, 0, 0.95);
    --mvx-accent-ink: var(--ar-primary);

    --mv-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --mv-card-shadow-hover: 0 14px 32px -20px color-mix(in srgb, var(--ar-primary) 45%, transparent);

    background-color: #05070d !important;
}

body.mv-page .page-wrapper {
    background: transparent !important;
}

body.mv-page .main-container {
    margin-top: 14px;
    padding-bottom: 40px;
}

/* ------------------------------------------------------------
   PAGE HEADER
   ------------------------------------------------------------ */
.mvp-head {
    position: relative;
    padding-left: 14px;
    margin: 4px 0 16px;
}

.mvp-head::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 3px;
    border-radius: 3px;
    background: var(--mvx-grad);
}

.mvp-title {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--mvx-text);
}

.mvp-sub {
    margin: 4px 0 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--mvx-muted);
}

/* ------------------------------------------------------------
   TIPOGRAFI & LINK
   ------------------------------------------------------------ */
body.mv-page h1,
body.mv-page h2,
body.mv-page h3,
body.mv-page h4,
body.mv-page h5,
body.mv-page h6 {
    color: var(--mvx-text);
}

body.mv-page p {
    color: var(--mvx-muted);
}

body.mv-page p a {
    color: var(--mvx-accent-ink);
    text-decoration: none;
    font-weight: 600;
}

body.mv-page p a:hover {
    text-decoration: underline;
}

/* Utilitas teks lama yang tidak cocok dengan tema gelap */
body.mv-page .text-dark,
body.mv-page .bg-white.text-black {
    color: var(--mvx-text) !important;
}

/* ------------------------------------------------------------
   CARD / PANEL
   ------------------------------------------------------------ */
body.mv-page .mv-invoice-bg,
body.mv-page .mv-product-item,
body.mv-page .mv-payment-div,
body.mv-page .mv-email-div {
    background: var(--mvx-card) !important;
    border: 1px solid var(--mvx-border-soft) !important;
    border-radius: var(--mvx-radius) !important;
    box-shadow: none !important;
}

body.mv-page .card {
    background: var(--mvx-card);
    border: 1px solid var(--mvx-border-soft);
    border-radius: 12px;
    box-shadow: none;
    color: var(--mvx-text);
}

body.mv-page .card:hover {
    border-color: color-mix(in srgb, var(--ar-primary) 35%, var(--mvx-border));
}

body.mv-page .bg-light {
    background: var(--mvx-card-2) !important;
    color: var(--mvx-muted) !important;
    border: 1px solid var(--mvx-border-soft);
}

/* Container besar (FAQ, kebijakan, kontak) */
body.mv-page .container.rounded-5.overflow-hidden {
    margin-top: 14px !important;
    background: var(--mvx-card);
    border: 1px solid var(--mvx-border-soft);
    border-radius: var(--mvx-radius) !important;
    box-shadow: var(--mvx-shadow) !important;
}

/* ------------------------------------------------------------
   FORM
   ------------------------------------------------------------ */
body.mv-page .form-label {
    margin-bottom: 5px;
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--mvx-muted);
}

body.mv-page .form-control,
body.mv-page .form-select {
    padding: 10px 12px;
    border: 1px solid var(--mvx-border);
    border-radius: var(--mvx-radius-sm);
    background: var(--mvx-card-2);
    color: var(--mvx-text);
    font-size: 0.85rem;
    box-shadow: none;
    transition: var(--mvx-transition);
}

body.mv-page .form-control::placeholder {
    color: var(--mvx-dim);
}

body.mv-page .form-control:focus,
body.mv-page .form-select:focus {
    border-color: color-mix(in srgb, var(--ar-primary) 55%, var(--mvx-border));
    background: var(--mvx-card-2);
    color: var(--mvx-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-primary) 16%, transparent);
}

body.mv-page .form-control[readonly] {
    background: var(--mvx-bg-soft);
    color: var(--mvx-muted);
}

body.mv-page .form-text {
    font-size: 0.7rem;
    color: var(--mvx-dim);
}

body.mv-page .input-group>.form-control {
    border-radius: var(--mvx-radius-sm) 0 0 var(--mvx-radius-sm);
}

body.mv-page .input-group>.btn {
    border-radius: 0 var(--mvx-radius-sm) var(--mvx-radius-sm) 0;
}

/* ------------------------------------------------------------
   BUTTON
   ------------------------------------------------------------ */
body.mv-page .btn {
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 9px 18px;
    transition: var(--mvx-transition);
}

body.mv-page .btn-primary,
body.mv-page .btn-warning {
    background: var(--ar-primary);
    border-color: var(--ar-primary);
    color: #fff !important;
}

body.mv-page .btn-primary:hover,
body.mv-page .btn-primary:focus,
body.mv-page .btn-warning:hover,
body.mv-page .btn-warning:focus {
    background: var(--ar-primary-hover);
    border-color: var(--ar-primary-hover);
    color: #fff !important;
    transform: translateY(-1px);
}

body.mv-page .btn-outline-secondary {
    border-color: var(--mvx-border);
    color: var(--mvx-text);
    background: var(--mvx-card);
}

body.mv-page .btn-outline-secondary:hover {
    background: var(--mvx-card-2);
    border-color: color-mix(in srgb, var(--ar-primary) 40%, var(--mvx-border));
    color: var(--mvx-accent-ink);
}

body.mv-page .btn-success {
    background: var(--ar-primary);
    border-color: var(--ar-primary);
}

body.mv-page .btn-success:hover {
    background: var(--ar-primary-hover);
    border-color: var(--ar-primary-hover);
}

body.mv-page .btn:focus-visible,
body.mv-page .form-control:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ar-primary) 70%, transparent);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   BADGE, ALERT, TABEL, PAGINATION
   ------------------------------------------------------------ */
body.mv-page .badge {
    padding: 0.4em 0.65em;
    border-radius: 6px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

body.mv-page .alert {
    padding: 11px 14px;
    border-radius: var(--mvx-radius-sm);
    border: 1px solid transparent;
    font-size: 0.8rem;
}

body.mv-page .alert-danger {
    color: #ff9b9b;
    background: color-mix(in srgb, #ef4444 12%, var(--mvx-card));
    border-color: color-mix(in srgb, #ef4444 30%, var(--mvx-border-soft));
}

body.mv-page .alert-success {
    color: #7ee2a8;
    background: color-mix(in srgb, #22c55e 12%, var(--mvx-card));
    border-color: color-mix(in srgb, #22c55e 28%, var(--mvx-border-soft));
}

body.mv-page .table {
    color: var(--mvx-text);
    font-size: 0.8rem;
}

body.mv-page .table> :not(caption)>*>* {
    background: transparent;
    border-color: var(--mvx-border-soft);
}

body.mv-page .pagination .page-link {
    margin: 0 2px;
    padding: 6px 11px;
    border: 1px solid var(--mvx-border-soft);
    border-radius: 8px;
    background: var(--mvx-card);
    color: var(--mvx-text);
    font-size: 0.78rem;
}

body.mv-page .pagination .page-link:hover {
    border-color: color-mix(in srgb, var(--ar-primary) 40%, var(--mvx-border));
    color: var(--mvx-accent-ink);
    background: var(--mvx-card-2);
}

body.mv-page .pagination .active .page-link {
    background: var(--ar-primary);
    border-color: var(--ar-primary);
    color: #fff;
}

body.mv-page .page-loading {
    background: color-mix(in srgb, var(--mvx-bg) 82%, transparent);
}

/* ------------------------------------------------------------
   AUTH PAGES
   ------------------------------------------------------------ */
body.mv-page .mvp-auth {
    width: 100%;
    max-width: 470px;
    margin: 8px auto 0 !important;
    padding: 24px !important;
    flex: 0 0 auto;
    border: 1px solid var(--mvx-border-soft) !important;
    background: var(--mvx-card) !important;
    border-radius: var(--mvx-radius) !important;
    box-shadow: var(--mvx-shadow) !important;
}

body.mv-page .mvp-auth form .mb-3 {
    margin-bottom: 14px !important;
}

body.mv-page .mvp-auth .btn[type="submit"] {
    width: 100%;
    padding: 11px 18px;
}

body.mv-page .mvp-auth .g-recaptcha,
body.mv-page .mvp-auth .cf-turnstile {
    margin: 6px 0 2px;
}

/* ------------------------------------------------------------
   DEPOSIT & PEMBAYARAN
   ------------------------------------------------------------ */
body.mv-page .mv-deposit-input {
    height: 46px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

body.mv-page .mv-payment-list {
    background: var(--mvx-card-2);
    border: 1px solid var(--mvx-border-soft);
    border-radius: var(--mvx-radius-sm);
    cursor: pointer;
    transition: var(--mvx-transition);
}

body.mv-page .mv-payment-list:hover {
    border-color: color-mix(in srgb, var(--ar-primary) 35%, var(--mvx-border));
}

body.mv-page .mv-payment-list.mv-payment-list-in-active {
    border-color: color-mix(in srgb, var(--ar-primary) 60%, transparent);
    background: color-mix(in srgb, var(--ar-primary) 10%, var(--mvx-card-2));
}

/* Sembunyikan elemen dekorasi lama yang kosong */
body.mv-page .rounded-5.rounded-bottom-0.bg-info {
    display: none;
}

/* ------------------------------------------------------------
   CEK INVOICE / REALTIME CARD
   ------------------------------------------------------------ */
body.mv-page .mv-search-card,
body.mv-page .mv-realtime-card {
    border-radius: var(--mvx-radius);
}

/* ------------------------------------------------------------
   FAQ PAGE
   ------------------------------------------------------------ */
.mvq-search {
    max-width: 560px;
    margin: 4px 0 20px;
}

.mvq-search .mvx-search {
    margin-top: 0;
}

.mvq-group {
    margin-bottom: 18px;
}

.mvq-group-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 9px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mvx-text);
}

.mvq-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ar-primary) 11%, transparent);
    font-size: 0.78rem;
    line-height: 1;
}

/* ------------------------------------------------------------
   DOC PAGE (Kebijakan Privasi / Refund / SNK)
   ------------------------------------------------------------ */
.mvq-doc .privacy-body,
.mvq-doc .refund-body,
.mvq-doc .snk-body,
.mvq-doc .terms-body {
    padding: 0 !important;
}

.mvq-doc .privacy-toc {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid var(--mvx-border-soft);
    border-radius: var(--mvx-radius-sm);
    background: color-mix(in srgb, var(--ar-primary) 5%, var(--mvx-card));
}

.mvq-doc .privacy-toc-title {
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mvx-accent-ink);
}

.mvq-doc .privacy-toc ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mvq-doc .privacy-toc a {
    display: inline-block;
    padding: 3px 0;
    font-size: 0.76rem;
    color: var(--mvx-muted);
    text-decoration: none;
    transition: var(--mvx-transition);
}

.mvq-doc .privacy-toc a:hover {
    color: var(--mvx-accent-ink);
}

.mvq-doc .privacy-section {
    scroll-margin-top: 84px;
    margin-bottom: 10px;
    padding: 16px 18px;
    border: 1px solid var(--mvx-border-soft);
    border-radius: var(--mvx-radius-sm);
    background: var(--mvx-card);
}

.mvq-doc .privacy-section-header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}

.mvq-doc .privacy-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ar-primary) 11%, transparent);
    font-size: 0.78rem;
    line-height: 1;
}

.mvq-doc .privacy-section h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mvx-text);
}

.mvq-doc .privacy-section h3 {
    margin: 14px 0 6px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--mvx-text);
}

.mvq-doc .privacy-section p {
    margin: 0 0 9px;
    font-size: 0.8rem;
    line-height: 1.75;
    color: var(--mvx-muted);
}

.mvq-doc .privacy-section p:last-child {
    margin-bottom: 0;
}

.mvq-doc .privacy-section ul,
.mvq-doc .privacy-section ol {
    margin: 0 0 9px;
    padding-left: 18px;
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--mvx-muted);
}

.mvq-doc .privacy-section li {
    margin-bottom: 4px;
}

.mvq-doc .privacy-section a {
    color: var(--mvx-accent-ink);
    text-decoration: none;
}

.mvq-doc .privacy-section strong {
    color: var(--mvx-text);
}

/* Refund page */
.mvq-doc .refund-updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px 10px;
    border: 1px solid var(--mvx-border-soft);
    border-radius: 999px;
    background: var(--mvx-card-2);
    font-size: 0.7rem;
    color: var(--mvx-muted);
}

.mvq-doc .refund-toc {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid var(--mvx-border-soft);
    border-radius: var(--mvx-radius-sm);
    background: color-mix(in srgb, var(--ar-primary) 5%, var(--mvx-card));
}

.mvq-doc .refund-toc-title {
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mvx-accent-ink);
}

.mvq-doc .refund-toc ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mvq-doc .refund-toc a {
    display: inline-block;
    padding: 3px 0;
    font-size: 0.76rem;
    color: var(--mvx-muted);
    text-decoration: none;
    transition: var(--mvx-transition);
}

.mvq-doc .refund-toc a:hover {
    color: var(--mvx-accent-ink);
}

.mvq-doc .refund-section {
    scroll-margin-top: 84px;
    margin-bottom: 10px;
    padding: 16px 18px;
    border: 1px solid var(--mvx-border-soft);
    border-radius: var(--mvx-radius-sm);
    background: var(--mvx-card);
}

.mvq-doc .refund-section-header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}

.mvq-doc .refund-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ar-primary) 11%, transparent);
    font-size: 0.78rem;
    line-height: 1;
}

.mvq-doc .refund-section h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mvx-text);
}

.mvq-doc .refund-section p {
    margin: 0 0 9px;
    font-size: 0.8rem;
    line-height: 1.75;
    color: var(--mvx-muted);
}

.mvq-doc .refund-section p:last-child {
    margin-bottom: 0;
}

.mvq-doc .refund-section ul,
.mvq-doc .refund-section ol {
    margin: 0 0 9px;
    padding-left: 18px;
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--mvx-muted);
}

.mvq-doc .refund-section li {
    margin-bottom: 4px;
}

.mvq-doc .refund-section a {
    color: var(--mvx-accent-ink);
    text-decoration: none;
}

.mvq-doc .refund-section strong {
    color: var(--mvx-text);
}

.mvq-doc .refund-note {
    margin: 8px 0 14px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--ar-primary) 18%, var(--mvx-border-soft));
    border-radius: var(--mvx-radius-sm);
    background: color-mix(in srgb, var(--ar-primary) 6%, var(--mvx-card));
    font-size: 0.8rem;
    line-height: 1.65;
    color: var(--mvx-muted);
}

.mvq-doc .refund-note strong {
    color: var(--mvx-accent-ink);
}

.mvq-doc .refund-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--ar-primary) 22%, var(--mvx-border-soft));
    border-radius: var(--mvx-radius-sm);
    background: color-mix(in srgb, var(--ar-primary) 6%, var(--mvx-card));
}

.mvq-doc .refund-cta-text h3 {
    margin: 0 0 4px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--mvx-text);
}

.mvq-doc .refund-cta-text p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--mvx-muted);
}

.mvq-doc .refund-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--ar-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--mvx-transition);
}

.mvq-doc .refund-cta-btn:hover {
    background: var(--ar-primary-hover);
    color: #fff;
}

/* Terms (SNK) page */
.mvq-doc .terms-toc {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid var(--mvx-border-soft);
    border-radius: var(--mvx-radius-sm);
    background: color-mix(in srgb, var(--ar-primary) 5%, var(--mvx-card));
}

.mvq-doc .terms-toc-title {
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mvx-accent-ink);
}

.mvq-doc .terms-toc ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mvq-doc .terms-toc a {
    display: inline-block;
    padding: 3px 0;
    font-size: 0.76rem;
    color: var(--mvx-muted);
    text-decoration: none;
    transition: var(--mvx-transition);
}

.mvq-doc .terms-toc a:hover {
    color: var(--mvx-accent-ink);
}

.mvq-doc .terms-section {
    scroll-margin-top: 84px;
    margin-bottom: 10px;
    padding: 16px 18px;
    border: 1px solid var(--mvx-border-soft);
    border-radius: var(--mvx-radius-sm);
    background: var(--mvx-card);
}

.mvq-doc .terms-section-header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}

.mvq-doc .terms-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ar-primary) 11%, transparent);
    font-size: 0.78rem;
    line-height: 1;
}

.mvq-doc .terms-section h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mvx-text);
}

.mvq-doc .terms-section h3 {
    margin: 14px 0 6px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--mvx-text);
}

.mvq-doc .terms-section p {
    margin: 0 0 9px;
    font-size: 0.8rem;
    line-height: 1.75;
    color: var(--mvx-muted);
}

.mvq-doc .terms-section p:last-child {
    margin-bottom: 0;
}

.mvq-doc .terms-section ul,
.mvq-doc .terms-section ol {
    margin: 0 0 9px;
    padding-left: 18px;
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--mvx-muted);
}

.mvq-doc .terms-section li {
    margin-bottom: 4px;
}

.mvq-doc .terms-section a {
    color: var(--mvx-accent-ink);
    text-decoration: none;
}

.mvq-doc .terms-section strong {
    color: var(--mvx-text);
}

.mvq-doc .terms-footer {
    display: flex;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--mvx-border-soft);
}

/* ------------------------------------------------------------
   TRANSAKSI / DEPOSIT LIST
   ------------------------------------------------------------ */
body.mv-page .mv-invoice-bg .card .card-body {
    padding: 14px 16px;
}

body.mv-page .mv-invoice-bg .card img {
    border-radius: 8px;
    object-fit: cover;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    body.mv-page .main-container {
        margin-top: 10px;
        padding-bottom: 28px;
    }

    .mvp-title {
        font-size: 1rem;
    }

    .mvp-sub {
        font-size: 0.76rem;
    }

    .mvq-group-title {
        font-size: 0.85rem;
    }

    .mvq-group-icon {
        width: 24px;
        height: 24px;
    }

    .mvq-doc .privacy-section {
        padding: 14px;
        scroll-margin-top: 76px;
    }

    .mvq-doc .privacy-section h2 {
        font-size: 0.88rem;
    }

    .mvq-doc .privacy-section p,
    .mvq-doc .privacy-section ul,
    .mvq-doc .privacy-section ol {
        font-size: 0.78rem;
    }

    .mvq-doc .refund-section {
        padding: 14px;
        scroll-margin-top: 76px;
    }

    .mvq-doc .refund-section h2 {
        font-size: 0.88rem;
    }

    .mvq-doc .refund-section p,
    .mvq-doc .refund-section ul,
    .mvq-doc .refund-section ol {
        font-size: 0.78rem;
    }

    .mvq-doc .refund-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px;
    }

    .mvq-doc .refund-cta-btn {
        width: 100%;
        justify-content: center;
    }

    .mvq-doc .terms-section {
        padding: 14px;
        scroll-margin-top: 76px;
    }

    .mvq-doc .terms-section h2 {
        font-size: 0.88rem;
    }

    .mvq-doc .terms-section p,
    .mvq-doc .terms-section ul,
    .mvq-doc .terms-section ol {
        font-size: 0.78rem;
    }

    body.mv-page .mvp-auth {
        padding: 18px !important;
        border-radius: var(--mvx-radius-sm) !important;
    }

    body.mv-page .btn {
        min-height: 40px;
    }

    body.mv-page .container.rounded-5.overflow-hidden {
        border-radius: var(--mvx-radius-sm) !important;
    }
}

/* ------------------------------------------------------------
   ORDER / CHECKOUT
   ------------------------------------------------------------ */
.mv-order-page {
    margin-top: 12px;
}

.mv-order-page .mv-order-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 2px 10px;
    font-size: 0.72rem;
    color: var(--mvx-muted);
}

.mv-order-page .mv-order-crumb a {
    color: var(--mvx-muted);
    text-decoration: none;
    transition: var(--mvx-transition);
}

.mv-order-page .mv-order-crumb a:hover {
    color: var(--mvx-accent-ink);
}

.mv-order-page .mv-order-crumb-cur {
    font-weight: 600;
    color: var(--mvx-text);
}

.mv-order-page .mv-order-summary {
    overflow: hidden;
    border: 1px solid var(--mvx-border-soft) !important;
    border-radius: var(--mvx-radius) !important;
    background: var(--mvx-card) !important;
}

.mv-order-page .mv-order-cover {
    position: relative;
    aspect-ratio: 16 / 6.4;
    background: var(--mvx-media-bg);
}

.mv-order-page .mv-order-cover-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mv-order-page .mv-order-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.5));
}

.mv-order-page .mv-order-head-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mv-order-page .mv-order-sidebar .mv-order-summary .mv-order-thumb {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid var(--mvx-border-soft);
    border-radius: 10px;
    background: var(--mvx-media-bg);
}

.mv-order-page .mv-order-head-text {
    min-width: 0;
    flex: 1 1 auto;
}

.mv-order-page .mv-order-side-body {
    padding: 14px 16px 16px;
}

.mv-order-page .mv-order-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mv-order-page .mv-order-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mvx-text);
}

.mv-order-page .mv-verified-badge {
    flex-shrink: 0;
    color: var(--ar-primary);
}

.mv-order-page .mv-order-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 7px;
}

.mv-order-page .mv-order-cat-badge {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ar-primary) 11%, transparent);
    color: var(--mvx-accent-ink);
    font-size: 0.66rem;
    font-weight: 700;
}

.mv-order-page .mv-order-meta-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--mvx-muted);
}

.mv-order-page .mv-order-meta-rating i {
    font-size: 0.7rem;
    color: #f59e0b;
}

.mv-order-page .mv-order-meta-rating em {
    font-style: normal;
    color: var(--mvx-dim);
}

.mv-order-page .mv-order-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 14px;
}

.mv-order-page .mv-order-trust span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid var(--mvx-border-soft);
    border-radius: 8px;
    background: var(--mvx-card-2);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--mvx-muted);
}

.mv-order-page .mv-order-trust i {
    font-size: 0.72rem;
    color: var(--mvx-accent-ink);
}

.mv-order-page .mv-order-step-guide {
    margin-top: 12px;
    padding: 12px 13px;
    border: 1px dashed var(--mvx-border);
    border-radius: var(--mvx-radius-sm);
    background: color-mix(in srgb, var(--ar-primary) 3%, transparent);
}

.mv-order-page .mv-order-step-guide h2 {
    margin: 0 0 7px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mvx-text);
}

.mv-order-page .mv-step-list {
    font-size: 0.72rem;
    line-height: 2;
    color: var(--mvx-muted);
}

.mv-order-page .mv-step-list span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-right: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ar-primary) 14%, transparent);
    color: var(--mvx-accent-ink);
    font-size: 0.6rem;
    font-weight: 700;
}

.mv-order-page .mv-order-desc-section {
    padding: 14px 16px !important;
}

.mv-order-page .mv-order-desc-body {
    margin-top: 9px;
}

.mv-order-page .mv-product-desc {
    max-height: 200px;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--mvx-muted);
}

.mv-order-page .mv-product-desc img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.mv-order-page .btnreaddesc {
    padding: 5px 0;
    border: 0;
    background: none;
    color: var(--mvx-accent-ink);
    font-size: 0.74rem;
    font-weight: 600;
}

.mv-order-page .mv-ord-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--mvx-border-soft);
    border-radius: var(--mvx-radius);
    background: var(--mvx-card);
}

.mv-order-page .mv-ord-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mvx-ord-sec-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--ar-primary) 12%, transparent);
    color: var(--mvx-accent-ink);
}

.mv-order-page .mv-ord-head-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--mvx-text);
}

.mv-order-page .mv-ord-head-sub {
    margin: 1px 0 0;
    font-size: 0.72rem;
    color: var(--mvx-muted);
}

.mv-order-page .mv-ord-head-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid color-mix(in srgb, var(--ar-primary) 30%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ar-primary) 9%, transparent);
    color: var(--mvx-accent-ink);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.mv-order-page .mv-ord-head-pill i {
    color: var(--ar-primary);
}

.mv-order-page .mv-order-tabs {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding: 5px;
    border: 1px solid var(--mvx-border-soft);
    border-radius: 999px;
    background: var(--mvx-card-2);
}

.mv-order-page .mv-order-tabs .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    padding: 7px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--mvx-muted);
    font-size: 0.76rem;
    font-weight: 600;
    transition: var(--mvx-transition);
}

.mv-order-page .mv-order-tabs .btn.active {
    background: var(--mvx-card);
    color: var(--mvx-accent-ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.mv-order-page .mv-ord-section {
    margin-top: 10px !important;
    padding: 14px 16px !important;
}

.mvx-ord-sec {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.mvx-ord-sec-title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--mvx-text);
}

.mvx-ord-sec-hint {
    margin: 1px 0 0;
    font-size: 0.71rem;
    color: var(--mvx-muted);
}

.mv-order-page .mv-input-section {
    padding: 14px 16px !important;
}

.mv-order-page .mv-section-bar {
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--ar-primary);
}

.mv-order-page .mv-section-title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--mvx-text);
}

.mv-order-page .mv-color-inputid {
    font-size: 0.78rem;
    line-height: 1.65;
    color: var(--mvx-muted);
}

.mv-order-page .mv-color-inputid img {
    max-width: 100%;
    height: auto;
}

.mv-order-page .mv-cat-heading-order {
    margin: 8px 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mvx-dim);
}

.mv-order-page .row-item-list {
    --bs-gutter-x: 8px;
    --bs-gutter-y: 8px;
    margin-bottom: 4px;
}

.mv-order-page .mv-cat-item-order {
    padding: 6px 12px;
    border: 1px solid var(--mvx-border-soft);
    border-radius: 999px;
    background: transparent;
    color: var(--mvx-muted);
    font-size: 0.72rem;
    font-weight: 600;
    transition: var(--mvx-transition);
}

.mv-order-page .mv-cat-item-order:hover {
    border-color: color-mix(in srgb, var(--ar-primary) 35%, transparent);
    color: var(--mvx-accent-ink);
}

.mv-order-page .mv-cat-item-order.active {
    border-color: color-mix(in srgb, var(--ar-primary) 45%, transparent);
    background: color-mix(in srgb, var(--ar-primary) 14%, transparent);
    color: var(--mvx-accent-ink);
}

.mv-order-page .mv-item-list-in {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid var(--mvx-border-soft);
    border-radius: 10px;
    background: var(--mvx-card-2);
    cursor: pointer;
    transition: var(--mvx-transition);
}

.mv-order-page .mv-item-list-in:hover {
    border-color: color-mix(in srgb, var(--ar-primary) 38%, var(--mvx-border));
    transform: translateY(-1px);
}

.mv-order-page .mv-item-list-in-active {
    border-color: color-mix(in srgb, var(--ar-primary) 60%, transparent);
    background: color-mix(in srgb, var(--ar-primary) 8%, var(--mvx-card-2));
}

.mv-order-page .mv-item-list-in.border-info {
    border-color: color-mix(in srgb, var(--ar-primary) 55%, transparent);
}

.mv-order-page .mv-item-name {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mvx-text);
}

.mv-order-page .mv-item-name img {
    width: 20px !important;
    height: 20px;
    object-fit: contain;
}

.mv-order-page .mv-item-list-in .badge {
    align-self: flex-start;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 0.68rem;
}

.mv-order-page .mv-item-list-in .badge.bg-light {
    border: 0;
    background: color-mix(in srgb, var(--ar-primary) 10%, transparent) !important;
    color: var(--mvx-accent-ink) !important;
}

.mv-order-page .mv-item-list-in .badge.bg-danger {
    background: #ef4444 !important;
    color: #fff !important;
}

.mv-order-page .mv-item-list-in .mv-badge-order-text {
    padding: 0 !important;
    background: transparent !important;
    color: var(--mvx-dim) !important;
}

.mv-order-page .mv-item-list-in img[src*="flazz"] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 38px !important;
}

.mv-order-page .mv-payment-list {
    padding: 10px !important;
}

.mv-order-page .mv-btn-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--ar-primary);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 700;
    transition: var(--mvx-transition);
}

.mv-order-page .mv-btn-order:hover {
    background: var(--ar-primary-hover);
    color: #fff;
    transform: translateY(-1px);
}

.mv-order-page .mv-terms-text {
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--mvx-muted);
}

.mv-order-page .mv-rating-section .mv-product-item {
    padding: 16px !important;
}

.mv-order-page .mv-rating-section .progress {
    height: 6px;
    border-radius: 99px;
    background: var(--mvx-card-2);
}

.mv-order-page .mv-rating-section .progress-bar {
    background: var(--ar-primary);
}

.mv-order-page .mv-rating-card {
    margin-bottom: 8px;
    padding: 12px 14px;
    border: 1px solid var(--mvx-border-soft);
    border-radius: 10px;
    background: var(--mvx-card-2);
}

.mv-order-page .mv-rating-card h6 {
    margin: 0 0 4px;
    font-size: 0.8rem;
}

.mv-order-page .mv-rating-card p {
    margin: 0 0 6px;
    font-size: 0.75rem;
    color: var(--mvx-muted);
}

.mv-order-page .mv-btn-view-all {
    padding: 7px 14px;
    border: 1px solid var(--mvx-border-soft);
    border-radius: 999px;
    color: var(--mvx-accent-ink);
    font-size: 0.74rem;
    text-decoration: none;
}

.mv-order-faq {
    margin-top: 18px;
}

.mv-order-faq .mvx-sec-head {
    margin-bottom: 10px;
}

@media (max-width: 991px) {
    .mv-order-page .mv-order-cover {
        aspect-ratio: 16 / 6;
    }
}

@media (max-width: 575px) {
    .mv-order-page .mv-order-side-body {
        padding: 12px 14px 14px;
    }

    .mv-order-page .mv-order-sidebar .mv-order-summary .mv-order-thumb {
        width: 48px;
        height: 48px;
    }

    .mv-order-page .mv-order-trust {
        gap: 5px;
    }

    .mv-order-page .mv-order-trust span {
        font-size: 0.64rem;
    }

    .mv-order-page .mv-ord-section,
    .mv-order-page .mv-input-section {
        padding: 12px 13px !important;
    }

    .mv-order-page .mv-order-tabs .btn {
        padding: 6px 8px;
        font-size: 0.72rem;
    }

    .mv-order-page .mv-item-list-in {
        padding: 9px 10px;
    }

    .mv-order-page .mv-item-name {
        font-size: 0.72rem;
    }
}

/* ------------------------------------------------------------
   INVOICE / STATUS PESANAN
   ------------------------------------------------------------ */
.mv-inv-page {
    margin-top: 12px;
}

.mv-inv-page .mv-inv-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 2px 10px;
    font-size: 0.72rem;
    color: var(--mvx-muted);
}

.mv-inv-page .mv-inv-crumb a {
    color: var(--mvx-muted);
    text-decoration: none;
    transition: var(--mvx-transition);
}

.mv-inv-page .mv-inv-crumb a:hover {
    color: var(--mvx-accent-ink);
}

.mv-inv-page .mv-inv-crumb-cur {
    font-weight: 600;
    color: var(--mvx-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

/* Status banner */
.mv-inv-page .mv-inv-status {
    --inv-tone: var(--ar-primary);
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    border-radius: var(--mvx-radius);
    border: 1px solid color-mix(in srgb, var(--inv-tone) 24%, var(--mvx-border-soft));
    background: color-mix(in srgb, var(--inv-tone) 6%, var(--mvx-card));
    box-shadow: none;
}

.mv-inv-page .mv-inv-status::before {
    height: 3px;
    background: linear-gradient(90deg, var(--inv-tone), transparent 70%);
}

.mv-inv-page .mv-inv-status .mv-inv-status-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--inv-tone) 14%, transparent);
    color: var(--inv-tone);
    box-shadow: none;
    animation: none;
}

.mv-inv-page .mv-inv-status .mv-inv-status-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mvx-text);
    margin-bottom: 2px;
}

.mv-inv-page .mv-inv-status .mv-inv-status-desc {
    font-size: 0.78rem;
    color: var(--mvx-muted);
}

.mv-inv-page .mv-inv-status-unpaid {
    --inv-tone: #f59e0b;
}

.mv-inv-page .mv-inv-status-pending {
    --inv-tone: var(--ar-primary);
}

.mv-inv-page .mv-inv-status-success {
    --inv-tone: #22c55e;
}

.mv-inv-page .mv-inv-status-expired {
    --inv-tone: #f97316;
}

.mv-inv-page .mv-inv-status-failed {
    --inv-tone: #ef4444;
}

/* Cards */
.mv-inv-page .mv-inv-card {
    padding: 14px;
    margin-bottom: 12px;
    border-radius: var(--mvx-radius);
    border: 1px solid var(--mvx-border-soft);
    background: var(--mvx-card);
    box-shadow: none;
}

.mv-inv-page .mv-inv-card-header {
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 12px;
}

.mv-inv-page .mv-inv-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--mvx-text);
    margin-bottom: 2px;
}

.mv-inv-page .mv-inv-pay-sub {
    margin: 0;
    font-size: 0.71rem;
    line-height: 1.5;
    color: var(--mvx-muted);
}

.mv-inv-page .mv-inv-id-badge {
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ar-primary) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--ar-primary) 20%, transparent);
    color: var(--mvx-accent-ink);
    font-size: 0.66rem;
    font-weight: 700;
}

.mv-inv-page .mv-inv-section-title {
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mvx-border-soft);
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--mvx-text);
}

.mv-inv-page .mv-inv-section-title svg {
    opacity: 1;
}

.mv-inv-page .mv-inv-title-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ar-primary) 12%, transparent);
    box-shadow: none;
}

.mv-inv-page .mv-inv-title-icon svg {
    color: var(--mvx-accent-ink);
}

/* Countdown */
.mv-inv-page .mv-inv-countdown-wrap {
    padding: 9px 12px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: color-mix(in srgb, #f59e0b 8%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 22%, transparent);
}

.mv-inv-page .mv-inv-countdown-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mvx-muted);
}

.mv-inv-page .mv-inv-countdown {
    padding: 4px 12px 4px 24px;
    border-radius: 999px;
    background: color-mix(in srgb, #f59e0b 13%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 28%, transparent);
    color: #f59e0b;
    font-size: 0.78rem;
}

.mv-inv-page .mv-inv-countdown::before {
    left: 11px;
    width: 7px;
    height: 7px;
    background: #f59e0b;
}

/* Ringkasan pesanan (panel) */
.mv-inv-page .mv-inv-info-panel {
    padding: 11px 12px;
    border-radius: 10px;
    background: var(--mvx-card-2);
    border: 1px solid var(--mvx-border-soft);
}

.mv-inv-page .mv-inv-mini-label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mvx-dim);
}

.mv-inv-page .mv-inv-info-list {
    gap: 0;
}

.mv-inv-page .mv-inv-info-item {
    padding: 7px 0;
    border-bottom: 1px dashed var(--mvx-border-soft);
}

.mv-inv-page .mv-inv-info-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.mv-inv-page .mv-inv-info-label {
    font-size: 0.72rem;
    color: var(--mvx-muted);
}

.mv-inv-page .mv-inv-info-value {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--mvx-text);
}

.mv-inv-page .mv-inv-price {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--mvx-accent-ink);
}

/* Panduan / accordion */
.mv-inv-page .mv-inv-accordion {
    margin-bottom: 12px;
    border-radius: 10px;
    border: 1px solid var(--mvx-border-soft);
    background: var(--mvx-card-2);
}

.mv-inv-page .mv-inv-accordion-trigger {
    padding: 10px 12px;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mvx-text);
}

.mv-inv-page .mv-inv-accordion-body {
    padding: 11px 12px;
    border-top: 1px solid var(--mvx-border-soft);
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--mvx-muted);
}

.mv-inv-page .mv-inv-ol {
    padding-left: 18px;
    line-height: 1.75;
}

.mv-inv-page .mv-inv-ol li {
    font-size: 0.77rem;
    margin-bottom: 3px;
}

.mv-inv-page .mv-inv-panduan {
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: var(--mvx-card-2);
    border: 1px solid var(--mvx-border-soft);
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--mvx-muted);
}

/* QR & VA */
.mv-inv-page .mv-inv-qr-section {
    padding: 14px;
    border-radius: 10px;
    background: var(--mvx-card-2);
    border: 1px solid var(--mvx-border-soft);
}

.mv-inv-page .mv-inv-qr-title {
    margin-bottom: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mvx-text);
}

.mv-inv-page .mv-inv-qr-img-wrap {
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--mvx-border-soft);
    box-shadow: none;
}

.mv-inv-page .mv-inv-qr-img-wrap img,
.mv-inv-page .mv-inv-qr-img-wrap #qrcodenew img {
    max-width: 180px !important;
    border-radius: 8px;
    padding: 4px;
}

.mv-inv-page .mv-inv-va-section {
    padding: 14px;
    border-radius: 10px;
    background: var(--mvx-card-2);
    border: 1px solid var(--mvx-border-soft);
    text-align: left;
}

.mv-inv-page .mv-inv-va-label {
    margin-bottom: 7px;
    font-size: 0.72rem;
    color: var(--mvx-muted);
}

.mv-inv-page .mv-inv-va-btn {
    width: 100%;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px dashed color-mix(in srgb, var(--ar-primary) 40%, transparent);
    background: var(--mvx-card);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--mvx-text);
}

.mv-inv-page .mv-inv-pay-btn,
.mv-inv-page .mv-inv-download-btn {
    padding: 11px 16px;
    border-radius: 10px;
    background: var(--ar-primary);
    box-shadow: none;
    font-size: 0.8rem;
    font-weight: 700;
}

.mv-inv-page .mv-inv-pay-btn:hover,
.mv-inv-page .mv-inv-download-btn:hover {
    background: var(--ar-primary-hover);
    box-shadow: none;
    transform: none;
}

/* Produk */
.mv-inv-page .mv-inv-product {
    gap: 11px;
    padding: 10px;
    border-radius: 10px;
    background: var(--mvx-card-2);
    border: 1px solid var(--mvx-border-soft);
}

.mv-inv-page .mv-inv-product-img {
    width: 56px;
    height: 56px;
    border-radius: 9px;
    overflow: hidden;
    flex-shrink: 0;
}

.mv-inv-page .mv-inv-product-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
}

.mv-inv-page .mv-inv-product-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--mvx-text);
}

.mv-inv-page .mv-inv-product-item {
    font-size: 0.72rem;
    color: var(--mvx-accent-ink);
}

.mv-inv-page .mv-inv-product-meta {
    gap: 10px;
    font-size: 0.68rem;
    color: var(--mvx-muted);
}

/* Ringkasan pembayaran */
.mv-inv-page .mv-inv-payment-method {
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: 9px;
    background: var(--mvx-card-2);
    border: 1px solid var(--mvx-border-soft);
}

.mv-inv-page .mv-inv-payment-method img {
    width: 30px;
    height: 21px;
    object-fit: contain;
}

.mv-inv-page .mv-inv-payment-method span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mvx-text);
}

.mv-inv-page .mv-inv-detail-row {
    padding: 8px 0;
    border-bottom: 1px dashed var(--mvx-border-soft);
    font-size: 0.75rem;
    color: var(--mvx-muted);
}

.mv-inv-page .mv-inv-detail-value {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mvx-text);
    text-align: right;
}

.mv-inv-page .mv-inv-copy-btn {
    max-width: none;
    padding: 3px 9px;
    border-radius: 7px;
    background: var(--mvx-card-2);
    border: 1px solid var(--mvx-border-soft);
    font-size: 0.69rem;
    color: var(--mvx-text);
}

.mv-inv-page .mv-inv-copy-btn:hover {
    border-color: color-mix(in srgb, var(--ar-primary) 45%, transparent);
    color: var(--mvx-accent-ink);
}

.mv-inv-page .mv-inv-total-row {
    padding-top: 10px !important;
}

.mv-inv-page .mv-inv-total-price {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--mvx-accent-ink);
}

.mv-inv-page .mv-inv-complain-btn {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 9px;
    background: color-mix(in srgb, #ef4444 8%, transparent);
    border: 1px solid color-mix(in srgb, #ef4444 22%, transparent);
    color: #ef4444;
    font-size: 0.74rem;
    font-weight: 600;
}

.mv-inv-page .mv-inv-complain-btn:hover {
    background: color-mix(in srgb, #ef4444 14%, transparent);
}

/* Rating */
.mv-inv-page .mv-inv-rating-hint {
    margin-bottom: 12px;
    font-size: 0.75rem;
    color: var(--mvx-muted);
}

.mv-inv-page .mv-inv-rating-msg {
    font-size: 0.8rem;
    color: var(--mvx-muted);
}

.mv-inv-page .mv-inv-rating-tag {
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--mvx-card-2);
    border: 1px solid var(--mvx-border-soft);
    font-size: 0.71rem;
    color: var(--mvx-muted);
}

.mv-inv-page .mv-inv-rating-tag:hover,
.mv-inv-page .mv-inv-rating-tag.active {
    background: color-mix(in srgb, var(--ar-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--ar-primary) 40%, transparent);
    color: var(--mvx-accent-ink);
}

.mv-inv-page .mv-inv-rating-textarea {
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px solid var(--mvx-border-soft);
    background: var(--mvx-card-2);
    font-size: 0.78rem;
    color: var(--mvx-text);
}

.mv-inv-page .mv-inv-submit-rating {
    padding: 9px 18px;
    border-radius: 9px;
    background: var(--ar-primary);
    box-shadow: none;
    font-size: 0.78rem;
    font-weight: 700;
}

.mv-inv-page .mv-inv-submit-rating:hover {
    background: var(--ar-primary-hover);
    box-shadow: none;
    transform: none;
}

/* Refresh hint */
.mv-inv-page .mv-inv-refresh-hint {
    margin: 14px auto 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: transparent;
    border: 1px dashed var(--mvx-border-soft);
    box-shadow: none;
    font-size: 0.72rem;
    color: var(--mvx-muted);
}

@media (min-width: 992px) {
    .mv-inv-page .mv-inv-aside {
        position: sticky;
        top: 84px;
        align-self: flex-start;
    }
}

@media (max-width: 575px) {
    .mv-inv-page .mv-inv-status {
        padding: 12px 13px;
    }

    .mv-inv-page .mv-inv-status .mv-inv-status-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .mv-inv-page .mv-inv-card {
        padding: 12px;
    }

    .mv-inv-page .mv-inv-countdown-wrap {
        flex-wrap: wrap;
        gap: 6px;
    }

    .mv-inv-page .mv-inv-crumb-cur {
        max-width: 150px;
    }
}

/* ------------------------------------------------------------
   CEK INVOICE / LACAK PESANAN
   ------------------------------------------------------------ */
.mv-cek-page {
    margin-top: 12px;
}

.mv-cek-page .mv-cek-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 2px 10px;
    font-size: 0.72rem;
    color: var(--mvx-muted);
}

.mv-cek-page .mv-cek-crumb a {
    color: var(--mvx-muted);
    text-decoration: none;
    transition: var(--mvx-transition);
}

.mv-cek-page .mv-cek-crumb a:hover {
    color: var(--mvx-accent-ink);
}

.mv-cek-page .mv-cek-crumb-cur {
    font-weight: 600;
    color: var(--mvx-text);
}

.mv-cek-page .mv-cek-top {
    margin-bottom: 12px;
}

/* Kartu pencarian */
.mv-cek-page .mv-search-card {
    padding: 16px;
    margin-bottom: 0;
    border-radius: var(--mvx-radius);
    border: 1px solid var(--mvx-border-soft);
    background: var(--mvx-card);
    box-shadow: none;
}

.mv-cek-page .mv-search-card::before {
    display: none;
}

.mv-cek-page .mv-search-card-header {
    gap: 10px;
    margin-bottom: 14px;
}

.mv-cek-page .mv-search-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--ar-primary) 12%, transparent);
    color: var(--mvx-accent-ink);
    box-shadow: none;
}

.mv-cek-page .mv-search-card-title {
    margin-bottom: 3px;
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--mvx-text);
}

.mv-cek-page .mv-search-card-desc {
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--mvx-muted);
}

.mv-cek-page .mv-search-form {
    gap: 9px;
}

.mv-cek-page .mv-search-error {
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 0.74rem;
}

.mv-cek-page .mv-search-input-wrap {
    padding: 3px 3px 3px 12px;
    border-radius: 10px;
    background: var(--mvx-card-2);
    border: 1px solid var(--mvx-border-soft);
}

.mv-cek-page .mv-search-input-wrap:focus-within {
    border-color: color-mix(in srgb, var(--ar-primary) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-primary) 12%, transparent);
}

.mv-cek-page .mv-search-input {
    padding: 10px 8px;
    font-size: 0.82rem;
    color: var(--mvx-text);
}

.mv-cek-page .mv-search-btn {
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--ar-primary);
    box-shadow: none;
    font-size: 0.75rem;
    font-weight: 700;
}

.mv-cek-page .mv-search-btn:hover {
    background: var(--ar-primary-hover);
    box-shadow: none;
    transform: none;
}

.mv-cek-page .mv-search-hint {
    font-size: 0.7rem;
    line-height: 1.55;
    color: var(--mvx-muted);
    opacity: 1;
}

/* Panel langkah */
.mv-cek-page .mv-cek-tips {
    height: 100%;
    padding: 14px;
    border-radius: var(--mvx-radius);
    border: 1px solid var(--mvx-border-soft);
    background: var(--mvx-card);
}

.mv-cek-page .mv-cek-tips-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mvx-dim);
}

.mv-cek-page .mv-cek-steps {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: cektip;
}

.mv-cek-page .mv-cek-steps li {
    position: relative;
    counter-increment: cektip;
    padding-left: 26px;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--mvx-muted);
}

.mv-cek-page .mv-cek-steps li::before {
    content: counter(cektip);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ar-primary) 12%, transparent);
    color: var(--mvx-accent-ink);
    font-size: 0.63rem;
    font-weight: 700;
}

.mv-cek-page .mv-cek-note {
    margin: 10px 0 0;
    padding-top: 9px;
    border-top: 1px dashed var(--mvx-border-soft);
    font-size: 0.69rem;
    line-height: 1.5;
    color: var(--mvx-dim);
}

/* Tabel realtime */
.mv-cek-page .mv-realtime-card {
    padding: 14px;
    border-radius: var(--mvx-radius);
    border: 1px solid var(--mvx-border-soft);
    background: var(--mvx-card);
    box-shadow: none;
}

.mv-cek-page .mv-realtime-card::before {
    display: none;
}

.mv-cek-page .mv-realtime-header {
    align-items: center;
    margin-bottom: 10px;
}

.mv-cek-page .mv-realtime-title {
    margin-bottom: 2px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--mvx-text);
}

.mv-cek-page .mv-realtime-desc {
    font-size: 0.71rem;
    color: var(--mvx-muted);
}

.mv-cek-page .mv-realtime-live {
    padding: 4px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, #22c55e 11%, transparent);
    border: 1px solid color-mix(in srgb, #22c55e 24%, transparent);
    color: #22c55e;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
}

.mv-cek-page .mv-realtime-dot {
    width: 6px;
    height: 6px;
}

.mv-cek-page .mv-realtime-table {
    font-size: 0.75rem;
}

.mv-cek-page .mv-realtime-table thead th {
    padding: 8px 10px;
    border-bottom: 1px solid var(--mvx-border-soft);
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    color: var(--mvx-dim);
}

.mv-cek-page .mv-realtime-table tbody td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--mvx-border-soft);
    font-size: 0.73rem;
    color: var(--mvx-text);
}

.mv-cek-page .mv-realtime-table tbody tr:hover {
    background: color-mix(in srgb, var(--ar-primary) 5%, transparent);
}

.mv-cek-page .mv-realtime-table tbody td:first-child {
    font-size: 0.72rem;
    color: var(--mvx-muted);
}

.mv-cek-page .mv-realtime-table tbody td:nth-child(2) {
    font-weight: 600;
    color: var(--mvx-accent-ink);
}

.mv-cek-page .mv-status-badge {
    padding: 2px 9px;
    font-size: 0.63rem;
}

@media (max-width: 575px) {
    .mv-cek-page .mv-search-card,
    .mv-cek-page .mv-realtime-card {
        padding: 12px;
    }

    .mv-cek-page .mv-search-input-wrap {
        flex-wrap: wrap;
        padding: 4px;
    }

    .mv-cek-page .mv-search-btn {
        width: 100%;
        justify-content: center;
    }

    .mv-cek-page .mv-realtime-table tbody td {
        font-size: 0.72rem;
    }
}