:root,
[data-bs-theme="light"] {
    --hover-color: #8665c6;
    --mv-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --mv-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.1);
    --mv-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --mv-bg-section: #f8f9fb;
    --mv-bg-card: #ffffff;
    --mv-text-muted: #6b7280;
    --mv-text-dark: #1f2937;
    --mv-border-color: #e5e7eb;
    --mv-radius: 14px;
    --mv-radius-sm: 10px;
    --mv-radius-lg: 20px;
}

[data-bs-theme="dark"] {
    --mv-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    --mv-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.3);
    --mv-bg-section: #121519;
    --mv-bg-card: #1e2028;
    --mv-text-muted: #9ca3af;
    --mv-text-dark: #f3f4f6;
    --mv-border-color: #374151;
}

/* ============================================
   MODERN NAVBAR
   ============================================ */

.mv-navbar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
}

.mv-navbar {
    background: var(--mv-bg-card);
    border-bottom: 1px solid var(--mv-border-color);
    transition: var(--mv-transition);
    padding: 10px 0;
}

.mv-navbar-wrapper.scrolled .mv-navbar {
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--mv-bg-card) 85%, transparent);
}

.mv-navbar-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 48px;
}

.mv-navbar-logo {
    height: 36px;
    width: auto;
    max-height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.mv-navbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.mv-btn-login,
.mv-btn-balance,
.mv-btn-admin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--mv-transition);
    white-space: nowrap;
    color: var(--mv-text-dark);
}

.mv-btn-login {
    background: var(--ar-primary);
    color: #000;
}

.mv-btn-balance {
    background: color-mix(in srgb, var(--ar-primary) 12%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--ar-primary) 25%, transparent);
    color: var(--ar-primary);
}

.mv-btn-admin {
    background: var(--mv-bg-section);
    border: 1px solid var(--mv-border-color);
    color: var(--mv-text-dark);
}

.mv-btn-login:hover,
.mv-btn-balance:hover,
.mv-btn-admin:hover {
    transform: translateY(-1px);
    box-shadow: var(--mv-card-shadow);
}

/* Hamburger Toggle */
.mv-navbar-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: transparent;
    border: 1.5px solid var(--mv-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--mv-transition);
}

.mv-navbar-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--mv-text-dark);
    border-radius: 2px;
    transition: var(--mv-transition);
    transform-origin: center;
}

.mv-navbar-toggle-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mv-navbar-toggle-active span:nth-child(2) {
    opacity: 0;
}

.mv-navbar-toggle-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Nav Menu */
.mv-navbar-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--mv-bg-card);
    border-top: 1px solid var(--mv-border-color);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    padding: 16px 0;
}

.mv-navbar-menu-open {
    display: block;
    animation: mv-slideDown 0.25s ease-out;
}

@keyframes mv-slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mv-navbar-menu-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Nav Links */
.mv-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--mv-text-dark);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: var(--mv-transition);
}

.mv-nav-link svg {
    flex-shrink: 0;
    opacity: 0.5;
    transition: var(--mv-transition);
}

.mv-nav-link:hover {
    background: var(--mv-bg-section);
    color: var(--ar-primary);
}

.mv-nav-link:hover svg {
    opacity: 1;
}

.mv-nav-link.active {
    background: color-mix(in srgb, var(--ar-primary) 8%, var(--mv-bg-section));
    color: var(--ar-primary);
    font-weight: 600;
}

.mv-nav-link.active svg {
    opacity: 1;
}

.mv-nav-logout {
    color: var(--mv-text-muted) !important;
}

.mv-nav-logout:hover {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.06);
}

/* Desktop: Show nav inline */
@media (min-width: 992px) {
    .mv-navbar-toggle {
        display: none;
    }

    .mv-navbar-menu {
        display: flex !important;
        position: static;
        background: transparent;
        border-top: none;
        box-shadow: none;
        padding: 0;
        animation: none;
    }

    .mv-navbar-menu-inner {
        flex-direction: row;
        align-items: center;
        gap: 4px;
    }

    .mv-navbar-menu-open {
        animation: none;
    }

    .mv-nav-link {
        padding: 8px 12px;
        font-size: 0.82rem;
        border-radius: var(--radius-sm);
    }

    .mv-navbar-menu .mv-nav-link svg {
        width: 16px;
        height: 16px;
    }

    .mv-navbar-menu .mv-nav-link span {
        display: inline;
    }

    .mv-navbar-mobile-actions {
        display: none !important;
    }
}

/* Dropdown */
.mv-nav-dropdown {
    position: relative;
}

.mv-dropdown-trigger {
    cursor: pointer;
    background: none;
    border: none;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--mv-text-dark);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--mv-transition);
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    line-height: 1.2;
    width: 100%;
}

.mv-dropdown-trigger svg:first-child {
    width: 18px;
    height: 18px;
    opacity: 0.5;
    flex-shrink: 0;
    transition: var(--mv-transition);
}

.mv-dropdown-trigger svg:last-child {
    width: 12px;
    height: 12px;
    opacity: 0.5;
    flex-shrink: 0;
    transition: var(--mv-transition);
    margin-left: auto;
}

.mv-dropdown-trigger:hover {
    background: var(--mv-bg-section);
}

.mv-dropdown-open .mv-dropdown-trigger {
    background: var(--mv-bg-section);
    color: var(--ar-primary);
}

.mv-dropdown-open .mv-dropdown-trigger svg:last-child {
    transform: rotate(180deg);
    opacity: 1;
}

.mv-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    background: var(--mv-bg-card);
    border: 1px solid var(--mv-border-color);
    border-radius: var(--radius);
    box-shadow: var(--mv-card-shadow-hover);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
    transition: var(--mv-transition);
    z-index: 1050;
}

.mv-dropdown-open .mv-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.mv-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: var(--mv-text-dark);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: var(--mv-transition);
}

.mv-dropdown-item:hover {
    background: var(--mv-bg-section);
    color: var(--ar-primary);
}

.mv-dropdown-item svg {
    flex-shrink: 0;
    opacity: 0.5;
}

.mv-dropdown-item:hover svg {
    opacity: 1;
}

/* Mobile buttons */
@media (max-width: 991px) {
    .mv-navbar-actions {
        display: none;
    }

    .mv-navbar-menu-inner {
        padding: 8px 0;
        gap: 2px;
    }

    .mv-nav-link {
        padding: 12px 16px;
        font-size: 0.9rem;
        border-radius: 0;
    }

    .mv-nav-link svg {
        width: 20px;
        height: 20px;
    }

    .mv-nav-dropdown {
        position: static;
    }

    .mv-dropdown-trigger {
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
        border-radius: 0 !important;
        gap: 10px;
    }

    .mv-dropdown-trigger svg:first-child {
        width: 20px;
        height: 20px;
    }

    .mv-dropdown-trigger svg:last-child {
        width: 14px;
        height: 14px;
    }

    .mv-dropdown-menu {
        position: static !important;
        min-width: 100%;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        background: transparent !important;
        display: none;
    }

    .mv-dropdown-open .mv-dropdown-menu {
        display: block;
    }

    .mv-dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px 10px 44px;
        font-size: 0.85rem;
        color: var(--mv-text-muted);
        border-radius: 0;
    }

    .mv-dropdown-item svg {
        width: 16px;
        height: 16px;
        opacity: 0.4;
    }

    .mv-dropdown-item:active {
        background: var(--mv-bg-section);
    }

    .mv-navbar-toggle {
        display: flex;
        margin-left: auto;
    }

    .mv-navbar-mobile-actions {
        padding: 0 0 12px;
        display: flex !important;
    }

    .mv-mobile-actions .mv-btn-login,
    .mv-mobile-actions .mv-btn-balance,
    .mv-mobile-actions .mv-btn-admin {
        justify-content: center;
        padding: 10px 16px;
        font-size: 0.82rem;
    }
}

/* ============================================
   SEARCH INVOICE CARD
   ============================================ */

.mv-search-card {
    background: var(--mv-bg-card);
    border: 1px solid var(--mv-border-color);
    border-radius: var(--mv-radius-lg);
    padding: 24px;
    box-shadow: var(--mv-card-shadow);
    margin-bottom: 16px;
}

.mv-search-card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.mv-search-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--ar-primary) 10%, transparent);
    color: var(--ar-primary);
    flex-shrink: 0;
}

.mv-search-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    margin-bottom: 4px;
}

.mv-search-card-desc {
    font-size: 0.85rem;
    color: var(--mv-text-muted);
    margin-bottom: 0;
    line-height: 1.5;
}

.mv-search-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mv-search-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-sm, 10px);
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 500;
    animation: mv-slideDown 0.25s ease-out;
}

.mv-search-error svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.mv-search-error span {
    flex: 1;
}

.mv-search-error-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.5;
    padding: 2px;
    transition: var(--mv-transition);
}

.mv-search-error-close:hover {
    opacity: 1;
}

.mv-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--mv-bg-section);
    border: 1.5px solid var(--mv-border-color);
    border-radius: var(--radius-sm, 12px);
    padding: 0 4px 0 14px;
    transition: var(--mv-transition);
}

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

.mv-search-input-icon {
    flex-shrink: 0;
    color: var(--mv-text-muted);
    opacity: 0.6;
}

.mv-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 10px;
    font-size: 0.9rem;
    color: var(--mv-text-dark);
    outline: none;
    font-family: inherit;
    min-width: 0;
}

.mv-search-input::placeholder {
    color: var(--mv-text-muted);
    opacity: 0.6;
}

.mv-search-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--ar-primary);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--mv-transition);
    white-space: nowrap;
    font-family: inherit;
}

