/**
 * Sopy Wallet Customer Experience CSS (SopyPay SPA)
 * Premium mobile-first fintech design inspired by Apple Wallet, ShopeePay, GoPay, and DANA.
 * Features segmented navigation tabs, rounded cards, soft shadows, Ruby Red accents, and skeleton pulse loading.
 */

:root {
    --sopy-cx-primary: #b91c1c; /* Ruby Red */
    --sopy-cx-primary-hover: #991b1b;
    --sopy-cx-surface: #ffffff;
    --sopy-cx-surface-hover: #f8fafc;
    --sopy-cx-bg: #f1f5f9;
    --sopy-cx-border: #e2e8f0;
    --sopy-cx-text-main: #0f172a;
    --sopy-cx-text-muted: #64748b;
    --sopy-cx-success: #10b981;
    --sopy-cx-warning: #f59e0b;
    --sopy-cx-danger: #ef4444;
    --sopy-cx-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
    --sopy-cx-radius-card: 24px;
    --sopy-cx-radius-btn: 16px;
    --sopy-cx-radius-sm: 12px;
}

/* Main Container */
.sopy-wallet-cx-dashboard {
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--sopy-cx-text-main);
    width: 100%;
    max-width: 100%; /* Expands beautifully in the WooCommerce account content area */
    margin: 0 auto;
    padding: 10px 0;
    box-sizing: border-box;
}
.sopy-wallet-cx-dashboard *, .sopy-wallet-cx-dashboard *:before, .sopy-wallet-cx-dashboard *:after {
    box-sizing: border-box;
}

/* State Handlers */
.sopy-wallet-state {
    display: none;
    animation: sopyCxFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sopy-wallet-cx-dashboard[data-state="LOADING"] .sopy-wallet-state-loading,
.sopy-wallet-cx-dashboard[data-state="ERROR"] .sopy-wallet-state-error,
.sopy-wallet-cx-dashboard[data-state="EMPTY"] .sopy-wallet-state-empty,
.sopy-wallet-cx-dashboard[data-state="LIVE"] .sopy-wallet-state-live {
    display: block;
}

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

/* Base Card Styling */
.sopy-cx-rounded-card {
    background: var(--sopy-cx-surface);
    border: 1px solid var(--sopy-cx-border);
    border-radius: var(--sopy-cx-radius-card);
    box-shadow: var(--sopy-cx-shadow);
    overflow: hidden;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

/* SKELETON PULSE LOADING (ShopeePay / GoPay Premium Feel) */
.sopy-wallet-state-loading {
    padding: 20px 0;
}
.sopy-cx-skeleton {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.sopy-cx-skeleton-banner {
    height: 180px;
    background: #e2e8f0;
    border-radius: var(--sopy-cx-radius-card);
    animation: sopyCxPulse 1.5s ease-in-out infinite;
}
.sopy-cx-skeleton-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 0 8px;
}
.sopy-cx-skeleton-box {
    height: 70px;
    background: #e2e8f0;
    border-radius: 20px;
    animation: sopyCxPulse 1.5s ease-in-out infinite;
}
@keyframes sopyCxPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* Spinner & Alerts */
.sopy-wallet-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--sopy-cx-border);
    border-top-color: var(--sopy-cx-primary);
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: sopyCxSpin 0.8s linear infinite;
}
@keyframes sopyCxSpin {
    to { transform: rotate(360deg); }
}

.sopy-wallet-alert {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--sopy-cx-radius-card);
    color: #991b1b;
}

/* Onboarding Card */
.sopy-wallet-onboarding-card {
    padding: 40px 32px;
    text-align: center;
}
.sopy-cx-logo-icon {
    width: 64px;
    height: 64px;
    background: #fff1f2;
    color: var(--sopy-cx-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    margin: 0 auto 24px;
}
.sopy-cx-logo-icon svg {
    width: 36px;
    height: 36px;
}
.sopy-wallet-onboarding-header h2 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--sopy-cx-text-main);
}
.sopy-wallet-onboarding-header p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--sopy-cx-text-muted);
    margin-bottom: 32px;
}
.sopy-wallet-onboarding-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

/* Buttons */
.sopy-cx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--sopy-cx-radius-btn);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}
.sopy-cx-btn-sm {
    padding: 10px 20px;
    font-size: 13px;
    border-radius: 14px;
}
.sopy-cx-btn-primary {
    background: var(--sopy-cx-primary);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.25);
}
.sopy-cx-btn-primary:hover {
    background: var(--sopy-cx-primary-hover);
    transform: translateY(-2px);
}
.sopy-cx-btn-primary:disabled {
    background: #cbd5e1;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}
.sopy-cx-btn-secondary {
    background: var(--sopy-cx-surface-hover);
    color: var(--sopy-cx-text-main);
    border: 1px solid var(--sopy-cx-border);
}
.sopy-cx-btn-secondary:hover {
    background: var(--sopy-cx-border);
    transform: translateY(-2px);
}

/* SEGMENTED NAVIGATION TABS (Fintech App Header) */
.sopy-cx-seg-nav {
    display: flex;
    align-items: center;
    background: var(--sopy-cx-bg);
    padding: 6px;
    border-radius: 20px;
    margin-bottom: 24px;
    border: 1px solid var(--sopy-cx-border);
}
.sopy-cx-seg-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 16px;
    color: var(--sopy-cx-text-muted);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.sopy-cx-seg-btn:hover {
    color: var(--sopy-cx-text-main);
}
.sopy-cx-seg-btn.active {
    background: var(--sopy-cx-surface);
    color: var(--sopy-cx-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.sopy-cx-seg-icon {
    display: flex;
    align-items: center;
}
@media (max-width: 600px) {
    .sopy-cx-seg-label { display: none; }
    .sopy-cx-seg-btn { padding: 12px; }
}

/* PREMIUM WALLET HEADER & BALANCE CARD (Ref 2 Layout) */
.sopy-cx-header-top-container {
    margin-bottom: 32px;
}

/* Header Row: Title & Badges */
.sopy-cx-main-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.sopy-cx-title-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sopy-cx-wallet-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e293b;
}
.sopy-cx-title-left h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
}
.sopy-cx-title-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.sopy-cx-verified-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}
.sopy-cx-verified-badge.verified {
    background: #ecfdf5;
    color: #059669;
}
.sopy-cx-verified-badge.unverified {
    background: #f1f5f9;
    color: #64748b;
}
.sopy-cx-dot-green {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
}
.sopy-cx-dot-grey {
    width: 8px;
    height: 8px;
    background: #cbd5e1;
    border-radius: 50%;
}
.sopy-cx-header-notif {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}
.sopy-cx-header-notif:hover {
    background: #f1f5f9;
}
.sopy-cx-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #e2e8f0;
}
.sopy-cx-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Main Balance Card */
.sopy-cx-main-balance-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.03);
    padding: 32px;
    position: relative;
    overflow: hidden;
}
.sopy-cx-balance-content-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}
.sopy-cx-balance-left {
    flex: 1;
}
.sopy-cx-lbl-main {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 12px;
}
.sopy-cx-eye-toggle {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}
.sopy-cx-eye-toggle:hover {
    color: #0f172a;
}
.sopy-cx-val-main {
    font-size: 48px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -1.5px;
    line-height: 1;
    margin-bottom: 12px;
}
.sopy-cx-lbl-sub {
    font-size: 14px;
    color: #64748b;
}