.mv-search-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.mv-search-btn:active {
    transform: translateY(0);
}

.mv-search-hint {
    font-size: 0.78rem;
    color: var(--mv-text-muted);
    opacity: 0.7;
    margin-bottom: 0;
    line-height: 1.5;
}

/* ============================================
   REALTIME ORDER TABLE
   ============================================ */

.mv-realtime-card {
    background: var(--mv-bg-card);
    border: 1px solid var(--mv-border-color);
    border-radius: var(--mv-radius-lg);
    padding: 24px;
    box-shadow: var(--mv-card-shadow);
}

.mv-realtime-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.mv-realtime-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    margin-bottom: 4px;
}

.mv-realtime-desc {
    font-size: 0.85rem;
    color: var(--mv-text-muted);
    margin-bottom: 0;
}

.mv-realtime-live {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #22c55e;
    white-space: nowrap;
    flex-shrink: 0;
}

.mv-realtime-dot {
    width: 7px;
    height: 7px;
    background: #22c55e;
    border-radius: 50%;
    animation: mv-pulse 1.5s ease-in-out infinite;
}

@keyframes mv-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.8);
    }
}

.mv-realtime-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -8px;
    padding: 0 8px;
}

.mv-realtime-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.mv-realtime-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1.5px solid var(--mv-border-color);
    white-space: nowrap;
}

.mv-realtime-table tbody tr {
    transition: var(--mv-transition);
}

.mv-realtime-table tbody tr:hover {
    background: var(--mv-bg-section);
}

.mv-realtime-table tbody td {
    padding: 12px 12px;
    color: var(--mv-text-dark);
    border-bottom: 1px solid var(--mv-border-color);
    white-space: nowrap;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.82rem;
}

.mv-realtime-table tbody tr:last-child td {
    border-bottom: none;
}

.mv-realtime-table tbody td:first-child {
    font-family: inherit;
    font-weight: 500;
    color: var(--mv-text-muted);
    font-size: 0.82rem;
}

/* Status Badges */
.mv-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.mv-status-success {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.mv-status-pending {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.mv-status-expired {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

/* Mobile: Responsive Table */
@media (max-width: 576px) {
    .mv-search-card {
        padding: 18px;
    }

    .mv-search-card-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .mv-search-card-title {
        font-size: 1rem;
    }

    .mv-search-input-wrap {
        flex-wrap: wrap;
        padding: 4px;
        border-radius: var(--radius-sm, 12px);
    }

    .mv-search-input-icon {
        display: none;
    }

    .mv-search-input {
        flex: 1 1 100%;
        padding: 10px 12px;
        order: -1;
    }

    .mv-search-btn {
        width: 100%;
        justify-content: center;
        padding: 10px;
    }

    .mv-search-hint {
        font-size: 0.75rem;
    }

    .mv-realtime-card {
        padding: 16px;
    }

    .mv-realtime-table thead {
        display: none;
    }

    .mv-realtime-table,
    .mv-realtime-table tbody,
    .mv-realtime-table tr,
    .mv-realtime-table td {
        display: block;
    }

    .mv-realtime-table tbody tr {
        padding: 12px 0;
        border-bottom: 1px solid var(--mv-border-color);
    }

    .mv-realtime-table tbody tr:last-child {
        border-bottom: none;
    }

    .mv-realtime-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        border-bottom: none;
        font-size: 0.82rem;
        white-space: normal;
    }

    .mv-realtime-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--mv-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.02em;
        font-family: inherit;
        margin-right: 12px;
    }

    .mv-realtime-table tbody td:first-child::before {
        display: none;
    }
}

/* ============================================
   INVOICE DETAIL PAGE
   ============================================ */

.mv-inv-status {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: var(--mv-radius-lg);
    margin-bottom: 16px;
    border: 1px solid var(--mv-border-color);
    background: var(--mv-bg-card);
    box-shadow: var(--mv-card-shadow);
}

.mv-inv-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    flex-shrink: 0;
}

.mv-inv-status-body {
    flex: 1;
    min-width: 0;
}

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

.mv-inv-status-desc {
    font-size: 0.85rem;
    color: var(--mv-text-muted);
    margin-bottom: 0;
}

.mv-inv-status-unpaid .mv-inv-status-icon {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.mv-inv-status-unpaid .mv-inv-status-title {
    color: #d97706;
}

.mv-inv-status-pending .mv-inv-status-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.mv-inv-status-pending .mv-inv-status-title {
    color: #2563eb;
}

.mv-inv-status-success .mv-inv-status-icon {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.mv-inv-status-success .mv-inv-status-title {
    color: #16a34a;
}

.mv-inv-status-expired .mv-inv-status-icon {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.mv-inv-status-expired .mv-inv-status-title {
    color: #d97706;
}

.mv-inv-status-failed .mv-inv-status-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.mv-inv-status-failed .mv-inv-status-title {
    color: #dc2626;
}

/* Cards */
.mv-inv-card {
    background: var(--mv-bg-card);
    border: 1px solid var(--mv-border-color);
    border-radius: var(--mv-radius-lg);
    padding: 24px;
    box-shadow: var(--mv-card-shadow);
    margin-bottom: 16px;
}

.mv-inv-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.mv-inv-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    margin-bottom: 0;
}

.mv-inv-id-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--mv-bg-section);
    border: 1px solid var(--mv-border-color);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--mv-text-muted);
    white-space: nowrap;
}

.mv-inv-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mv-border-color);
}

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

/* Countdown */
.mv-inv-countdown-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.15);
    border-radius: var(--radius-sm, 12px);
    margin-bottom: 20px;
}

.mv-inv-countdown-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--mv-text-muted);
}

.mv-inv-countdown {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    color: #dc2626;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
    cursor: default;
}

/* Info List */
.mv-inv-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mv-inv-info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mv-inv-info-label {
    font-size: 0.82rem;
    color: var(--mv-text-muted);
    white-space: nowrap;
}

.mv-inv-info-value {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mv-text-dark);
    text-align: right;
    word-break: break-all;
}

.mv-inv-price {
    color: var(--ar-primary);
    font-weight: 700;
    font-size: 1rem;
}

/* Complain Button */
.mv-inv-complain-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    margin-top: 8px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    color: #ef4444;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--mv-transition);
    font-family: inherit;
}

.mv-inv-complain-btn:hover {
    background: rgba(239, 68, 68, 0.15);
}

/* Accordion */
.mv-inv-accordion {
    border: 1px solid var(--mv-border-color);
    border-radius: var(--radius-sm, 12px);
    overflow: hidden;
    margin-bottom: 16px;
}

.mv-inv-accordion-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: var(--mv-bg-section);
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    cursor: pointer;
    transition: var(--mv-transition);
    font-family: inherit;
}

.mv-inv-accordion-trigger svg:first-child {
    flex-shrink: 0;
    opacity: 0.5;
}

.mv-inv-chevron {
    margin-left: auto;
    opacity: 0.4;
    transition: transform 0.25s ease;
}

.mv-inv-accordion-trigger[aria-expanded="false"] .mv-inv-chevron {
    transform: rotate(-90deg);
}

.mv-inv-accordion-body {
    padding: 16px;
    font-size: 0.84rem;
    color: var(--mv-text-muted);
    line-height: 1.7;
}

.mv-inv-ol {
    margin: 0;
    padding-left: 20px;
    line-height: 1.8;
}

.mv-inv-ol li {
    margin-bottom: 2px;
}

.mv-inv-panduan {
    padding: 16px;
    background: var(--mv-bg-section);
    border: 1px solid var(--mv-border-color);
    border-radius: var(--radius-sm, 12px);
    font-size: 0.84rem;
    color: var(--mv-text-muted);
    line-height: 1.7;
    margin-bottom: 16px;
}

/* QR Section */
.mv-inv-qr-section {
    text-align: center;
    padding: 20px;
    background: var(--mv-bg-section);
    border: 1px solid var(--mv-border-color);
    border-radius: var(--radius-sm, 12px);
}

.mv-inv-qr-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    margin-bottom: 16px;
}

.mv-inv-qr-img-wrap {
    display: inline-block;
    padding: 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mv-inv-qr-img-wrap img {
    max-width: 200px;
    height: auto;
    display: block;
}

.mv-inv-qr-img-wrap #qrcodenew {
    line-height: 0;
}

.mv-inv-qr-img-wrap #qrcodenew img {
    max-width: 200px !important;
    height: auto !important;
}

.mv-inv-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 16px;
    background: var(--ar-primary);
    color: #000;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--mv-transition);
}

.mv-inv-download-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* VA Section */
.mv-inv-va-section {
    padding: 20px;
    background: var(--mv-bg-section);
    border: 1px solid var(--mv-border-color);
    border-radius: var(--radius-sm, 12px);
    text-align: center;
}

.mv-inv-va-label {
    display: block;
    font-size: 0.82rem;
    color: var(--mv-text-muted);
    margin-bottom: 10px;
}

.mv-inv-va-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--mv-bg-card);
    border: 2px dashed var(--ar-primary);
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--mv-text-dark);
    cursor: pointer;
    transition: var(--mv-transition);
}

.mv-inv-va-btn:hover {
    background: color-mix(in srgb, var(--ar-primary) 8%, transparent);
}

.mv-inv-va-btn svg {
    opacity: 0.4;
}

/* Pay Button */
.mv-inv-pay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    background: var(--ar-primary);
    color: #000;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--mv-transition);
    cursor: pointer;
}

.mv-inv-pay-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: #000;
}

/* Product Card */
.mv-inv-product {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.mv-inv-product-img {
    width: 80px;
    height: 80px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--mv-bg-section);
}

.mv-inv-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mv-inv-product-info {
    flex: 1;
    min-width: 0;
}

.mv-inv-product-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    margin-bottom: 4px;
}

.mv-inv-product-item {
    display: inline-block;
    padding: 2px 10px;
    background: var(--mv-bg-section);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--mv-text-muted);
    margin-bottom: 10px;
}

.mv-inv-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mv-inv-product-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--mv-text-muted);
}

.mv-inv-product-meta svg {
    opacity: 0.5;
}

/* Payment Method */
.mv-inv-payment-method {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.mv-inv-payment-method img {
    height: 32px;
    width: auto;
    border-radius: 6px;
}

.mv-inv-payment-method span {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--mv-text-dark);
}

/* Detail List */
.mv-inv-detail-list {
    display: flex;
    flex-direction: column;
}

.mv-inv-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mv-border-color);
    font-size: 0.84rem;
    color: var(--mv-text-muted);
}

.mv-inv-detail-row:last-child {
    border-bottom: none;
}

.mv-inv-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--mv-bg-section);
    border: 1px solid var(--mv-border-color);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--mv-text-dark);
    cursor: pointer;
    transition: var(--mv-transition);
    text-decoration: none;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mv-inv-copy-btn:hover {
    background: color-mix(in srgb, var(--ar-primary) 8%, var(--mv-bg-section));
    border-color: var(--ar-primary);
    color: var(--ar-primary);
}

.mv-inv-copy-btn svg {
    flex-shrink: 0;
    opacity: 0.4;
}

.mv-inv-total-row {
    border-bottom: none !important;
    padding-top: 16px !important;
}

.mv-inv-total-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ar-primary);
}

/* Status Badge - Failed */
.mv-status-failed {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Rating */
.mv-inv-rating-card {
    margin-top: 16px;
}

.mv-inv-rating-hint {
    font-size: 0.85rem;
    color: var(--mv-text-muted);
    margin-bottom: 16px;
}

.mv-inv-rating-display {
    text-align: center;
    padding: 16px 0;
}

.mv-inv-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 10px;
}

.mv-star {
    color: var(--mv-border-color);
    transition: var(--mv-transition);
}

.mv-star.active {
    color: #f59e0b;
}

.mv-inv-rating-msg {
    font-size: 0.88rem;
    color: var(--mv-text-muted);
    font-style: italic;
    margin-bottom: 0;
}

.mv-inv-rating-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.mv-inv-rating-tag {
    padding: 6px 12px;
    background: var(--mv-bg-section);
    border: 1px solid var(--mv-border-color);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--mv-text-muted);
    cursor: pointer;
    transition: var(--mv-transition);
    font-family: inherit;
}

.mv-inv-rating-tag:hover,
.mv-inv-rating-tag.active {
    background: color-mix(in srgb, var(--ar-primary) 10%, transparent);
    border-color: var(--ar-primary);
    color: var(--ar-primary);
}

.mv-inv-rating-textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--mv-bg-section);
    border: 1.5px solid var(--mv-border-color);
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--mv-text-dark);
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
    transition: var(--mv-transition);
    margin-bottom: 10px;
    box-sizing: border-box;
}

.mv-inv-rating-textarea:focus {
    outline: none;
    border-color: var(--ar-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-primary) 12%, transparent);
}

.mv-inv-rating-textarea::placeholder {
    color: var(--mv-text-muted);
    opacity: 0.5;
}

.mv-inv-submit-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: var(--ar-primary);
    color: #000;
    border: none;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--mv-transition);
    font-family: inherit;
}

.mv-inv-submit-rating:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Refresh Hint */
.mv-inv-refresh-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    font-size: 0.78rem;
    color: var(--mv-text-muted);
    opacity: 0.6;
}

.mv-inv-refresh-hint svg {
    flex-shrink: 0;
    animation: mv-spin 4s linear infinite;
}

@keyframes mv-spin {
    100% {
        transform: rotate(360deg);
    }
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .mv-inv-status {
        padding: 16px 18px;
        gap: 12px;
    }

    .mv-inv-status-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .mv-inv-status-icon svg {
        width: 22px;
        height: 22px;
    }

    .mv-inv-status-title {
        font-size: 1rem;
    }

    .mv-inv-card {
        padding: 18px;
    }

    .mv-inv-countdown-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .mv-inv-va-btn {
        font-size: 0.92rem;
        padding: 10px 14px;
    }

    .mv-inv-copy-btn {
        max-width: 160px;
        font-size: 0.72rem;
    }
}

/* ============================================
   RATING LIST PAGE
   ============================================ */

.mv-rating-list-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    background: var(--mv-bg-card);
    border: 1px solid var(--mv-border-color);
    border-radius: var(--mv-radius-lg);
    box-shadow: var(--mv-card-shadow);
    margin-bottom: 16px;
}

.mv-rating-list-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    flex-shrink: 0;
}

.mv-rating-list-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    margin-bottom: 4px;
}

.mv-rating-list-desc {
    font-size: 0.85rem;
    color: var(--mv-text-muted);
    margin-bottom: 0;
    line-height: 1.5;
}

.mv-rating-grid .rating-list {
    display: none;
}

.mv-rating-card {
    background: var(--mv-bg-card);
    border: 1px solid var(--mv-border-color);
    border-radius: var(--mv-radius);
    padding: 18px;
    box-shadow: var(--mv-card-shadow);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: var(--mv-transition);
}

.mv-rating-card:hover {
    box-shadow: var(--mv-card-shadow-hover);
    transform: translateY(-2px);
}

.mv-rating-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.mv-rating-card-product {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.mv-rating-card-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.mv-star-sm {
    color: var(--mv-border-color);
    transition: var(--mv-transition);
}

.mv-star-sm.active {
    color: #f59e0b;
}

.mv-rating-card-item {
    display: inline-block;
    padding: 2px 10px;
    background: var(--mv-bg-section);
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--mv-text-muted);
    margin-bottom: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.mv-rating-card-msg {
    font-size: 0.84rem;
    color: var(--mv-text-dark);
    line-height: 1.6;
    margin-bottom: 0;
    flex: 1;
    font-style: italic;
    opacity: 0.8;
}

.mv-rating-card-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--mv-border-color);
}

.mv-rating-card-id {
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--mv-text-muted);
    opacity: 0.6;
}

@media (max-width: 576px) {
    .mv-rating-list-header {
        padding: 18px;
        gap: 12px;
    }

    .mv-rating-list-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .mv-rating-list-title {
        font-size: 1rem;
    }

    .mv-rating-card {
        padding: 16px;
    }
}

/* ============================================
   TICKER (Running Order Notifications)
   ============================================ */

.mv-ticker {
    background: var(--mv-bg-section);
    border-top: 1px solid var(--mv-border-color);
    overflow: hidden;
}

.mv-ticker-track {
    overflow: hidden;
}

.mv-ticker-content {
    display: flex;
    animation: mv-ticker-scroll 40s linear infinite;
    width: max-content;
}

@keyframes mv-ticker-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.mv-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 7px 24px;
    font-size: 0.78rem;
    color: var(--mv-text-dark);
}

.mv-ticker-item svg {
    flex-shrink: 0;
    color: var(--ar-primary);
}

.mv-ticker-item strong {
    font-weight: 600;
}

.mv-ticker-price {
    color: #10b981;
    font-weight: 700;
}

.mv-ticker-item::after {
    content: '•';
    margin-left: 24px;
    color: var(--mv-border-color);
}

.mv-ticker-item:last-child::after {
    content: '';
}

@media (max-width: 576px) {
    .mv-ticker-item {
        font-size: 0.72rem;
        padding: 6px 16px;
    }

    .mv-ticker-item::after {
        margin-left: 16px;
    }
}

.mv-voucher-title {
    color: var(--mv-text-muted);
    font-size: 0.78rem;
}

.mv-invoice-amount {
    color: black;
}

[data-bs-theme="dark"] .mv-invoice-amount {
    color: black;
}

[data-bs-theme="dark"] .mv-voucher-title {
    color: var(--mv-text-muted);
}

[data-bs-theme="dark"] div:where(.swal2-container) div:where(.swal2-popup) {
    background-color: #23262f;
    color: white;
}

.bg-game {
    background-color: var(--mv-bg-card);
}

[data-bs-theme="dark"] .bg-game {
    background-color: var(--mv-bg-card);
    color: var(--mv-text-dark);
}

[data-bs-theme="dark"] .mv-product-div {
    background-color: var(--mv-bg-card);
}

[data-bs-theme="dark"] .mv-product-image {
    background-color: var(--mv-bg-card);
}

[data-bs-theme="dark"] .mv-product-item {
    background-color: var(--mv-bg-card);
}

[data-bs-theme="dark"] .mv-invoice-bg {
    background-color: var(--mv-bg-section);
}

.mv-badge-order-text {
    color: #434a57;
}

[data-bs-theme="dark"] .mv-badge-order-text {
    color: #fff;
}

.mv-invoice-bg {
    background-color: var(--mv-bg-section);
}

.mv-product-image {
    background-color: var(--mv-bg-card);
    margin-left: auto;
    margin-right: auto;
}

.logo-new-mv {
    width: 25px;
    content: url("https://mvstore.id/assets/upload/home/logo-dark2.webp");
}

[data-bs-theme="dark"] .logo-new-mv {
    width: 25px;
    content: url("https://mvstore.id/assets/upload/home/logo-dark2.webp");
}

[data-bs-theme="dark"] .mv-favorite-product {
    background-color: var(--mv-bg-card);
}

.mv-favorite-product {
    background-color: var(--mv-bg-card);
}