/* Center Watermark */
.sopy-cx-balance-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -75%);
    color: #f1f5f9;
    z-index: 0;
    pointer-events: none;
}

/* Right Side Box */
.sopy-cx-balance-right-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    min-width: 280px;
    z-index: 1;
}
.sopy-cx-box-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
}
.sopy-cx-box-row.border-bottom {
    border-bottom: 1px solid #e2e8f0;
}
.sopy-cx-box-lbl {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
}
.sopy-cx-box-lbl svg {
    color: #94a3b8;
}
.sopy-cx-box-val-red {
    font-size: 16px;
    font-weight: 800;
    color: #b91c1c;
}
.sopy-cx-box-val-grey {
    font-size: 16px;
    font-weight: 700;
    color: #64748b;
}

/* 4 Action Buttons Grid */
.sopy-cx-main-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.sopy-cx-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.sopy-cx-action-btn.btn-topup {
    background: #b91c1c;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.2);
}
.sopy-cx-action-btn.btn-topup:hover {
    background: #991b1b;
    transform: translateY(-2px);
}
.sopy-cx-action-btn.btn-white {
    background: #ffffff;
    color: #0f172a;
    border-color: #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.sopy-cx-action-btn.btn-white:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateY(-2px);
}
.sopy-cx-action-btn.btn-white svg {
    color: #0f172a;
}
.sopy-cx-action-btn.btn-white[data-tab="history"] svg {
    color: #b91c1c; /* Keep history icon red matching the reference */
}

/* Responsive */
@media (max-width: 900px) {
    .sopy-cx-balance-content-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .sopy-cx-balance-right-box {
        width: 100%;
        min-width: unset;
    }
    .sopy-cx-main-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .sopy-cx-main-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .sopy-cx-title-right {
        width: 100%;
        justify-content: space-between;
    }
    .sopy-cx-val-main {
        font-size: 36px;
    }
}

/* QUICK MENU GRID */
.sopy-cx-quick-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
    padding: 0 8px;
}
@media (max-width: 500px) {
    .sopy-cx-quick-menu {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
}
.sopy-cx-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 4px;
    transition: all 0.2s ease;
}
.sopy-cx-menu-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sopy-cx-surface);
    border: 1px solid var(--sopy-cx-border);
    border-radius: 20px;
    box-shadow: var(--sopy-cx-shadow);
    transition: all 0.2s ease;
}
.sopy-cx-menu-item span {
    font-size: 12px;
    font-weight: 700;
    color: var(--sopy-cx-text-main);
    text-align: center;
}
.sopy-cx-menu-item:hover .sopy-cx-menu-icon {
    transform: translateY(-4px);
    border-color: var(--sopy-cx-primary);
}
.sopy-cx-menu-item.active .sopy-cx-menu-icon {
    background: var(--sopy-cx-primary);
    color: #ffffff;
    border-color: var(--sopy-cx-primary);
    box-shadow: 0 6px 16px rgba(185, 28, 28, 0.25);
}
.sopy-cx-menu-item.active span {
    color: var(--sopy-cx-primary);
}