.bg-white {
    background-color: var(--mv-bg-card) !important;
}

.mv-color-inputid {
    background-color: var(--mv-bg-section);
}

[data-bs-theme="dark"] .mv-color-inputid {
    background-color: #121519;
}

[data-bs-theme="dark"] .bg-white {
    background-color: var(--mv-bg-card) !important;
}

.mv-product-item {
    background-color: var(--mv-bg-card);
    padding-right: 20px;
    padding-left: 20px;
    margin-top: 0px;
}

.mv-header-step {
    background-image: linear-gradient(to right,
            #48c795,
            #6fcc75,
            #9bce50,
            #cbcb2a,
            #36ba98);
}

.sticky-top {
    top: 7em;
}

.mv-product-div {
    background-color: var(--mv-bg-card);
}

.mv-text-game {
    color: var(--mv-text-dark);
}

.mv-text-game:hover {
    color: var(--ar-primary);
}

.discount-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 10px;
    border-bottom-left-radius: 12px;
    font-size: 0.72rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    color: #fff;
    z-index: 2;
    letter-spacing: 0.3px;
}

.rating {
    display: flex;
    width: 100%;
    justify-content: start;
    overflow: hidden;
    flex-direction: row-reverse;
    height: 50px;
    margin-bottom: 5px;
    position: relative;
}

.rating-0 {
    filter: grayscale(100%);
}

.rating>input {
    display: none;
}

.rating>label {
    cursor: pointer;
    width: 40px;
    height: 40px;
    margin-top: auto;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23e3e3e3' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 76%;
    transition: 0.3s;
}

.rating>input:checked~label,
.rating>input:checked~label~label {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23fcd93a' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}

.rating>input:not(:checked)~label:hover,
.rating>input:not(:checked)~label:hover~label {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23d8b11e' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}

.mv-product-desc>h1 {
    font-size: 20px;
}

.mv-product-desc>h2 {
    font-size: 18px;
}

.mv-product-desc>h3 {
    font-size: 17px;
}

.mv-product-desc>h4 {
    font-size: 16px;
}

.mv-product-desc>h5 {
    font-size: 15px;
}

.mv-product-desc>h6 {
    font-size: 15px;
}

.text-mv-green {
    color: rgb(49 196 141) !important;
}

.main-container {
    margin-top: 90px;
}

.background-flazz-home {
    position: absolute;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(3px) brightness(0.35);
    z-index: 0;
    border-radius: var(--mv-radius);
}

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.pace-inactive {
    display: none;
}

.pace .pace-progress {
    background: var(--ar-primary);
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 2px;
}

.pace .pace-progress-inner {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px var(--ar-primary), 0 0 5px var(--ar-primary);
    opacity: 1;
    -webkit-transform: rotate(3deg) translate(0px, -4px);
    transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
    display: block;
    position: fixed;
    z-index: 2000;
    top: 15px;
    right: 15px;
    width: 14px;
    height: 14px;
    border: solid 2px transparent;
    border-top-color: var(--ar-primary);
    border-left-color: var(--ar-primary);
    border-radius: 10px;
    -webkit-animation: pace-spinner 400ms linear infinite;
    animation: pace-spinner 400ms linear infinite;
}

@keyframes pace-spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* ============================================
   MODERN HOME REDESIGN
   ============================================ */

.mv-hero-section {
    padding: 0 0 1rem;
}

.mv-hero-section .swiper-slide img {
    border-radius: var(--mv-radius-lg);
    object-fit: cover;
    width: 100%;
}

.mv-hero-section .swiper-pagination-bullet {
    background: var(--ar-primary);
    opacity: 0.4;
    width: 8px;
    height: 8px;
    transition: var(--mv-transition);
}

.mv-hero-section .swiper-pagination-bullet-active {
    opacity: 1;
    width: 24px;
    border-radius: 4px;
}

.mv-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mv-text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.75rem;
}

.mv-section-title .mv-title-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1rem;
}

.mv-section-desc {
    font-size: 0.82rem;
    color: var(--mv-text-muted);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.mv-cat-scroll {
    overflow-x: auto;
    white-space: nowrap;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0;
}

.mv-cat-scroll::-webkit-scrollbar {
    display: none;
}

.mv-cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid var(--mv-border-color);
    border-radius: 50px;
    background: var(--mv-bg-card);
    color: var(--mv-text-dark);
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    transition: var(--mv-transition);
    cursor: pointer;
    text-decoration: none;
}

.mv-cat-btn:hover {
    border-color: var(--ar-primary);
    color: var(--ar-primary);
}

.mv-cat-btn.active {
    background: var(--ar-primary);
    border-color: var(--ar-primary);
    color: #000;
    font-weight: 600;
}

.mv-cat-btn img {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    object-fit: cover;
}

.mv-cat-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mv-text-dark);
    padding: 1rem 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mv-cat-heading svg {
    opacity: 0.6;
}

.mv-cat-heading .mv-cat-count {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mv-text-muted);
}

.mv-game-card {
    text-decoration: none;
    display: block;
    height: 100%;
    transition: var(--mv-transition);
}

.mv-game-card:hover {
    transform: translateY(-4px);
}

.mv-game-card .mv-card-inner {
    background: var(--mv-bg-card);
    border-radius: var(--mv-radius);
    padding: 16px 10px 12px;
    text-align: center;
    box-shadow: var(--mv-card-shadow);
    transition: var(--mv-transition);
    border: 1px solid var(--mv-border-color);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.mv-game-card:hover .mv-card-inner {
    box-shadow: var(--mv-card-shadow-hover);
    border-color: var(--ar-primary);
}

.mv-game-card .mv-card-img-wrap {
    width: 72px;
    height: 72px;
    margin: -40px auto 10px;
    position: relative;
    z-index: 1;
}

.mv-game-card .mv-card-img-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mv-game-card .mv-card-category {
    font-size: 0.72rem;
    color: var(--mv-text-muted);
    margin-bottom: 6px;
    font-weight: 500;
}

.mv-game-card .mv-card-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.mv-game-card .mv-badge-tag {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.mv-game-card .mv-badge-instant {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.mv-game-card .mv-badge-disc {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.mv-game-card .mv-card-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ar-primary);
    padding: 6px 12px;
    border-radius: 50px;
    background: color-mix(in srgb, var(--ar-primary) 10%, transparent);
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: auto;
}

.mv-voucher-card {
    text-decoration: none;
    display: block;
    height: 100%;
    transition: var(--mv-transition);
}

.mv-voucher-card:hover {
    transform: translateY(-2px);
}

.mv-voucher-card .mv-card-inner {
    background: var(--mv-bg-card);
    border-radius: var(--mv-radius);
    padding: 14px;
    box-shadow: var(--mv-card-shadow);
    transition: var(--mv-transition);
    border: 1px solid var(--mv-border-color);
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
}

.mv-voucher-card:hover .mv-card-inner {
    box-shadow: var(--mv-card-shadow-hover);
    border-color: var(--ar-primary);
}

.mv-voucher-card .mv-card-img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
}

.mv-voucher-card .mv-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mv-voucher-card .mv-card-info h6 {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mv-voucher-card .mv-card-info .mv-card-cat {
    font-size: 0.75rem;
    color: var(--mv-text-muted);
}

.mv-voucher-card .mv-card-badges {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.mv-voucher-card .mv-badge-tag {
    font-size: 0.62rem;
    padding: 2px 8px;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.mv-voucher-card .mv-badge-aman {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.mv-voucher-card .mv-badge-disc {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.mv-voucher-card .mv-badge-cepat {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.mv-voucher-card .mv-badge-promo {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}


/* Flashsale */
.mv-flashsale-section {
    background: var(--mv-bg-card);
    border-radius: var(--mv-radius-lg);
    padding: 20px;
    margin-bottom: 1rem;
    box-shadow: var(--mv-card-shadow);
    border: 1px solid var(--mv-border-color);
}

.mv-flashsale-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.mv-flashsale-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mv-text-dark);
}

.mv-flashsale-title .mv-flash-icon {
    width: 36px;
    height: 36px;
    background: var(--ar-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mv-pulse 2s ease-in-out infinite;
}

@keyframes mv-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.mv-flashsale-title .mv-flash-icon svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

/* Flash Sale See All Link */
.mv-flashsale-see-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ar-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--mv-transition);
}

.mv-flashsale-see-all:hover {
    opacity: 0.7;
}

/* Flash Sale Card (tsale 0/1) */
.mv-flashsale-card {
    display: block;
    text-decoration: none;
    border-radius: var(--mv-radius);
    overflow: hidden;
    height: 200px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: var(--mv-transition);
}

.mv-flashsale-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.mv-flashsale-card-banner {
    position: absolute;
    inset: 0;
    filter: brightness(0.4);
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.mv-flashsale-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.05) 100%);
    z-index: 1;
    pointer-events: none;
}

.mv-flashsale-card-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 14px;
    color: #fff;
}

.mv-flashsale-card-img {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.mv-flashsale-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mv-flashsale-card-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mv-flashsale-card-game {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.65);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mv-flashsale-card-price {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.mv-flashsale-section .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.4;
}

.mv-flashsale-section .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--ar-primary);
}


/* ============================================
   FLASH SALE STYLE 2 - Grid Cards
   ============================================ */

.mv-fl2-card {
    text-decoration: none;
    display: block;
    height: 100%;
}

.mv-fl2-inner {
    background: var(--mv-bg-section);
    border-radius: var(--mv-radius);
    padding: 14px 10px 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mv-border-color);
    transition: var(--mv-transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mv-fl2-card:hover .mv-fl2-inner {
    border-color: var(--ar-primary);
    box-shadow: var(--mv-card-shadow-hover);
    transform: translateY(-2px);
}

.mv-fl2-disc-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--ar-primary);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 3px 8px 3px 6px;
    border-radius: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 2;
}