/* Menu Icon Specific Colors (when not active) */
.sopy-cx-menu-item:not(.active) .icon-topup { color: #10b981; }
.sopy-cx-menu-item:not(.active) .icon-history { color: #3b82f6; }
.sopy-cx-menu-item:not(.active) .icon-cashback { color: #f59e0b; }
.sopy-cx-menu-item:not(.active) .icon-voucher { color: #ec4899; }
.sopy-cx-menu-item:not(.active) .icon-reward { color: #8b5cf6; }
.sopy-cx-menu-item:not(.active) .icon-settings { color: #64748b; }
.sopy-cx-menu-item:not(.active) .icon-help { color: #14b8a6; }

/* Tab Panels Container */
.sopy-wallet-tab-panel {
    display: none;
    animation: sopyCxFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sopy-wallet-tab-panel.active {
    display: block;
}

/* TIMELINE CONTAINER & FILTER STYLING */
.sopy-cx-timeline-container {
    padding: 32px;
}
.sopy-cx-timeline-header {
    margin-bottom: 24px;
}
.sopy-cx-timeline-header h3 {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--sopy-cx-text-main);
}
.sopy-cx-timeline-header p {
    font-size: 14px;
    color: var(--sopy-cx-text-muted);
    margin: 0;
}

/* Transaction History Headers & Filters */
.sopy-cx-section-header-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 600px) {
    .sopy-cx-section-header-filter {
        flex-direction: column;
        align-items: flex-start;
    }
}
.sopy-cx-section-header-filter h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--sopy-cx-text-main);
    margin: 0;
}
.sopy-cx-filter-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 400px;
}
.sopy-cx-search-box, .sopy-cx-date-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}
.sopy-cx-search-box svg, .sopy-cx-date-box svg {
    position: absolute;
    left: 14px;
    color: var(--sopy-cx-text-muted);
}
.sopy-cx-input-search, .sopy-cx-input-date {
    width: 100%;
    padding: 10px 14px 10px 42px;
    font-size: 13px;
    font-weight: 600;
    background: var(--sopy-cx-surface);
    border: 1px solid var(--sopy-cx-border);
    border-radius: 14px;
    color: var(--sopy-cx-text-main);
    transition: all 0.2s;
}
.sopy-cx-input-search:focus, .sopy-cx-input-date:focus {
    border-color: var(--sopy-cx-primary);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15);
    outline: none;
}
.sopy-cx-filter-tabs-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 16px;
    margin-bottom: 24px;
    scrollbar-width: none;
}
.sopy-cx-filter-tabs-scroll::-webkit-scrollbar {
    display: none;
}
.sopy-cx-filter-tab, .sopy-cx-subtab-btn {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    background: var(--sopy-cx-surface);
    border: 1px solid var(--sopy-cx-border);
    border-radius: 20px;
    color: var(--sopy-cx-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.sopy-cx-filter-tab:hover, .sopy-cx-subtab-btn:hover {
    color: var(--sopy-cx-text-main);
    background: var(--sopy-cx-surface-hover);
}
.sopy-cx-filter-tab.active, .sopy-cx-subtab-btn.active {
    background: var(--sopy-cx-text-main);
    color: var(--sopy-cx-surface);
    border-color: var(--sopy-cx-text-main);
}

/* Timeline Items */
.sopy-cx-timeline-list {
    display: flex;
    flex-direction: column;
}
.sopy-cx-transactions-card {
    padding: 24px 32px;
}
.sopy-cx-timeline-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--sopy-cx-border);
    animation: sopyCxFadeIn 0.3s ease;
}
.sopy-cx-timeline-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.sopy-cx-tx-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    flex-shrink: 0;
}
.sopy-cx-tx-icon.top-up { background: #ecfdf5; color: #10b981; }
.sopy-cx-tx-icon.payment { background: #eff6ff; color: #3b82f6; }
.sopy-cx-tx-icon.cashback { background: #fffbeb; color: #f59e0b; }
.sopy-cx-tx-icon.transfer { background: #fef2f2; color: #ef4444; }
.sopy-cx-tx-icon.refund { background: #f0fdf4; color: #22c55e; }
.sopy-cx-tx-icon.withdrawal { background: #f8fafc; color: #64748b; }
.sopy-cx-tx-icon.voucher { background: #fdf2f8; color: #ec4899; }
.sopy-cx-tx-icon.reward { background: #f5f3ff; color: #8b5cf6; }

.sopy-cx-tx-main {
    flex: 1;
    min-width: 0;
}
.sopy-cx-tx-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--sopy-cx-text-main);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sopy-cx-tx-date {
    display: block;
    font-size: 12px;
    color: var(--sopy-cx-text-muted);
}
.sopy-cx-tx-meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.sopy-cx-tx-ref {
    font-size: 11px;
    font-family: monospace;
    color: var(--sopy-cx-text-muted);
    background: var(--sopy-cx-surface-hover);
    padding: 2px 6px;
    border-radius: 6px;
}
.sopy-cx-tx-status {
    font-size: 11px;
    font-weight: 700;
}
.sopy-status-success { color: var(--sopy-cx-success); }
.sopy-cx-tx-amount {
    font-size: 16px;
    font-weight: 800;
    min-width: 100px;
    text-align: right;
}
.val-credit { color: var(--sopy-cx-success); }
.val-debit { color: var(--sopy-cx-text-main); }

/* Empty Filter / Empty State */
.sopy-wallet-empty-card {
    text-align: center;
    padding: 60px 32px;
    background: var(--sopy-cx-surface);
}
.sopy-wallet-empty-illustration {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sopy-cx-surface-hover);
    border-radius: 28px;
    border: 1px solid var(--sopy-cx-border);
}
.sopy-wallet-empty-card h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--sopy-cx-text-main);
    margin-bottom: 12px;
}
.sopy-wallet-empty-card p {
    font-size: 14px;
    color: var(--sopy-cx-text-muted);
    line-height: 1.6;
    margin-bottom: 28px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* SECTION WRAPPERS (Cashback, Voucher, Reward, Settings, Help, Forms) */
.sopy-cx-section-wrapper {
    padding: 32px;
}
.sopy-cx-section-header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--sopy-cx-border);
}
.sopy-cx-header-title-box {
    display: flex;
    align-items: center;
    gap: 20px;
}
.sopy-cx-header-title-box .sopy-cx-menu-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border: none;
    box-shadow: none;
}
.sopy-cx-header-title-box .icon-topup { background: #ecfdf5; color: #10b981; }
.sopy-cx-header-title-box .icon-transfer { background: #fef2f2; color: #ef4444; }
.sopy-cx-header-title-box .icon-withdraw { background: #eff6ff; color: #3b82f6; }
.sopy-cx-header-title-box .icon-cashback { background: #fffbeb; color: #f59e0b; }
.sopy-cx-header-title-box .icon-voucher { background: #fdf2f8; color: #ec4899; }
.sopy-cx-header-title-box .icon-reward { background: #f5f3ff; color: #8b5cf6; }
.sopy-cx-header-title-box .icon-settings { background: #f1f5f9; color: #64748b; }
.sopy-cx-header-title-box .icon-help { background: #f0fdf4; color: #14b8a6; }

.sopy-cx-header-title-box h3 {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--sopy-cx-text-main);
}
.sopy-cx-header-title-box p {
    font-size: 14px;
    color: var(--sopy-cx-text-muted);
    margin: 0;
}

/* Stats Grid (Cashback) */
.sopy-cx-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
@media (max-width: 600px) {
    .sopy-cx-stats-grid {
        grid-template-columns: 1fr;
    }
}
.sopy-cx-stat-card {
    background: var(--sopy-cx-surface-hover);
    border: 1px solid var(--sopy-cx-border);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.sopy-cx-stat-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--sopy-cx-text-muted);
    margin-bottom: 8px;
}
.sopy-cx-stat-val {
    font-size: 22px;
    font-weight: 900;
    color: var(--sopy-cx-text-main);
    margin-bottom: 12px;
}
.sopy-cx-stat-badge {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 12px;
}
.badge-green { background: #ecfdf5; color: #10b981; border: 1px solid #a7f3d0; }
.badge-yellow { background: #fffbeb; color: #f59e0b; border: 1px solid #fde68a; }
.badge-gray { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }

.sopy-cx-sub-timeline h4,
.sopy-cx-sub-section h4 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 16px;
    color: var(--sopy-cx-text-main);
}

/* Voucher Cards */
.sopy-cx-section-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 600px) {
    .sopy-cx-section-header-flex {
        flex-direction: column;
        align-items: flex-start;
    }
}
.sopy-cx-section-header-flex h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--sopy-cx-text-main);
    margin: 0;
}
.sopy-cx-voucher-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.sopy-cx-voucher-card {
    display: flex;
    background: var(--sopy-cx-surface);
    border: 1px solid var(--sopy-cx-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.sopy-cx-vcard-left {
    width: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    color: #ffffff;
    flex-shrink: 0;
}
.bg-gradient-ruby { background: linear-gradient(135deg, var(--sopy-cx-primary) 0%, #7f1d1d 100%); }
.bg-gradient-gold { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
.bg-muted { background: #94a3b8; }
.sopy-cx-vcard-left strong { font-size: 18px; font-weight: 900; line-height: 1.2; margin-bottom: 6px; }
.sopy-cx-vcard-left span { font-size: 11px; opacity: 0.9; }
.sopy-cx-vcard-right {
    flex: 1;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
@media (max-width: 500px) {
    .sopy-cx-vcard-right {
        flex-direction: column;
        align-items: flex-start;
    }
}
.sopy-cx-vcard-info h4 { font-size: 16px; font-weight: 800; margin: 0 0 4px; color: var(--sopy-cx-text-main); }
.sopy-cx-vcard-info p { font-size: 13px; color: var(--sopy-cx-text-muted); margin: 0 0 10px; }
.sopy-cx-vcard-date { font-size: 12px; font-weight: 600; color: var(--sopy-cx-primary); }
.sopy-cx-vcard-date.text-used, .sopy-cx-vcard-date.text-expired { color: var(--sopy-cx-text-muted); }
.sopy-cx-vcard-btn {
    background: var(--sopy-cx-primary);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}
.sopy-cx-vcard-btn:hover { background: var(--sopy-cx-primary-hover); }
.sopy-cx-vcard-badge-used, .sopy-cx-vcard-badge-expired {
    background: var(--sopy-cx-surface-hover);
    color: var(--sopy-cx-text-muted);
    border: 1px solid var(--sopy-cx-border);
    padding: 8px 16px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 800;
}

/* Reward Points Banner & Redeem Catalog */
.sopy-cx-loyalty-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #ffffff;
    padding: 28px 32px;
}
.sopy-cx-loyalty-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
}
@media (max-width: 500px) {
    .sopy-cx-loyalty-header { flex-direction: column; gap: 16px; }
}
.sopy-cx-loyalty-tier {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sopy-cx-tier-badge {
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
}
.sopy-cx-tier-sub { font-size: 13px; color: #cbd5e1; }
.sopy-cx-loyalty-points {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
@media (max-width: 500px) {
    .sopy-cx-loyalty-points { align-items: flex-start; }
}
.sopy-cx-pts-label { font-size: 13px; font-weight: 700; color: #94a3b8; margin-bottom: 4px; }
.sopy-cx-pts-val { font-size: 32px; font-weight: 900; line-height: 1; color: #ffffff; }
.sopy-cx-pts-val small { font-size: 16px; font-weight: 700; color: #f59e0b; }
.sopy-cx-loyalty-progress-box {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 18px;
}
.sopy-cx-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}
.sopy-cx-progress-bar-container {
    height: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}
.sopy-cx-progress-bar {
    height: 100%;
    border-radius: 4px;
}
.sopy-cx-progress-hint { font-size: 12px; color: #cbd5e1; margin: 0; }
.sopy-cx-catalog-hint { font-size: 14px; color: var(--sopy-cx-text-muted); font-weight: 600; }
.sopy-cx-catalog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 600px) {
    .sopy-cx-catalog-grid { grid-template-columns: 1fr; }
}
.sopy-cx-catalog-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: var(--sopy-cx-surface-hover);
}
.sopy-cx-catalog-thumb {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    margin-bottom: 16px;
    position: relative;
    background: #fff1f2;
    color: var(--sopy-cx-primary);
}
.sopy-cx-cat-badge {
    position: absolute;
    top: 0;
    right: -100px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
}
.sopy-cx-catalog-info h4 { font-size: 16px; font-weight: 800; margin: 0 0 16px; color: var(--sopy-cx-text-main); }
.sopy-cx-catalog-action { display: flex; align-items: center; justify-content: space-between; }
.sopy-cx-req-pts { font-size: 15px; font-weight: 800; color: #f59e0b; }
.sopy-cx-rewards-history { padding: 24px 32px; }

/* Settings List */
.sopy-cx-settings-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.sopy-cx-settings-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--sopy-cx-border);
}
.sopy-cx-settings-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.sopy-cx-set-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    flex-shrink: 0;
}
.pin-icon { background: #eff6ff; color: #3b82f6; }
.notif-icon { background: #f5f3ff; color: #8b5cf6; }
.security-icon { background: #fffbeb; color: #f59e0b; }
.bank-icon { background: #ecfdf5; color: #10b981; }
.sopy-cx-set-info { flex: 1; }
.sopy-cx-set-info h4 { font-size: 15px; font-weight: 800; margin: 0 0 4px; color: var(--sopy-cx-text-main); }
.sopy-cx-set-info p { font-size: 13px; color: var(--sopy-cx-text-muted); margin: 0; }
.sopy-cx-set-action-btn { background: var(--sopy-cx-surface-hover); color: var(--sopy-cx-text-main); border: 1px solid var(--sopy-cx-border); padding: 10px 18px; border-radius: 14px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.sopy-cx-set-action-btn:hover { background: var(--sopy-cx-border); }

/* Switch Control */
.sopy-cx-switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.sopy-cx-switch input { opacity: 0; width: 0; height: 0; }
.sopy-cx-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .4s; border-radius: 34px; }
.sopy-cx-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
.sopy-cx-switch input:checked + .sopy-cx-slider { background-color: var(--sopy-cx-primary); }
.sopy-cx-switch input:checked + .sopy-cx-slider:before { transform: translateX(22px); }

/* Help Center */
.sopy-cx-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 32px;
}
@media (max-width: 600px) {
    .sopy-cx-contact-grid { grid-template-columns: 1fr; }
}
.sopy-cx-contact-box {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    padding: 24px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
}
.sopy-cx-contact-box svg { color: var(--sopy-cx-primary); margin-bottom: 16px; }
.sopy-cx-contact-box h4 { font-size: 16px; font-weight: 800; color: #9f1239; margin: 0 0 6px; }
.sopy-cx-contact-box p { font-size: 13px; color: #be123c; margin: 0 0 20px; line-height: 1.5; }
.sopy-cx-btn-chat { background: var(--sopy-cx-primary); color: #ffffff; padding: 12px; border-radius: 14px; border: none; font-size: 13px; font-weight: 700; cursor: pointer; margin-top: auto; }
.sopy-cx-btn-chat:hover { background: var(--sopy-cx-primary-hover); }
.box-report { background: var(--sopy-cx-surface-hover); border-color: var(--sopy-cx-border); }
.box-report h4 { color: var(--sopy-cx-text-main); }
.box-report p { color: var(--sopy-cx-text-muted); }
.sopy-cx-btn-report { background: var(--sopy-cx-border); color: var(--sopy-cx-text-main); padding: 12px; border-radius: 14px; border: none; font-size: 13px; font-weight: 700; cursor: pointer; margin-top: auto; }
.sopy-cx-btn-report:hover { background: #cbd5e1; }

.sopy-cx-faq-container h4 { font-size: 18px; font-weight: 800; margin-bottom: 16px; color: var(--sopy-cx-text-main); }
.sopy-cx-faq-list { display: flex; flex-direction: column; gap: 12px; }
.sopy-cx-faq-item { background: var(--sopy-cx-surface-hover); border: 1px solid var(--sopy-cx-border); border-radius: 16px; overflow: hidden; }
.sopy-cx-faq-question { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.sopy-cx-faq-question::-webkit-details-marker { display: none; }
.sopy-cx-faq-item[open] .sopy-cx-faq-question svg { transform: rotate(180deg); }
.sopy-cx-faq-answer { padding: 0 20px 20px; font-size: 14px; line-height: 1.6; color: var(--sopy-cx-text-muted); }

/* FORMS STYLING (Top Up, Transfer, Withdraw) */
.sopy-cx-form-group { margin-bottom: 24px; }
.sopy-cx-form-group label { display: block; font-size: 14px; font-weight: 700; color: var(--sopy-cx-text-main); margin-bottom: 10px; }
.sopy-cx-input-wrapper, .sopy-cx-select-wrapper { position: relative; display: flex; align-items: center; }
.sopy-cx-input-icon { position: absolute; left: 16px; color: var(--sopy-cx-text-muted); }
.sopy-cx-input-prefix { position: absolute; left: 20px; font-size: 15px; font-weight: 800; color: var(--sopy-cx-text-muted); font-family: 'JetBrains Mono', monospace !important; }
.sopy-cx-input, .sopy-cx-select { width: 100%; padding: 14px 16px; font-size: 15px; font-weight: 600; background: var(--sopy-cx-surface-hover); border: 1px solid var(--sopy-cx-border); border-radius: var(--sopy-cx-radius-btn); color: var(--sopy-cx-text-main); transition: all 0.2s; }
.input-with-icon { padding-left: 56px; }
.input-with-prefix { padding-left: 56px; font-family: 'JetBrains Mono', monospace !important; letter-spacing: 0.5px; }
.sopy-cx-input:focus, .sopy-cx-select:focus { background: var(--sopy-cx-surface); border-color: var(--sopy-cx-primary); box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.15); outline: none; }
.sopy-cx-help-text { display: block; font-size: 12px; color: var(--sopy-cx-text-muted); margin-top: 8px; }
.sopy-cx-preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 500px) { .sopy-cx-preset-grid { grid-template-columns: 1fr 1fr; } }
.sopy-cx-btn-submit { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--sopy-cx-primary); color: #ffffff; padding: 16px; border-radius: var(--sopy-cx-radius-btn); border: none; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 15px rgba(185, 28, 28, 0.25); }
.sopy-cx-btn-submit:hover { background: var(--sopy-cx-primary-hover); transform: translateY(-2px); }
.btn-block { width: 100%; }

/* SIDEBAR WIDGET */
.sopy-wallet-cx-sidebar-widget { margin-bottom: 30px; }
.sopy-cx-sidebar-card { padding: 24px; }
.sopy-cx-sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.sopy-cx-sidebar-brand { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: var(--sopy-cx-primary); letter-spacing: -0.5px; }
.sopy-cx-notif-badge { background: #fef2f2; color: var(--sopy-cx-danger); padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 800; border: 1px solid #fca5a5; }
.sopy-cx-sidebar-balance { display: flex; flex-direction: column; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--sopy-cx-border); }
.sopy-cx-sidebar-label { font-size: 13px; color: var(--sopy-cx-text-muted); font-weight: 700; margin-bottom: 4px; }
.sopy-cx-sidebar-value { font-size: 28px; font-weight: 900; color: var(--sopy-cx-text-main); letter-spacing: -0.5px; }
.sopy-cx-sidebar-stats { margin-bottom: 24px; }
.sopy-cx-sidebar-stat-item { display: flex; flex-direction: column; background: var(--sopy-cx-surface-hover); padding: 12px 16px; border-radius: 16px; border: 1px solid var(--sopy-cx-border); }
.sopy-cx-stat-label { font-size: 12px; color: var(--sopy-cx-text-muted); font-weight: 700; margin-bottom: 4px; }
.sopy-cx-stat-value { font-size: 16px; font-weight: 800; color: var(--sopy-cx-text-main); }
.sopy-cx-btn-open-wallet { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--sopy-cx-primary); color: #ffffff; padding: 14px; border-radius: var(--sopy-cx-radius-btn); font-size: 14px; font-weight: 700; text-decoration: none; transition: all 0.2s; }
.sopy-cx-btn-open-wallet:hover { background: var(--sopy-cx-primary-hover); transform: translateY(-2px); }

/* PAY MODAL / POPUP */
.sopy-cx-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; align-items: center; justify-content: center; z-index: 999999; padding: 20px; }
.sopy-cx-modal.active { display: flex; animation: sopyCxFadeIn 0.2s ease; }
.sopy-cx-modal-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(8px); }
.sopy-cx-modal-card { position: relative; width: 100%; max-width: 420px; margin: 0; box-shadow: 0 20px 40px rgba(0,0,0,0.3); z-index: 1; }
.sopy-cx-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; border-bottom: 1px solid var(--sopy-cx-border); }
.sopy-cx-modal-header h3 { font-size: 18px; font-weight: 800; margin: 0; color: var(--sopy-cx-text-main); }
.sopy-cx-modal-close { background: transparent; border: none; color: var(--sopy-cx-text-muted); cursor: pointer; padding: 4px; transition: all 0.2s; }
.sopy-cx-modal-close:hover { color: var(--sopy-cx-text-main); transform: rotate(90deg); }
.sopy-cx-modal-body { padding: 28px; text-align: center; }
.sopy-cx-modal-subtitle { font-size: 14px; color: var(--sopy-cx-text-muted); margin: 0 0 24px; line-height: 1.5; }
.sopy-cx-barcode-box { margin-bottom: 24px; }
.sopy-cx-barcode-img { height: 60px; background: repeating-linear-gradient(90deg, #0f172a, #0f172a 4px, transparent 4px, transparent 8px, #0f172a 8px, #0f172a 14px, transparent 14px, transparent 18px); margin-bottom: 8px; border-radius: 4px; }
.sopy-cx-barcode-number { font-family: monospace; font-size: 14px; font-weight: 700; letter-spacing: 4px; color: var(--sopy-cx-text-main); }
.sopy-cx-qrcode-box { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 28px; }
.sopy-cx-qrcode-img { background: #ffffff; padding: 16px; border-radius: 20px; border: 2px solid var(--sopy-cx-border); box-shadow: 0 4px 12px rgba(0,0,0,0.05); color: #0f172a; }
.sopy-cx-qrcode-timer { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--sopy-cx-success); background: #ecfdf5; padding: 6px 14px; border-radius: 20px; }
.sopy-cx-modal-balance-info { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--sopy-cx-surface-hover); border-radius: 16px; border: 1px solid var(--sopy-cx-border); font-size: 14px; }
.sopy-cx-modal-balance-info span { color: var(--sopy-cx-text-muted); font-weight: 600; }
.sopy-cx-modal-balance-info strong { color: var(--sopy-cx-text-main); font-weight: 800; }

/* ==========================================================================
   EXACT REF 2 MATCHING FINTECH STYLES (Apple Wallet & ShopeePay V2)
   ========================================================================== */

/* Header & Back Button */
.sopy-cx-header-top-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.sopy-cx-top-bar {
    display: flex;
    align-items: center;
}
.sopy-cx-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--sopy-cx-surface);
    border: 1px solid var(--sopy-cx-border);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sopy-cx-text-main);
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
}
.sopy-cx-btn-back:hover {
    background: var(--sopy-cx-surface-hover);
    transform: translateX(-2px);
}

/* Title Row */
.sopy-cx-main-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.sopy-cx-title-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sopy-cx-wallet-title-icon {
    color: var(--sopy-cx-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sopy-cx-title-left h1 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--sopy-cx-text-main) !important;
    margin: 0 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
.sopy-cx-title-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.sopy-cx-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ecfdf5;
    border: 1px solid #d1fae5;
    color: #065f46;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}
.sopy-cx-header-notif {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sopy-cx-surface);
    border: 1px solid var(--sopy-cx-border);
    cursor: pointer;
    transition: all 0.2s ease;
}
.sopy-cx-header-notif:hover {
    background: var(--sopy-cx-surface-hover);
}
.sopy-cx-notif-badge {
    position: absolute;
    top: 0;
    right: 2px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 10px;
    border: 2px solid var(--sopy-cx-surface);
}
.sopy-cx-header-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--sopy-cx-border);
    cursor: pointer;
}
.sopy-cx-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sopy-cx-dot-green {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

/* Main White Balance Card */
.sopy-cx-main-balance-card {
    background: var(--sopy-cx-surface);
    border: 1px solid var(--sopy-cx-border);
    border-radius: 24px;
    padding: 32px;
    box-shadow: var(--sopy-cx-shadow);
    position: relative;
    overflow: hidden;
}
.sopy-cx-balance-content-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    z-index: 2;
}
@media (max-width: 600px) {
    .sopy-cx-balance-content-row {
        flex-direction: column;
        align-items: stretch;
    }
}
.sopy-cx-balance-left {
    display: flex;
    flex-direction: column;
}
.sopy-cx-lbl-main {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--sopy-cx-text-muted) !important;
    margin-bottom: 8px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.sopy-cx-eye-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--sopy-cx-text-muted);
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.sopy-cx-eye-toggle:hover {
    color: var(--sopy-cx-text-main);
    background: var(--sopy-cx-surface-hover);
}
.sopy-cx-val-main {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    color: var(--sopy-cx-text-main) !important;
    line-height: 1 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.5px !important;
}
.sopy-cx-lbl-sub {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--sopy-cx-text-muted) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.sopy-cx-balance-watermark {
    position: absolute;
    left: 45%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--sopy-cx-surface-hover);
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}
@media (max-width: 600px) {
    .sopy-cx-balance-watermark { display: none; }
}
.sopy-cx-balance-right-box {
    background: var(--sopy-cx-surface);
    border: 1px solid var(--sopy-cx-border);
    border-radius: 20px;
    width: 100%;
    max-width: 320px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    overflow: hidden;
}
@media (max-width: 600px) {
    .sopy-cx-balance-right-box { max-width: 100%; }
}
.sopy-cx-box-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
}
.sopy-cx-box-row.border-bottom {
    border-bottom: 1px solid var(--sopy-cx-border);
}
.sopy-cx-box-lbl {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--sopy-cx-text-main) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.sopy-cx-box-lbl svg {
    color: var(--sopy-cx-text-muted);
}
.sopy-cx-box-val-red {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--sopy-cx-primary) !important;
}
.sopy-cx-box-val-grey {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--sopy-cx-text-muted) !important;
}

/* Action Buttons Grid */
.sopy-cx-main-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 32px;
    position: relative;
    z-index: 2;
}
@media (max-width: 500px) {
    .sopy-cx-main-actions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}
.sopy-cx-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    border-radius: 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.sopy-cx-action-btn.btn-topup {
    background: var(--sopy-cx-primary);
    color: #ffffff !important;
    border: none;
    box-shadow: 0 4px 15px rgba(185, 28, 28, 0.25);
}
.sopy-cx-action-btn.btn-topup:hover {
    background: var(--sopy-cx-primary-hover);
    transform: translateY(-2px);
}
.sopy-cx-action-btn.btn-white {
    background: var(--sopy-cx-surface);
    color: var(--sopy-cx-text-main) !important;
    border: 1px solid var(--sopy-cx-border);
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.sopy-cx-action-btn.btn-white:hover {
    background: var(--sopy-cx-surface-hover);
    border-color: var(--sopy-cx-text-muted);
    transform: translateY(-2px);
}

/* Aksi Cepat 9-Item Grid */
.sopy-cx-section-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--sopy-cx-text-main) !important;
    margin: 32px 0 20px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.sopy-cx-quick-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 12px;
}
@media (max-width: 650px) {
    .sopy-cx-quick-grid {
        display: flex;
        overflow-x: auto;
        padding-bottom: 12px;
        scrollbar-width: none;
    }
    .sopy-cx-quick-grid::-webkit-scrollbar { display: none; }
    .sopy-cx-quick-card {
        flex: 0 0 90px;
    }
}
.sopy-cx-quick-card {
    background: var(--sopy-cx-surface);
    border: 1px solid var(--sopy-cx-border);
    border-radius: 20px;
    padding: 12px 6px;
    height: 85px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sopy-cx-quick-card:hover {
    background: var(--sopy-cx-surface);
    border-color: var(--sopy-cx-primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
}
.sopy-cx-quick-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sopy-cx-surface-hover);
    border: 1px solid var(--sopy-cx-border);
    transition: all 0.3s ease;
}
.sopy-cx-quick-icon svg {
    width: 20px;
    height: 20px;
}
.sopy-cx-quick-card:hover .sopy-cx-quick-icon {
    background: var(--sopy-cx-primary);
    border-color: var(--sopy-cx-primary);
}
.sopy-cx-quick-card:hover .sopy-cx-quick-icon svg {
    stroke: #ffffff !important;
}
.sopy-cx-quick-card span {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--sopy-cx-text-main) !important;
    text-align: center;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Three Column Grid */
.sopy-cx-three-column-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 24px;
    margin-top: 32px;
}
@media (max-width: 1150px) {
    .sopy-cx-three-column-grid {
        grid-template-columns: 1fr 1fr;
    }
    .sopy-cx-col-tx {
        grid-column: 1 / -1;
    }
}
@media (max-width: 650px) {
    .sopy-cx-three-column-grid {
        grid-template-columns: 1fr;
    }
    .sopy-cx-col-tx {
        grid-column: auto;
    }
}
.sopy-cx-col {
    display: flex;
    flex-direction: column;
}
.sopy-cx-recent-tx-card, .sopy-cx-summary-clean-card {
    background: var(--sopy-cx-surface);
    border: 1px solid var(--sopy-cx-border);
    border-radius: 24px;
    padding: 28px;
    box-shadow: var(--sopy-cx-shadow);
}
.sopy-cx-header-flex-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.sopy-cx-header-flex-row h3, .sopy-cx-summary-clean-card h3 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--sopy-cx-text-main) !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.sopy-cx-btn-link-red {
    background: transparent;
    border: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--sopy-cx-primary) !important;
    cursor: pointer;
    padding: 0;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.sopy-cx-btn-link-red:hover {
    text-decoration: underline;
}

/* Simple Tx List */
.sopy-cx-tx-simple-list {
    display: flex;
    flex-direction: column;
}
.sopy-cx-tx-simple-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--sopy-cx-border);
}
.sopy-cx-tx-simple-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.sopy-cx-icon-circle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.sopy-cx-icon-circle.bg-green { background: #ecfdf5; }
.sopy-cx-icon-circle.bg-orange { background: #fffbeb; }
.sopy-cx-icon-circle.bg-purple { background: #f5f3ff; }

.sopy-cx-tx-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.sopy-cx-tx-info strong { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; color: var(--sopy-cx-text-main) !important; text-transform: none !important; letter-spacing: normal !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.sopy-cx-tx-info span { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; color: var(--sopy-cx-text-muted) !important; text-transform: none !important; letter-spacing: normal !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

.sopy-cx-tx-val-date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
    flex-shrink: 0;
}
.sopy-cx-tx-val-date strong.val-plus { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: var(--sopy-cx-success) !important; }
.sopy-cx-tx-val-date strong.val-minus { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: var(--sopy-cx-primary) !important; }
.sopy-cx-tx-val-date span { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; color: var(--sopy-cx-text-muted) !important; }

.sopy-cx-btn-full-width {
    width: 100%;
    margin-top: 24px;
    padding: 16px;
    background: var(--sopy-cx-surface);
    border: 1px solid var(--sopy-cx-border);
    border-radius: 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--sopy-cx-text-main) !important;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.sopy-cx-btn-full-width:hover {
    background: var(--sopy-cx-surface-hover);
    border-color: var(--sopy-cx-text-muted);
}

/* Summary Rows */
.sopy-cx-summary-rows {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}
.sopy-cx-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    font-size: 14px;
}
.sopy-cx-sum-row.border-bottom {
    border-bottom: 1px solid var(--sopy-cx-bg);
}
.sopy-cx-sum-row span { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; color: var(--sopy-cx-text-muted) !important; font-weight: 500 !important; font-size: 14px !important; text-transform: none !important; letter-spacing: normal !important; }
.sopy-cx-sum-row strong.val-green { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; color: var(--sopy-cx-success) !important; font-weight: 700 !important; font-size: 15px !important; }
.sopy-cx-sum-row strong.val-black { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; color: var(--sopy-cx-text-main) !important; font-weight: 700 !important; font-size: 15px !important; }

/* Promo Banner Card */
.sopy-cx-promo-banner-card {
    margin-top: 24px;
    background: var(--sopy-cx-surface-hover);
    border: 1px solid var(--sopy-cx-border);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: var(--sopy-cx-shadow);
    cursor: pointer;
    transition: all 0.2s ease;
}
.sopy-cx-promo-banner-card:hover {
    border-color: var(--sopy-cx-primary);
    transform: translateY(-2px);
}
.sopy-cx-diamond-icon-box {
    width: 56px;
    height: 56px;
    background: #fff1f2;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sopy-cx-primary);
    flex-shrink: 0;
}
.sopy-cx-promo-info {
    flex: 1;
}
.sopy-cx-promo-info h4 { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; color: var(--sopy-cx-text-main) !important; margin: 0 0 4px !important; text-transform: none !important; letter-spacing: normal !important; }
.sopy-cx-promo-info p { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; color: var(--sopy-cx-text-muted) !important; margin: 0 !important; text-transform: none !important; letter-spacing: normal !important; }
.sopy-cx-promo-arrow { color: var(--sopy-cx-text-main); display: flex; align-items: center; }

/* Premium Fintech Cashback Section Styles (Ref 2) */
.sopy-cx-cashback-section {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.sopy-cx-cashback-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.sopy-cx-cashback-title-box h1 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--sopy-cx-text-main) !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: -0.5px !important;
}
.sopy-cx-cashback-title-box p {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--sopy-cx-text-muted) !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.sopy-cx-verified-badge-pill {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #10b981;
    padding: 8px 18px;
    border-radius: 9999px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}
.sopy-cx-verified-badge-pill .green-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
    box-shadow: 0 0 0 2px #d1fae5;
}

/* Ruby Red Hero Card */
.sopy-cx-cashback-hero-card {
    background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);
    border-radius: 28px;
    padding: 36px 42px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    margin-top: 24px;
    box-shadow: 0 20px 35px -10px rgba(159, 18, 57, 0.3);
    gap: 32px;
}
.sopy-cx-hero-watermark {
    position: absolute;
    right: 38%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.12;
    pointer-events: none;
    color: #ffffff;
}
.sopy-cx-hero-left-side {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.sopy-cx-hero-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    opacity: 0.9;
    text-transform: uppercase !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sopy-cx-hero-amount {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 46px !important;
    font-weight: 700 !important;
    margin: 10px 0 4px 0 !important;
    letter-spacing: -1px !important;
    line-height: 1 !important;
}
.sopy-cx-hero-subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    opacity: 0.9;
    margin-bottom: 28px !important;
}
.sopy-cx-btn-white-pill {
    background: #ffffff;
    color: #be123c;
    padding: 14px 26px;
    border-radius: 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}
.sopy-cx-btn-white-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 25px rgba(0,0,0,0.2);
    background: #f8fafc;
}
.sopy-cx-hero-right-side {
    position: relative;
    z-index: 2;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    padding-left: 42px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 250px;
}
.sopy-cx-breakdown-item {
    display: flex;
    flex-direction: column;
}
.sopy-cx-breakdown-item .breakdown-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    opacity: 0.85;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
}
.sopy-cx-breakdown-item .breakdown-val {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.2 !important;
}
.sopy-cx-breakdown-item .breakdown-sub {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    opacity: 0.85;
}
.sopy-cx-breakdown-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