.mv-fl2-img {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    object-fit: cover;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: var(--mv-transition);
}

.mv-fl2-card:hover .mv-fl2-img {
    transform: scale(1.05);
}

.mv-fl2-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.mv-fl2-bottom {
    margin-top: auto;
}

.mv-fl2-price {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    padding: 4px 12px;
    border-radius: 50px;
    display: inline-block;
}


/* ============================================
   FLASH SALE STYLE 3 - List View
   ============================================ */

.mv-fl3-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mv-fl3-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--mv-bg-section);
    border-radius: var(--mv-radius);
    text-decoration: none;
    transition: var(--mv-transition);
    border: 1px solid transparent;
}

.mv-fl3-item:hover {
    border-color: var(--ar-primary);
    background: var(--mv-bg-card);
    box-shadow: var(--mv-card-shadow-hover);
}

.mv-fl3-img-wrap {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(245, 158, 11, 0.2);
}

.mv-fl3-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mv-fl3-info {
    flex: 1;
    min-width: 0;
}

.mv-fl3-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}

.mv-fl3-product {
    font-size: 0.7rem;
    color: var(--mv-text-muted);
}

.mv-fl3-right {
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.mv-fl3-price {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ef4444;
}

.mv-fl3-badge {
    font-size: 0.58rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    padding: 2px 8px;
    border-radius: 50px;
}

.mv-fl3-arrow {
    flex-shrink: 0;
    color: var(--mv-text-muted);
    opacity: 0.4;
    transition: var(--mv-transition);
}

.mv-fl3-item:hover .mv-fl3-arrow {
    color: #ef4444;
    opacity: 1;
    transform: translateX(3px);
}


/* ============================================
   FLASH SALE STYLE 4 - Spotlight + Grid
   ============================================ */

.mv-fl4-spotlight {
    display: block;
    text-decoration: none;
    border-radius: var(--mv-radius-lg);
    overflow: hidden;
    position: relative;
    min-height: 120px;
    transition: var(--mv-transition);
}

.mv-fl4-spotlight:hover {
    box-shadow: var(--mv-card-shadow-hover);
    transform: translateY(-2px);
}

.mv-fl4-spotlight .background-flazz-home {
    border-radius: 0;
}

.mv-fl4-spotlight-content {
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-height: 120px;
    position: relative;
    z-index: 1;
    color: #fff;
}

.mv-fl4-spotlight-badge {
    font-size: 0.72rem;
    font-weight: 700;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    padding: 4px 12px;
    border-radius: 50px;
    display: inline-block;
    width: fit-content;
    margin-bottom: 8px;
}

.mv-fl4-spotlight-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mv-fl4-spotlight-img {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.mv-fl4-spotlight-text {
    flex: 1;
    min-width: 0;
}

.mv-fl4-spotlight-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mv-fl4-spotlight-product {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 6px;
}

.mv-fl4-spotlight-price {
    font-size: 0.88rem;
    font-weight: 800;
    background: rgba(16, 185, 129, 0.9);
    color: #fff;
    padding: 4px 14px;
    border-radius: 50px;
    display: inline-block;
}

.mv-fl4-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.mv-fl4-card {
    text-decoration: none;
    display: block;
    height: 100%;
}

.mv-fl4-card-inner {
    background: var(--mv-bg-section);
    border-radius: var(--mv-radius);
    padding: 12px 8px;
    text-align: center;
    border: 1px solid var(--mv-border-color);
    transition: var(--mv-transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mv-fl4-card:hover .mv-fl4-card-inner {
    border-color: var(--ar-primary);
    box-shadow: var(--mv-card-shadow-hover);
}

.mv-fl4-card-img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 8px;
    transition: var(--mv-transition);
}

.mv-fl4-card:hover .mv-fl4-card-img {
    transform: scale(1.05);
}

.mv-fl4-card-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    margin-bottom: 6px;
}

.mv-fl4-card-price {
    font-size: 0.72rem;
    font-weight: 700;
    color: #ef4444;
    margin-top: auto;
}


/* ============================================
   FLASH SALE STYLE 5 - Horizontal Scroll Cards
   ============================================ */

.mv-fl5-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.mv-fl5-scroll::-webkit-scrollbar {
    height: 4px;
}

.mv-fl5-scroll::-webkit-scrollbar-track {
    background: var(--mv-bg-section);
    border-radius: 4px;
}

.mv-fl5-scroll::-webkit-scrollbar-thumb {
    background: var(--mv-border-color);
    border-radius: 4px;
}

.mv-fl5-scroll::-webkit-scrollbar-thumb:hover {
    background: #ef4444;
}

.mv-fl5-chip {
    text-decoration: none;
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 200px;
}

.mv-fl5-chip-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--mv-bg-section);
    border: 1px solid var(--mv-border-color);
    border-radius: var(--mv-radius);
    padding: 12px;
    transition: var(--mv-transition);
}

.mv-fl5-chip:hover .mv-fl5-chip-inner {
    border-color: var(--ar-primary);
    background: var(--mv-bg-card);
    box-shadow: var(--mv-card-shadow-hover);
}

.mv-fl5-chip-flash {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.mv-fl5-chip-img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(245, 158, 11, 0.15);
    transition: var(--mv-transition);
}

.mv-fl5-chip:hover .mv-fl5-chip-img {
    border-color: var(--ar-primary);
}

.mv-fl5-chip-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mv-fl5-chip-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mv-fl5-chip-price {
    font-size: 0.75rem;
    font-weight: 700;
    color: #ef4444;
}


/* ============================================
   FLASH SALE RESPONSIVE - Styles 2-5
   ============================================ */

@media only screen and (max-width: 768px) {
    .mv-fl2-inner {
        padding: 10px 8px;
    }

    .mv-fl2-img {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .mv-fl2-name {
        font-size: 0.72rem;
    }

    .mv-fl2-price {
        font-size: 0.75rem;
        padding: 3px 10px;
    }

    .mv-fl3-item {
        padding: 10px;
        gap: 10px;
    }

    .mv-fl3-img-wrap {
        width: 40px;
        height: 40px;
    }

    .mv-fl3-name {
        font-size: 0.78rem;
    }

    .mv-fl3-product {
        display: none;
    }

    .mv-fl3-arrow {
        display: none;
    }

    .mv-fl4-spotlight-content {
        padding: 14px;
        min-height: 100px;
    }

    .mv-fl4-spotlight-img {
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }

    .mv-fl4-spotlight-name {
        font-size: 0.85rem;
    }

    .mv-fl4-spotlight-product {
        display: none;
    }

    .mv-fl4-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mv-fl4-card-inner {
        padding: 10px 6px;
    }

    .mv-fl4-card-img {
        width: 38px;
        height: 38px;
    }

    .mv-fl4-card-name {
        font-size: 0.65rem;
    }

    .mv-fl4-card-price {
        font-size: 0.65rem;
    }

    .mv-fl5-chip {
        width: 170px;
    }

    .mv-fl5-chip-inner {
        padding: 10px;
        gap: 8px;
    }

    .mv-fl5-chip-img {
        width: 38px;
        height: 38px;
    }

    .mv-fl5-chip-name {
        font-size: 0.72rem;
    }

    .mv-fl5-chip-price {
        font-size: 0.68rem;
    }
}


/* Populer */
.mv-populer-section {
    background: var(--mv-bg-card);
    border-radius: var(--mv-radius-lg);
    padding: 20px;
    margin-bottom: 1rem;
    box-shadow: var(--mv-card-shadow);
    border: 1px solid var(--mv-border-color);
}

.mv-populer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.mv-populer-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mv-text-dark);
}

.mv-populer-title .mv-pop-icon {
    width: 36px;
    height: 36px;
    background: var(--ar-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mv-populer-title .mv-pop-icon svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

.mv-populer-card {
    text-decoration: none;
    display: block;
    height: 100%;
    transition: var(--mv-transition);
}

.mv-populer-card:hover {
    transform: translateY(-3px);
}

.mv-populer-card .mv-card-inner {
    background: var(--mv-bg-section);
    border-radius: var(--mv-radius);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: var(--mv-transition);
    border: 1px solid transparent;
    height: 100%;
}

.mv-populer-card:hover .mv-card-inner {
    border-color: var(--ar-primary);
    background: var(--mv-bg-card);
    box-shadow: var(--mv-card-shadow-hover);
}

.mv-populer-card .mv-card-inner .mv-pop-bg-pattern {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    opacity: 0.05;
    pointer-events: none;
}

.mv-populer-card .mv-pop-img-wrap {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.mv-populer-card .mv-pop-img {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: cover;
}

.mv-populer-card .mv-pop-info {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mv-populer-card .mv-pop-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 6px;
}

.mv-populer-card .mv-pop-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.mv-populer-card .mv-pop-badge {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 50px;
    font-weight: 600;
}

.mv-populer-card .mv-pop-badge-aman {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.mv-populer-card .mv-pop-badge-cepat {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.mv-populer-card .mv-pop-badge-disc {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.mv-populer-card .mv-pop-cat {
    font-size: 0.72rem;
    color: var(--mv-text-muted);
    font-weight: 500;
}

.mv-populer-card .mv-pop-rank {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--mv-text-muted);
    opacity: 0.4;
    z-index: 1;
}


/* ============================================
   POPULER STYLE 2 - Horizontal Carousel
   ============================================ */

.mv-pop2-card {
    text-decoration: none;
    display: block;
    height: 100%;
}

.mv-pop2-inner {
    background: var(--mv-bg-section);
    border-radius: var(--mv-radius);
    padding: 14px 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mv-border-color);
    transition: var(--mv-transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mv-pop2-card:hover .mv-pop2-inner {
    border-color: var(--ar-primary);
    box-shadow: var(--mv-card-shadow-hover);
    transform: translateY(-2px);
}

.mv-pop2-rank {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ar-primary);
    opacity: 0.6;
    z-index: 2;
}

.mv-pop2-badge-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    pointer-events: none;
    background: var(--ar-primary);
}

.mv-pop2-img {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: cover;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: var(--mv-transition);
}

.mv-pop2-card:hover .mv-pop2-img {
    transform: scale(1.05);
}

.mv-pop2-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mv-pop2-cat {
    font-size: 0.7rem;
    color: var(--mv-text-muted);
    margin-bottom: 8px;
}

.mv-pop2-badges {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: auto;
    flex-wrap: wrap;
}

.mv-pop2-badge {
    font-size: 0.62rem;
    padding: 2px 8px;
    border-radius: 50px;
    font-weight: 600;
}

.mv-pop2-badge-hot {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.mv-pop2-badge-disc {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.mvSwiperPopuler {
    padding-bottom: 36px;
}

.mvSwiperPopuler .swiper-pagination-bullet {
    background: var(--ar-primary);
    opacity: 0.3;
}

.mvSwiperPopuler .swiper-pagination-bullet-active {
    opacity: 1;
}


/* ============================================
   POPULER STYLE 3 - List View
   ============================================ */

.mv-pop3-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mv-pop3-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--mv-bg-section);
    border-radius: var(--mv-radius);
    text-decoration: none;
    transition: var(--mv-transition);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.mv-pop3-item:hover {
    border-color: var(--ar-primary);
    background: var(--mv-bg-card);
    box-shadow: var(--mv-card-shadow-hover);
}

.mv-pop3-rank {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ar-primary);
    min-width: 30px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.7;
}

.mv-pop3-img-wrap {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: hidden;
}

.mv-pop3-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mv-pop3-info {
    flex: 1;
    min-width: 0;
}

.mv-pop3-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}

.mv-pop3-cat {
    font-size: 0.7rem;
    color: var(--mv-text-muted);
}

.mv-pop3-badges {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.mv-pop3-badge {
    font-size: 0.6rem;
    padding: 2px 7px;
    border-radius: 50px;
    font-weight: 600;
}

.mv-pop3-badge-aman {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.mv-pop3-badge-disc {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.mv-pop3-arrow {
    flex-shrink: 0;
    color: var(--mv-text-muted);
    opacity: 0.4;
    transition: var(--mv-transition);
}

.mv-pop3-item:hover .mv-pop3-arrow {
    color: var(--ar-primary);
    opacity: 1;
    transform: translateX(3px);
}


/* ============================================
   POPULER STYLE 4 - Featured + Grid
   ============================================ */

.mv-pop4-featured {
    display: block;
    text-decoration: none;
    border-radius: var(--mv-radius-lg);
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ar-primary) 15%, var(--mv-bg-section)), color-mix(in srgb, var(--ar-primary) 5%, var(--mv-bg-card)));
    transition: var(--mv-transition);
}

.mv-pop4-featured:hover {
    box-shadow: var(--mv-card-shadow-hover);
    transform: translateY(-2px);
}

.mv-pop4-featured-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    opacity: 0.05;
    pointer-events: none;
    background: var(--ar-primary);
}

.mv-pop4-featured-content {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.mv-pop4-featured-rank {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    padding: 4px 14px;
    border-radius: 50px;
    display: inline-block;
    width: fit-content;
    margin-bottom: 14px;
}

.mv-pop4-featured-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mv-pop4-featured-img-wrap {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.mv-pop4-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mv-pop4-featured-text {
    flex: 1;
    min-width: 0;
}

.mv-pop4-featured-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mv-text-dark);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mv-pop4-featured-cat {
    font-size: 0.78rem;
    color: var(--mv-text-muted);
    margin-bottom: 8px;
}

.mv-pop4-featured-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.mv-pop4-featured-badge {
    font-size: 0.62rem;
    padding: 2px 8px;
    border-radius: 50px;
    font-weight: 600;
}

.mv-pop4-badge-aman {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.mv-pop4-badge-cepat {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.mv-pop4-badge-disc {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.mv-pop4-small-card {
    text-decoration: none;
    display: block;
    height: 100%;
}

.mv-pop4-small-inner {
    background: var(--mv-bg-section);
    border-radius: var(--mv-radius);
    padding: 12px 8px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: var(--mv-transition);
    border: 1px solid transparent;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mv-pop4-small-card:hover .mv-pop4-small-inner {
    border-color: var(--ar-primary);
    box-shadow: var(--mv-card-shadow-hover);
}

.mv-pop4-small-rank {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--mv-text-muted);
    opacity: 0.4;
}

.mv-pop4-small-img {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    object-fit: cover;
    margin-bottom: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

.mv-pop4-small-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    margin-top: auto;
}


/* ============================================
   POPULER STYLE 5 - Compact Chips (Horizontal Scroll)
   ============================================ */

.mv-pop5-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.mv-pop5-scroll::-webkit-scrollbar {
    height: 4px;
}

.mv-pop5-scroll::-webkit-scrollbar-track {
    background: var(--mv-bg-section);
    border-radius: 4px;
}

.mv-pop5-scroll::-webkit-scrollbar-thumb {
    background: var(--mv-border-color);
    border-radius: 4px;
}

.mv-pop5-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--ar-primary);
}

.mv-pop5-chip {
    text-decoration: none;
    scroll-snap-align: start;
    flex-shrink: 0;
}

.mv-pop5-chip-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--mv-bg-section);
    border: 1px solid var(--mv-border-color);
    border-radius: 50px;
    padding: 8px 16px 8px 8px;
    transition: var(--mv-transition);
    white-space: nowrap;
}

.mv-pop5-chip:hover .mv-pop5-chip-inner {
    border-color: var(--ar-primary);
    background: var(--mv-bg-card);
    box-shadow: var(--mv-card-shadow-hover);
}

.mv-pop5-chip-rank {
    font-size: 0.65rem;
    font-weight: 800;
    color: #fff;
    background: var(--ar-primary);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mv-pop5-chip-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--mv-border-color);
    transition: var(--mv-transition);
}

.mv-pop5-chip:hover .mv-pop5-chip-img {
    border-color: var(--ar-primary);
}

.mv-pop5-chip-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mv-text-dark);
}


/* ============================================
   POPULER RESPONSIVE - Styles 2-5
   ============================================ */

@media only screen and (max-width: 768px) {
    .mv-pop2-inner {
        padding: 10px 8px;
    }

    .mv-pop2-img {
        width: 52px;
        height: 52px;
        border-radius: 14px;
    }

    .mv-pop2-name {
        font-size: 0.75rem;
    }

    .mv-pop2-cat {
        font-size: 0.65rem;
    }

    .mv-pop2-badge {
        font-size: 0.58rem;
        padding: 1px 6px;
    }

    .mv-pop3-item {
        padding: 10px;
        gap: 10px;
    }

    .mv-pop3-rank {
        font-size: 0.7rem;
        min-width: 24px;
    }

    .mv-pop3-img-wrap {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .mv-pop3-name {
        font-size: 0.78rem;
    }

    .mv-pop3-badges {
        display: none;
    }

    .mv-pop3-arrow {
        display: none;
    }

    .mv-pop4-featured-content {
        padding: 14px;
    }

    .mv-pop4-featured-rank {
        font-size: 0.7rem;
        padding: 3px 10px;
        margin-bottom: 10px;
    }

    .mv-pop4-featured-row {
        gap: 12px;
    }

    .mv-pop4-featured-img-wrap {
        width: 56px;
        height: 56px;
        border-radius: 14px;
    }

    .mv-pop4-featured-name {
        font-size: 0.9rem;
    }

    .mv-pop4-featured-cat {
        font-size: 0.7rem;
        margin-bottom: 4px;
    }

    .mv-pop4-featured-badges {
        display: none;
    }

    .mv-pop4-small-inner {
        padding: 10px 6px;
    }

    .mv-pop4-small-img {
        width: 40px;
        height: 40px;
    }

    .mv-pop4-small-name {
        font-size: 0.65rem;
    }

    .mv-pop5-chip-inner {
        padding: 6px 12px 6px 6px;
        gap: 6px;
    }

    .mv-pop5-chip-img {
        width: 28px;
        height: 28px;
    }

    .mv-pop5-chip-name {
        font-size: 0.72rem;
    }

    .mv-pop5-chip-rank {
        width: 18px;
        height: 18px;
        font-size: 0.58rem;
    }
}


/* FAQ / Accordion */
.mv-faq-section {
    margin-top: 2rem;
    padding: 1.5rem 0;
}

.mv-faq-section .accordion-item {
    background: var(--mv-bg-card);
    border: 1px solid var(--mv-border-color);
    border-radius: var(--mv-radius) !important;
    margin-bottom: 8px;
    overflow: hidden;
}

.mv-faq-section .accordion-button {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    padding: 14px 16px;
    background: transparent;
    box-shadow: none !important;
}

.mv-faq-section .accordion-button:not(.collapsed) {
    color: var(--ar-primary);
    background: color-mix(in srgb, var(--ar-primary) 6%, transparent);
}

.mv-faq-section .accordion-button::after {
    background-size: 1rem;
}

.mv-faq-section .accordion-body {
    font-size: 0.85rem;
    color: var(--mv-text-muted);
    line-height: 1.7;
    padding: 0 16px 14px;
}


/* Trust / Rating Footer */
.mv-trust-section {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.mv-trust-card {
    background: var(--mv-bg-card);
    border-radius: var(--mv-radius-lg);
    padding: 2rem;
    box-shadow: var(--mv-card-shadow);
    border: 1px solid var(--mv-border-color);
}

.mv-trust-heading {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ar-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.mv-trust-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--mv-text-dark);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.mv-trust-desc {
    font-size: 0.85rem;
    color: var(--mv-text-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.mv-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.mv-stat-item {
    text-align: center;
}

.mv-stat-item .mv-stat-num {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--mv-text-dark);
}

.mv-stat-item .mv-stat-label {
    font-size: 0.72rem;
    color: var(--mv-text-muted);
    font-weight: 500;
}

.mv-review-card {
    background: var(--mv-bg-section);
    border-radius: var(--mv-radius);
    padding: 16px;
    border: 1px solid var(--mv-border-color);
}

.mv-review-card h6 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    margin-bottom: 8px;
}

.mv-review-card .mv-review-item {
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ar-primary) 10%, transparent);
    color: var(--ar-primary);
    font-weight: 600;
    display: inline-block;
    margin-bottom: 8px;
}