/* 4 Info Cards Grid */
.sopy-cx-cashback-four-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-top: 26px;
    width: 100%;
}
.sopy-cx-four-card {
    background: #ffffff;
    border: 1px solid var(--sopy-cx-border);
    border-radius: 20px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
    min-width: 0;
}
.sopy-cx-four-card:hover {
    transform: translateY(-3px);
    border-color: #be123c;
    box-shadow: 0 8px 24px rgba(190,18,60,0.08);
}
.sopy-cx-four-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sopy-cx-four-icon svg {
    width: 20px;
    height: 20px;
}
.sopy-cx-four-icon.bg-pink { background: #fff1f2; }
.sopy-cx-four-icon.bg-yellow { background: #fffbeb; }
.sopy-cx-four-icon.bg-purple { background: #f5f3ff; }
.sopy-cx-four-icon.bg-cyan { background: #ecfeff; }

.sopy-cx-four-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.sopy-cx-four-info .four-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--sopy-cx-text-muted) !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
    word-break: break-word;
}
.sopy-cx-four-info .four-val {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--sopy-cx-text-main) !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.3 !important;
    word-break: break-word;
}
.sopy-cx-four-info .four-sub {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Promo Banner Card */
.sopy-cx-cashback-promo-card {
    background: #fff1f2;
    border: 1px solid #ffe4e6;
    border-radius: 28px;
    padding: 32px 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
    gap: 32px;
    box-shadow: 0 10px 25px rgba(190,18,60,0.05);
}
.sopy-cx-promo-illus {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(190,18,60,0.1);
    flex-shrink: 0;
}
.sopy-cx-promo-text-main {
    flex: 1;
}
.sopy-cx-promo-text-main h4 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 8px 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.sopy-cx-promo-text-main p {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #4b5563 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.sopy-cx-promo-text-main p strong {
    color: #be123c !important;
    font-weight: 700 !important;
}
.sopy-cx-btn-red-solid {
    background: #be123c;
    color: #ffffff;
    padding: 16px 32px;
    border-radius: 18px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 10px 25px rgba(190,18,60,0.25);
}
.sopy-cx-btn-red-solid:hover {
    background: #9f1239;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(190,18,60,0.3);
    color: #ffffff;
}

/* Riwayat Cashback Terbaru */
.sopy-cx-cashback-list-section {
    display: flex;
    flex-direction: column;
    margin-top: 42px;
}
.sopy-cx-list-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.sopy-cx-list-header-row h3 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--sopy-cx-text-main) !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.sopy-cx-cashback-items-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sopy-cx-cashback-item-row {
    background: #ffffff;
    border: 1px solid var(--sopy-cx-border);
    border-radius: 24px;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.01);
}
.sopy-cx-cashback-item-row:hover {
    border-color: #be123c;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(190,18,60,0.06);
}
.sopy-cx-cashback-item-row .item-left-box {
    display: flex;
    align-items: center;
    gap: 20px;
}
.sopy-cx-cashback-item-row .item-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sopy-cx-cashback-item-row .item-icon-box.bg-pink {
    background: #fff1f2;
}
.sopy-cx-cashback-item-row .item-text-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sopy-cx-cashback-item-row .item-text-box strong {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--sopy-cx-text-main) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.sopy-cx-cashback-item-row .item-text-box span {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--sopy-cx-text-muted) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.sopy-cx-cashback-item-row .item-right-box {
    display: flex;
    align-items: center;
    gap: 32px;
}
.sopy-cx-cashback-item-row .item-val-date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}
.sopy-cx-cashback-item-row .item-val-date strong.val-green {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #10b981 !important;
}
.sopy-cx-cashback-item-row .item-val-date span {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
}
.sopy-cx-cashback-item-row .item-status-badge {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #10b981;
    padding: 8px 20px;
    border-radius: 14px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-block;
    text-align: center;
    min-width: 100px;
}
.sopy-cx-load-more-container {
    text-align: center;
    margin-top: 28px;
}
.sopy-cx-btn-load-more {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    padding: 14px 32px;
    border-radius: 18px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.sopy-cx-btn-load-more:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-2px);
}

/* Responsive adjustments for cashback layout */
@media (max-width: 1200px) {
    .sopy-cx-cashback-four-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .sopy-cx-cashback-hero-card {
        flex-direction: column;
        align-items: stretch;
        padding: 28px 24px;
        gap: 24px;
    }
    .sopy-cx-hero-watermark {
        right: 10%;
        top: 30%;
    }
    .sopy-cx-hero-right-side {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
        padding-left: 0;
        padding-top: 24px;
    }
    .sopy-cx-cashback-four-grid {
        grid-template-columns: 1fr;
    }
    .sopy-cx-cashback-promo-card {
        flex-direction: column;
        text-align: center;
        padding: 28px 24px;
        gap: 20px;
    }
    .sopy-cx-cashback-item-row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 20px;
    }
    .sopy-cx-cashback-item-row .item-right-box {
        justify-content: space-between;
        gap: 16px;
        border-top: 1px solid var(--sopy-cx-border);
        padding-top: 16px;
    }
    .sopy-cx-cashback-item-row .item-val-date {
        align-items: flex-start;
        text-align: left;
    }
}