.mv-review-card .mv-review-msg {
    font-size: 0.8rem;
    color: var(--mv-text-muted);
    line-height: 1.5;
    margin-bottom: 6px;
    font-style: italic;
}

.mv-review-card .mv-review-id {
    font-size: 0.68rem;
    color: var(--mv-text-muted);
    opacity: 0.6;
}

.mv-review-section .swiper-pagination-bullet {
    background: var(--ar-primary);
    opacity: 0.3;
}

.mv-review-section .swiper-pagination-bullet-active {
    opacity: 1;
}


/* Product grid responsive padding */
.mv-product-grid {
    padding: 0;
}

.mv-product-grid .game-home-product {
    padding: 8px 4px;
}

@media (min-width: 768px) {
    .mv-product-grid .game-home-product {
        padding: 12px 6px;
    }
}


/* Responsive */
@media only screen and (max-width: 768px) {
    .mv-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .mv-stat-item .mv-stat-num {
        font-size: 1.5rem;
    }

    .mv-trust-title {
        font-size: 1.1rem;
    }

    .mv-flashsale-section,
    .mv-populer-section {
        padding: 14px;
    }

    .mv-game-card .mv-card-img-wrap {
        width: 60px;
        height: 60px;
        margin: -34px auto 8px;
    }

    .mv-game-card .mv-card-name {
        font-size: 0.72rem;
    }

    .mv-populer-card .mv-card-inner {
        padding: 10px;
        gap: 10px;
    }

    .mv-populer-card .mv-pop-img {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .mv-populer-card .mv-pop-name {
        font-size: 0.78rem;
        margin-bottom: 4px;
    }

    .mv-populer-card .mv-pop-badge {
        font-size: 0.58rem;
        padding: 1px 6px;
    }

    .mv-populer-card .mv-pop-cat {
        font-size: 0.65rem;
    }

    .mv-populer-card .mv-pop-rank {
        font-size: 0.6rem;
    }

    .mv-voucher-card .mv-card-inner {
        padding: 10px;
        gap: 10px;
    }

    .mv-voucher-card .mv-card-img {
        width: 48px;
        height: 48px;
    }
}

@media only screen and (min-width: 768px) {

    .mv-flashsale-section,
    .mv-populer-section {
        padding: 24px;
    }
}


/* ============================================
   MODERN ORDER PAGE REDESIGN
   ============================================ */

.mv-order-sidebar .mv-product-div {
    border-radius: var(--mv-radius-lg);
    padding: 0;
    overflow: hidden;
    box-shadow: var(--mv-card-shadow);
    border: 1px solid var(--mv-border-color);
}

.mv-order-sidebar .mv-product-div img {
    width: 100%;
    object-fit: cover;
    border-radius: 0;
}

.mv-order-sidebar .mv-product-image {
    background: var(--mv-bg-section);
    border-radius: var(--mv-radius);
    padding: 8px;
    margin: -40px 16px 0 auto;
    width: fit-content;
}

.mv-order-sidebar .mv-product-image img {
    width: 80px;
    height: 80px;
    border-radius: var(--mv-radius-sm);
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mv-order-sidebar .mv-info-layanan {
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mv-text-muted);
}

.mv-order-sidebar .mv-info-layanan i {
    color: var(--ar-primary);
    font-size: 0.9rem;
}

.mv-order-step-guide {
    background: var(--mv-bg-section);
    border-radius: var(--mv-radius);
    padding: 14px 16px;
    margin-top: 12px;
}

.mv-order-step-guide h1 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mv-text-dark);
    margin-bottom: 0;
}

.mv-order-step-guide .mv-step-list {
    font-size: 0.78rem;
    color: var(--mv-text-muted);
    line-height: 1.8;
    margin-top: 8px;
    padding-left: 4px;
}

.mv-order-step-guide .mv-step-list span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ar-primary);
    color: #000;
    font-size: 0.65rem;
    font-weight: 700;
    margin-right: 6px;
    flex-shrink: 0;
}

.mv-order-content .mv-section-bar {
    width: 4px;
    height: 22px;
    border-radius: 4px;
    background: var(--ar-primary);
    flex-shrink: 0;
}

.mv-order-content .mv-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mv-text-dark);
    margin: 0;
}

.mv-order-content .mv-section-subtitle {
    font-size: 0.82rem;
    color: var(--mv-text-muted);
    margin: 4px 0 0;
}

.mv-order-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
}

.mv-order-tabs .btn {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 50px;
    border: 1.5px solid var(--mv-border-color);
    color: var(--mv-text-muted);
    background: var(--mv-bg-card);
    transition: var(--mv-transition);
}

.mv-order-tabs .btn.active {
    background: var(--ar-primary);
    border-color: var(--ar-primary);
    color: #000;
}

.mv-order-tabs .btn:not(.active):hover {
    border-color: var(--ar-primary);
    color: var(--ar-primary);
}

.mv-cat-item-order {
    font-size: 0.78rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 50px;
    border: 1.5px solid var(--mv-border-color);
    color: var(--mv-text-muted);
    background: var(--mv-bg-card);
    transition: var(--mv-transition);
}

.mv-cat-item-order.active {
    background: var(--ar-primary);
    border-color: var(--ar-primary);
    color: #000;
    font-weight: 600;
}

.mv-cat-item-order:not(.active):hover {
    border-color: var(--ar-primary);
    color: var(--ar-primary);
}

.mv-item-list {
    padding: 4px;
}

.mv-item-list .mv-item-list-in {
    border: 1.5px solid var(--mv-border-color);
    border-radius: var(--mv-radius);
    padding: 12px 10px;
    cursor: pointer;
    transition: var(--mv-transition);
    background: var(--mv-bg-card);
    height: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.mv-item-list .mv-item-list-in:hover {
    border-color: var(--ar-primary);
    box-shadow: var(--mv-card-shadow);
    background: color-mix(in srgb, var(--ar-primary) 5%, var(--mv-bg-card));
}

.mv-item-list .mv-item-list-in.mv-item-list-in-active {
    border-color: var(--ar-primary) !important;
    background: color-mix(in srgb, var(--ar-primary) 12%, var(--mv-bg-card)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-primary) 20%, transparent);
}

.mv-item-list .mv-item-list-in.mv-item-list-in-active .mv-item-name {
    color: var(--ar-primary);
}

[data-bs-theme="dark"] .mv-item-list-in {
    border: 1.5px solid var(--mv-border-color) !important;
    background-color: var(--mv-bg-card) !important;
}

[data-bs-theme="dark"] .mv-item-list .mv-item-list-in.mv-item-list-in-active {
    background: color-mix(in srgb, var(--ar-primary) 15%, var(--mv-bg-card)) !important;
    border-color: var(--ar-primary) !important;
}

.mv-item-list .mv-item-list-in .mv-item-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mv-text-dark);
    margin-bottom: 4px;
}

.mv-item-list .mv-item-list-in img {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
}

.mv-item-list .mv-item-list-in .text-mv-green {
    font-size: 0.82rem;
}

.mv-payment-list {
    border: 1.5px solid var(--mv-border-color) !important;
    border-radius: var(--mv-radius) !important;
    padding: 10px 12px;
    cursor: pointer;
    transition: var(--mv-transition);
    background: var(--mv-bg-card);
}

.mv-payment-list:hover {
    border-color: var(--ar-primary) !important;
    box-shadow: var(--mv-card-shadow);
}

.mv-payment-list.mv-payment-list-in-active {
    border-color: var(--ar-primary) !important;
    background: color-mix(in srgb, var(--ar-primary) 8%, var(--mv-bg-card));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-primary) 15%, transparent);
}

.mv-payment-list .mv-payment-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mv-text-dark);
}

.mv-payment-list img {
    max-width: 70px;
    max-height: 28px;
    object-fit: contain;
}

.mv-btn-order {
    font-size: 0.92rem;
    font-weight: 700;
    padding: 12px 32px;
    border-radius: 50px;
    border: none;
    background: var(--ar-primary);
    color: #000;
    transition: var(--mv-transition);
    letter-spacing: 0.3px;
}

.mv-btn-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--ar-primary) 40%, transparent);
}

.mv-btn-order:active {
    transform: translateY(0);
}

.mv-order-content .mv-product-item {
    background: var(--mv-bg-card);
    border-radius: var(--mv-radius-lg);
    border: 1px solid var(--mv-border-color);
    box-shadow: var(--mv-card-shadow);
    padding: 20px;
}

.mv-order-content .mv-cat-heading-order {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mv-text-dark);
    margin: 12px 0 8px;
}

.mv-order-content .mv-list-payment-append h6 {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 12px 0 6px;
}

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

.mv-order-desc-section .mv-product-desc {
    font-size: 0.82rem;
    color: var(--mv-text-muted);
    line-height: 1.7;
    max-height: 300px;
    overflow: hidden;
    padding: 0 4px;
}

.mv-order-desc-section .btnreaddesc {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ar-primary);
    padding: 6px 16px;
    border: 1.5px solid var(--ar-primary);
    border-radius: 50px;
    background: transparent;
    transition: var(--mv-transition);
}

.mv-order-desc-section .btnreaddesc:hover {
    background: var(--ar-primary);
    color: #000;
}

.mv-rating-section .progress {
    height: 6px;
    border-radius: 3px;
    background: var(--mv-border-color);
}

.mv-rating-section .progress-bar {
    background: var(--ar-primary);
    border-radius: 3px;
}

.mv-rating-section .mv-rating-card {
    background: var(--mv-bg-section);
    border: 1px solid var(--mv-border-color);
    border-radius: var(--mv-radius);
    padding: 14px;
}

.mv-rating-section .mv-rating-card h6 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mv-text-dark);
}

.mv-rating-section .mv-rating-card p {
    font-size: 0.8rem;
    color: var(--mv-text-muted);
    font-style: italic;
}

.mv-order-content .alert-danger {
    background: rgba(239, 68, 68, 0.08);
    border: 1.5px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-radius: var(--mv-radius);
    font-weight: 600;
}

.mv-order-content input[type="text"],
.mv-order-content input[type="number"],
.mv-order-content input[type="email"],
.mv-order-content select {
    border: 1.5px solid var(--mv-border-color);
    border-radius: var(--mv-radius-sm);
    padding: 10px 14px;
    font-size: 0.88rem;
    background: var(--mv-bg-section);
    color: var(--mv-text-dark);
    transition: var(--mv-transition);
}

.mv-order-content input:focus,
.mv-order-content select:focus {
    border-color: var(--ar-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-primary) 15%, transparent);
    background: var(--mv-bg-card);
}

.mv-input-section .mv-color-inputid {
    background: var(--mv-bg-section);
    border-radius: var(--mv-radius);
    padding: 16px;
    border: 1px solid var(--mv-border-color);
}

.mv-input-section .mv-color-inputid p {
    font-size: 0.82rem;
    color: var(--mv-text-dark);
    line-height: 1.6;
    margin: 0;
}

@media only screen and (max-width: 768px) {
    .mv-order-sidebar .mv-product-image {
        margin: -30px 12px 0 auto;
    }

    .mv-order-sidebar .mv-product-image img {
        width: 60px;
        height: 60px;
    }

    .mv-order-content .mv-product-item {
        padding: 14px;
    }
}

@media only screen and (max-width: 400px) {
    .mv-populer-card .mv-card-inner {
        padding: 8px;
        gap: 8px;
    }

    .mv-populer-card .mv-pop-img {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .mv-populer-card .mv-pop-name {
        font-size: 0.72rem;
    }

    .mv-populer-card .mv-pop-badge {
        font-size: 0.55rem;
        padding: 1px 5px;
    }

    .mv-populer-card .mv-pop-cat {
        font-size: 0.6rem;
    }

    .mv-populer-card .mv-pop-badges {
        gap: 3px;
    }

    .mv-populer-card .mv-pop-rank {
        font-size: 0.55rem;
        top: 6px;
        right: 6px;
    }
}


/* ============================================
   ALL PRODUCTS PAGE
   ============================================ */

.mv-allprod-hero {
    position: relative;
    border-radius: var(--mv-radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ar-primary) 18%, var(--mv-bg-card)), color-mix(in srgb, var(--ar-primary) 6%, var(--mv-bg-card)));
    border: 1px solid color-mix(in srgb, var(--ar-primary) 15%, var(--mv-border-color));
}

.mv-allprod-hero-bg {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: var(--ar-primary);
    border-radius: 50%;
    opacity: 0.06;
    pointer-events: none;
}

.mv-allprod-hero::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: 20%;
    width: 200px;
    height: 200px;
    background: var(--ar-primary);
    border-radius: 50%;
    opacity: 0.04;
    pointer-events: none;
}

.mv-allprod-hero-content {
    position: relative;
    z-index: 1;
    padding: 28px 24px;
    text-align: center;
}

.mv-allprod-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--ar-primary);
    margin-bottom: 14px;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--ar-primary) 30%, transparent);
}

.mv-allprod-hero-icon svg {
    width: 24px;
    height: 24px;
}

.mv-allprod-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--mv-text-dark);
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}

.mv-allprod-desc {
    font-size: 0.85rem;
    color: var(--mv-text-muted);
    margin-bottom: 18px;
    line-height: 1.5;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.mv-allprod-stats {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 12px 28px;
    background: var(--mv-bg-card);
    border-radius: 50px;
    border: 1px solid var(--mv-border-color);
    box-shadow: var(--mv-card-shadow);
}

.mv-allprod-stat {
    text-align: center;
}

.mv-allprod-stat-num {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ar-primary);
    line-height: 1.2;
}

.mv-allprod-stat-label {
    display: block;
    font-size: 0.7rem;
    color: var(--mv-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mv-allprod-stat-divider {
    width: 1px;
    height: 28px;
    background: var(--mv-border-color);
}


/* Search */
.mv-allprod-search-wrap {
    margin-bottom: 16px;
}

.mv-allprod-search {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--mv-bg-card);
    border: 1.5px solid var(--mv-border-color);
    border-radius: var(--mv-radius);
    padding: 0 6px 0 16px;
    transition: var(--mv-transition);
    box-shadow: var(--mv-card-shadow);
}

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

.mv-allprod-search-icon {
    flex-shrink: 0;
    color: var(--mv-text-muted);
    opacity: 0.5;
}

.mv-allprod-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 14px 12px;
    font-size: 0.9rem;
    color: var(--mv-text-dark);
    outline: none;
    font-family: inherit;
    min-width: 0;
}

.mv-allprod-search-input::placeholder {
    color: var(--mv-text-muted);
    opacity: 0.5;
}

.mv-allprod-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: var(--mv-bg-section);
    color: var(--mv-text-muted);
    cursor: pointer;
    transition: var(--mv-transition);
    flex-shrink: 0;
}

.mv-allprod-search-clear:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.mv-allprod-result-info {
    padding: 8px 14px;
    font-size: 0.82rem;
    color: var(--mv-text-muted);
}

.mv-allprod-result-info strong {
    color: var(--ar-primary);
}


/* Category Tabs */
.mv-allprod-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mv-allprod-tabs::-webkit-scrollbar {
    display: none;
}

.mv-allprod-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid var(--mv-border-color);
    border-radius: 50px;
    background: var(--mv-bg-card);
    color: var(--mv-text-dark);
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    transition: var(--mv-transition);
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.mv-allprod-tab:hover {
    border-color: var(--ar-primary);
    color: var(--ar-primary);
}

.mv-allprod-tab.active {
    background: var(--ar-primary);
    border-color: var(--ar-primary);
    color: #000;
    font-weight: 600;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ar-primary) 30%, transparent);
}

.mv-allprod-tab.active svg {
    stroke: #000;
}

.mv-allprod-tab-count {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 50px;
    background: var(--mv-bg-section);
    color: var(--mv-text-muted);
}

.mv-allprod-tab.active .mv-allprod-tab-count {
    background: rgba(0, 0, 0, 0.15);
    color: #000;
}


/* Category Section Header */
.mv-allprod-cat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0 10px;
    margin-bottom: 2px;
}

.mv-allprod-cat-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mv-text-dark);
}

.mv-allprod-cat-count {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mv-text-muted);
}


/* Empty State */
.mv-allprod-empty {
    text-align: center;
    padding: 48px 24px;
}

.mv-allprod-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--mv-bg-section);
    color: var(--mv-text-muted);
    opacity: 0.4;
    margin-bottom: 16px;
}

.mv-allprod-empty-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mv-text-dark);
    margin-bottom: 6px;
}

.mv-allprod-empty-desc {
    font-size: 0.85rem;
    color: var(--mv-text-muted);
    margin-bottom: 0;
}


/* Responsive */
@media only screen and (max-width: 768px) {
    .mv-allprod-hero-content {
        padding: 20px 18px;
    }

    .mv-allprod-title {
        font-size: 1.15rem;
    }

    .mv-allprod-desc {
        font-size: 0.8rem;
        margin-bottom: 14px;
    }

    .mv-allprod-stats {
        gap: 16px;
        padding: 10px 22px;
    }

    .mv-allprod-stat-num {
        font-size: 1rem;
    }

    .mv-allprod-search {
        padding: 0 4px 0 14px;
    }

    .mv-allprod-search-input {
        padding: 12px 10px;
        font-size: 0.85rem;
    }

    .mv-allprod-cat-name {
        font-size: 0.9rem;
    }
}

@media only screen and (max-width: 400px) {
    .mv-allprod-hero-content {
        padding: 16px 14px;
    }

    .mv-allprod-stats {
        gap: 12px;
        padding: 10px 18px;
    }

    .mv-allprod-stat-num {
        font-size: 0.92rem;
    }

    .mv-allprod-stat-label {
        font-size: 0.62rem;
    }

    .mv-allprod-tab {
        padding: 7px 12px;
        font-size: 0.78rem;
    }

    .mv-allprod-tab-count {
        display: none;
    }
}