/* SDPKT - Strict 3-Color Brand Palette */
/* Blue: #2196F3 | Black: #0a0a0a | White: #FFFFFF */

:root {
    /* === SDPKT BRAND COLORS (ONLY THESE 3) === */
    --sdpkt-blue: #2196F3;
    --sdpkt-black: #0a0a0a;
    --sdpkt-white: #FFFFFF;

    /* RGB values for rgba() usage */
    --sdpkt-blue-rgb: 33, 150, 243;
    --sdpkt-black-rgb: 10, 10, 10;
    --sdpkt-white-rgb: 255, 255, 255;

    /* === DERIVED COLORS (from brand palette) === */
    /* Primary = Blue */
    --tgn-app-primary: var(--sdpkt-blue);
    --tgn-app-primary-rgb: var(--sdpkt-blue-rgb);

    /* Light blue = Blue with transparency on white */
    --tgn-app-primary-light: rgba(var(--sdpkt-blue-rgb), 0.6);
    /* Dark blue = Blue with black overlay effect */
    --tgn-app-primary-dark: rgba(var(--sdpkt-blue-rgb), 1);

    /* Semantic colors derived from brand */
    --success: rgba(var(--sdpkt-blue-rgb), 0.8);  /* Blue-tinted success */
    --warning: rgba(var(--sdpkt-blue-rgb), 0.5);  /* Muted blue warning */
    --error: var(--sdpkt-black);                   /* Black for errors */

    /* === LIGHT THEME === */
    --bg-primary: var(--sdpkt-white);
    --bg-secondary: var(--sdpkt-white);
    --bg-tertiary: rgba(var(--sdpkt-black-rgb), 0.02);

    --text-primary: var(--sdpkt-blue);
    --text-secondary: rgba(var(--sdpkt-blue-rgb), 0.8);
    --text-muted: rgba(var(--sdpkt-blue-rgb), 0.6);

    --border-color: rgba(var(--sdpkt-black-rgb), 0.1);

    /* Glassmorphism */
    --glass-bg: rgba(var(--sdpkt-white-rgb), 0.85);
    --glass-border: rgba(var(--sdpkt-white-rgb), 0.5);
    --glass-shadow: 0 8px 32px rgba(var(--sdpkt-black-rgb), 0.1);
    --glass-blur: blur(20px);

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Typography */
    --font-family: 'Comfortaa', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    --font-family-display: 'Comfortaa';

    /* Bottom nav height for sticky action bar offset */
    --bottom-nav-height: 80px;

    /* Border Radius */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}

/* Retail icon colors - use brand primary */
.tgn-retail-icon-item-icon {
    color: var(--tgn-app-primary, #2196F3);
}

/* === DARK THEME (same 3 colors, inverted) === */
[data-theme="dark"] {
    --bg-primary: var(--sdpkt-black);
    --bg-secondary: rgba(var(--sdpkt-white-rgb), 0.05);
    --bg-tertiary: rgba(var(--sdpkt-white-rgb), 0.1);

    --text-primary: var(--sdpkt-white);
    --text-secondary: rgba(var(--sdpkt-white-rgb), 0.7);
    --text-muted: rgba(var(--sdpkt-white-rgb), 0.5);

    --border-color: rgba(var(--sdpkt-white-rgb), 0.1);

    --glass-bg: rgba(var(--sdpkt-black-rgb), 0.95);
    --glass-border: rgba(var(--sdpkt-white-rgb), 0.1);
    --glass-shadow: 0 8px 32px rgba(var(--sdpkt-black-rgb), 0.4);
}

/* Dark mode - Glassmorphic overrides */
[data-theme="dark"] .glassmorphic,
[data-theme="dark"] .card,
[data-theme="dark"] .bundle-card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .favorite-card,
[data-theme="dark"] .schedule-card,
[data-theme="dark"] .transaction-item,
[data-theme="dark"] .recipient-card {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: rgba(100, 116, 139, 0.3) !important;
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-overlay > div,
[data-theme="dark"] .product-modal,
[data-theme="dark"] .bundle-modal,
[data-theme="dark"] .schedule-wizard {
    background: rgba(15, 23, 42, 0.98) !important;
    border-color: rgba(100, 116, 139, 0.3) !important;
}

[data-theme="dark"] .page-header,
[data-theme="dark"] .view-tabs,
[data-theme="dark"] .category-tabs,
[data-theme="dark"] .filter-chip,
[data-theme="dark"] .category-chip {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(100, 116, 139, 0.3);
}

[data-theme="dark"] .filter-chip:not(.active),
[data-theme="dark"] .category-chip:not(.active),
[data-theme="dark"] .view-tab:not(.active) {
    background: rgba(51, 65, 85, 0.6);
    color: var(--text-secondary);
}

[data-theme="dark"] .form-input,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: rgba(51, 65, 85, 0.8) !important;
    border-color: rgba(100, 116, 139, 0.4) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] input::placeholder {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .section-label,
[data-theme="dark"] .bundle-description,
[data-theme="dark"] .product-provider {
    color: var(--text-secondary);
}

[data-theme="dark"] .review-card,
[data-theme="dark"] .summary-card,
[data-theme="dark"] .info-card {
    background: rgba(51, 65, 85, 0.6) !important;
}

[data-theme="dark"] .item-pill {
    background: rgba(33, 150, 243, 0.2);
}

[data-theme="dark"] .item-pill.more {
    background: rgba(100, 116, 139, 0.3);
    color: var(--text-muted);
}

[data-theme="dark"] .empty-state {
    background: rgba(30, 41, 59, 0.6);
}

/* Dark mode - Featured/section wrappers */
[data-theme="dark"] .featured-bundle-wrapper,
[data-theme="dark"] .featured-deals-section,
[data-theme="dark"] .featured-deals-grid,
[data-theme="dark"] .bundles-section,
[data-theme="dark"] .bundles-grid,
[data-theme="dark"] .products-grid,
[data-theme="dark"] .favorites-grid {
    background: transparent;
}

[data-theme="dark"] .bundle-image-placeholder {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.2), rgba(33, 150, 243, 0.1));
}

/* Dark mode - Text colors */
[data-theme="dark"] .bundle-name,
[data-theme="dark"] .product-name,
[data-theme="dark"] .favorite-name,
[data-theme="dark"] .schedule-name {
    color: var(--text-primary);
}

[data-theme="dark"] .original-price {
    color: var(--text-muted);
}

/* Dark mode - Buttons and interactive elements */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .back-btn {
    background: rgba(51, 65, 85, 0.8);
    border-color: rgba(100, 116, 139, 0.4);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-icon,
[data-theme="dark"] .cart-btn {
    color: var(--text-primary);
}

/* Dark mode - Status badges */
[data-theme="dark"] .status-badge {
    background: rgba(51, 65, 85, 0.8);
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: var(--font-family);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background var(--transition-normal), color var(--transition-normal);
}

/* Light mode gradient background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 100%);
    pointer-events: none;
    z-index: -2;
    transition: opacity var(--transition-normal);
}

/* TGN Gradient overlay for visual appeal */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(180deg, rgba(33, 150, 243, 0.08) 0%, transparent 100%);
    pointer-events: none;
    z-index: -1;
    transition: opacity var(--transition-normal);
}

/* Dark mode backgrounds */
[data-theme="dark"] body::before {
    background: linear-gradient(135deg, #0a0a0a 0%, #0a0a0a 50%, #0a0a0a 100%);
}

[data-theme="dark"] body::after {
    background: linear-gradient(180deg, rgba(33, 150, 243, 0.15) 0%, transparent 100%);
}

/* App Container */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 100%;
    margin: 0 auto;
    background: transparent;
}

.app-container.auth-container {
    max-width: 100%;
    background: #0a0a0a;
    min-height: 100vh;
    min-height: 100dvh;
}

.auth-container .auth-content {
    padding: 0;
    overflow: hidden;
}

/* Main Content */
.main-content {
    flex: 1;
    padding: var(--spacing-md);
    padding-bottom: calc(80px + var(--spacing-md));
    overflow-y: auto;
}

/* Bottom Navigation - TGN Glassmorphic */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.1);
    border-radius: 16px 16px 0 0;
    z-index: 100;
    transition: all var(--transition-normal);
}

.bottom-nav:hover {
    border-color: #2196F3;
    box-shadow: 0 -2px 8px rgba(33, 150, 243, 0.15);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    text-decoration: none;
    color: #2196F3;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all var(--transition-fast);
}

.nav-item:hover {
    color: #2196F3;
    background: rgba(33, 150, 243, 0.08);
    border-color: #2196F3;
}

.nav-item:active {
    transform: scale(0.95);
}

.nav-item.active {
    color: #2196F3;
}

.nav-item-primary {
    background: linear-gradient(135deg, #2196F3 0%, #2196F3 100%);
    color: white !important;
    border-radius: var(--radius-full);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-top: -1.5rem;
    box-shadow: 0 4px 20px rgba(33, 150, 243, 0.4);
}

.nav-icon {
    font-size: 1.25rem;
}

.nav-label {
    font-size: 0.7rem;
    font-weight: 500;
}

/* Dark mode bottom nav */
[data-theme="dark"] .bottom-nav {
    background: #0a0a0a;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .bottom-nav:hover {
    border-color: #2196F3;
    box-shadow: 0 -4px 20px rgba(33, 150, 243, 0.2);
}

[data-theme="dark"] .nav-item {
    color: #FFFFFF;
}

[data-theme="dark"] .nav-item:hover {
    color: #2196F3;
    background: rgba(33, 150, 243, 0.15);
    border-color: #2196F3;
}

[data-theme="dark"] .nav-item:active {
    transform: scale(0.95);
}

[data-theme="dark"] .nav-item.active {
    color: #2196F3;
}

/* Glassmorphic Effect - with VISIBLE edges (like thejobcenter) */
.glassmorphic {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-lg);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* Balance Card - TGN Blue Gradient */
.balance-card {
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    background: linear-gradient(135deg, #2196F3 0%, #2196F3 100%);
    color: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(33, 150, 243, 0.3);
}

.balance-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.balance-logo {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
}

.balance-label {
    font-size: 0.875rem;
    opacity: 0.9;
}

.balance-amount {
    font-family: var(--font-family-display);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.balance-amount .currency {
    font-size: 1.5rem;
    vertical-align: super;
    margin-right: var(--spacing-xs);
}

.balance-updated {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Quick Actions */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--glass-shadow);
}

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

.action-icon {
    font-size: 1.5rem;
}

.action-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Section */
.section {
    margin-bottom: var(--spacing-xl);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.section-header h2 {
    font-family: var(--font-family-display);
    font-size: 1.125rem;
    font-weight: 600;
}

.link {
    color: #2196F3;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Transaction Item */
.transaction-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.transaction-item:last-child {
    border-bottom: none;
}

.transaction-icon {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.transaction-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.transaction-title {
    font-weight: 500;
    color: var(--text-primary);
}

.transaction-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.transaction-amount {
    font-family: var(--font-family-display);
    font-weight: 600;
}

.transaction-amount.positive {
    color: var(--success);
}

.transaction-amount.negative {
    color: var(--text-primary);
}

/* Transaction List */
.transaction-list {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Care Summary */
.care-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.care-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.care-item:hover {
    transform: translateX(4px);
}

.care-emoji {
    font-size: 2rem;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
}

.care-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.care-name {
    font-weight: 600;
}

.care-location {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.care-stats {
    text-align: right;
    display: flex;
    flex-direction: column;
}

.care-month {
    font-weight: 600;
    color: var(--primary);
}

.care-total {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
}

.empty-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: var(--spacing-md);
}

.empty-state h2 {
    margin-bottom: var(--spacing-sm);
}

.empty-state p {
    color: var(--text-muted);
    margin-bottom: var(--spacing-lg);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn:hover {
    border-color: #2196F3;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
}

.btn:active {
    transform: scale(0.97);
}

[data-theme="dark"] .btn:hover {
    border-color: #2196F3;
    background: rgba(33, 150, 243, 0.15);
    box-shadow: 0 4px 20px rgba(33, 150, 243, 0.4);
}

[data-theme="dark"] .btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background: linear-gradient(135deg, #2196F3 0%, #2196F3 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2196F3 0%, #2196F3 100%);
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--border-color);
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.75rem;
}

/* Page Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.page-header h1 {
    font-family: var(--font-family-display);
    font-size: 1.5rem;
    font-weight: 700;
}

/* Recipients Page */
.spending-summary {
    text-align: center;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.spending-summary h3 {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
}

.spending-total {
    font-family: var(--font-family-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
}

.spending-label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.recipients-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.recipient-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.recipient-card:hover {
    transform: translateX(4px);
}

.recipient-avatar {
    position: relative;
}

.avatar-emoji {
    font-size: 2rem;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
}

.verified-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: var(--success);
    color: white;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-secondary);
}

.recipient-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.recipient-name {
    font-weight: 600;
}

.recipient-location {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.recipient-last {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.recipient-stats {
    text-align: right;
}

.stat-amount {
    font-weight: 600;
    color: var(--primary);
}

.stat-orders {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.chevron {
    font-size: 1.5rem;
    color: var(--text-muted);
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 200;
    padding: var(--spacing-md);
}

.modal {
    width: 100%;
    max-width: min(90vw, 600px);
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--spacing-lg);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.modal-header h2 {
    font-family: var(--font-family-display);
    font-weight: 600;
}

.close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-full);
    font-size: 1.25rem;
    cursor: pointer;
}

/* Form */
.form-section {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.form-section h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-md);
}

.form-row {
    margin-bottom: var(--spacing-md);
}

.form-row label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
}

.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-family);
    font-size: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: border-color var(--transition-fast);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.form-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

.form-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.emoji-picker {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.emoji-btn {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.emoji-btn.selected {
    border-color: var(--primary);
    background: var(--primary);
    background: rgba(99, 102, 241, 0.1);
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    margin-bottom: var(--spacing-sm);
}

.checkbox-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
}

.modal-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.modal-actions .btn {
    flex: 1;
}

.form-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

/* Transaction Groups */
.transaction-group {
    margin-bottom: var(--spacing-lg);
}

.group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    padding: 0 var(--spacing-sm);
}

.group-header h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
}

.group-summary {
    display: flex;
    gap: var(--spacing-md);
    font-size: 0.75rem;
    font-weight: 500;
}

.group-summary .in {
    color: var(--success);
}

.group-summary .out {
    color: var(--text-muted);
}

/* Loading & Skeleton */
.loading-state {
    text-align: center;
    padding: var(--spacing-xl);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto var(--spacing-md);
}

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

.skeleton {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 404 */
.not-found {
    text-align: center;
    padding: var(--spacing-xl);
}

.not-found h1 {
    font-family: var(--font-family-display);
    font-size: 6rem;
    font-weight: 700;
    color: var(--primary);
}

/* Load More */
.load-more {
    width: 100%;
    margin-top: var(--spacing-md);
}

/* Responsive adjustments */
@media (min-width: 768px) {
    .app-container {
        border-left: 1px solid var(--border-color);
        border-right: 1px solid var(--border-color);
    }
}

/* ============================================
   TOP UP PAGE
   ============================================ */
.topup-page,
.send-page,
.profile-page,
.kyc-page {
    padding-bottom: var(--spacing-xl);
}

.back-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.back-btn:hover {
    background: var(--bg-tertiary);
}

.amount-section {
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.amount-section label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.amount-input-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.amount-input-container .currency {
    font-family: var(--font-family-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-muted);
}

.amount-input {
    font-family: var(--font-family-display);
    font-size: 3rem;
    font-weight: 700;
    width: 200px;
    text-align: center;
    background: transparent;
    border: none;
    color: var(--text-primary);
}

.amount-input:focus {
    outline: none;
}

.amount-input::placeholder {
    color: var(--text-muted);
}

/* Hide number spinners */
.amount-input::-webkit-outer-spin-button,
.amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quick-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
}

.quick-amount-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.quick-amount-btn:hover {
    border-color: var(--primary);
}

.quick-amount-btn.selected {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.balance-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--spacing-md);
}

/* Payment Methods */
.methods-section {
    margin-bottom: var(--spacing-lg);
}

.methods-section h2 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.method-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.method-card:hover {
    border-color: var(--primary);
}

.method-card.selected {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
}

.method-icon {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.method-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.method-title {
    font-weight: 600;
}

.method-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.method-check {
    color: var(--primary);
    font-size: 1.25rem;
}

/* Summary */
.summary-section {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

.summary-row:last-child {
    border-bottom: none;
}

.summary-row.total {
    font-weight: 600;
    font-size: 1.125rem;
    padding-top: var(--spacing-md);
}

.summary-row .fee {
    color: var(--success);
}

.summary-row.rate {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: var(--spacing-xs) 0;
}

.amount-highlight {
    font-weight: 700;
    color: var(--primary);
}

/* Currency Selector */
.currency-selector {
    margin: var(--spacing-sm) 0 var(--spacing-md);
    padding: var(--spacing-md);
}

.currency-selector label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.currency-select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: white;
    font-size: 0.875rem;
    cursor: pointer;
}

.currency-select:focus {
    outline: none;
    border-color: var(--primary);
}

.currency-note {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
    font-style: italic;
}

/* Currency Conversion Info */
.conversion-info {
    background: rgba(99, 102, 241, 0.05);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.conversion-info .summary-row {
    border-bottom: none;
    padding: var(--spacing-xs) 0;
}

.conversion-note {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-align: center;
    padding-top: var(--spacing-xs);
    font-style: italic;
}

/* Method hint */
.method-hint {
    font-size: 0.65rem;
    color: var(--primary);
    font-style: italic;
}

/* Action Section */
.action-section {
    padding: 0 var(--spacing-md);
}

.btn-large {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1rem;
}

.btn-danger {
    background: var(--error);
    color: white;
}

.btn-danger:hover {
    background: #0a0a0a;
}

.btn-small {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.75rem;
}

/* ============================================
   SEND PAGE
   ============================================ */
.step-section {
    padding: var(--spacing-md);
}

.recipients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.recipient-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background: var(--glass-bg);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.recipient-chip:hover {
    border-color: var(--primary);
}

.recipient-chip.selected {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
}

.chip-emoji {
    font-size: 2rem;
}

.chip-name {
    font-size: 0.75rem;
    font-weight: 500;
}

.divider {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.phone-input-section {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.phone-input-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.country-code {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    font-weight: 500;
    color: var(--text-muted);
}

.phone-input {
    flex: 1;
}

.selected-recipient {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.selected-recipient .recipient-emoji,
.selected-recipient .recipient-name {
    font-size: 1.25rem;
}

.change-btn {
    margin-left: auto;
    color: var(--primary);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
}

.note-section {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

/* Confirm Card */
.confirm-card {
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.confirm-recipient {
    margin-bottom: var(--spacing-lg);
}

.confirm-recipient .recipient-emoji.large {
    font-size: 4rem;
    display: block;
    margin-bottom: var(--spacing-sm);
}

.confirm-recipient .recipient-name {
    font-size: 1.25rem;
    font-weight: 600;
    display: block;
}

.confirm-recipient .recipient-phone {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.confirm-amount {
    font-family: var(--font-family-display);
    margin-bottom: var(--spacing-lg);
}

.confirm-amount .currency {
    font-size: 1.5rem;
    color: var(--text-muted);
}

.confirm-amount .amount {
    font-size: 3rem;
    font-weight: 700;
}

.confirm-note {
    padding: var(--spacing-sm);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

.confirm-note .note-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.confirm-details {
    text-align: left;
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-md);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
}

.detail-row.total {
    font-weight: 600;
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

.detail-row .free {
    color: var(--success);
}

.confirm-actions {
    display: flex;
    gap: var(--spacing-md);
}

.confirm-actions .btn {
    flex: 1;
}

/* ============================================
   PROFILE PAGE
   ============================================ */
.settings-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font-size: 1.25rem;
    cursor: pointer;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.avatar {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.avatar-initial {
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary);
}

.profile-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.profile-info h2 {
    font-size: 1.25rem;
    font-weight: 600;
}

.profile-info .phone,
.profile-info .email {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* KYC Section */
.kyc-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.kyc-section.kyc-verified {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

.kyc-section.kyc-pending {
    border-color: var(--warning);
    background: rgba(245, 158, 11, 0.1);
}

.kyc-section.kyc-rejected {
    border-color: var(--error);
    background: rgba(239, 68, 68, 0.1);
}

.kyc-icon {
    font-size: 2rem;
}

.kyc-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.kyc-title {
    font-weight: 600;
}

.kyc-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Stats Section */
.stats-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.stat-card {
    padding: var(--spacing-md);
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.stat-value {
    font-family: var(--font-family-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: #2196F3;
    display: block;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Menu Section */
.menu-section {
    margin-bottom: var(--spacing-lg);
}

.menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.menu-item:hover {
    transform: translateX(4px);
}

.menu-icon {
    font-size: 1.25rem;
}

.menu-text {
    flex: 1;
    font-weight: 500;
}

.menu-chevron {
    color: var(--text-muted);
    font-size: 1.25rem;
}

/* Logout Section */
.logout-section {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

/* App Info */
.app-info {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-muted);
    font-size: 0.75rem;
}

.app-info span {
    display: block;
}

/* ============================================
   KYC PAGE
   ============================================ */
.kyc-intro {
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.intro-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: var(--spacing-md);
}

.benefits-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    text-align: left;
}

.benefit {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.benefit-icon {
    font-size: 1.25rem;
}

.benefit-text {
    font-size: 0.875rem;
}

.requirements-section {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.requirements-list {
    list-style: none;
}

.requirements-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

.requirements-list li:last-child {
    border-bottom: none;
}

.req-icon {
    font-size: 1.5rem;
}

.req-info {
    display: flex;
    flex-direction: column;
}

.req-title {
    font-weight: 500;
}

.req-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.time-estimate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.time-icon {
    font-size: 1.25rem;
}

.time-text {
    color: var(--text-muted);
}

/* Step Indicator */
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xl);
}

.step-indicator .step {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
}

.step-indicator .step.active {
    background: var(--primary);
    color: white;
}

.step-indicator .step.completed {
    background: var(--success);
    color: white;
}

.step-line {
    width: 40px;
    height: 2px;
    background: var(--border-color);
}

.step-line.completed {
    background: var(--success);
}

/* Upload Section */
.upload-section {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.upload-hint {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.upload-area:hover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.05);
}

.upload-area.uploaded {
    border-style: solid;
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

.upload-icon {
    font-size: 2rem;
}

.upload-text {
    font-weight: 500;
}

.upload-action {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.address-confirm {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.address-confirm h3 {
    margin-bottom: var(--spacing-md);
}

.form-actions {
    display: flex;
    gap: var(--spacing-md);
    padding: 0 var(--spacing-md);
}

.form-actions .btn {
    flex: 1;
}

/* Success Section */
.success-section {
    text-align: center;
    padding: var(--spacing-xl);
}

.success-icon {
    font-size: 5rem;
    display: block;
    margin-bottom: var(--spacing-lg);
}

.success-section h2 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
}

.success-note {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: var(--spacing-md);
}

/* ============================================
   AUTH PAGES (LOGIN/REGISTER)
   ============================================ */
.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-xl);
}

.auth-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.auth-logo {
    width: 80px;
    height: 80px;
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-lg);
}

.auth-header h1 {
    font-family: var(--font-family-display);
    font-size: 1.75rem;
    margin-bottom: var(--spacing-xs);
}

.auth-header p {
    color: var(--text-muted);
}

.auth-form {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.btn-social {
    width: 100%;
}

.social-icon {
    font-size: 1.25rem;
}

.auth-footer {
    text-align: center;
    margin-top: auto;
    padding: var(--spacing-lg);
    color: var(--text-muted);
    font-size: 0.875rem;
}

.auth-footer .link {
    margin-left: var(--spacing-xs);
}

.separator {
    margin: 0 var(--spacing-sm);
}

/* OTP Input */
.otp-info {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.otp-info strong {
    display: block;
    margin: var(--spacing-xs) 0;
}

.otp-input-container {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.otp-input {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
}

.otp-input:focus {
    outline: none;
    border-color: var(--primary);
}

.resend-section {
    text-align: center;
    margin-top: var(--spacing-lg);
}

.resend-cooldown {
    color: var(--text-muted);
}

.pin-hint {
    color: var(--text-muted);
    margin-bottom: var(--spacing-lg);
}

/* ============================================
   SUCCESS PAGES
   ============================================ */
.success-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-xl);
}

.success-content {
    text-align: center;
}

.success-animation {
    margin-bottom: var(--spacing-xl);
}

.success-circle {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--success);
    border-radius: var(--radius-full);
    animation: scaleIn 0.5s ease;
}

@keyframes scaleIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.success-check {
    font-size: 3rem;
    color: white;
}

.success-content h1 {
    font-family: var(--font-family-display);
    font-size: 2rem;
    margin-bottom: var(--spacing-lg);
}

.success-details {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.detail-amount {
    font-family: var(--font-family-display);
    margin-bottom: var(--spacing-md);
}

.detail-amount .currency {
    font-size: 1.5rem;
    color: var(--text-muted);
}

.detail-amount .amount {
    font-size: 3rem;
    font-weight: 700;
}

.detail-recipient .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
}

.detail-recipient .value {
    font-size: 1.25rem;
    font-weight: 600;
}

.success-message {
    color: var(--text-muted);
    margin-bottom: var(--spacing-xl);
}

.success-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.success-share {
    margin-top: var(--spacing-lg);
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.share-icon {
    font-size: 1.25rem;
}

/* Warning hint */
.form-hint.warning {
    color: var(--warning);
}

/* ============================
   BRANDING & TRUST ELEMENTS
   ============================ */

/* Brand subtitle under logo */
.brand-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

/* Trust badges */
.trust-badges {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    flex-wrap: wrap;
}

.trust-badge {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(33, 150, 243, 0.05);
    border-radius: var(--radius-full);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Auth legal footer */
.auth-legal {
    text-align: center;
    padding: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.auth-legal .legal-links {
    font-size: 0.75rem;
    margin-bottom: var(--spacing-sm);
}

.auth-legal .legal-links a {
    color: #2196F3;
    text-decoration: none;
}

.auth-legal .legal-links a:hover {
    text-decoration: underline;
}

.auth-legal .copyright {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* App info section with legal links */
.app-info .legal-links {
    font-size: 0.75rem;
    margin: var(--spacing-sm) 0;
}

.app-info .legal-links a {
    color: #2196F3;
    text-decoration: none;
}

.app-info .legal-links a:hover {
    text-decoration: underline;
}

.app-info .copyright {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: block;
    margin-top: var(--spacing-sm);
}

/* ============================
   AUTH LAYOUT (No bottom nav)
   ============================ */

.auth-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 100%;
    margin: 0 auto;
    background: transparent;
}

.auth-content {
    flex: 1;
    padding: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Auth page styling adjustments */
.auth-container .auth-page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.auth-container .auth-header {
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.auth-container .auth-form {
    flex: 0;
}

/* ============================
   WELCOME/ONBOARDING PAGE
   ============================ */

.welcome-page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    text-align: center;
    padding: var(--spacing-lg);
}

.welcome-slides {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide {
    animation: fadeIn 0.3s ease-out;
}

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

.slide-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-lg);
}

.slide h1 {
    font-family: var(--font-family-display);
    font-size: 2rem;
    font-weight: 700;
    color: #2196F3;
    margin-bottom: var(--spacing-sm);
}

.slide h2 {
    font-family: var(--font-family-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.slide .tagline {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

.slide .description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 300px;
    margin: 0 auto;
}

/* Slide indicators */
.slide-indicators {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-xl) 0;
}

.indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(33, 150, 243, 0.2);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.indicator.active {
    background: #2196F3;
    width: 24px;
    border-radius: 5px;
}

/* Welcome actions */
.welcome-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.welcome-actions .btn-full {
    width: 100%;
}

/* Welcome footer */
.welcome-footer {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.welcome-footer .link {
    color: #2196F3;
    margin-left: var(--spacing-xs);
}

/* Welcome company */
.welcome-company {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--spacing-md);
}

/* Landing page styles are in tgn-design-system.css (universal) */

/* ============================================
   RETAIL PAGE - iOS WORLD-CLASS DESIGN
   ============================================ */

/* Retail Page - Premium iOS Layout */
.retail-page {
    min-height: 100vh;
    padding: 0;
    padding-bottom: 100px;
    background: linear-gradient(180deg,
        #FFFFFF 0%,
        #FFFFFF 30%,
        #FFFFFF 60%,
        #FFFFFF 100%);
    position: relative;
    overflow-x: hidden;
}

/* Animated background orbs for depth */
.retail-page::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle at 20% 20%, rgba(33, 150, 243, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(100, 181, 246, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 40% 70%, rgba(33, 150, 243, 0.04) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

[data-theme="dark"] .retail-page {
    background: linear-gradient(180deg,
        #0a0a0a 0%,
        #0a0a0a 50%,
        #0a0a0a 100%);
}

[data-theme="dark"] .retail-page::before {
    background:
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
}

/* Page Header - iOS Style */
.retail-page .page-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .retail-page .page-header {
    background: rgba(15, 23, 42, 0.8);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.retail-page .page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Main Content Container */
.retail-content {
    position: relative;
    z-index: 1;
    padding: 0 16px;
}

/* Hero Brand Section - Premium Glass */
.sdpkt-brand-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    margin: 16px 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-radius: 20px;
    border: 0.5px solid rgba(255, 255, 255, 0.8);
    box-shadow:
        0 4px 24px rgba(33, 150, 243, 0.08),
        0 1px 2px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .sdpkt-brand-banner {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.brand-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand-logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
}

.sdpkt-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-family-display);
    letter-spacing: -0.3px;
}

.brand-highlight {
    color: #2196F3;
}

.brand-tagline {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.brand-badge {
    background: linear-gradient(135deg, #2196F3, #2196F3);
    color: white;
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* iOS Segmented Control - Navigation */
.combined-tabs {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px;
    margin: 16px 0;
    background: rgba(118, 118, 128, 0.12);
    border-radius: 10px;
}

[data-theme="dark"] .combined-tabs {
    background: rgba(118, 118, 128, 0.24);
}

.tabs-divider {
    width: 1px;
    height: 24px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 4px;
}

[data-theme="dark"] .tabs-divider {
    background: rgba(255, 255, 255, 0.15);
}

/* Provider Pills - Horizontal Scroll */
.provider-tabs {
    display: flex;
    gap: 6px;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.provider-tabs::-webkit-scrollbar {
    display: none;
}

.combined-tabs .provider-tabs {
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
}

.provider-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.provider-tab:active {
    transform: scale(0.95);
}

.provider-tab.active {
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.08),
        0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .provider-tab.active {
    background: rgba(255, 255, 255, 0.15);
}

.provider-logo {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.provider-logo svg {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.provider-tab.active .provider-logo {
    transform: scale(1.05);
}

/* All providers globe */
.provider-logo.all-providers {
    background: linear-gradient(135deg, #2196F3, #2196F3);
    padding: 6px;
}

.provider-logo.all-providers svg {
    color: white;
    border-radius: 0;
}

/* View Tabs - iOS Segmented */
.combined-tabs .view-tabs {
    display: flex;
    gap: 0;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    margin-left: auto;
}

.view-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.view-tab:active {
    transform: scale(0.97);
}

.view-tab.active {
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.08),
        0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .view-tab.active {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.view-icon {
    font-size: 1rem;
}

.view-label {
    font-weight: inherit;
}

.view-badge {
    position: absolute;
    top: 2px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    background: #0a0a0a;
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Section Headers */
.section-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: -0.3px;
}

/* Content Sections */
.bundles-section {
    padding: 8px 0;
}

/* Bundle Filter Pills */
.bundle-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.bundle-filter::-webkit-scrollbar {
    display: none;
}

.filter-chip {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 100px;
    font-family: var(--font-family);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-chip:active {
    transform: scale(0.97);
}

.filter-chip:hover {
    background: rgba(255, 255, 255, 0.9);
}

.filter-chip.active {
    background: linear-gradient(135deg, #2196F3, #2196F3);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

[data-theme="dark"] .filter-chip {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .filter-chip:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Featured Deals */
.featured-deals-section {
    margin-bottom: 20px;
}

.featured-deals-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* All Bundles Grid */
.bundles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 8px 0;
}

/* Compact iOS Glass Product Card */
.product-card {
    padding: 12px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-radius: 16px;
    border: 0.5px solid rgba(255, 255, 255, 0.8);
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.02);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.04);
}

.product-card:active {
    transform: scale(0.98);
}

[data-theme="dark"] .product-card {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.product-image,
.product-image-placeholder {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        rgba(33, 150, 243, 0.08),
        rgba(100, 181, 246, 0.04));
    font-size: 1.25rem;
}

.product-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.2px;
}

.product-provider {
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
}

.product-price .price {
    font-size: 1rem;
    font-weight: 700;
    color: #2196F3;
    letter-spacing: -0.3px;
}

.product-price .original-price {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

.product-info .sdpkt-watermark {
    font-size: 0.6rem;
    font-weight: 500;
    color: #2196F3;
    opacity: 0.6;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Category Tabs - iOS Pill Style */
.category-tabs {
    display: flex;
    gap: 8px;
    padding: 4px;
    margin: 16px 0;
    background: rgba(118, 118, 128, 0.12);
    border-radius: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.category-tabs::-webkit-scrollbar {
    display: none;
}

[data-theme="dark"] .category-tabs {
    background: rgba(118, 118, 128, 0.24);
}

.category-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-tab:active {
    transform: scale(0.97);
}

.category-tab.active {
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .category-tab.active {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.category-icon {
    font-size: 1.1rem;
}

/* Favorites Empty State */
.favorites-list {
    padding: 16px 0;
}

/* Responsive - keep 2 columns on all sizes */
@media (min-width: 768px) {
    .featured-deals-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

/* SDPKT Brand Banner - Compact */
.sdpkt-brand-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    margin-bottom: 4px;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(100, 181, 246, 0.1));
    border: 1px solid rgba(33, 150, 243, 0.3);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.brand-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-logo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.sdpkt-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 5px;
}

.brand-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.brand-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-family-display);
    line-height: 1.1;
}

.brand-highlight {
    color: var(--primary);
}

.brand-tagline {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 500;
}

.brand-badge {
    background: linear-gradient(135deg, var(--success), #2196F3);
    color: white;
    padding: 4px 8px;
    border-radius: var(--radius-full);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Dark mode brand banner */
[data-theme="dark"] .sdpkt-brand-banner {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(100, 181, 246, 0.05));
    border-color: rgba(33, 150, 243, 0.2);
}

[data-theme="dark"] .brand-name {
    color: var(--text-primary);
}

[data-theme="dark"] .brand-tagline {
    color: var(--text-secondary);
}

/* Responsive brand banner */
@media (max-width: 400px) {
    .sdpkt-brand-banner {
        padding: var(--spacing-sm);
    }

    .brand-logo {
        width: 40px;
        height: 40px;
    }

    .brand-name {
        font-size: 1rem;
    }

    .brand-tagline {
        font-size: 0.7rem;
    }

    .brand-badge {
        font-size: 0.6rem;
        padding: 4px 8px;
    }
}

/* SDPKT Watermark - used on cards */
.sdpkt-watermark {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--primary);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 6px;
}

[data-theme="dark"] .sdpkt-watermark {
    color: var(--primary-light);
    opacity: 0.7;
}

/* Combined Tabs Row */
.combined-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.tabs-divider {
    width: 1px;
    height: 28px;
    background: rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

[data-theme="dark"] .combined-tabs {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(100, 116, 139, 0.3);
}

[data-theme="dark"] .tabs-divider {
    background: rgba(255, 255, 255, 0.1);
}

/* Service Provider Tabs - Inline */
.combined-tabs .provider-tabs {
    display: flex;
    gap: 2px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.provider-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.provider-tab:hover {
    background: rgba(33, 150, 243, 0.05);
    border-color: rgba(33, 150, 243, 0.2);
}

.provider-tab.active {
    background: rgba(33, 150, 243, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

.provider-logo {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 1.5px solid var(--border-color);
    transition: all var(--transition-fast);
    overflow: hidden;
    padding: 1px;
}

.provider-logo svg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.provider-tab.active .provider-logo {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
    transform: scale(1.05);
}

/* All providers globe icon */
.provider-logo.all-providers {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    border-color: var(--primary);
    padding: 4px;
}

.provider-logo.all-providers svg {
    border-radius: 0;
}

/* Provider brand colors - with SVG logos */
.provider-logo.vodacom {
    background: transparent;
    border-color: #2196F3;
    padding: 0;
}

.provider-logo.mtn {
    background: transparent;
    border-color: #2196F3;
    padding: 0;
    border-radius: var(--radius-md);
}

.provider-logo.mtn svg {
    border-radius: var(--radius-sm);
}

.provider-logo.cellc {
    background: transparent;
    border-color: #2196F3;
    padding: 0;
}

.provider-logo.telkom {
    background: transparent;
    border-color: var(--sdpkt-blue);
    padding: 0;
}

.provider-logo.eskom {
    background: transparent;
    border-color: #2196F3;
    padding: 0;
    border-radius: var(--radius-md);
}

.provider-logo.eskom svg {
    border-radius: var(--radius-sm);
}

/* Dark mode provider tabs */
[data-theme="dark"] .provider-tabs {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(100, 116, 139, 0.3);
}

[data-theme="dark"] .provider-tab {
    color: var(--text-secondary);
}

[data-theme="dark"] .provider-tab:hover {
    background: rgba(33, 150, 243, 0.1);
}

[data-theme="dark"] .provider-tab.active {
    background: rgba(33, 150, 243, 0.2);
    color: var(--primary-light);
}

[data-theme="dark"] .provider-logo {
    background: rgba(51, 65, 85, 0.8);
    border-color: rgba(100, 116, 139, 0.4);
}

/* Responsive - smaller screens */
@media (max-width: 639px) {
    .provider-tab {
        min-width: 60px;
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .provider-logo {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .provider-tab span:last-child {
        font-size: 0.65rem;
    }
}

/* View Tabs (Bundles, Favorites, Shop) - Inline */
.combined-tabs .view-tabs {
    display: flex;
    gap: 2px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.view-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 8px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-family: var(--font-family);
    font-size: 0.7rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.view-tab:hover {
    background: rgba(33, 150, 243, 0.05);
}

.view-tab.active {
    background: linear-gradient(135deg, #2196F3, #2196F3);
    color: white;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.view-icon {
    font-size: 0.8rem;
}

.view-label {
    font-weight: 500;
    font-size: 0.65rem;
}

.view-badge {
    position: absolute;
    top: 0px;
    right: 2px;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    background: var(--error);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-tab.active .view-badge {
    background: white;
    color: #2196F3;
}

/* Bundle Filter */
.bundle-filter {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    overflow-x: auto;
    padding-bottom: var(--spacing-xs);
}

.filter-chip {
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.filter-chip:hover {
    border-color: var(--primary);
}

.filter-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Bundles Section */
.bundles-section {
    padding-bottom: var(--spacing-lg);
}

.section-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-sm);
}

.featured-bundle-wrapper {
    margin-bottom: var(--spacing-lg);
}

/* Featured Deals Section */
.featured-deals-section {
    margin-bottom: var(--spacing-xl);
}

.featured-deals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

@media (max-width: 768px) {
    .featured-deals-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .featured-deals-grid {
        grid-template-columns: 1fr;
    }
}

/* Bundles Grid */
.bundles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

@media (max-width: 400px) {
    .bundles-grid {
        grid-template-columns: 1fr;
    }
}

/* Empty State Enhancement */
.empty-state.glassmorphic {
    padding: var(--spacing-xl);
    margin: var(--spacing-md) 0;
}

.empty-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: var(--spacing-sm);
}

/* Modal Header Actions */
.modal-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.favorite-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.favorite-toggle:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.favorite-toggle.active {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

/* Modal Extras (Schedule Link) */
.modal-extras {
    padding: var(--spacing-md) 0;
    border-top: 1px solid var(--border-color);
    margin-top: var(--spacing-md);
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: transparent;
    border: none;
    color: var(--primary);
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.btn-link:hover {
    background: rgba(33, 150, 243, 0.1);
}

.schedule-link span {
    font-size: 1rem;
}

/* Bundle Modal */
.bundle-modal {
    width: 100%;
    max-width: min(90vw, 600px);
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--spacing-lg);
    animation: slideUp 0.3s ease;
}

.bundle-savings-banner {
    background: linear-gradient(135deg, #2196F3, #2196F3);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.bundle-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-lg);
}

.bundle-items-list {
    margin-bottom: var(--spacing-lg);
}

.bundle-item-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

.bundle-item-row:last-child {
    border-bottom: none;
}

.item-icon {
    font-size: 1.25rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.item-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.item-provider {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.item-qty {
    font-weight: 600;
    color: var(--primary);
    font-size: 0.9rem;
}

.item-value {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.bundle-pricing-summary {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.price-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
}

.price-row .original {
    text-decoration: line-through;
    color: var(--text-muted);
}

.price-row.total {
    border-top: 1px solid var(--border-color);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    font-weight: 600;
}

.bundle-total {
    font-size: 1.25rem;
    color: var(--primary);
    font-weight: 700;
}

/* Products Grid (already exists but enhance) */
.product-modal {
    width: 100%;
    max-width: min(90vw, 600px);
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--spacing-lg);
    animation: slideUp 0.3s ease;
}

/* Form Group Enhancements */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

.form-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-family);
    font-size: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: border-color var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
}

.form-input::placeholder {
    color: var(--text-muted);
}

/* Total Row in Modal */
.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-md);
}

.total-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

/* Cart Button in Header */
.cart-btn {
    position: relative;
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--error);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Quantity Selector */
.quantity-selector {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.qty-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.qty-btn:hover:not(:disabled) {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.qty-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.qty-value {
    font-size: 1.25rem;
    font-weight: 600;
    min-width: 40px;
    text-align: center;
}

/* Product Details in Modal */
.product-details {
    margin-bottom: var(--spacing-md);
}

.provider-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(33, 150, 243, 0.1);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-sm);
}

.product-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.price-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
}

.price-display .label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.price-display .amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}

/* Favorite Button in Product Modal */
.tgn-retail-favorite-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    font-size: 1.25rem;
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.tgn-retail-favorite-btn:hover {
    transform: scale(1.1);
}

.tgn-retail-favorite-btn:active {
    transform: scale(0.95);
}

.tgn-retail-favorite-btn.active {
    animation: heartPulse 0.3s ease;
}

@keyframes heartPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Scheduled Purchases Link */
.tgn-retail-scheduled-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    background: rgba(var(--sdpkt-blue-rgb), 0.05);
    border: 1px solid rgba(var(--sdpkt-blue-rgb), 0.1);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tgn-retail-scheduled-link:hover {
    background: rgba(var(--sdpkt-blue-rgb), 0.1);
    border-color: rgba(var(--sdpkt-blue-rgb), 0.2);
}

.tgn-retail-scheduled-link-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.tgn-retail-scheduled-link-icon {
    font-size: 1.25rem;
}

.tgn-retail-scheduled-link-text {
    font-weight: 500;
    color: var(--text-primary);
}

.tgn-retail-scheduled-link-arrow {
    color: var(--text-muted);
}

/* ========================================
   CVM (CUSTOMER VALUE MANAGEMENT) STYLES
   Mobile airtime, data, vouchers
   iOS Premium Design Language
======================================== */

/* === CVM LANDING PAGE === */

/* Info Card - Hero section */
.cvm-info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 20px;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.08) 0%, rgba(33, 150, 243, 0.04) 100%);
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}

.cvm-info-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sdpkt-blue, #2196F3) 0%, #1976D2 100%);
    border-radius: 16px;
    font-size: 1.75rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.25);
}

.cvm-info-card-content {
    flex: 1;
}

.cvm-info-card-content h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin: 0 0 8px 0;
}

.cvm-info-card-content p {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    margin: 0;
    line-height: 1.5;
}

/* Network Badge Grid */
.cvm-network-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 20px 16px;
}

.cvm-network-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.1);
    border-radius: 24px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
    transition: all 0.2s ease;
}

.cvm-network-badge:hover {
    border-color: var(--sdpkt-blue, #2196F3);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.12);
}

/* Action Cards Grid */
.cvm-action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 20px;
}

.cvm-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.1);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.cvm-action-card:hover {
    border-color: var(--sdpkt-blue, #2196F3);
    box-shadow: 0 4px 16px rgba(33, 150, 243, 0.12);
    transform: translateY(-2px);
}

.cvm-action-card:active {
    transform: scale(0.98);
}

.cvm-action-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(33, 150, 243, 0.1);
    border-radius: 12px;
    font-size: 1.5rem;
}

.cvm-action-card-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.cvm-action-card-description {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
    line-height: 1.4;
}

/* === CVM PRODUCT LIST === */

/* Search */
.cvm-search-container {
    padding: 16px 20px;
    background: #FFFFFF;
    position: sticky;
    top: 56px;
    z-index: 10;
}

.cvm-search-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(10, 10, 10, 0.04);
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 1rem;
    color: var(--text-primary, #1a1a1a);
    transition: all 0.2s ease;
}

.cvm-search-input:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--sdpkt-blue, #2196F3);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.cvm-search-input::placeholder {
    color: var(--text-muted, #999);
}

/* Filter Section */
.cvm-filter-section {
    padding: 12px 20px;
    background: #FFFFFF;
}

.cvm-filter-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary, #666);
    margin-bottom: 10px;
}

.cvm-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cvm-filter-chip {
    padding: 8px 16px;
    background: rgba(10, 10, 10, 0.04);
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary, #666);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cvm-filter-chip:hover {
    background: rgba(33, 150, 243, 0.08);
    color: var(--sdpkt-blue, #2196F3);
}

.cvm-filter-chip.active {
    background: var(--sdpkt-blue, #2196F3);
    color: #FFFFFF;
    border-color: var(--sdpkt-blue, #2196F3);
}

/* Results Count */
.cvm-results-count {
    padding: 12px 20px;
    font-size: 0.8125rem;
    color: var(--text-muted, #999);
    background: rgba(10, 10, 10, 0.02);
    border-top: 1px solid rgba(10, 10, 10, 0.06);
}

/* Product List */
.cvm-product-list {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(10, 10, 10, 0.06);
}

.cvm-product-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #FFFFFF;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: left;
}

.cvm-product-item:first-child {
    border-radius: 12px 12px 0 0;
}

.cvm-product-item:last-child {
    border-radius: 0 0 12px 12px;
}

.cvm-product-item:only-child {
    border-radius: 12px;
}

.cvm-product-item:hover {
    background: rgba(33, 150, 243, 0.04);
}

.cvm-product-item:active {
    background: rgba(33, 150, 243, 0.08);
}

.cvm-product-item-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 10, 0.04);
    border-radius: 12px;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.cvm-product-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cvm-product-item-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cvm-product-item-network {
    font-size: 0.8125rem;
    color: var(--text-secondary, #666);
}

.cvm-product-item-category {
    font-size: 0.75rem;
    color: var(--text-muted, #999);
    margin-top: 2px;
}

.cvm-product-item-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sdpkt-blue, #2196F3);
    flex-shrink: 0;
}

.cvm-product-item-arrow {
    font-size: 1.25rem;
    color: var(--text-muted, #999);
    flex-shrink: 0;
}

/* No Results */
.cvm-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    text-align: center;
}

.cvm-no-results-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.6;
}

.cvm-no-results-text {
    font-size: 0.9375rem;
    color: var(--text-secondary, #666);
    margin-bottom: 20px;
    max-width: 280px;
}

/* === CVM PRODUCT DETAIL === */

.cvm-product-detail-card {
    padding: 24px 20px;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.06) 0%, rgba(33, 150, 243, 0.02) 100%);
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}

.cvm-product-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.cvm-product-detail-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 16px;
    font-size: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.cvm-product-detail-title {
    flex: 1;
}

.cvm-product-detail-title h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #1a1a1a);
    margin: 0 0 4px 0;
}

.cvm-product-detail-network {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.cvm-product-detail-description {
    font-size: 0.9375rem;
    color: var(--text-secondary, #666);
    line-height: 1.6;
    margin-bottom: 20px;
}

.cvm-product-detail-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cvm-product-detail-price-label {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.cvm-product-detail-price-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sdpkt-blue, #2196F3);
}

/* Product Info List */
.cvm-product-info-list {
    padding: 0 20px 16px;
}

.cvm-product-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}

.cvm-product-info-item:last-child {
    border-bottom: none;
}

.cvm-product-info-label {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.cvm-product-info-value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
}

.cvm-status-active {
    color: #4CAF50;
}

.cvm-status-inactive {
    color: #F44336;
}

/* How It Works */
.cvm-how-it-works {
    padding: 0 20px 24px;
}

.cvm-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}

.cvm-step:last-child {
    border-bottom: none;
}

.cvm-step-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sdpkt-blue, #2196F3);
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.cvm-step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cvm-step-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.cvm-step-description {
    font-size: 0.8125rem;
    color: var(--text-secondary, #666);
}

/* Purchase Button */
.cvm-purchase-btn {
    margin: 0 20px 24px;
    width: calc(100% - 40px);
}

.cvm-unavailable-notice {
    margin: 0 20px 24px;
    padding: 16px;
    background: rgba(244, 67, 54, 0.08);
    border: 1px solid rgba(244, 67, 54, 0.2);
    border-radius: 12px;
    text-align: center;
    color: #D32F2F;
    font-size: 0.875rem;
    font-weight: 500;
}

/* === CVM PURCHASE PAGE === */

.cvm-purchase-product-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.06) 0%, rgba(33, 150, 243, 0.02) 100%);
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}

.cvm-purchase-product-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 14px;
    font-size: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cvm-purchase-product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cvm-purchase-product-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.cvm-purchase-product-network {
    font-size: 0.8125rem;
    color: var(--text-secondary, #666);
}

.cvm-purchase-product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sdpkt-blue, #2196F3);
}

/* Input Section */
.cvm-input-section {
    padding: 16px 20px;
}

.cvm-input-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin-bottom: 8px;
}

.cvm-input {
    width: 100%;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.15);
    border-radius: 12px;
    font-size: 1rem;
    color: var(--text-primary, #1a1a1a);
    transition: all 0.2s ease;
}

.cvm-input:focus {
    outline: none;
    border-color: var(--sdpkt-blue, #2196F3);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.cvm-input.error {
    border-color: #F44336;
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1);
}

.cvm-input::placeholder {
    color: var(--text-muted, #999);
}

.cvm-input-error {
    display: block;
    font-size: 0.8125rem;
    color: #D32F2F;
    margin-top: 6px;
}

.cvm-input-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted, #999);
    margin-top: 6px;
}

/* Purchase Summary */
.cvm-purchase-summary {
    margin: 0 20px;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.cvm-purchase-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}

.cvm-purchase-summary-row:last-child {
    border-bottom: none;
}

.cvm-purchase-summary-row.total {
    background: rgba(33, 150, 243, 0.04);
    font-weight: 600;
}

.cvm-purchase-summary-row.total span:last-child {
    color: var(--sdpkt-blue, #2196F3);
    font-size: 1.125rem;
}

/* Error Banner */
.cvm-error-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 20px;
    padding: 14px 16px;
    background: rgba(244, 67, 54, 0.08);
    border: 1px solid rgba(244, 67, 54, 0.2);
    border-radius: 12px;
    color: #D32F2F;
    font-size: 0.875rem;
}

.cvm-error-icon {
    font-size: 1.125rem;
    flex-shrink: 0;
}

/* Terms */
.cvm-terms {
    padding: 16px 20px;
}

.cvm-terms p {
    font-size: 0.8125rem;
    color: var(--text-muted, #999);
    text-align: center;
    margin: 0;
}

/* Action Buttons */
.cvm-action-buttons {
    display: flex;
    gap: 12px;
    padding: 16px 20px 24px;
}

.cvm-action-buttons .tgn-retail-btn {
    flex: 1;
}

/* Processing State */
.cvm-processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 20px;
    text-align: center;
}

.cvm-processing h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin: 24px 0 8px;
}

.cvm-processing p {
    font-size: 0.9375rem;
    color: var(--text-secondary, #666);
    margin: 0;
}

.cvm-processing-warning {
    font-size: 0.8125rem !important;
    color: #FF9800 !important;
    margin-top: 16px !important;
}

/* === CVM SUCCESS PAGE === */

.cvm-success-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px;
    text-align: center;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(76, 175, 80, 0.02) 100%);
}

.cvm-success-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4CAF50 0%, #43A047 100%);
    border-radius: 50%;
    font-size: 2rem;
    color: #FFFFFF;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(76, 175, 80, 0.3);
    animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.cvm-success-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2E7D32;
    margin: 0 0 8px 0;
}

.cvm-success-header p {
    font-size: 0.9375rem;
    color: var(--text-secondary, #666);
    margin: 0;
}

/* Voucher Card */
.cvm-voucher-card {
    margin: 20px;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.1);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.cvm-voucher-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: linear-gradient(135deg, var(--sdpkt-blue, #2196F3) 0%, #1976D2 100%);
}

.cvm-voucher-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
}

.cvm-voucher-card-network {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.85);
}

/* Voucher Fields */
.cvm-voucher-field {
    padding: 16px;
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}

.cvm-voucher-field:last-child {
    border-bottom: none;
}

.cvm-voucher-field.highlight {
    background: rgba(33, 150, 243, 0.04);
}

.cvm-voucher-field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted, #999);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.cvm-voucher-field-value-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cvm-voucher-field-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
    font-family: 'SF Mono', 'Fira Code', monospace;
    letter-spacing: 1px;
}

.cvm-voucher-field-value.large {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sdpkt-blue, #2196F3);
}

.cvm-copy-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(33, 150, 243, 0.1);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cvm-copy-btn:hover {
    background: rgba(33, 150, 243, 0.2);
}

.cvm-copy-btn:active {
    transform: scale(0.95);
}

/* Transaction Details */
.cvm-transaction-details {
    margin: 0 20px;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.cvm-transaction-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}

.cvm-transaction-row:last-child {
    border-bottom: none;
}

.cvm-transaction-row.highlight {
    background: rgba(76, 175, 80, 0.06);
}

.cvm-transaction-row.highlight span:last-child {
    color: #2E7D32;
    font-weight: 600;
}

/* Instructions */
.cvm-instructions {
    margin: 20px;
    padding: 20px;
    background: rgba(255, 152, 0, 0.06);
    border: 1px solid rgba(255, 152, 0, 0.2);
    border-radius: 12px;
}

.cvm-instructions-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin-bottom: 12px;
}

.cvm-instructions-list {
    margin: 0;
    padding-left: 20px;
}

.cvm-instructions-list li {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    line-height: 1.6;
    margin-bottom: 8px;
}

.cvm-instructions-list li:last-child {
    margin-bottom: 0;
}

.cvm-instructions-list strong {
    color: var(--sdpkt-blue, #2196F3);
}

/* Copy Notification Toast */
.cvm-copy-notification {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.85);
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 24px;
    z-index: 1000;
    animation: toastFadeIn 0.3s ease;
}

@keyframes toastFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Success Actions */
.cvm-success-actions {
    display: flex;
    gap: 12px;
    padding: 20px;
}

.cvm-success-actions .tgn-retail-btn {
    flex: 1;
}

/* Back Home Link */
.cvm-back-home-link {
    display: block;
    width: 100%;
    padding: 16px 20px;
    background: transparent;
    border: none;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--sdpkt-blue, #2196F3);
    cursor: pointer;
    transition: color 0.2s ease;
}

.cvm-back-home-link:hover {
    color: #1976D2;
}

/* === RESPONSIVE - CVM === */

@media (max-width: 380px) {
    .cvm-action-grid {
        grid-template-columns: 1fr;
    }

    .cvm-voucher-field-value.large {
        font-size: 1.25rem;
    }

    .cvm-filter-chips {
        gap: 6px;
    }

    .cvm-filter-chip {
        padding: 6px 12px;
        font-size: 0.8125rem;
    }
}

/* === CVM NAVIGATION HIGHLIGHT === */

/* Highlighted link card for CVM Vouchers */
.tgn-retail-scheduled-link.cvm-highlight {
    background: linear-gradient(135deg, rgba(var(--sdpkt-blue-rgb), 0.08) 0%, rgba(var(--sdpkt-blue-rgb), 0.04) 100%);
    border: 1px solid rgba(var(--sdpkt-blue-rgb), 0.2);
}

.tgn-retail-scheduled-link.cvm-highlight:active {
    background: linear-gradient(135deg, rgba(var(--sdpkt-blue-rgb), 0.15) 0%, rgba(var(--sdpkt-blue-rgb), 0.08) 100%);
}

/* "New" badge on navigation links */
.tgn-retail-scheduled-link-badge {
    padding: 4px 10px;
    background: linear-gradient(135deg, var(--sdpkt-blue) 0%, #1976D2 100%);
    color: var(--sdpkt-white);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 10px;
    margin-right: 8px;
}

/* ============================================
   TRAFFIC FINES - Mobile Premium Design
   ============================================ */

/* === TRAFFIC FINES LANDING PAGE === */

.traffic-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(var(--sdpkt-blue-rgb), 0.08) 0%, rgba(var(--sdpkt-blue-rgb), 0.04) 100%);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.traffic-info-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.traffic-info-content h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--sdpkt-blue);
    margin: 0 0 4px 0;
}

.traffic-info-content p {
    font-size: 0.875rem;
    color: rgba(var(--sdpkt-black-rgb), 0.7);
    margin: 0;
    line-height: 1.5;
}

.traffic-lookup-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.traffic-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.traffic-input-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sdpkt-black);
}

.traffic-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    font-family: var(--font-family);
    color: var(--sdpkt-black);
    background: var(--sdpkt-white);
    border: 1.5px solid rgba(var(--sdpkt-black-rgb), 0.15);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
}

.traffic-input:focus {
    outline: none;
    border-color: var(--sdpkt-blue);
    box-shadow: 0 0 0 3px rgba(var(--sdpkt-blue-rgb), 0.1);
}

.traffic-input.error {
    border-color: #DC3545;
    background: rgba(220, 53, 69, 0.02);
}

.traffic-input::placeholder {
    color: rgba(var(--sdpkt-black-rgb), 0.4);
}

.traffic-input-error {
    font-size: 0.8125rem;
    color: #DC3545;
    font-weight: 500;
}

.traffic-input-hint {
    font-size: 0.75rem;
    color: rgba(var(--sdpkt-black-rgb), 0.5);
}

.traffic-error-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: var(--radius-md);
    color: #DC3545;
    font-size: 0.875rem;
}

.traffic-error-icon {
    font-size: 1.125rem;
    line-height: 1;
}

.traffic-lookup-btn {
    margin-top: 8px;
}

.traffic-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.traffic-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.traffic-step-number {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sdpkt-blue) 0%, #1976D2 100%);
    color: var(--sdpkt-white);
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.traffic-step-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
}

.traffic-step-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sdpkt-black);
}

.traffic-step-description {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
}

.traffic-quick-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.traffic-quick-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    width: 100%;
    text-align: left;
}

.traffic-quick-link:hover {
    background: rgba(var(--sdpkt-blue-rgb), 0.04);
}

.traffic-quick-link:active {
    transform: scale(0.98);
}

.traffic-quick-link-icon {
    font-size: 1.25rem;
}

.traffic-quick-link-text {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--sdpkt-black);
}

.traffic-quick-link-arrow {
    font-size: 1.25rem;
    color: rgba(var(--sdpkt-black-rgb), 0.3);
    font-weight: 300;
}

.traffic-notice {
    padding: 16px;
    background: rgba(var(--sdpkt-blue-rgb), 0.04);
    border-radius: var(--radius-md);
}

.traffic-notice-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sdpkt-blue);
    margin-bottom: 8px;
}

.traffic-notice-list {
    margin: 0;
    padding-left: 20px;
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.7);
    line-height: 1.6;
}

.traffic-notice-list li {
    margin-bottom: 4px;
}

/* === TRAFFIC FINE DETAIL PAGE === */

.traffic-fine-card {
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 20px;
}

.traffic-fine-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.traffic-fine-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 1.25rem;
    background: rgba(var(--sdpkt-blue-rgb), 0.1);
    color: var(--sdpkt-blue);
}

.traffic-fine-card-icon.status-paid {
    background: rgba(34, 197, 94, 0.1);
    color: #22C55E;
}

.traffic-fine-card-icon.status-pending {
    background: rgba(var(--sdpkt-blue-rgb), 0.1);
    color: var(--sdpkt-blue);
}

.traffic-fine-card-icon.status-overdue {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

.traffic-fine-card-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.traffic-fine-notice {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sdpkt-black);
}

.traffic-fine-status {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 12px;
    width: fit-content;
}

.traffic-fine-status.status-paid {
    background: rgba(34, 197, 94, 0.1);
    color: #22C55E;
}

.traffic-fine-status.status-pending {
    background: rgba(var(--sdpkt-blue-rgb), 0.1);
    color: var(--sdpkt-blue);
}

.traffic-fine-status.status-overdue {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

.traffic-fine-amount-section {
    text-align: center;
    padding: 16px 0;
    border-top: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-bottom: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    margin-bottom: 16px;
}

.traffic-fine-amount-label {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
    margin-bottom: 4px;
    display: block;
}

.traffic-fine-amount-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--sdpkt-blue);
    display: block;
}

.traffic-fine-amount-original {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.5);
    text-decoration: line-through;
    display: block;
    margin-top: 4px;
}

.traffic-fine-due-date {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.875rem;
}

.traffic-fine-due-label {
    color: rgba(var(--sdpkt-black-rgb), 0.6);
}

.traffic-fine-due-value {
    font-weight: 600;
    color: var(--sdpkt-black);
}

.traffic-fine-due-value.overdue {
    color: #EF4444;
}

.traffic-fine-overdue-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 8px;
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
    border-radius: 10px;
}

.traffic-details-list {
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
}

.traffic-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(var(--sdpkt-black-rgb), 0.06);
}

.traffic-detail-item:last-child {
    border-bottom: none;
}

.traffic-detail-label {
    font-size: 0.875rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
}

.traffic-detail-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sdpkt-black);
    text-align: right;
    max-width: 60%;
}

.traffic-payment-summary {
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
}

.traffic-payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(var(--sdpkt-black-rgb), 0.06);
    font-size: 0.875rem;
}

.traffic-payment-row:last-child {
    border-bottom: none;
}

.traffic-payment-row.penalty {
    color: #EF4444;
}

.traffic-payment-row.total {
    background: rgba(var(--sdpkt-blue-rgb), 0.04);
    font-weight: 600;
}

.traffic-payment-row.total span:last-child {
    color: var(--sdpkt-blue);
    font-size: 1rem;
}

.traffic-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.traffic-warning-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.traffic-warning-content strong {
    display: block;
    font-size: 0.875rem;
    color: #EF4444;
    margin-bottom: 4px;
}

.traffic-warning-content p {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.7);
    margin: 0;
    line-height: 1.5;
}

.traffic-pay-btn {
    width: 100%;
    margin-bottom: 16px;
}

.traffic-terms {
    text-align: center;
}

.traffic-terms p {
    font-size: 0.75rem;
    color: rgba(var(--sdpkt-black-rgb), 0.5);
    margin: 0;
}

/* === TRAFFIC FINE PAYMENT PAGE === */

.traffic-payment-card {
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 20px;
}

.traffic-payment-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.traffic-payment-card-icon {
    font-size: 2rem;
}

.traffic-payment-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.traffic-payment-card-title {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
}

.traffic-payment-card-notice {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sdpkt-black);
}

.traffic-payment-description {
    font-size: 0.875rem;
    color: rgba(var(--sdpkt-black-rgb), 0.7);
    margin: 0 0 8px 0;
}

.traffic-payment-authority {
    font-size: 0.75rem;
    color: rgba(var(--sdpkt-black-rgb), 0.5);
}

.traffic-payment-details {
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
}

.traffic-payment-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(var(--sdpkt-black-rgb), 0.06);
    font-size: 0.875rem;
}

.traffic-payment-detail-row:last-child {
    border-bottom: none;
}

.traffic-payment-amount {
    font-weight: 700;
    color: var(--sdpkt-blue);
}

.traffic-wallet-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.traffic-wallet-icon {
    font-size: 1.75rem;
}

.traffic-wallet-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.traffic-wallet-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sdpkt-black);
}

.traffic-wallet-balance {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
}

.traffic-wallet-status {
    font-size: 1.25rem;
}

.traffic-wallet-status.sufficient {
    color: #22C55E;
}

.traffic-wallet-status.insufficient {
    color: #EF4444;
}

.traffic-insufficient-funds {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.traffic-insufficient-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.traffic-insufficient-content strong {
    display: block;
    font-size: 0.875rem;
    color: #EF4444;
    margin-bottom: 4px;
}

.traffic-insufficient-content p {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.7);
    margin: 0 0 12px 0;
}

.traffic-terms-checkbox {
    margin-bottom: 20px;
}

.traffic-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.traffic-checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--sdpkt-blue);
}

.traffic-checkbox-text {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.7);
    line-height: 1.5;
}

.traffic-action-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.traffic-action-buttons .tgn-retail-btn {
    flex: 1;
}

.traffic-processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.traffic-processing h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sdpkt-black);
    margin: 20px 0 8px 0;
}

.traffic-processing p {
    font-size: 0.875rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
    margin: 0;
}

.traffic-processing-warning {
    color: #EF4444 !important;
    font-weight: 500;
    margin-top: 16px !important;
}

/* === TRAFFIC FINE SUCCESS PAGE === */

.traffic-success-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
}

.traffic-success-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    color: var(--sdpkt-white);
    font-size: 2.5rem;
    font-weight: 700;
    border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
    animation: successPulse 2s ease infinite;
}

@keyframes successPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.traffic-success-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sdpkt-black);
    margin: 0 0 8px 0;
}

.traffic-success-header p {
    font-size: 0.9375rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
    margin: 0;
}

.traffic-receipt-card {
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
}

.traffic-receipt-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: rgba(var(--sdpkt-blue-rgb), 0.04);
    border-bottom: 1px solid rgba(var(--sdpkt-black-rgb), 0.06);
}

.traffic-receipt-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sdpkt-black);
}

.traffic-receipt-card-number {
    font-size: 0.8125rem;
    color: var(--sdpkt-blue);
    font-weight: 500;
}

.traffic-receipt-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(var(--sdpkt-black-rgb), 0.06);
}

.traffic-receipt-field:last-child {
    border-bottom: none;
}

.traffic-receipt-field.highlight {
    background: rgba(var(--sdpkt-blue-rgb), 0.02);
}

.traffic-receipt-field-label {
    font-size: 0.875rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
}

.traffic-receipt-field-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sdpkt-black);
}

.traffic-receipt-field-value.amount {
    color: var(--sdpkt-blue);
    font-size: 1.125rem;
}

.traffic-transaction-details {
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
}

.traffic-transaction-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(var(--sdpkt-black-rgb), 0.06);
    font-size: 0.875rem;
}

.traffic-transaction-row:last-child {
    border-bottom: none;
}

.traffic-transaction-row.highlight {
    background: rgba(var(--sdpkt-blue-rgb), 0.04);
}

.traffic-transaction-row.highlight span:last-child {
    color: var(--sdpkt-blue);
    font-weight: 600;
}

.traffic-info-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: rgba(var(--sdpkt-blue-rgb), 0.04);
    border-radius: var(--radius-md);
    margin-bottom: 24px;
}

.traffic-info-notice-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.traffic-info-notice-content strong {
    display: block;
    font-size: 0.875rem;
    color: var(--sdpkt-blue);
    margin-bottom: 8px;
}

.traffic-info-notice-content ul {
    margin: 0;
    padding-left: 18px;
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.7);
    line-height: 1.6;
}

.traffic-info-notice-content li {
    margin-bottom: 4px;
}

.traffic-success-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.traffic-success-actions .tgn-retail-btn {
    flex: 1;
}

.traffic-back-home-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sdpkt-blue);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-family);
}

.traffic-back-home-link:hover {
    text-decoration: underline;
}

/* === TRAFFIC FINE HISTORY PAGE === */

.traffic-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.traffic-empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.4;
}

.traffic-empty-state h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--sdpkt-black);
    margin: 0 0 8px 0;
}

.traffic-empty-state p {
    font-size: 0.875rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
    margin: 0 0 20px 0;
}

.traffic-history-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.traffic-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: var(--radius-md);
}

.traffic-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sdpkt-blue);
}

.traffic-stat-label {
    font-size: 0.75rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
    margin-top: 4px;
}

.traffic-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.traffic-history-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.traffic-history-item:hover {
    background: rgba(var(--sdpkt-blue-rgb), 0.04);
}

.traffic-history-item:active {
    transform: scale(0.98);
}

.traffic-history-item-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
}

.traffic-history-item-icon .status-success {
    background: rgba(34, 197, 94, 0.1);
    color: #22C55E;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.traffic-history-item-icon .status-failed {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.traffic-history-item-content {
    flex: 1;
    min-width: 0;
}

.traffic-history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.traffic-history-notice {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sdpkt-black);
}

.traffic-history-amount {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--sdpkt-blue);
}

.traffic-history-item-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.traffic-history-authority {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.traffic-history-date {
    font-size: 0.75rem;
    color: rgba(var(--sdpkt-black-rgb), 0.5);
    flex-shrink: 0;
}

.traffic-history-item-chevron {
    font-size: 1.25rem;
    color: rgba(var(--sdpkt-black-rgb), 0.3);
    font-weight: 300;
}

/* === RESPONSIVE - TRAFFIC FINES === */

@media (max-width: 380px) {
    .traffic-history-stats {
        grid-template-columns: 1fr;
    }

    .traffic-stat-value {
        font-size: 1.25rem;
    }

    .traffic-fine-amount-value {
        font-size: 1.5rem;
    }

    .traffic-success-icon {
        width: 64px;
        height: 64px;
        font-size: 2rem;
    }
}

/* ============================================================
   SROD VOUCHERS - Social Relief of Distress
   ============================================================ */

/* === SROD HERO SECTION === */

.srod-hero {
    text-align: center;
    padding: 32px 20px;
    background: linear-gradient(135deg, rgba(var(--sdpkt-blue-rgb), 0.1) 0%, rgba(var(--sdpkt-blue-rgb), 0.05) 100%);
    border-radius: 16px;
    margin-bottom: 24px;
}

.srod-hero-icon {
    font-size: 3.5rem;
    margin-bottom: 16px;
}

.srod-hero h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sdpkt-black);
    margin: 0 0 8px 0;
}

.srod-hero p {
    font-size: 0.9375rem;
    color: rgba(var(--sdpkt-black-rgb), 0.7);
    margin: 0;
    line-height: 1.5;
}

/* === SROD INFO CARD === */

.srod-info-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: rgba(var(--sdpkt-blue-rgb), 0.08);
    border-radius: 12px;
    margin-bottom: 24px;
}

.srod-info-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.srod-info-content strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sdpkt-black);
    margin-bottom: 4px;
}

.srod-info-content p {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.7);
    margin: 0;
    line-height: 1.5;
}

/* === SROD ACTION GRID === */

.srod-action-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.srod-action-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.srod-action-card:hover {
    border-color: var(--sdpkt-blue);
    box-shadow: 0 4px 12px rgba(var(--sdpkt-blue-rgb), 0.15);
}

.srod-action-card:active {
    transform: scale(0.98);
}

.srod-action-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.srod-action-icon.redeem {
    background: linear-gradient(135deg, rgba(var(--sdpkt-blue-rgb), 0.15) 0%, rgba(var(--sdpkt-blue-rgb), 0.08) 100%);
}

.srod-action-icon.purchase {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
}

.srod-action-content {
    flex: 1;
    min-width: 0;
}

.srod-action-content h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sdpkt-black);
    margin: 0 0 4px 0;
}

.srod-action-content p {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
    margin: 0;
    line-height: 1.4;
}

.srod-action-chevron {
    font-size: 1.5rem;
    color: rgba(var(--sdpkt-black-rgb), 0.3);
    font-weight: 300;
    flex-shrink: 0;
}

/* === SROD FEATURES === */

.srod-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.srod-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--sdpkt-white);
    border-radius: 8px;
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.06);
}

.srod-feature-icon {
    color: var(--sdpkt-blue);
    font-weight: 600;
}

.srod-feature-text {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.8);
}

/* === SROD HELP NOTICE === */

.srod-help-notice {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: rgba(var(--sdpkt-black-rgb), 0.03);
    border-radius: 12px;
    margin-bottom: 24px;
}

.srod-help-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.srod-help-content strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sdpkt-black);
    margin-bottom: 4px;
}

.srod-help-content p {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
    margin: 0;
    line-height: 1.4;
}

/* === SROD INSTRUCTIONS === */

.srod-instructions {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(var(--sdpkt-blue-rgb), 0.1) 0%, rgba(var(--sdpkt-blue-rgb), 0.05) 100%);
    border-radius: 12px;
    margin-bottom: 24px;
}

.srod-instructions-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.srod-instructions-content strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sdpkt-black);
    margin-bottom: 4px;
}

.srod-instructions-content p {
    font-size: 0.875rem;
    color: rgba(var(--sdpkt-black-rgb), 0.7);
    margin: 0;
    line-height: 1.5;
}

/* === SROD INPUT GROUP === */

.srod-input-group {
    margin-bottom: 20px;
}

.srod-input-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sdpkt-black);
    margin-bottom: 8px;
}

.srod-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    color: var(--sdpkt-black);
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.15);
    border-radius: 10px;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.srod-input:focus {
    border-color: var(--sdpkt-blue);
    box-shadow: 0 0 0 3px rgba(var(--sdpkt-blue-rgb), 0.1);
}

.srod-input.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.srod-input::placeholder {
    color: rgba(var(--sdpkt-black-rgb), 0.4);
}

.srod-input-hint {
    display: block;
    font-size: 0.75rem;
    color: rgba(var(--sdpkt-black-rgb), 0.5);
    margin-top: 6px;
}

/* === SROD TYPE GRID (Purchase) === */

.srod-type-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.srod-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    background: var(--sdpkt-white);
    border: 2px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.srod-type-card:hover {
    border-color: rgba(var(--sdpkt-blue-rgb), 0.3);
}

.srod-type-card.selected {
    border-color: var(--sdpkt-blue);
    background: rgba(var(--sdpkt-blue-rgb), 0.05);
}

.srod-type-icon {
    font-size: 1.5rem;
}

.srod-type-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sdpkt-black);
    text-align: center;
}

/* === SROD AMOUNT GRID === */

.srod-amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.srod-amount-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--sdpkt-white);
    border: 2px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.srod-amount-card:hover {
    border-color: rgba(var(--sdpkt-blue-rgb), 0.3);
}

.srod-amount-card.selected {
    border-color: var(--sdpkt-blue);
    background: rgba(var(--sdpkt-blue-rgb), 0.05);
}

.srod-amount-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sdpkt-black);
}

.srod-amount-card.selected .srod-amount-value {
    color: var(--sdpkt-blue);
}

/* === SROD WALLET CARD === */

.srod-wallet-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: 12px;
    margin-bottom: 16px;
}

.srod-wallet-icon {
    font-size: 1.5rem;
}

.srod-wallet-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.srod-wallet-label {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
}

.srod-wallet-balance {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sdpkt-black);
}

.srod-wallet-status {
    font-size: 1.25rem;
    font-weight: 600;
}

.srod-wallet-status.sufficient {
    color: #10b981;
}

.srod-wallet-status.insufficient {
    color: #ef4444;
}

/* === SROD INSUFFICIENT FUNDS === */

.srod-insufficient-funds {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
    margin-bottom: 20px;
}

.srod-insufficient-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.srod-insufficient-content strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #dc2626;
    margin-bottom: 4px;
}

.srod-insufficient-content p {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.7);
    margin: 0 0 12px 0;
}

/* === SROD ERROR BANNER === */

.srod-error-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    margin-bottom: 20px;
}

.srod-error-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.srod-error-banner span:last-child {
    font-size: 0.875rem;
    color: #dc2626;
}

/* === SROD TERMS CHECKBOX === */

.srod-terms-checkbox {
    margin-bottom: 20px;
}

.srod-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.srod-checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--sdpkt-blue);
    flex-shrink: 0;
}

.srod-checkbox-text {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.7);
    line-height: 1.5;
}

/* === SROD NOTICE === */

.srod-notice {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: rgba(var(--sdpkt-blue-rgb), 0.06);
    border-radius: 12px;
    margin-bottom: 24px;
}

.srod-notice-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.srod-notice-content strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sdpkt-black);
    margin-bottom: 8px;
}

.srod-notice-content ul {
    margin: 0;
    padding-left: 16px;
}

.srod-notice-content li {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.7);
    line-height: 1.6;
}

/* === SROD SUMMARY === */

.srod-summary {
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.srod-summary-header {
    padding: 12px 16px;
    background: rgba(var(--sdpkt-black-rgb), 0.03);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sdpkt-black);
}

.srod-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid rgba(var(--sdpkt-black-rgb), 0.06);
}

.srod-summary-row span:first-child {
    font-size: 0.875rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
}

.srod-summary-row span:last-child {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sdpkt-black);
}

.srod-summary-row.total {
    background: rgba(var(--sdpkt-blue-rgb), 0.05);
}

.srod-summary-row.total span:first-child {
    font-weight: 600;
    color: var(--sdpkt-black);
}

.srod-summary-row.total span:last-child {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sdpkt-blue);
}

/* === SROD ACTION BUTTONS === */

.srod-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

/* === SROD PROCESSING === */

.srod-processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.srod-processing h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--sdpkt-black);
    margin: 24px 0 8px 0;
}

.srod-processing p {
    font-size: 0.9375rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
    margin: 0;
}

.srod-processing-warning {
    font-size: 0.8125rem !important;
    color: #f59e0b !important;
    margin-top: 16px !important;
}

/* === SROD SUCCESS PAGE === */

.srod-success-header {
    text-align: center;
    padding: 32px 20px;
    margin-bottom: 24px;
}

.srod-success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--sdpkt-white);
}

.srod-success-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sdpkt-black);
    margin: 0 0 8px 0;
}

.srod-success-header p {
    font-size: 0.9375rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
    margin: 0;
}

/* === SROD VOUCHER CARD === */

.srod-voucher-card {
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
}

.srod-voucher-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: linear-gradient(135deg, rgba(var(--sdpkt-blue-rgb), 0.1) 0%, rgba(var(--sdpkt-blue-rgb), 0.05) 100%);
}

.srod-voucher-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sdpkt-black);
}

.srod-voucher-card-badge {
    padding: 4px 10px;
    background: var(--sdpkt-blue);
    color: var(--sdpkt-white);
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.srod-voucher-field {
    padding: 16px;
    border-top: 1px solid rgba(var(--sdpkt-black-rgb), 0.06);
}

.srod-voucher-field.highlight {
    background: rgba(var(--sdpkt-blue-rgb), 0.03);
}

.srod-voucher-field.pin {
    background: rgba(245, 158, 11, 0.08);
}

.srod-voucher-field-label {
    display: block;
    font-size: 0.75rem;
    color: rgba(var(--sdpkt-black-rgb), 0.5);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.srod-voucher-field-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--sdpkt-black);
}

.srod-voucher-field-value.pin-value {
    font-family: 'Courier New', monospace;
    font-size: 1.25rem;
    color: #d97706;
    letter-spacing: 2px;
}

.srod-voucher-field-value.amount {
    color: var(--sdpkt-blue);
    font-size: 1.25rem;
}

.srod-voucher-field-hint {
    display: block;
    font-size: 0.6875rem;
    color: #f59e0b;
    margin-top: 4px;
}

/* === SROD TRANSACTION DETAILS === */

.srod-transaction-details {
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}

.srod-transaction-row {
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
    border-top: 1px solid rgba(var(--sdpkt-black-rgb), 0.06);
}

.srod-transaction-row:first-child {
    border-top: none;
}

.srod-transaction-row span:first-child {
    font-size: 0.875rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
}

.srod-transaction-row span:last-child {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sdpkt-black);
}

.srod-transaction-row.highlight {
    background: rgba(var(--sdpkt-blue-rgb), 0.05);
}

.srod-transaction-row.highlight span:last-child {
    font-weight: 600;
    color: var(--sdpkt-blue);
}

/* === SROD IMPORTANT NOTICE === */

.srod-important-notice {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 12px;
    margin-bottom: 24px;
}

.srod-important-notice-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.srod-important-notice-content strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #d97706;
    margin-bottom: 8px;
}

.srod-important-notice-content ul {
    margin: 0;
    padding-left: 16px;
}

.srod-important-notice-content li {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.7);
    line-height: 1.6;
}

/* === SROD INFO NOTICE === */

.srod-info-notice {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: rgba(var(--sdpkt-blue-rgb), 0.06);
    border-radius: 12px;
    margin-bottom: 24px;
}

.srod-info-notice-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.srod-info-notice-content strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sdpkt-black);
    margin-bottom: 8px;
}

.srod-info-notice-content ul {
    margin: 0;
    padding-left: 16px;
}

.srod-info-notice-content li {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.7);
    line-height: 1.6;
}

/* === SROD SUCCESS ACTIONS === */

.srod-success-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.srod-back-home-link {
    display: block;
    width: 100%;
    padding: 14px;
    background: transparent;
    border: none;
    color: var(--sdpkt-blue);
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}

/* === SROD EMPTY STATE === */

.srod-empty-state {
    text-align: center;
    padding: 48px 20px;
}

.srod-empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.srod-empty-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--sdpkt-black);
    margin: 0 0 8px 0;
}

.srod-empty-state p {
    font-size: 0.9375rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
    margin: 0 0 24px 0;
}

.srod-empty-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 280px;
    margin: 0 auto;
}

/* === SROD HISTORY === */

.srod-history-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.srod-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: 12px;
}

.srod-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sdpkt-blue);
    margin-bottom: 4px;
}

.srod-stat-label {
    font-size: 0.75rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
    text-align: center;
}

/* === SROD FILTER TABS === */

.srod-filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.srod-filter-tab {
    flex-shrink: 0;
    padding: 10px 20px;
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.1);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.srod-filter-tab:hover {
    border-color: rgba(var(--sdpkt-blue-rgb), 0.3);
    color: var(--sdpkt-black);
}

.srod-filter-tab.active {
    background: var(--sdpkt-blue);
    border-color: var(--sdpkt-blue);
    color: var(--sdpkt-white);
}

/* === SROD HISTORY LIST === */

.srod-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.srod-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--sdpkt-white);
    border: 1px solid rgba(var(--sdpkt-black-rgb), 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.srod-history-item:hover {
    border-color: rgba(var(--sdpkt-blue-rgb), 0.3);
    box-shadow: 0 2px 8px rgba(var(--sdpkt-black-rgb), 0.06);
}

.srod-history-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.srod-history-item-icon.purchase {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
}

.srod-history-item-icon.redeem {
    background: linear-gradient(135deg, rgba(var(--sdpkt-blue-rgb), 0.15) 0%, rgba(var(--sdpkt-blue-rgb), 0.08) 100%);
}

.srod-history-item-content {
    flex: 1;
    min-width: 0;
}

.srod-history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.srod-history-voucher {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sdpkt-black);
}

.srod-history-amount {
    font-size: 0.9375rem;
    font-weight: 700;
}

.srod-history-amount.credit {
    color: #10b981;
}

.srod-history-amount.debit {
    color: #ef4444;
}

.srod-history-item-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.srod-history-type {
    font-size: 0.8125rem;
    color: rgba(var(--sdpkt-black-rgb), 0.6);
}

.srod-history-date {
    font-size: 0.75rem;
    color: rgba(var(--sdpkt-black-rgb), 0.5);
}

.srod-history-item-status {
    font-size: 1.125rem;
}

.srod-history-item-status .status-success {
    color: #10b981;
}

.srod-history-item-status .status-failed {
    color: #ef4444;
}

/* === RESPONSIVE - SROD === */

@media (max-width: 380px) {
    .srod-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .srod-history-stats {
        grid-template-columns: 1fr;
    }

    .srod-stat-value {
        font-size: 1.25rem;
    }

    .srod-success-icon {
        width: 64px;
        height: 64px;
        font-size: 2rem;
    }

    .srod-action-buttons,
    .srod-success-actions {
        grid-template-columns: 1fr;
    }

    .srod-features {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ELECTRICITY STYLES - Amber/Yellow Theme
   ========================================================================== */

.electricity-info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 20px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.08) 0%, rgba(255, 193, 7, 0.04) 100%);
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}

.electricity-info-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFC107 0%, #FFA000 100%);
    border-radius: 16px;
    font-size: 1.75rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.25);
}

.electricity-info-card-content {
    flex: 1;
}

.electricity-info-card-content h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin: 0 0 8px 0;
}

.electricity-info-card-content p {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    margin: 0;
    line-height: 1.5;
}

.electricity-info-notice {
    padding: 16px 20px;
    background: rgba(255, 193, 7, 0.08);
    border-radius: 12px;
    margin: 16px 20px;
}

.electricity-info-notice p {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    margin: 0;
    line-height: 1.5;
}

/* Electricity Action Grid */
.electricity-action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 20px;
}

.electricity-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.1);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.electricity-action-card:hover {
    border-color: #FFC107;
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.12);
    transform: translateY(-2px);
}

.electricity-action-card:active {
    transform: scale(0.98);
}

.electricity-action-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 193, 7, 0.1);
    border-radius: 12px;
    font-size: 1.5rem;
}

.electricity-action-card-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.electricity-action-card-description {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
    line-height: 1.4;
}

/* Electricity Form */
.electricity-form {
    padding: 0 20px 20px;
}

/* Electricity Transaction List */
.electricity-transaction-list {
    padding: 0 20px;
}

.electricity-transaction-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.1);
    border-radius: 12px;
    margin-bottom: 8px;
}

.electricity-transaction-item-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 10px;
    font-size: 1.25rem;
    color: #4CAF50;
    flex-shrink: 0;
}

.electricity-transaction-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.electricity-transaction-item-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.electricity-transaction-item-code {
    font-size: 0.8125rem;
    color: var(--text-secondary, #666);
}

.electricity-transaction-item-description {
    font-size: 0.8125rem;
    color: var(--text-muted, #999);
    margin-top: 4px;
}

.electricity-transaction-inactive {
    opacity: 0.6;
}

.electricity-transaction-inactive .electricity-transaction-item-icon {
    background: rgba(158, 158, 158, 0.1);
    color: #9E9E9E;
}

.electricity-inactive {
    opacity: 0.7;
}

/* Electricity Result Card */
.electricity-result-card {
    padding: 32px 24px;
    text-align: center;
    margin: 20px;
    border-radius: 20px;
}

.electricity-result-success {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(76, 175, 80, 0.04) 100%);
    border: 1px solid rgba(76, 175, 80, 0.2);
}

.electricity-result-error {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.08) 0%, rgba(244, 67, 54, 0.04) 100%);
    border: 1px solid rgba(244, 67, 54, 0.2);
}

.electricity-result-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border-radius: 50%;
    font-size: 2.5rem;
}

.electricity-result-success .electricity-result-icon {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(76, 175, 80, 0.3);
}

.electricity-result-error .electricity-result-icon {
    background: linear-gradient(135deg, #F44336 0%, #D32F2F 100%);
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(244, 67, 54, 0.3);
}

.electricity-result-card h3 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin: 0 0 12px 0;
}

.electricity-result-card p {
    font-size: 0.9375rem;
    color: var(--text-secondary, #666);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.electricity-result-details {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.electricity-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}

.electricity-result-row:last-child {
    border-bottom: none;
}

.electricity-result-row span:first-child {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.electricity-result-row span:last-child {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.electricity-result-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

/* ==========================================================================
   REGION STYLES - Green Theme
   ========================================================================== */

.region-info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 20px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(76, 175, 80, 0.04) 100%);
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}

.region-info-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    border-radius: 16px;
    font-size: 1.75rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.25);
}

.region-info-card-content {
    flex: 1;
}

.region-info-card-content h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin: 0 0 8px 0;
}

.region-info-card-content p {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    margin: 0;
    line-height: 1.5;
}

.region-info-notice {
    padding: 16px 20px;
    background: rgba(76, 175, 80, 0.08);
    border-radius: 12px;
    margin: 16px 20px;
}

.region-info-notice p {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    margin: 0;
    line-height: 1.5;
}

/* Region List */
.region-list {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.region-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: left;
}

.region-card:hover {
    border-color: #4CAF50;
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.12);
}

.region-card-selected {
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.04);
}

.region-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 10px;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.region-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.region-card-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.region-card-code {
    font-size: 0.8125rem;
    color: var(--text-secondary, #666);
}

.region-card-check {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4CAF50;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 0.875rem;
}

/* Region Actions */
.region-actions {
    padding: 20px;
    position: sticky;
    bottom: 0;
    background: #FFFFFF;
    border-top: 1px solid rgba(10, 10, 10, 0.06);
}

/* Region Selected Badge */
.region-selected-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.2);
    border-radius: 24px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #388E3C;
    margin: 0 20px 16px;
}

/* Region Result Card */
.region-result-card {
    padding: 32px 24px;
    text-align: center;
    margin: 20px;
    border-radius: 20px;
}

.region-result-success {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(76, 175, 80, 0.04) 100%);
    border: 1px solid rgba(76, 175, 80, 0.2);
}

.region-result-error {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.08) 0%, rgba(244, 67, 54, 0.04) 100%);
    border: 1px solid rgba(244, 67, 54, 0.2);
}

.region-result-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border-radius: 50%;
    font-size: 2.5rem;
}

.region-result-success .region-result-icon {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(76, 175, 80, 0.3);
}

.region-result-error .region-result-icon {
    background: linear-gradient(135deg, #F44336 0%, #D32F2F 100%);
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(244, 67, 54, 0.3);
}

.region-result-card h3 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin: 0 0 12px 0;
}

.region-result-card p {
    font-size: 0.9375rem;
    color: var(--text-secondary, #666);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.region-result-details {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.region-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}

.region-result-row:last-child {
    border-bottom: none;
}

.region-result-row span:first-child {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.region-result-row span:last-child {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.region-result-row .reference-number {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    color: #4CAF50;
}

.region-result-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

/* ==========================================================================
   VOUCHER STYLES - Purple Theme
   ========================================================================== */

.voucher-info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 20px;
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.08) 0%, rgba(156, 39, 176, 0.04) 100%);
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}

.voucher-info-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
    border-radius: 16px;
    font-size: 1.75rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.25);
}

.voucher-info-card-content {
    flex: 1;
}

.voucher-info-card-content h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin: 0 0 8px 0;
}

.voucher-info-card-content p {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    margin: 0;
    line-height: 1.5;
}

.voucher-info-notice {
    padding: 16px 20px;
    background: rgba(156, 39, 176, 0.08);
    border-radius: 12px;
    margin: 16px 20px;
}

.voucher-info-notice p {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    margin: 0;
    line-height: 1.5;
}

/* Voucher Form */
.voucher-form {
    padding: 0 20px 20px;
}

/* Voucher Product Grid */
.voucher-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 20px;
}

.voucher-product-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.voucher-product-card:hover {
    border-color: #9C27B0;
    box-shadow: 0 4px 16px rgba(156, 39, 176, 0.12);
}

.voucher-product-card-selected {
    border-color: #9C27B0;
    background: rgba(156, 39, 176, 0.04);
}

.voucher-product-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin-bottom: 4px;
}

.voucher-product-description {
    font-size: 0.8125rem;
    color: var(--text-secondary, #666);
    margin-bottom: 8px;
}

.voucher-product-price {
    font-size: 1rem;
    font-weight: 700;
    color: #9C27B0;
}

/* Voucher Amount Grid */
.voucher-amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0 20px;
}

.voucher-amount-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 8px;
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 10, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.voucher-amount-card:hover {
    border-color: #9C27B0;
    box-shadow: 0 4px 16px rgba(156, 39, 176, 0.12);
}

.voucher-amount-card-selected {
    border-color: #9C27B0;
    background: rgba(156, 39, 176, 0.04);
}

.voucher-amount-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary, #1a1a1a);
}

.voucher-amount-label {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
}

/* Voucher Result Card */
.voucher-result-card {
    padding: 32px 24px;
    text-align: center;
    margin: 20px;
    border-radius: 20px;
}

.voucher-result-success {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(76, 175, 80, 0.04) 100%);
    border: 1px solid rgba(76, 175, 80, 0.2);
}

.voucher-result-error {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.08) 0%, rgba(244, 67, 54, 0.04) 100%);
    border: 1px solid rgba(244, 67, 54, 0.2);
}

.voucher-result-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border-radius: 50%;
    font-size: 2.5rem;
}

.voucher-result-success .voucher-result-icon {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(76, 175, 80, 0.3);
}

.voucher-result-error .voucher-result-icon {
    background: linear-gradient(135deg, #F44336 0%, #D32F2F 100%);
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(244, 67, 54, 0.3);
}

.voucher-result-card h3 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin: 0 0 12px 0;
}

.voucher-result-card p {
    font-size: 0.9375rem;
    color: var(--text-secondary, #666);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.voucher-result-details {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.voucher-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}

.voucher-result-row:last-child {
    border-bottom: none;
}

.voucher-result-row span:first-child {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.voucher-result-row span:last-child {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.voucher-result-row .voucher-pin {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 1.125rem;
    letter-spacing: 2px;
    color: #9C27B0;
}

.voucher-result-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

/* Voucher PIN Display */
.voucher-pin-display {
    padding: 24px;
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.05) 100%);
    border-radius: 16px;
    margin-bottom: 20px;
}

.voucher-pin-label {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    margin-bottom: 8px;
}

.voucher-pin-value {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: #9C27B0;
}

/* === RESPONSIVE - ELECTRICITY === */

@media (max-width: 380px) {
    .electricity-action-grid {
        grid-template-columns: 1fr;
    }

    .electricity-result-icon {
        width: 64px;
        height: 64px;
        font-size: 2rem;
    }
}

/* === RESPONSIVE - REGION === */

@media (max-width: 380px) {
    .region-result-icon {
        width: 64px;
        height: 64px;
        font-size: 2rem;
    }
}

/* === RESPONSIVE - VOUCHER === */

@media (max-width: 380px) {
    .voucher-product-grid {
        grid-template-columns: 1fr;
    }

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

    .voucher-result-icon {
        width: 64px;
        height: 64px;
        font-size: 2rem;
    }

    .voucher-pin-value {
        font-size: 1.375rem;
        letter-spacing: 2px;
    }
}

/* ============================================================================
   PHASE 2: BILL PAYMENTS HISTORY
   Theme: Blue (#2196F3)
   ============================================================================ */

/* === BILL HISTORY - STATS === */

.bill-history-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.bill-history-stat {
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.bill-history-stat.highlight {
    background: linear-gradient(135deg, #2196F3 0%, #2563EB 100%);
    color: white;
}

.bill-history-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.bill-history-stat.highlight .bill-history-stat-value {
    color: white;
}

.bill-history-stat-label {
    display: block;
    font-size: 0.75rem;
    color: #64748B;
    margin-top: 4px;
}

.bill-history-stat.highlight .bill-history-stat-label {
    color: rgba(255, 255, 255, 0.85);
}

/* === BILL HISTORY - FILTER TABS === */

.bill-history-filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.bill-history-filter-tab {
    padding: 8px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    background: white;
    color: #64748B;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.bill-history-filter-tab:hover {
    border-color: #2196F3;
    color: #2196F3;
}

.bill-history-filter-tab.active {
    background: #2196F3;
    border-color: #2196F3;
    color: white;
}

/* === BILL HISTORY - MONTHLY GROUPS === */

.bill-history-month {
    margin-bottom: 24px;
}

.bill-history-month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 0 4px;
}

.bill-history-month-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1E293B;
}

.bill-history-month-summary {
    font-size: 0.75rem;
    color: #64748B;
}

.bill-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* === BILL HISTORY - PAYMENT ITEM === */

.bill-history-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: white;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bill-history-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.bill-history-provider-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.bill-history-provider-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.bill-history-provider-logo span {
    font-size: 0.875rem;
    font-weight: 600;
    color: #2196F3;
}

.bill-history-details {
    flex: 1;
    min-width: 0;
}

.bill-history-provider-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 4px;
}

.bill-history-meta {
    display: flex;
    gap: 8px;
    font-size: 0.75rem;
    color: #64748B;
    margin-bottom: 4px;
}

.bill-history-account {
    color: #64748B;
}

.bill-history-date {
    color: #94A3B8;
}

.bill-history-product {
    font-size: 0.75rem;
    color: #2196F3;
    background: #EFF6FF;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* === BILL HISTORY - AMOUNT SECTION === */

.bill-history-amount-section {
    text-align: right;
    flex-shrink: 0;
}

.bill-history-amount {
    font-size: 1rem;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 4px;
}

.bill-history-amount.failed {
    color: #EF4444;
    text-decoration: line-through;
}

.bill-history-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 4px;
}

.bill-history-status.completed {
    background: #DCFCE7;
    color: #16A34A;
}

.bill-history-status.pending {
    background: #FEF3C7;
    color: #D97706;
}

.bill-history-status.failed {
    background: #FEE2E2;
    color: #DC2626;
}

.bill-history-category {
    font-size: 0.6875rem;
    color: #64748B;
}

/* === BILL HISTORY - LOAD MORE === */

.bill-history-load-more {
    width: 100%;
    margin-top: 16px;
}

/* === BILL HISTORY - EMPTY STATE === */

.bill-history-empty-state {
    text-align: center;
    padding: 48px 24px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.bill-history-empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 16px;
}

.bill-history-empty-state h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0 0 8px 0;
}

.bill-history-empty-state p {
    font-size: 0.875rem;
    color: #64748B;
    margin: 0 0 20px 0;
}

/* === BILL HISTORY - QUICK LINKS === */

.bill-history-quick-links {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.bill-quick-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bill-quick-link:hover {
    border-color: #2196F3;
    background: #F8FAFC;
}

.bill-quick-icon {
    font-size: 1.25rem;
}

.bill-quick-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #1E293B;
}

/* === BILL HISTORY - RECEIPT MODAL === */

.receipt-modal {
    max-width: 400px;
}

.receipt-content {
    text-align: center;
}

.receipt-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.receipt-status.completed {
    background: #DCFCE7;
    color: #16A34A;
}

.receipt-status.pending {
    background: #FEF3C7;
    color: #D97706;
}

.receipt-status.failed {
    background: #FEE2E2;
    color: #DC2626;
}

.receipt-status-icon {
    font-size: 1rem;
}

.receipt-provider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.receipt-provider-logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: contain;
}

.receipt-provider-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1E293B;
}

.receipt-category {
    font-size: 0.75rem;
    color: #64748B;
    background: #F1F5F9;
    padding: 4px 12px;
    border-radius: 12px;
}

.receipt-amount {
    font-size: 2rem;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 24px;
}

.receipt-details {
    text-align: left;
    background: #F8FAFC;
    border-radius: 12px;
    padding: 16px;
}

.receipt-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #E2E8F0;
    font-size: 0.875rem;
}

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

.receipt-detail-row span:first-child {
    color: #64748B;
}

.receipt-detail-row span:last-child {
    color: #1E293B;
    font-weight: 500;
    text-align: right;
    word-break: break-all;
}

.receipt-detail-row.total {
    border-top: 2px solid #E2E8F0;
    margin-top: 8px;
    padding-top: 16px;
    font-weight: 600;
}

.receipt-detail-row.total span:first-child {
    color: #1E293B;
}

.receipt-detail-row.total span:last-child {
    color: #2196F3;
    font-size: 1.125rem;
}

/* === RESPONSIVE - BILL HISTORY === */

@media (max-width: 639px) {
    .bill-history-stats {
        flex-wrap: wrap;
    }

    .bill-history-stat {
        min-width: calc(50% - 6px);
    }

    .bill-history-stat:last-child {
        flex: 100%;
    }

    .bill-history-item {
        flex-wrap: wrap;
    }

    .bill-history-amount-section {
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #F1F5F9;
    }
}

/* ============================================================
   PHASE 2 - VIRTUAL CARDS
   ============================================================ */

/* === VIRTUAL CARDS LANDING === */

.virtual-cards-summary {
    background: linear-gradient(135deg, #2196F3 0%, #8B5CF6 100%);
    border-radius: 16px;
    padding: 24px;
    color: white;
    margin-bottom: 24px;
}

.virtual-cards-summary h2 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 8px;
    opacity: 0.9;
}

.virtual-cards-summary .total-balance {
    font-size: 2rem;
    font-weight: 700;
}

.virtual-cards-summary .card-count {
    font-size: 0.875rem;
    opacity: 0.8;
    margin-top: 8px;
}

.virtual-cards-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.virtual-card-item {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #E2E8F0;
}

.virtual-card-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.virtual-card-item .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.virtual-card-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.virtual-card-status-badge.active {
    background: #DCFCE7;
    color: #16A34A;
}

.virtual-card-status-badge.frozen {
    background: #DBEAFE;
    color: #2563EB;
}

.virtual-card-status-badge.cancelled {
    background: #FEE2E2;
    color: #DC2626;
}

.virtual-card-network {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.virtual-card-type-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.virtual-card-type-badge.standard {
    background: linear-gradient(135deg, #2196F3 0%, #8B5CF6 100%);
    color: white;
}

.virtual-card-type-badge.premium {
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
    color: white;
}

.virtual-card-type-badge.business {
    background: linear-gradient(135deg, #059669 0%, #0D9488 100%);
    color: white;
}

.virtual-card-number {
    font-family: 'Courier New', monospace;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1E293B;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.virtual-card-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.virtual-card-balance {
    display: flex;
    flex-direction: column;
}

.virtual-card-balance .label {
    font-size: 0.75rem;
    color: #64748B;
    margin-bottom: 4px;
}

.virtual-card-balance .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E293B;
}

.virtual-card-quick-actions {
    display: flex;
    gap: 8px;
}

.quick-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-action-btn:hover {
    background: #2196F3;
    color: white;
    border-color: #2196F3;
}

.quick-action-btn.freeze:hover {
    background: #2563EB;
    border-color: #2563EB;
}

.quick-action-btn.topup:hover {
    background: #16A34A;
    border-color: #16A34A;
}

/* Virtual Cards Empty State */
.virtual-cards-empty-state {
    text-align: center;
    padding: 48px 24px;
    background: white;
    border-radius: 16px;
    border: 2px dashed #E2E8F0;
}

.virtual-cards-empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.virtual-cards-empty-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 8px;
}

.virtual-cards-empty-state p {
    color: #64748B;
    margin-bottom: 24px;
}

.empty-state-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
    text-align: left;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
    color: #475569;
}

.feature-item .feature-icon {
    color: #16A34A;
}

/* Virtual Cards Create CTA */
.virtual-cards-create-cta {
    background: linear-gradient(135deg, #2196F3 0%, #8B5CF6 100%);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    margin-bottom: 24px;
}

.virtual-cards-create-cta h3 {
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.virtual-cards-create-cta p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.create-card-btn {
    background: white;
    color: #2196F3;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.create-card-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Virtual Cards Benefits */
.virtual-cards-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.benefit-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    border: 1px solid #E2E8F0;
}

.benefit-card .benefit-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.benefit-card .benefit-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 4px;
}

.benefit-card .benefit-desc {
    font-size: 0.75rem;
    color: #64748B;
}

/* Virtual Cards Quick Links */
.virtual-cards-quick-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vc-quick-link {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #E2E8F0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vc-quick-link:hover {
    border-color: #2196F3;
    background: #F8FAFC;
}

.vc-quick-link .link-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #EFF6FF;
    color: #2196F3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.vc-quick-link .link-text {
    flex: 1;
}

.vc-quick-link .link-title {
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 2px;
}

.vc-quick-link .link-desc {
    font-size: 0.75rem;
    color: #64748B;
}

.vc-quick-link .link-arrow {
    color: #94A3B8;
}

/* Freeze Modal Card Preview */
.freeze-modal-card-preview {
    border-radius: 12px;
    padding: 20px;
    color: white;
    margin-bottom: 20px;
}

.freeze-modal-card-preview .preview-number {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.freeze-modal-card-preview .preview-name {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* === VIRTUAL CARD CREATE === */

.vc-create-steps {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 0 16px;
}

.vc-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    max-width: 100px;
}

.vc-step .step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #E2E8F0;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.vc-step.active .step-number {
    background: #2196F3;
    color: white;
}

.vc-step.completed .step-number {
    background: #16A34A;
    color: white;
}

.vc-step .step-label {
    font-size: 0.75rem;
    color: #64748B;
    text-align: center;
}

.vc-step.active .step-label {
    color: #2196F3;
    font-weight: 500;
}

.vc-step-line {
    flex: 1;
    height: 2px;
    background: #E2E8F0;
    margin-top: 16px;
    max-width: 40px;
}

.vc-step-line.completed {
    background: #16A34A;
}

/* Create Section */
.vc-create-section {
    margin-bottom: 24px;
}

.vc-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 8px;
}

.vc-section-subtitle {
    font-size: 0.875rem;
    color: #64748B;
    margin-bottom: 16px;
}

/* Card Type Selection */
.vc-card-types {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vc-card-type-option {
    background: white;
    border: 2px solid #E2E8F0;
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.vc-card-type-option:hover {
    border-color: #2196F3;
}

.vc-card-type-option.selected {
    border-color: #2196F3;
    background: #F8FAFC;
}

.vc-type-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.vc-type-network {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vc-type-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1E293B;
}

.vc-type-body {
    margin-bottom: 16px;
}

.vc-type-description {
    font-size: 0.875rem;
    color: #64748B;
    margin-bottom: 12px;
}

.vc-type-limits {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.vc-limit-item {
    display: flex;
    flex-direction: column;
}

.vc-limit-item .limit-label {
    font-size: 0.75rem;
    color: #64748B;
    margin-bottom: 2px;
}

.vc-limit-item .limit-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1E293B;
}

.vc-type-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.vc-feature-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #475569;
}

.vc-feature-item .feature-check {
    color: #16A34A;
}

.vc-type-pricing {
    display: flex;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid #E2E8F0;
}

.vc-type-pricing .pricing-item {
    font-size: 0.875rem;
    color: #64748B;
}

.vc-type-pricing .pricing-item.free {
    color: #16A34A;
    font-weight: 600;
}

.vc-type-selected-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    background: #2196F3;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Create Actions */
.vc-create-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

/* Preview Card (Funding Step) */
.vc-preview-card {
    border-radius: 16px;
    padding: 24px;
    color: white;
    margin-bottom: 24px;
}

.vc-preview-card .preview-type {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
    margin-bottom: 16px;
}

.vc-preview-card .preview-number {
    font-family: 'Courier New', monospace;
    font-size: 1.25rem;
    letter-spacing: 3px;
    margin-bottom: 16px;
}

.vc-preview-card .preview-name {
    font-size: 0.875rem;
}

/* Amount Input */
.vc-amount-input-wrapper {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.vc-amount-input-wrapper:focus-within {
    border-color: #2196F3;
}

.vc-amount-input-wrapper .currency-symbol {
    font-size: 1.5rem;
    font-weight: 600;
    color: #64748B;
    margin-right: 8px;
}

.vc-amount-input {
    flex: 1;
    border: none;
    font-size: 2rem;
    font-weight: 700;
    color: #1E293B;
    outline: none;
    background: transparent;
}

.vc-amount-input::placeholder {
    color: #CBD5E1;
}

/* Quick Amounts */
.vc-quick-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.vc-quick-amount {
    padding: 10px 20px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: white;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vc-quick-amount:hover {
    border-color: #2196F3;
    color: #2196F3;
}

.vc-quick-amount.selected {
    background: #2196F3;
    border-color: #2196F3;
    color: white;
}

/* Wallet Balance */
.vc-wallet-balance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F8FAFC;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.vc-wallet-balance .wallet-label {
    font-size: 0.875rem;
    color: #64748B;
}

.vc-wallet-balance .wallet-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1E293B;
}

/* Order Summary */
.vc-order-summary {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #E2E8F0;
    margin-bottom: 24px;
}

.vc-order-summary h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 16px;
}

.vc-order-summary .summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 0.875rem;
}

.vc-order-summary .summary-row span:first-child {
    color: #64748B;
}

.vc-order-summary .summary-row span:last-child {
    font-weight: 500;
    color: #1E293B;
}

.vc-order-summary .summary-row.total {
    padding-top: 12px;
    border-top: 1px solid #E2E8F0;
    margin-top: 12px;
}

.vc-order-summary .summary-row.total span:last-child {
    font-size: 1.125rem;
    font-weight: 700;
    color: #2196F3;
}

/* Confirm Features */
.vc-confirm-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.vc-confirm-features .feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
    color: #475569;
}

.vc-confirm-features .feature-item .feature-icon {
    color: #16A34A;
}

/* Terms Checkbox */
.vc-terms {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
}

.vc-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    accent-color: #2196F3;
    cursor: pointer;
}

.vc-terms label {
    font-size: 0.875rem;
    color: #64748B;
    cursor: pointer;
}

.vc-terms a {
    color: #2196F3;
    text-decoration: none;
}

/* Create Success */
.vc-create-success {
    text-align: center;
    padding: 32px 16px;
}

.vc-success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #DCFCE7;
    color: #16A34A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 24px;
}

.vc-create-success h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 8px;
}

.vc-create-success > p {
    color: #64748B;
    margin-bottom: 24px;
}

.vc-success-card-preview {
    border-radius: 16px;
    padding: 24px;
    color: white;
    text-align: left;
    margin-bottom: 24px;
}

.vc-success-card-preview .preview-network {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
    margin-bottom: 4px;
}

.vc-success-card-preview .preview-type {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.vc-success-card-preview .preview-number {
    font-family: 'Courier New', monospace;
    font-size: 1.125rem;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.vc-success-card-preview .preview-details {
    display: flex;
    justify-content: space-between;
}

.vc-success-card-preview .preview-details span {
    font-size: 0.875rem;
}

.vc-success-card-preview .preview-balance {
    font-weight: 600;
}

.vc-success-info {
    background: #F8FAFC;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.vc-success-info .info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.875rem;
    color: #475569;
}

.vc-success-info .info-item:not(:last-child) {
    border-bottom: 1px solid #E2E8F0;
}

.vc-success-info .info-icon {
    color: #2196F3;
}

.vc-success-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* === VIRTUAL CARD DETAIL === */

.vc-detail-card {
    border-radius: 20px;
    padding: 24px;
    color: white;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.vc-detail-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.vc-detail-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.vc-detail-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.2);
}

.vc-detail-status-badge.active {
    background: rgba(22, 163, 74, 0.3);
}

.vc-detail-status-badge.frozen {
    background: rgba(37, 99, 235, 0.3);
}

.vc-detail-network {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.vc-detail-type {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.vc-detail-number {
    font-family: 'Courier New', monospace;
    font-size: 1.25rem;
    letter-spacing: 3px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.vc-detail-number .reveal-toggle {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
}

.vc-detail-info-row {
    display: flex;
    justify-content: space-between;
}

.vc-detail-info {
    display: flex;
    flex-direction: column;
}

.vc-detail-info .info-label {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-bottom: 2px;
}

.vc-detail-info .info-value {
    font-size: 0.875rem;
    font-weight: 500;
}

.vc-detail-label {
    display: block;
    font-size: 0.875rem;
    opacity: 0.8;
    margin-top: 12px;
}

/* Balance Section */
.vc-balance-section {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.vc-balance-main {
    display: flex;
    flex-direction: column;
}

.vc-balance-main .balance-label {
    font-size: 0.875rem;
    color: #64748B;
    margin-bottom: 4px;
}

.vc-balance-main .balance-amount {
    font-size: 2rem;
    font-weight: 700;
    color: #1E293B;
}

.vc-topup-btn {
    background: #16A34A;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.vc-topup-btn:hover {
    background: #15803D;
}

/* Quick Actions Grid */
.vc-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.vc-action-card {
    background: white;
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    border: 1px solid #E2E8F0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vc-action-card:hover {
    border-color: #2196F3;
    transform: translateY(-2px);
}

.vc-action-card .action-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.vc-action-card .action-label {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
}

/* Spending Summary */
.vc-spending-summary {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.vc-spending-summary h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 16px;
}

.spending-total {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E2E8F0;
}

.spending-total .spending-label {
    font-size: 0.875rem;
    color: #64748B;
}

.spending-total .spending-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E293B;
}

.spending-total .spending-count {
    font-size: 0.75rem;
    color: #64748B;
    margin-top: 4px;
}

.spending-categories {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spending-category {
    display: flex;
    align-items: center;
    gap: 12px;
}

.spending-category .category-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

.spending-category .category-icon {
    font-size: 1rem;
}

.spending-category .category-name {
    font-size: 0.875rem;
    color: #475569;
}

.spending-category .category-bar {
    flex: 1;
    height: 8px;
    background: #E2E8F0;
    border-radius: 4px;
    overflow: hidden;
}

.spending-category .category-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: #2196F3;
}

.spending-category .category-amount {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1E293B;
    min-width: 80px;
    text-align: right;
}

/* Transactions List (Detail Page) */
.vc-transactions-list {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.vc-transactions-list h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vc-transactions-list h3 a {
    font-size: 0.875rem;
    font-weight: 500;
    color: #2196F3;
    text-decoration: none;
}

.vc-transaction-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #F1F5F9;
}

.vc-transaction-item:last-child {
    border-bottom: none;
}

.vc-transaction-item .tx-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.vc-transaction-item .tx-details {
    flex: 1;
}

.vc-transaction-item .tx-merchant {
    font-weight: 500;
    color: #1E293B;
    margin-bottom: 2px;
}

.vc-transaction-item .tx-meta {
    font-size: 0.75rem;
    color: #64748B;
}

.vc-transaction-item .tx-amount {
    font-weight: 600;
    color: #1E293B;
}

.vc-transaction-item .tx-amount.negative {
    color: #DC2626;
}

.vc-transaction-item .tx-amount.positive {
    color: #16A34A;
}

/* Limits Section */
.vc-limits-section {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.vc-limits-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 16px;
}

.vc-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vc-info-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #F1F5F9;
}

.vc-info-item:last-child {
    border-bottom: none;
}

.vc-info-item span:first-child {
    color: #64748B;
    font-size: 0.875rem;
}

.vc-info-item span:last-child {
    font-weight: 500;
    color: #1E293B;
    font-size: 0.875rem;
}

/* PIN Modal */
.pin-modal-message {
    text-align: center;
    color: #64748B;
    margin-bottom: 24px;
}

.pin-input-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.pin-input {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s ease;
}

.pin-input:focus {
    border-color: #2196F3;
}

.pin-modal-hint {
    text-align: center;
    font-size: 0.75rem;
    color: #94A3B8;
}

/* === VIRTUAL CARD SETTINGS === */

.settings-card-preview {
    border-radius: 16px;
    padding: 20px;
    color: white;
    margin-bottom: 24px;
}

.settings-card-preview .preview-card-type {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
    margin-bottom: 12px;
}

.settings-card-preview .preview-card-number {
    font-family: 'Courier New', monospace;
    font-size: 1.125rem;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.settings-card-preview .preview-card-name {
    font-size: 0.875rem;
    margin-bottom: 8px;
}

.settings-card-preview .preview-card-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.2);
}

/* Settings Section */
.settings-section {
    background: white;
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.settings-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #F1F5F9;
}

.settings-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #EFF6FF;
    color: #2196F3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-section-title {
    font-weight: 600;
    color: #1E293B;
}

.settings-section-content {
    padding: 16px 20px;
}

/* Settings Input Group */
.settings-input-group {
    margin-bottom: 16px;
}

.settings-input-group:last-child {
    margin-bottom: 0;
}

.settings-input-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

.settings-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    font-size: 1rem;
    color: #1E293B;
    outline: none;
    transition: border-color 0.2s ease;
}

.settings-input:focus {
    border-color: #2196F3;
}

.settings-input-hint {
    font-size: 0.75rem;
    color: #64748B;
    margin-top: 4px;
}

.settings-save-btn {
    background: #2196F3;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 12px;
    transition: background 0.2s ease;
}

.settings-save-btn:hover {
    background: #2563EB;
}

/* Settings Limit Item */
.settings-limit-item {
    margin-bottom: 20px;
}

.settings-limit-item:last-child {
    margin-bottom: 0;
}

.settings-limit-item .limit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.settings-limit-item .limit-label {
    font-size: 0.875rem;
    color: #374151;
}

.settings-limit-item .limit-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #2196F3;
}

.settings-range {
    width: 100%;
    height: 8px;
    appearance: none;
    background: #E2E8F0;
    border-radius: 4px;
    outline: none;
}

.settings-range::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2196F3;
    cursor: pointer;
}

.limit-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #94A3B8;
    margin-top: 4px;
}

/* Settings Toggle Item */
.settings-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #F1F5F9;
}

.settings-toggle-item:last-child {
    border-bottom: none;
}

.settings-toggle-item .toggle-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.settings-toggle-item .toggle-icon {
    font-size: 1.25rem;
}

.settings-toggle-item .toggle-text {
    flex: 1;
}

.settings-toggle-item .toggle-label {
    font-weight: 500;
    color: #1E293B;
    margin-bottom: 2px;
}

.settings-toggle-item .toggle-hint {
    font-size: 0.75rem;
    color: #64748B;
}

.settings-toggle {
    position: relative;
    width: 48px;
    height: 26px;
}

.settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-toggle .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #CBD5E1;
    border-radius: 26px;
    transition: 0.3s;
}

.settings-toggle .toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
}

.settings-toggle input:checked + .toggle-slider {
    background-color: #2196F3;
}

.settings-toggle input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

/* Settings Action Button */
.settings-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px;
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 12px;
}

.settings-action-btn:last-child {
    margin-bottom: 0;
}

.settings-action-btn:hover {
    border-color: #2196F3;
    background: #F8FAFC;
}

.settings-action-btn .action-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #EFF6FF;
    color: #2196F3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.settings-action-btn .action-text {
    flex: 1;
    text-align: left;
}

.settings-action-btn .action-label {
    font-weight: 500;
    color: #1E293B;
    margin-bottom: 2px;
}

.settings-action-btn .action-hint {
    font-size: 0.75rem;
    color: #64748B;
}

.settings-action-btn .action-arrow {
    color: #94A3B8;
}

.settings-action-btn.warning .action-icon {
    background: #FEF3C7;
    color: #D97706;
}

.settings-action-btn.success .action-icon {
    background: #DCFCE7;
    color: #16A34A;
}

.settings-action-btn.danger {
    border-color: #FEE2E2;
}

.settings-action-btn.danger .action-icon {
    background: #FEE2E2;
    color: #DC2626;
}

.settings-action-btn.danger .action-label {
    color: #DC2626;
}

/* Settings Card Info */
.settings-card-info {
    background: #F8FAFC;
    border-radius: 12px;
    padding: 16px;
}

.settings-card-info .info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #E2E8F0;
}

.settings-card-info .info-row:last-child {
    border-bottom: none;
}

.settings-card-info .info-row span:first-child {
    font-size: 0.875rem;
    color: #64748B;
}

.settings-card-info .info-row span:last-child {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1E293B;
}

/* Cancel Warning */
.cancel-warning {
    background: #FEF2F2;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
}

.cancel-warning-icon {
    color: #DC2626;
    font-size: 1.25rem;
}

.cancel-warning p {
    font-size: 0.875rem;
    color: #991B1B;
    margin-bottom: 8px;
}

.cancel-warning ul {
    font-size: 0.875rem;
    color: #991B1B;
    margin-left: 16px;
}

.cancel-balance-notice {
    background: #FEF3C7;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    font-size: 0.875rem;
    color: #92400E;
}

.cancel-confirm-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #FCA5A5;
    border-radius: 10px;
    font-size: 1rem;
    margin-bottom: 16px;
}

.cancel-confirm-input:focus {
    outline: none;
    border-color: #DC2626;
}

/* PIN Input Group */
.pin-input-group {
    margin-bottom: 20px;
}

.pin-input-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

/* === VIRTUAL CARD TRANSACTIONS === */

.tx-card-preview {
    border-radius: 16px;
    padding: 20px;
    color: white;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tx-card-preview .tx-preview-type {
    font-size: 0.875rem;
    opacity: 0.8;
    margin-bottom: 4px;
}

.tx-card-preview .tx-preview-number {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    letter-spacing: 2px;
}

.tx-card-preview .tx-preview-balance {
    text-align: right;
}

.tx-card-preview .tx-preview-balance .label {
    font-size: 0.75rem;
    opacity: 0.8;
    display: block;
    margin-bottom: 4px;
}

.tx-card-preview .tx-preview-balance .value {
    font-size: 1.25rem;
    font-weight: 700;
}

/* Summary Stats */
.tx-summary-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.tx-stat {
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.tx-stat .tx-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 4px;
}

.tx-stat .tx-stat-label {
    font-size: 0.75rem;
    color: #64748B;
}

.tx-stat.spent .tx-stat-value {
    color: #DC2626;
}

.tx-stat.received .tx-stat-value {
    color: #16A34A;
}

/* Active Filters */
.tx-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #F8FAFC;
    border-radius: 12px;
}

.tx-active-filters .filters-label {
    font-size: 0.875rem;
    color: #64748B;
}

.tx-active-filters .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #2196F3;
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.tx-active-filters .filter-remove {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
}

.tx-active-filters .clear-all-filters {
    background: none;
    border: none;
    color: #DC2626;
    font-size: 0.75rem;
    cursor: pointer;
    margin-left: auto;
}

/* Filter Tabs */
.tx-filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.tx-filter-tab {
    padding: 10px 20px;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    background: white;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748B;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.tx-filter-tab:hover {
    border-color: #2196F3;
    color: #2196F3;
}

.tx-filter-tab.active {
    background: #2196F3;
    border-color: #2196F3;
    color: white;
}

/* Month Group */
.tx-month-group {
    margin-bottom: 24px;
}

.tx-month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E2E8F0;
}

.tx-month-title {
    font-weight: 600;
    color: #1E293B;
}

.tx-month-totals {
    display: flex;
    gap: 16px;
    font-size: 0.875rem;
}

.tx-month-totals .month-spent {
    color: #DC2626;
}

.tx-month-totals .month-received {
    color: #16A34A;
}

/* Transaction List */
.tx-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.tx-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    cursor: pointer;
    transition: background 0.2s ease;
}

.tx-item:hover {
    background: #F8FAFC;
}

.tx-item .tx-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.tx-item .tx-details {
    flex: 1;
    min-width: 0;
}

.tx-item .tx-merchant {
    font-weight: 500;
    color: #1E293B;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tx-item .tx-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.75rem;
    color: #64748B;
}

.tx-item .tx-category {
    background: #F1F5F9;
    padding: 2px 8px;
    border-radius: 4px;
}

.tx-item .tx-date {
    /* inherited */
}

.tx-item .tx-reference {
    font-family: monospace;
}

.tx-item .tx-amount-section {
    text-align: right;
}

.tx-item .tx-amount {
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 4px;
}

.tx-item .tx-amount.negative {
    color: #DC2626;
}

.tx-item .tx-amount.positive {
    color: #16A34A;
}

.tx-item .tx-status {
    font-size: 0.75rem;
    color: #64748B;
}

.tx-item .tx-status.completed {
    color: #16A34A;
}

.tx-item .tx-status.pending {
    color: #D97706;
}

.tx-item .tx-status.failed {
    color: #DC2626;
}

/* Load More */
.tx-load-more {
    text-align: center;
    padding: 20px;
}

.tx-load-more button {
    padding: 12px 32px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: white;
    color: #2196F3;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tx-load-more button:hover {
    border-color: #2196F3;
    background: #F8FAFC;
}

/* Empty State */
.tx-empty-state {
    text-align: center;
    padding: 48px 24px;
    background: white;
    border-radius: 16px;
}

.tx-empty-state .tx-empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.tx-empty-state h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 8px;
}

.tx-empty-state p {
    color: #64748B;
    font-size: 0.875rem;
}

/* Quick Actions */
.tx-quick-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.tx-quick-action {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tx-quick-action:hover {
    border-color: #2196F3;
    background: #F8FAFC;
}

.tx-quick-action .quick-icon {
    font-size: 1.5rem;
}

.tx-quick-action .quick-label {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
}

/* Filter Modal */
.filter-modal .filter-group {
    margin-bottom: 20px;
}

.filter-modal .filter-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

.filter-modal .filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-modal .filter-option {
    padding: 8px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: white;
    font-size: 0.875rem;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-modal .filter-option:hover {
    border-color: #2196F3;
}

.filter-modal .filter-option.selected {
    background: #2196F3;
    border-color: #2196F3;
    color: white;
}

.filter-date-inputs {
    display: flex;
    gap: 12px;
}

.filter-date-inputs .date-input-wrapper {
    flex: 1;
}

.filter-date-inputs label {
    display: block;
    font-size: 0.75rem;
    color: #64748B;
    margin-bottom: 4px;
}

.filter-date-inputs input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 0.875rem;
}

.filter-amount-inputs {
    display: flex;
    gap: 12px;
}

.filter-amount-inputs .amount-input-wrapper {
    flex: 1;
}

.filter-amount-inputs label {
    display: block;
    font-size: 0.75rem;
    color: #64748B;
    margin-bottom: 4px;
}

.filter-amount-inputs input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 0.875rem;
}

/* Transaction Detail Modal */
.tx-detail-status {
    text-align: center;
    margin-bottom: 20px;
}

.tx-detail-status .status-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 12px;
}

.tx-detail-status .status-icon.completed {
    background: #DCFCE7;
    color: #16A34A;
}

.tx-detail-status .status-icon.pending {
    background: #FEF3C7;
    color: #D97706;
}

.tx-detail-status .status-icon.failed {
    background: #FEE2E2;
    color: #DC2626;
}

.tx-detail-amount {
    font-size: 2rem;
    font-weight: 700;
    color: #1E293B;
    text-align: center;
    margin-bottom: 8px;
}

.tx-detail-amount.negative {
    color: #DC2626;
}

.tx-detail-amount.positive {
    color: #16A34A;
}

.tx-detail-merchant {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.tx-detail-merchant .merchant-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tx-detail-rows {
    background: #F8FAFC;
    border-radius: 12px;
    padding: 16px;
}

.tx-detail-rows .detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #E2E8F0;
}

.tx-detail-rows .detail-row:last-child {
    border-bottom: none;
}

.tx-detail-rows .detail-label {
    font-size: 0.875rem;
    color: #64748B;
}

.tx-detail-rows .detail-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1E293B;
}

/* === VIRTUAL CARD TOP UP === */

.topup-success {
    text-align: center;
    padding: 32px 16px;
}

.topup-success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #DCFCE7;
    color: #16A34A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 24px;
}

.topup-success h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 8px;
}

.topup-success-amount {
    font-size: 2rem;
    font-weight: 700;
    color: #16A34A;
    margin-bottom: 8px;
}

.topup-success-message {
    color: #64748B;
    margin-bottom: 24px;
}

.topup-success-card {
    border-radius: 16px;
    padding: 20px;
    color: white;
    margin-bottom: 24px;
}

.topup-success-card .success-card-number {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.topup-success-card .success-card-balance {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topup-success-card .success-card-balance .label {
    font-size: 0.875rem;
    opacity: 0.8;
}

.topup-success-card .success-card-balance .value {
    font-size: 1.25rem;
    font-weight: 700;
}

.topup-success-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Top Up Confirmation */
.topup-confirmation {
    padding: 16px 0;
}

.topup-confirmation h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 20px;
    text-align: center;
}

.topup-card-preview {
    border-radius: 16px;
    padding: 20px;
    color: white;
    margin-bottom: 24px;
}

.topup-card-preview .preview-card-type {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
    margin-bottom: 12px;
}

.topup-card-preview .preview-card-number {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.topup-card-preview .preview-card-name {
    font-size: 0.875rem;
}

.topup-card-preview .preview-card-balance {
    margin-top: 12px;
}

.topup-card-preview .preview-card-balance .label {
    font-size: 0.75rem;
    opacity: 0.8;
    display: block;
}

.topup-card-preview .preview-card-balance .value {
    font-size: 1.25rem;
    font-weight: 700;
}

.topup-confirmation-details {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.topup-confirmation-details .confirmation-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}

.topup-confirmation-details .confirmation-row .label {
    color: #64748B;
    font-size: 0.875rem;
}

.topup-confirmation-details .confirmation-row .value {
    font-weight: 500;
    color: #1E293B;
    font-size: 0.875rem;
}

.topup-confirmation-details .confirmation-row .value.highlight {
    color: #2196F3;
    font-weight: 700;
    font-size: 1rem;
}

.topup-confirmation-details .confirmation-divider {
    height: 1px;
    background: #E2E8F0;
    margin: 8px 0;
}

.topup-confirmation-actions {
    display: flex;
    gap: 12px;
}

/* Top Up Amount Section */
.topup-amount-section {
    margin-bottom: 24px;
}

.topup-amount-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
    display: block;
}

.topup-amount-input-wrapper {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 8px;
}

.topup-amount-input-wrapper:focus-within {
    border-color: #2196F3;
}

.topup-amount-input-wrapper .currency-prefix {
    font-size: 1.5rem;
    font-weight: 600;
    color: #64748B;
    margin-right: 8px;
}

.topup-amount-input {
    flex: 1;
    border: none;
    font-size: 2rem;
    font-weight: 700;
    color: #1E293B;
    outline: none;
    background: transparent;
}

.topup-amount-input::placeholder {
    color: #CBD5E1;
}

.topup-amount-input.error {
    color: #DC2626;
}

.topup-amount-error {
    color: #DC2626;
    font-size: 0.875rem;
    margin-bottom: 8px;
}

.topup-amount-limits {
    font-size: 0.75rem;
    color: #64748B;
}

/* Quick Amounts */
.topup-quick-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.topup-quick-amounts .quick-amount-btn {
    padding: 10px 20px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: white;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.topup-quick-amounts .quick-amount-btn:hover:not(:disabled) {
    border-color: #2196F3;
    color: #2196F3;
}

.topup-quick-amounts .quick-amount-btn.selected {
    background: #2196F3;
    border-color: #2196F3;
    color: white;
}

.topup-quick-amounts .quick-amount-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Wallet Balance */
.topup-wallet-balance {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #F8FAFC;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.topup-wallet-balance .wallet-icon {
    font-size: 1.5rem;
}

.topup-wallet-balance .wallet-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.topup-wallet-balance .wallet-label {
    font-size: 0.875rem;
    color: #64748B;
}

.topup-wallet-balance .wallet-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1E293B;
}

/* Limit Info */
.topup-limit-info {
    background: white;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #E2E8F0;
    margin-bottom: 24px;
}

.topup-limit-info .limit-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.topup-limit-info .limit-icon {
    font-size: 1rem;
}

.topup-limit-info .limit-bar-container {
    height: 8px;
    background: #E2E8F0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.topup-limit-info .limit-bar {
    height: 100%;
    background: #2196F3;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.topup-limit-info .limit-values {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #64748B;
}

.topup-limit-info .limit-warning {
    background: #FEF3C7;
    color: #92400E;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-top: 12px;
}

/* Benefits */
.topup-benefits {
    display: flex;
    justify-content: space-around;
    margin-bottom: 24px;
    padding: 16px;
    background: #F8FAFC;
    border-radius: 12px;
}

.topup-benefits .benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #64748B;
}

.topup-benefits .benefit-icon {
    font-size: 1.25rem;
}

/* Actions */
.topup-actions {
    margin-bottom: 16px;
}

.topup-continue-btn {
    width: 100%;
}

/* === RESPONSIVE - VIRTUAL CARDS === */

@media (max-width: 639px) {
    .vc-quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .virtual-cards-benefits {
        grid-template-columns: 1fr;
    }

    .tx-summary-stats {
        flex-direction: column;
    }

    .vc-type-limits {
        flex-direction: column;
        gap: 8px;
    }

    .vc-create-steps {
        gap: 4px;
    }

    .vc-step-line {
        max-width: 20px;
    }

    .tx-card-preview {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .tx-card-preview .tx-preview-balance {
        text-align: center;
    }

    .filter-date-inputs,
    .filter-amount-inputs {
        flex-direction: column;
    }
}

/* =====================================================
   BATCH 3: LOYALTY STYLES
   Loyalty Dashboard, Points, Tiers, Rewards, Activity
   ===================================================== */

/* ----- Loyalty Dashboard ----- */
.loyalty-points-card {
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
    border-radius: 20px;
    padding: 24px;
    color: white;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.loyalty-points-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.loyalty-points-value {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 4px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.loyalty-points-value .points-icon {
    font-size: 1.5rem;
}

.loyalty-points-label {
    font-size: 0.875rem;
    opacity: 0.9;
}

.loyalty-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-top: 16px;
}

.loyalty-tier-badge.bronze {
    background: linear-gradient(135deg, #CD7F32 0%, #B8860B 100%);
    color: white;
}

.loyalty-tier-badge.silver {
    background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
    color: #333;
}

.loyalty-tier-badge.gold {
    background: linear-gradient(135deg, #FFD700 0%, #FFC107 100%);
    color: #333;
}

.loyalty-tier-badge.platinum {
    background: linear-gradient(135deg, #E5E4E2 0%, #B8B8B8 100%);
    color: #333;
}

.loyalty-tier-icon {
    font-size: 1rem;
}

.loyalty-tier-name {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ----- Loyalty Quick Actions ----- */
.loyalty-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.loyalty-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.loyalty-quick-action:hover {
    border-color: #8B5CF6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
    transform: translateY(-2px);
}

.loyalty-quick-action-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #EDE9FE 0%, #FCE7F3 100%);
    border-radius: 10px;
    font-size: 1.25rem;
}

.loyalty-quick-action-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
    text-align: center;
}

/* ----- Loyalty Balance Summary ----- */
.loyalty-balance-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.loyalty-balance-item {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.loyalty-balance-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.loyalty-balance-value.highlight {
    color: #8B5CF6;
}

.loyalty-balance-label {
    font-size: 0.75rem;
    color: #6B7280;
}

/* ----- Loyalty Activity List ----- */
.loyalty-activity-section {
    margin-bottom: 24px;
}

.loyalty-activity-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loyalty-activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.loyalty-activity-item:hover {
    border-color: #8B5CF6;
    background: #FAFAFA;
}

.loyalty-activity-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.loyalty-activity-icon.earn {
    background: #DCFCE7;
    color: #16A34A;
}

.loyalty-activity-icon.redeem {
    background: #FEE2E2;
    color: #DC2626;
}

.loyalty-activity-icon.bonus {
    background: #FEF3C7;
    color: #D97706;
}

.loyalty-activity-icon.expired {
    background: #F3F4F6;
    color: #6B7280;
}

.loyalty-activity-details {
    flex: 1;
    min-width: 0;
}

.loyalty-activity-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

.loyalty-activity-description {
    font-size: 0.8125rem;
    color: #6B7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loyalty-activity-points {
    text-align: right;
    flex-shrink: 0;
}

.loyalty-activity-points-value {
    font-size: 1rem;
    font-weight: 700;
}

.loyalty-activity-points-value.positive {
    color: #16A34A;
}

.loyalty-activity-points-value.positive::before {
    content: '+';
}

.loyalty-activity-points-value.negative {
    color: #DC2626;
}

.loyalty-activity-date {
    font-size: 0.75rem;
    color: #9CA3AF;
}

/* ----- Loyalty Rewards Grid ----- */
.loyalty-rewards-section {
    margin-bottom: 24px;
}

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

.loyalty-reward-card {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.loyalty-reward-card:hover {
    border-color: #8B5CF6;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
    transform: translateY(-4px);
}

.loyalty-reward-card.locked {
    opacity: 0.6;
    cursor: not-allowed;
}

.loyalty-reward-card.locked:hover {
    transform: none;
    box-shadow: none;
}

.loyalty-reward-image {
    height: 100px;
    background: linear-gradient(135deg, #EDE9FE 0%, #FCE7F3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    position: relative;
}

.loyalty-reward-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.loyalty-reward-locked-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loyalty-reward-locked-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.loyalty-reward-content {
    padding: 12px;
}

.loyalty-reward-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loyalty-reward-description {
    font-size: 0.75rem;
    color: #6B7280;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.loyalty-reward-cost {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #8B5CF6;
}

.loyalty-reward-cost-icon {
    font-size: 0.75rem;
}

.loyalty-reward-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    background: #DC2626;
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
}

.loyalty-reward-badge.popular {
    background: #8B5CF6;
}

.loyalty-reward-badge.new {
    background: #16A34A;
}

.loyalty-reward-badge.limited {
    background: #D97706;
}

/* ----- Loyalty Earn List ----- */
.loyalty-earn-section {
    margin-bottom: 24px;
}

.loyalty-earn-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loyalty-earn-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.loyalty-earn-item:hover {
    border-color: #8B5CF6;
    background: #FAFAFA;
}

.loyalty-earn-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
    border-radius: 12px;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.loyalty-earn-details {
    flex: 1;
    min-width: 0;
}

.loyalty-earn-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

.loyalty-earn-description {
    font-size: 0.8125rem;
    color: #6B7280;
}

.loyalty-earn-points {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.loyalty-earn-points-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #16A34A;
}

.loyalty-earn-points-label {
    font-size: 0.6875rem;
    color: #9CA3AF;
    text-transform: uppercase;
}

.loyalty-earn-multiplier {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #FEF3C7;
    color: #D97706;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 4px;
    margin-top: 4px;
}

/* ----- Loyalty Filter Tabs ----- */
.loyalty-filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.loyalty-filter-tabs::-webkit-scrollbar {
    display: none;
}

.loyalty-filter-tab {
    padding: 10px 16px;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.loyalty-filter-tab:hover {
    border-color: #8B5CF6;
    color: #8B5CF6;
}

.loyalty-filter-tab.active {
    background: #8B5CF6;
    border-color: #8B5CF6;
    color: white;
}

/* ----- Loyalty History List ----- */
.loyalty-history-section {
    margin-bottom: 24px;
}

.loyalty-history-month {
    margin-bottom: 20px;
}

.loyalty-history-month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.loyalty-history-month-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
}

.loyalty-history-month-summary {
    font-size: 0.8125rem;
    color: #6B7280;
}

.loyalty-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loyalty-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.loyalty-history-item:hover {
    background: #F9FAFB;
}

.loyalty-history-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.loyalty-history-icon.earn {
    background: #DCFCE7;
    color: #16A34A;
}

.loyalty-history-icon.redeem {
    background: #FEE2E2;
    color: #DC2626;
}

.loyalty-history-icon.bonus {
    background: #FEF3C7;
    color: #D97706;
}

.loyalty-history-icon.expired {
    background: #F3F4F6;
    color: #6B7280;
}

.loyalty-history-details {
    flex: 1;
    min-width: 0;
}

.loyalty-history-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

.loyalty-history-meta {
    font-size: 0.75rem;
    color: #9CA3AF;
}

.loyalty-history-points {
    text-align: right;
    flex-shrink: 0;
}

.loyalty-history-points-value {
    font-size: 0.9375rem;
    font-weight: 700;
}

.loyalty-history-points-value.positive {
    color: #16A34A;
}

.loyalty-history-points-value.positive::before {
    content: '+';
}

.loyalty-history-points-value.negative {
    color: #DC2626;
}

.loyalty-history-balance {
    font-size: 0.6875rem;
    color: #9CA3AF;
}

/* ----- Loyalty Tier Card (Current Tier) ----- */
.loyalty-current-tier-section {
    margin-bottom: 24px;
}

.loyalty-current-tier-card {
    background: linear-gradient(135deg, #8B5CF6 0%, #A855F7 100%);
    border-radius: 20px;
    padding: 24px;
    color: white;
    position: relative;
    overflow: hidden;
}

.loyalty-current-tier-card.bronze {
    background: linear-gradient(135deg, #CD7F32 0%, #B8860B 100%);
}

.loyalty-current-tier-card.silver {
    background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
    color: #333;
}

.loyalty-current-tier-card.gold {
    background: linear-gradient(135deg, #FFD700 0%, #FFC107 100%);
    color: #333;
}

.loyalty-current-tier-card.platinum {
    background: linear-gradient(135deg, #E5E4E2 0%, #B8B8B8 100%);
    color: #333;
}

.loyalty-current-tier-card::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.loyalty-tier-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.loyalty-tier-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.loyalty-tier-level {
    font-size: 0.75rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.loyalty-tier-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.loyalty-tier-icon-large {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 1.75rem;
}

.loyalty-tier-benefits-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.loyalty-tier-benefit-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.loyalty-tier-progress-section {
    margin-top: 16px;
}

.loyalty-tier-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.loyalty-tier-progress-label {
    font-size: 0.8125rem;
    opacity: 0.9;
}

.loyalty-tier-progress-value {
    font-size: 0.8125rem;
    font-weight: 600;
}

.loyalty-tier-progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    overflow: hidden;
}

.loyalty-tier-progress-fill {
    height: 100%;
    background: white;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.loyalty-tier-next-info {
    margin-top: 12px;
    font-size: 0.8125rem;
    opacity: 0.9;
    text-align: center;
}

/* ----- Loyalty Tier Progress Card ----- */
.loyalty-tier-progress-card {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.loyalty-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.loyalty-progress-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.loyalty-progress-percentage {
    font-size: 0.875rem;
    font-weight: 600;
    color: #8B5CF6;
}

.loyalty-progress-track {
    position: relative;
    height: 12px;
    background: #E5E7EB;
    border-radius: 6px;
    margin-bottom: 16px;
    overflow: hidden;
}

.loyalty-progress-track-fill {
    height: 100%;
    background: linear-gradient(90deg, #8B5CF6 0%, #EC4899 100%);
    border-radius: 6px;
    transition: width 0.5s ease;
}

.loyalty-progress-markers {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: -8px;
}

.loyalty-progress-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.loyalty-progress-marker-dot {
    width: 16px;
    height: 16px;
    background: #E5E7EB;
    border: 3px solid white;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.loyalty-progress-marker-dot.active {
    background: #8B5CF6;
}

.loyalty-progress-marker-dot.completed {
    background: #16A34A;
}

.loyalty-progress-marker-label {
    font-size: 0.6875rem;
    color: #6B7280;
    text-align: center;
}

.loyalty-progress-marker-label.active {
    color: #8B5CF6;
    font-weight: 600;
}

.loyalty-progress-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.loyalty-progress-stat {
    text-align: center;
    padding: 12px;
    background: #F9FAFB;
    border-radius: 8px;
}

.loyalty-progress-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
}

.loyalty-progress-stat-label {
    font-size: 0.75rem;
    color: #6B7280;
}

/* ----- Loyalty Tiers List ----- */
.loyalty-tiers-section {
    margin-bottom: 24px;
}

.loyalty-tiers-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.loyalty-tier-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: white;
    border: 2px solid #E5E7EB;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.loyalty-tier-list-item:hover {
    border-color: #8B5CF6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
}

.loyalty-tier-list-item.current {
    border-color: #8B5CF6;
    background: linear-gradient(135deg, #F5F3FF 0%, #FDF2F8 100%);
}

.loyalty-tier-list-item.locked {
    opacity: 0.6;
}

.loyalty-tier-list-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.loyalty-tier-list-icon.bronze {
    background: linear-gradient(135deg, #CD7F32 0%, #B8860B 100%);
}

.loyalty-tier-list-icon.silver {
    background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
}

.loyalty-tier-list-icon.gold {
    background: linear-gradient(135deg, #FFD700 0%, #FFC107 100%);
}

.loyalty-tier-list-icon.platinum {
    background: linear-gradient(135deg, #E5E4E2 0%, #B8B8B8 100%);
}

.loyalty-tier-list-info {
    flex: 1;
    min-width: 0;
}

.loyalty-tier-list-name {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.loyalty-tier-list-range {
    font-size: 0.8125rem;
    color: #6B7280;
}

.loyalty-tier-list-status {
    flex-shrink: 0;
}

.loyalty-tier-list-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.loyalty-tier-list-badge.current {
    background: #8B5CF6;
    color: white;
}

.loyalty-tier-list-badge.unlocked {
    background: #DCFCE7;
    color: #16A34A;
}

.loyalty-tier-list-badge.locked {
    background: #F3F4F6;
    color: #6B7280;
}

/* ----- Loyalty Tier Multiplier ----- */
.loyalty-tier-multiplier {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #92400E;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
}

.loyalty-tier-multiplier-icon {
    font-size: 0.875rem;
}

/* ----- Loyalty Tier Benefits ----- */
.loyalty-tier-benefits {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.loyalty-tier-benefit {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #F9FAFB;
    border-radius: 8px;
}

.loyalty-tier-benefit-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #DCFCE7;
    color: #16A34A;
    border-radius: 50%;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.loyalty-tier-benefit-text {
    font-size: 0.8125rem;
    color: #374151;
    line-height: 1.4;
}

/* ----- Loyalty FAQ List ----- */
.loyalty-faq-section {
    margin-bottom: 24px;
}

.loyalty-faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loyalty-faq-item {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
}

.loyalty-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    transition: background 0.2s ease;
}

.loyalty-faq-question:hover {
    background: #F9FAFB;
}

.loyalty-faq-toggle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F3F4F6;
    border-radius: 50%;
    font-size: 0.875rem;
    color: #6B7280;
    transition: transform 0.2s ease;
}

.loyalty-faq-item.expanded .loyalty-faq-toggle {
    transform: rotate(180deg);
}

.loyalty-faq-answer {
    padding: 0 16px 16px;
    font-size: 0.875rem;
    color: #6B7280;
    line-height: 1.6;
    display: none;
}

.loyalty-faq-item.expanded .loyalty-faq-answer {
    display: block;
}

/* ----- Loyalty Empty States ----- */
.loyalty-empty-state {
    text-align: center;
    padding: 48px 24px;
}

.loyalty-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #EDE9FE 0%, #FCE7F3 100%);
    border-radius: 50%;
    font-size: 2.5rem;
}

.loyalty-empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
}

.loyalty-empty-message {
    font-size: 0.9375rem;
    color: #6B7280;
    margin-bottom: 24px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

/* ----- Loyalty Load More ----- */
.loyalty-load-more {
    width: 100%;
    margin-top: 16px;
}

/* ----- Loyalty Responsive ----- */
@media (max-width: 640px) {
    .loyalty-quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }

    .loyalty-balance-summary {
        grid-template-columns: 1fr;
    }

    .loyalty-rewards-grid {
        grid-template-columns: 1fr;
    }

    .loyalty-points-value {
        font-size: 2rem;
    }

    .loyalty-tier-header {
        flex-direction: column;
        gap: 16px;
    }

    .loyalty-tier-icon-large {
        align-self: flex-end;
    }
}

@media (max-width: 639px) {
    .loyalty-points-card {
        padding: 20px;
    }

    .loyalty-quick-action {
        padding: 12px 8px;
    }

    .loyalty-quick-action-icon {
        width: 36px;
        height: 36px;
        font-size: 1.125rem;
    }

    .loyalty-quick-action-label {
        font-size: 0.6875rem;
    }

    .loyalty-tier-benefits-preview {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =====================================================
   BATCH 4: REFERRAL STYLES
   Referral Dashboard, Invite, History, Code Sharing
   ===================================================== */

/* ----- Referral Dashboard ----- */
.referral-code-card {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-radius: 20px;
    padding: 24px;
    color: white;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.referral-code-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.referral-code-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.referral-code-label {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 4px;
}

.referral-code-value {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 3px;
    font-family: 'SF Mono', 'Roboto Mono', monospace;
}

.referral-code-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 1.5rem;
}

.referral-code-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.referral-code-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.referral-code-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.referral-code-btn.primary {
    background: white;
    color: #059669;
}

.referral-code-btn.primary:hover {
    background: #F0FDF4;
}

/* ----- Referral Info Card ----- */
.referral-info-card {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.referral-info-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 16px;
}

.referral-info-reward {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border-radius: 12px;
    margin-bottom: 16px;
}

.referral-info-reward-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #10B981;
    color: white;
    border-radius: 50%;
    font-size: 1.5rem;
}

.referral-info-reward-text {
    flex: 1;
}

.referral-info-reward-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #059669;
}

.referral-info-reward-label {
    font-size: 0.8125rem;
    color: #065F46;
}

/* ----- Referral How It Works Steps ----- */
.referral-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.referral-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.referral-step-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #10B981;
    color: white;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.referral-step-content {
    flex: 1;
    padding-top: 4px;
}

.referral-step-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.referral-step-description {
    font-size: 0.8125rem;
    color: #6B7280;
    line-height: 1.5;
}

.referral-step-line {
    position: relative;
}

.referral-step-line::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 36px;
    bottom: -16px;
    width: 2px;
    background: #D1FAE5;
}

.referral-step:last-child .referral-step-line::before {
    display: none;
}

/* ----- Referral Stats Grid ----- */
.referral-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.referral-stat-card {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.referral-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.referral-stat-value.highlight {
    color: #10B981;
}

.referral-stat-label {
    font-size: 0.75rem;
    color: #6B7280;
}

/* ----- Referral Milestones ----- */
.referral-milestones-section {
    margin-bottom: 24px;
}

.referral-milestones-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.referral-milestone-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: white;
    border: 2px solid #E5E7EB;
    border-radius: 16px;
    transition: all 0.2s ease;
}

.referral-milestone-card.completed {
    border-color: #10B981;
    background: #F0FDF4;
}

.referral-milestone-card.current {
    border-color: #10B981;
}

.referral-milestone-card.locked {
    opacity: 0.6;
}

.referral-milestone-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.referral-milestone-icon.completed {
    background: #10B981;
    color: white;
}

.referral-milestone-icon.current {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    color: #10B981;
}

.referral-milestone-icon.locked {
    background: #F3F4F6;
    color: #9CA3AF;
}

.referral-milestone-info {
    flex: 1;
    min-width: 0;
}

.referral-milestone-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.referral-milestone-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.referral-milestone-bar {
    flex: 1;
    height: 6px;
    background: #E5E7EB;
    border-radius: 3px;
    overflow: hidden;
}

.referral-milestone-bar-fill {
    height: 100%;
    background: #10B981;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.referral-milestone-count {
    font-size: 0.75rem;
    color: #6B7280;
    white-space: nowrap;
}

.referral-milestone-reward {
    text-align: right;
    flex-shrink: 0;
}

.referral-milestone-reward-value {
    font-size: 1rem;
    font-weight: 700;
    color: #10B981;
}

.referral-milestone-reward-label {
    font-size: 0.6875rem;
    color: #6B7280;
}

.referral-milestone-check {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #10B981;
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
}

/* ----- Referral Recent List ----- */
.referral-recent-section {
    margin-bottom: 24px;
}

.referral-recent-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.referral-recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
}

.referral-recent-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    color: #10B981;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.referral-recent-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.referral-recent-details {
    flex: 1;
    min-width: 0;
}

.referral-recent-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

.referral-recent-date {
    font-size: 0.75rem;
    color: #9CA3AF;
}

.referral-recent-status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.referral-recent-status.completed {
    background: #DCFCE7;
    color: #16A34A;
}

.referral-recent-status.pending {
    background: #FEF3C7;
    color: #D97706;
}

.referral-recent-status.expired {
    background: #FEE2E2;
    color: #DC2626;
}

.referral-recent-reward {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #10B981;
    flex-shrink: 0;
}

/* ----- Referral Invite Tabs ----- */
.referral-invite-section {
    margin-bottom: 24px;
}

.referral-invite-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #F3F4F6;
    border-radius: 12px;
    margin-bottom: 20px;
}

.referral-invite-tab {
    flex: 1;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.referral-invite-tab:hover {
    color: #374151;
}

.referral-invite-tab.active {
    background: white;
    color: #10B981;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.referral-invite-tab-icon {
    font-size: 1rem;
}

/* ----- Referral Invite Form ----- */
.referral-invite-form {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 20px;
}

.referral-invite-form-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 16px;
}

.referral-invite-input-group {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.referral-invite-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-size: 0.9375rem;
    transition: border-color 0.2s ease;
}

.referral-invite-input:focus {
    outline: none;
    border-color: #10B981;
}

.referral-invite-input::placeholder {
    color: #9CA3AF;
}

.referral-invite-submit {
    padding: 12px 20px;
    background: #10B981;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.referral-invite-submit:hover {
    background: #059669;
}

.referral-invite-submit:disabled {
    background: #D1D5DB;
    cursor: not-allowed;
}

.referral-invite-hint {
    font-size: 0.75rem;
    color: #6B7280;
    margin-top: 8px;
}

/* ----- Referral Link Section ----- */
.referral-link-section {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.referral-link-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
}

.referral-link-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    margin-bottom: 16px;
}

.referral-link-url {
    flex: 1;
    font-size: 0.875rem;
    color: #374151;
    font-family: 'SF Mono', 'Roboto Mono', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.referral-link-copy {
    padding: 8px 16px;
    background: #10B981;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.referral-link-copy:hover {
    background: #059669;
}

.referral-link-copy.copied {
    background: #374151;
}

/* ----- Referral Share Buttons ----- */
.referral-share-section {
    margin-bottom: 24px;
}

.referral-share-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
}

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

.referral-share-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.referral-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.referral-share-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
}

.referral-share-icon.whatsapp {
    background: #25D366;
    color: white;
}

.referral-share-icon.facebook {
    background: #1877F2;
    color: white;
}

.referral-share-icon.twitter {
    background: #1DA1F2;
    color: white;
}

.referral-share-icon.email {
    background: #6B7280;
    color: white;
}

.referral-share-icon.sms {
    background: #10B981;
    color: white;
}

.referral-share-icon.copy {
    background: #374151;
    color: white;
}

.referral-share-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
}

/* ----- Referral Bulk Section ----- */
.referral-bulk-section {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.referral-bulk-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.referral-bulk-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.referral-bulk-count {
    font-size: 0.8125rem;
    color: #6B7280;
}

.referral-bulk-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-size: 0.9375rem;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.referral-bulk-textarea:focus {
    outline: none;
    border-color: #10B981;
}

.referral-bulk-textarea::placeholder {
    color: #9CA3AF;
}

.referral-bulk-hint {
    font-size: 0.75rem;
    color: #6B7280;
    margin-top: 8px;
    margin-bottom: 16px;
}

.referral-bulk-actions {
    display: flex;
    gap: 12px;
}

.referral-bulk-btn {
    flex: 1;
}

/* ----- Referral Tips Card ----- */
.referral-tips-card {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.referral-tips-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.referral-tips-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F59E0B;
    color: white;
    border-radius: 50%;
    font-size: 1.25rem;
}

.referral-tips-title {
    font-size: 1rem;
    font-weight: 600;
    color: #92400E;
}

.referral-tips-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.referral-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.referral-tip-bullet {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F59E0B;
    color: white;
    border-radius: 50%;
    font-size: 0.625rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.referral-tip-text {
    font-size: 0.875rem;
    color: #78350F;
    line-height: 1.5;
}

/* ----- Referral History Stats ----- */
.referral-history-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.referral-history-stat {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.referral-history-stat.highlight {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border-color: #10B981;
}

.referral-history-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.referral-history-stat.highlight .referral-history-stat-value {
    color: #059669;
}

.referral-history-stat-label {
    font-size: 0.75rem;
    color: #6B7280;
}

/* ----- Referral Filter Tabs ----- */
.referral-filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.referral-filter-tabs::-webkit-scrollbar {
    display: none;
}

.referral-filter-tab {
    padding: 10px 16px;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.referral-filter-tab:hover {
    border-color: #10B981;
    color: #10B981;
}

.referral-filter-tab.active {
    background: #10B981;
    border-color: #10B981;
    color: white;
}

/* ----- Referral History Month Groups ----- */
.referral-history-month {
    margin-bottom: 20px;
}

.referral-history-month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.referral-history-month-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
}

.referral-history-month-summary {
    font-size: 0.8125rem;
    color: #6B7280;
}

.referral-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.referral-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.referral-history-item:hover {
    background: #F9FAFB;
}

.referral-history-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    color: #10B981;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.referral-history-details {
    flex: 1;
    min-width: 0;
}

.referral-history-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

.referral-history-meta {
    font-size: 0.75rem;
    color: #9CA3AF;
}

.referral-history-amount {
    text-align: right;
    flex-shrink: 0;
}

.referral-history-amount-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #10B981;
}

.referral-history-status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    margin-top: 2px;
    display: inline-block;
}

.referral-history-status-badge.completed {
    background: #DCFCE7;
    color: #16A34A;
}

.referral-history-status-badge.pending {
    background: #FEF3C7;
    color: #D97706;
}

.referral-history-status-badge.expired {
    background: #FEE2E2;
    color: #DC2626;
}

/* ----- Referral Help Card ----- */
.referral-help-card {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.referral-help-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.referral-help-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EFF6FF;
    color: #2196F3;
    border-radius: 50%;
    font-size: 1.25rem;
}

.referral-help-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.referral-help-content {
    font-size: 0.875rem;
    color: #6B7280;
    line-height: 1.6;
    margin-bottom: 16px;
}

.referral-help-link {
    color: #10B981;
    text-decoration: none;
    font-weight: 500;
}

.referral-help-link:hover {
    text-decoration: underline;
}

/* ----- Referral Empty States ----- */
.referral-empty-state {
    text-align: center;
    padding: 48px 24px;
}

.referral-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border-radius: 50%;
    font-size: 2.5rem;
}

.referral-empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
}

.referral-empty-message {
    font-size: 0.9375rem;
    color: #6B7280;
    margin-bottom: 24px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

/* ----- Referral Load More ----- */
.referral-load-more {
    width: 100%;
    margin-top: 16px;
}

/* ----- Referral Responsive ----- */
@media (max-width: 640px) {
    .referral-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .referral-share-buttons {
        grid-template-columns: repeat(3, 1fr);
    }

    .referral-code-value {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }

    .referral-history-stats {
        grid-template-columns: 1fr;
    }

    .referral-code-actions {
        flex-direction: column;
    }
}

@media (max-width: 639px) {
    .referral-code-card {
        padding: 20px;
    }

    .referral-share-buttons {
        grid-template-columns: repeat(2, 1fr);
    }

    .referral-invite-input-group {
        flex-direction: column;
    }

    .referral-invite-submit {
        width: 100%;
    }

    .referral-bulk-actions {
        flex-direction: column;
    }
}

/* ==========================================================================
   BATCH 5: MERCHANT QR STYLES
   Scan & Pay, Merchant Payment, Payment History
   ========================================================================== */

/* ===== QR Scanner Section ===== */
.qr-scanner-section {
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qr-scanner-frame {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.qr-scanner-viewfinder {
    width: 220px;
    height: 220px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Corner Brackets */
.qr-scanner-corner {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 3px solid #2196F3;
}

.qr-scanner-corner.top-left {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
    border-radius: 8px 0 0 0;
}

.qr-scanner-corner.top-right {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
    border-radius: 0 8px 0 0;
}

.qr-scanner-corner.bottom-left {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
    border-radius: 0 0 0 8px;
}

.qr-scanner-corner.bottom-right {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
    border-radius: 0 0 8px 0;
}

/* Animated Scan Line */
.qr-scanner-line {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #2196F3, transparent);
    animation: scanLine 2s ease-in-out infinite;
    box-shadow: 0 0 10px #2196F3;
}

@keyframes scanLine {
    0% {
        top: 10px;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        top: calc(100% - 10px);
        opacity: 0;
    }
}

.qr-scanner-icon {
    font-size: 48px;
    opacity: 0.5;
}

.qr-scanner-start-btn {
    margin-top: 16px;
    background: linear-gradient(135deg, #2196F3 0%, #1D4ED8 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.qr-scanner-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.qr-scanner-hint {
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    text-align: center;
}

/* ===== Manual Entry ===== */
.qr-manual-entry {
    width: 100%;
    max-width: 400px;
    margin-top: 24px;
}

.qr-manual-toggle {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 15px;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.qr-manual-toggle:hover {
    background: #f1f5f9;
}

.qr-manual-form {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===== Merchant Favorites List ===== */
.merchant-favorites-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.merchant-favorite-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.merchant-favorite-item:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.merchant-favorite-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #4338ca;
    overflow: hidden;
}

.merchant-favorite-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.merchant-favorite-details {
    flex: 1;
    min-width: 0;
}

.merchant-favorite-name {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

.merchant-favorite-category {
    font-size: 13px;
    color: #64748b;
}

.merchant-favorite-arrow {
    font-size: 18px;
    color: #94a3b8;
}

/* ===== Merchant Recent Payments List ===== */
.merchant-recent-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.merchant-recent-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.merchant-recent-item:hover {
    background: #f8fafc;
}

.merchant-recent-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #d97706;
    overflow: hidden;
}

.merchant-recent-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.merchant-recent-details {
    flex: 1;
    min-width: 0;
}

.merchant-recent-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

.merchant-recent-date {
    font-size: 12px;
    color: #64748b;
}

.merchant-recent-amount {
    text-align: right;
}

.merchant-recent-value {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

.merchant-recent-status {
    font-size: 11px;
    font-weight: 500;
}

.merchant-recent-status.status-completed {
    color: #059669;
}

.merchant-recent-status.status-pending {
    color: #d97706;
}

.merchant-recent-status.status-failed {
    color: #dc2626;
}

/* ===== Merchant Quick Actions ===== */
.merchant-quick-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 16px 0;
}

.merchant-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.merchant-quick-action:hover {
    background: #f8fafc;
    border-color: #2196F3;
}

.merchant-quick-icon {
    font-size: 24px;
}

.merchant-quick-label {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
}

/* ===== QR Help Steps ===== */
.qr-help-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qr-help-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.qr-help-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2196F3 0%, #1D4ED8 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.qr-help-text h4 {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.qr-help-text p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* ===== Merchant Payment Card ===== */
.merchant-payment-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.merchant-payment-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.merchant-payment-logo {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #1d4ed8;
    overflow: hidden;
}

.merchant-payment-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.merchant-payment-info {
    flex: 1;
    min-width: 0;
}

.merchant-payment-name {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.merchant-payment-category {
    display: inline-block;
    font-size: 12px;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 20px;
    margin-right: 8px;
}

.merchant-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    background: #dcfce7;
    padding: 4px 10px;
    border-radius: 20px;
}

.merchant-verified-badge span {
    font-size: 12px;
}

.merchant-favorite-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.merchant-favorite-btn:hover {
    background: #fef3c7;
    border-color: #fcd34d;
}

.merchant-favorite-btn.active {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #f59e0b;
}

.merchant-payment-address {
    margin-top: 12px;
    font-size: 13px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===== Payment Amount Section ===== */
.payment-amount-section {
    background: #f8fafc;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
}

.payment-amount-label {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 12px;
    display: block;
}

.payment-amount-fixed {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.payment-amount-currency {
    font-size: 24px;
    font-weight: 600;
    color: #64748b;
}

.payment-amount-value {
    font-size: 42px;
    font-weight: 700;
    color: #1e293b;
}

.payment-amount-note {
    font-size: 12px;
    color: #64748b;
    margin-top: 8px;
}

.payment-amount-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    transition: border-color 0.2s ease;
}

.payment-amount-input-wrapper:focus-within {
    border-color: #2196F3;
}

.payment-amount-input-wrapper .payment-amount-currency {
    font-size: 20px;
}

.payment-amount-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    background: transparent;
}

.payment-amount-input::placeholder {
    color: #cbd5e1;
}

/* ===== Payment Quick Amounts ===== */
.payment-quick-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.payment-quick-amount {
    padding: 10px 18px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-quick-amount:hover {
    border-color: #2196F3;
    color: #2196F3;
}

.payment-quick-amount.active {
    background: linear-gradient(135deg, #2196F3 0%, #1D4ED8 100%);
    border-color: transparent;
    color: white;
}

/* ===== Payment Reference Section ===== */
.payment-reference-section {
    margin-bottom: 16px;
}

/* ===== Payment Wallet Section ===== */
.payment-wallet-section {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.payment-wallet-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment-wallet-label {
    font-size: 14px;
    color: #0369a1;
}

.payment-wallet-balance {
    font-size: 16px;
    font-weight: 700;
    color: #0c4a6e;
}

.payment-insufficient-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 13px;
    color: #dc2626;
}

.payment-insufficient-warning a {
    color: #dc2626;
    font-weight: 600;
    text-decoration: underline;
}

/* ===== Payment Summary Section ===== */
.payment-summary-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.payment-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: #64748b;
}

.payment-summary-row.total {
    border-top: 1px solid #e2e8f0;
    margin-top: 8px;
    padding-top: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

/* ===== Payment Pay Button ===== */
.payment-pay-btn {
    width: 100%;
    padding: 16px;
    font-size: 17px;
}

/* ===== Payment Security Note ===== */
.payment-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 12px;
    color: #64748b;
}

/* ===== Payment Success Container ===== */
.payment-success-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
}

.payment-success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}

.payment-success-title {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 24px 0;
}

.payment-success-details {
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 320px;
    margin-bottom: 24px;
}

.payment-success-amount {
    font-size: 36px;
    font-weight: 700;
    color: #059669;
    margin-bottom: 8px;
}

.payment-success-merchant {
    font-size: 15px;
    color: #475569;
    margin-bottom: 16px;
}

.payment-success-merchant strong {
    color: #1e293b;
}

.payment-success-ref {
    font-size: 12px;
    color: #94a3b8;
    font-family: monospace;
    margin-bottom: 4px;
}

.payment-success-time {
    font-size: 12px;
    color: #64748b;
}

.payment-success-actions {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 320px;
}

.payment-success-actions .tgn-retail-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ===== QR History Stats ===== */
.qr-history-stats {
    display: flex;
    gap: 12px;
    padding: 4px;
    background: #f8fafc;
    border-radius: 16px;
    margin-bottom: 20px;
}

.qr-history-stat {
    flex: 1;
    text-align: center;
    padding: 16px 12px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.qr-history-stat.highlight {
    background: linear-gradient(135deg, #2196F3 0%, #1D4ED8 100%);
    border: none;
}

.qr-history-stat.highlight .qr-history-stat-value,
.qr-history-stat.highlight .qr-history-stat-label {
    color: white;
}

.qr-history-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    display: block;
}

.qr-history-stat-label {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
    display: block;
}

/* ===== QR History Filter Tabs ===== */
.qr-history-filter-tabs {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow-x: auto;
}

.qr-history-filter-tab {
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.qr-history-filter-tab:hover {
    color: #475569;
}

.qr-history-filter-tab.active {
    background: white;
    color: #2196F3;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ===== QR History Month Group ===== */
.qr-history-month {
    margin-bottom: 24px;
}

.qr-history-month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 0 4px;
}

.qr-history-month-title {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.qr-history-month-summary {
    font-size: 12px;
    color: #64748b;
}

/* ===== QR History List ===== */
.qr-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qr-history-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qr-history-item:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.qr-history-merchant-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #0284c7;
    overflow: hidden;
}

.qr-history-merchant-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qr-history-details {
    flex: 1;
    min-width: 0;
}

.qr-history-merchant-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.qr-history-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
}

.qr-history-date {
    color: #64748b;
}

.qr-history-ref {
    color: #94a3b8;
    font-family: monospace;
    font-size: 11px;
}

.qr-history-amount-section {
    text-align: right;
}

.qr-history-amount {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.qr-history-amount.failed {
    color: #dc2626;
    text-decoration: line-through;
}

.qr-history-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 20px;
}

.qr-history-status.completed {
    background: #dcfce7;
    color: #15803d;
}

.qr-history-status.pending {
    background: #fef9c3;
    color: #a16207;
}

.qr-history-status.failed {
    background: #fee2e2;
    color: #dc2626;
}

/* ===== QR History Load More ===== */
.qr-history-load-more {
    width: 100%;
    margin-top: 16px;
}

/* ===== QR History Empty State ===== */
.qr-history-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
}

.qr-history-empty-icon {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.qr-history-empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: #475569;
    margin: 0 0 8px 0;
}

.qr-history-empty-state p {
    font-size: 14px;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

/* ===== QR Favorites Grid ===== */
.qr-favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}

.qr-favorite-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qr-favorite-card:hover {
    background: #f8fafc;
    border-color: #2196F3;
    transform: translateY(-2px);
}

.qr-favorite-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #4338ca;
    overflow: hidden;
}

.qr-favorite-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qr-favorite-name {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    text-align: center;
    line-height: 1.3;
}

.qr-favorite-count {
    font-size: 10px;
    color: #94a3b8;
}

/* ===== Receipt Modal ===== */
.receipt-modal {
    max-width: 400px;
}

.receipt-content {
    text-align: center;
    padding: 16px 0;
}

.receipt-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}

.receipt-status.completed {
    background: #dcfce7;
    color: #15803d;
}

.receipt-status.pending {
    background: #fef9c3;
    color: #a16207;
}

.receipt-status.failed {
    background: #fee2e2;
    color: #dc2626;
}

.receipt-status-icon {
    font-size: 16px;
}

.receipt-amount {
    font-size: 36px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

.receipt-merchant {
    font-size: 15px;
    color: #64748b;
    margin-bottom: 24px;
}

.receipt-merchant strong {
    color: #1e293b;
    display: block;
    font-size: 17px;
    margin-top: 4px;
}

.receipt-details {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    text-align: left;
}

.receipt-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
}

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

.receipt-detail-row span:first-child {
    color: #64748b;
}

.receipt-detail-row span:last-child {
    color: #1e293b;
    font-weight: 500;
    text-align: right;
    max-width: 60%;
    word-break: break-all;
}

/* ===== Merchant QR Responsive Styles ===== */
@media (max-width: 640px) {
    .qr-scanner-frame {
        max-width: 280px;
        padding: 20px;
    }

    .qr-scanner-viewfinder {
        width: 180px;
        height: 180px;
    }

    .qr-scanner-corner {
        width: 32px;
        height: 32px;
    }

    .qr-history-stats {
        flex-direction: column;
    }

    .qr-history-stat {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        padding: 14px 16px;
    }

    .qr-history-stat.highlight {
        flex-direction: row;
    }

    .qr-history-stat-value {
        font-size: 18px;
    }

    .qr-history-stat-label {
        margin-top: 0;
    }

    .qr-favorites-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .payment-quick-amounts {
        justify-content: center;
    }

    .payment-success-actions {
        flex-direction: column;
    }

    .merchant-quick-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 639px) {
    .qr-scanner-frame {
        max-width: 260px;
        padding: 16px;
    }

    .qr-scanner-viewfinder {
        width: 160px;
        height: 160px;
    }

    .qr-scanner-corner {
        width: 28px;
        height: 28px;
        border-width: 2px;
    }

    .qr-history-filter-tabs {
        padding: 3px;
    }

    .qr-history-filter-tab {
        padding: 8px 12px;
        font-size: 12px;
    }

    .qr-favorites-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .qr-favorite-card {
        padding: 12px 8px;
    }

    .qr-favorite-logo {
        width: 40px;
        height: 40px;
    }

    .qr-favorite-name {
        font-size: 11px;
    }

    .payment-amount-value {
        font-size: 32px;
    }

    .payment-amount-input {
        font-size: 24px;
    }

    .merchant-payment-header {
        flex-wrap: wrap;
    }

    .merchant-payment-logo {
        width: 52px;
        height: 52px;
    }

    .merchant-payment-name {
        font-size: 16px;
    }

    .payment-success-amount {
        font-size: 28px;
    }

    .receipt-amount {
        font-size: 28px;
    }
}

/* === ACCESSIBILITY WCAG 2.1 AA COMPLIANCE === */

/* Skip Link - Visible on Focus */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--sdpkt-blue);
    color: var(--sdpkt-white);
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10000;
    border-radius: 0 0 4px 0;
    font-weight: 600;
    font-size: 0.875rem;
}

.skip-link:focus {
    top: 0;
}

/* Screen Reader Only Text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus Visible for All Interactive Elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
    outline: 3px solid var(--sdpkt-blue);
    outline-offset: 2px;
}

/* Enhanced Focus States for Accessibility */
button:focus-visible,
.loyalty-action-btn:focus-visible,
.loyalty-category-tab:focus-visible,
.loyalty-filter-tab:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--sdpkt-blue-rgb), 0.2);
}

/* Tab Navigation Accessibility */
[role="tab"] {
    cursor: pointer;
}

[role="tab"][aria-selected="false"]:hover {
    background-color: rgba(var(--sdpkt-blue-rgb), 0.05);
}

[role="tab"][aria-selected="true"] {
    border-bottom: 3px solid var(--sdpkt-blue);
}

/* Alert Role Styling for Accessibility */
[role="alert"] {
    position: relative;
    padding: 16px;
    margin: 16px 0;
    border-radius: 8px;
    border-left: 4px solid var(--sdpkt-blue);
}

/* Expandable Content (Accordions) Accessibility */
[aria-expanded="true"],
[aria-expanded="false"] {
    cursor: pointer;
}

/* Disabled State Accessibility */
button:disabled,
[role="button"][aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* High Contrast Mode Support */
@media (prefers-contrast: more) {
    :root {
        --border-color: rgba(var(--sdpkt-black-rgb), 0.3);
        --text-muted: rgba(var(--sdpkt-black-rgb), 0.8);
    }

    button:focus-visible,
    a:focus-visible,
    [role="button"]:focus-visible {
        outline: 4px solid var(--sdpkt-blue);
        outline-offset: 3px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Mode Accessibility */
@media (prefers-color-scheme: dark) {
    .skip-link {
        background: var(--sdpkt-blue);
        color: var(--sdpkt-white);
    }
}

/* ============================================================
   RTL (Right-to-Left) Language Support
   ============================================================
   Prepared for future RTL language support (Arabic, Hebrew, etc.)
   Apply dir="rtl" to <html> element to enable RTL mode.
   ============================================================ */

/* RTL Base Direction */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* RTL Text Alignment Overrides */
[dir="rtl"] .text-left {
    text-align: right;
}

[dir="rtl"] .text-right {
    text-align: left;
}

[dir="rtl"] .text-start {
    text-align: right;
}

[dir="rtl"] .text-end {
    text-align: left;
}

/* RTL Flex Direction */
[dir="rtl"] .flex-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .flex-row-reverse {
    flex-direction: row;
}

/* RTL Margins */
[dir="rtl"] .ml-auto {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .mr-auto {
    margin-right: 0;
    margin-left: auto;
}

[dir="rtl"] .ms-auto {
    margin-right: auto;
    margin-left: 0;
}

[dir="rtl"] .me-auto {
    margin-left: auto;
    margin-right: 0;
}

/* RTL Padding */
[dir="rtl"] .ps-0 { padding-right: 0; padding-left: initial; }
[dir="rtl"] .ps-1 { padding-right: 0.25rem; padding-left: initial; }
[dir="rtl"] .ps-2 { padding-right: 0.5rem; padding-left: initial; }
[dir="rtl"] .ps-3 { padding-right: 1rem; padding-left: initial; }
[dir="rtl"] .ps-4 { padding-right: 1.5rem; padding-left: initial; }
[dir="rtl"] .ps-5 { padding-right: 3rem; padding-left: initial; }

[dir="rtl"] .pe-0 { padding-left: 0; padding-right: initial; }
[dir="rtl"] .pe-1 { padding-left: 0.25rem; padding-right: initial; }
[dir="rtl"] .pe-2 { padding-left: 0.5rem; padding-right: initial; }
[dir="rtl"] .pe-3 { padding-left: 1rem; padding-right: initial; }
[dir="rtl"] .pe-4 { padding-left: 1.5rem; padding-right: initial; }
[dir="rtl"] .pe-5 { padding-left: 3rem; padding-right: initial; }

/* RTL List Styles */
[dir="rtl"] ul,
[dir="rtl"] ol {
    padding-right: 2rem;
    padding-left: 0;
}

[dir="rtl"] .list-unstyled {
    padding-right: 0;
}

/* RTL Form Controls */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="search"],
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"] {
    direction: ltr;
    text-align: right;
}

/* RTL Form Labels and Validation */
[dir="rtl"] .form-label {
    text-align: right;
}

[dir="rtl"] .validation-message {
    text-align: right;
}

/* RTL Input Group */
[dir="rtl"] .input-group {
    flex-direction: row-reverse;
}

[dir="rtl"] .input-group-prepend {
    order: 2;
}

[dir="rtl"] .input-group-append {
    order: 0;
}

/* RTL Icons in Buttons */
[dir="rtl"] .btn .icon-left {
    margin-left: 0.5rem;
    margin-right: 0;
}

[dir="rtl"] .btn .icon-right {
    margin-right: 0.5rem;
    margin-left: 0;
}

/* RTL Navigation */
[dir="rtl"] .nav,
[dir="rtl"] .navbar-nav {
    flex-direction: row-reverse;
}

[dir="rtl"] .nav-item {
    margin-left: 0;
    margin-right: 1rem;
}

[dir="rtl"] .nav-item:first-child {
    margin-right: 0;
}

/* RTL Breadcrumbs */
[dir="rtl"] .breadcrumb {
    flex-direction: row-reverse;
}

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\\" !important;
    float: right;
    padding-left: 0.5rem;
    padding-right: 0;
}

/* RTL Modal and Dialogs */
[dir="rtl"] .modal-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .modal-close {
    left: 1rem;
    right: auto;
}

/* RTL Cards */
[dir="rtl"] .card-header,
[dir="rtl"] .card-footer {
    text-align: right;
}

[dir="rtl"] .card-actions {
    flex-direction: row-reverse;
}

/* RTL Tables */
[dir="rtl"] table {
    direction: rtl;
}

[dir="rtl"] th,
[dir="rtl"] td {
    text-align: right;
}

/* RTL Alerts and Notifications */
[dir="rtl"] .alert {
    text-align: right;
}

[dir="rtl"] .alert-icon {
    margin-left: 0.75rem;
    margin-right: 0;
}

[dir="rtl"] .alert-close {
    left: 0.5rem;
    right: auto;
}

/* RTL Progress and Sliders */
[dir="rtl"] .progress-bar {
    right: 0;
    left: auto;
    transform-origin: right center;
}

/* RTL Dropdown Menus */
[dir="rtl"] .dropdown-menu {
    text-align: right;
    left: auto;
    right: 0;
}

[dir="rtl"] .dropdown-item {
    text-align: right;
}

[dir="rtl"] .dropdown-item .icon {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* RTL Sidebar/Drawer */
[dir="rtl"] .sidebar {
    right: 0;
    left: auto;
}

[dir="rtl"] .sidebar.sidebar-left {
    left: 0;
    right: auto;
}

/* RTL Float Classes */
[dir="rtl"] .float-start {
    float: right !important;
}

[dir="rtl"] .float-end {
    float: left !important;
}

/* RTL Border Radius */
[dir="rtl"] .rounded-start {
    border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
}

[dir="rtl"] .rounded-end {
    border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
}

/* RTL Checkbox and Radio */
[dir="rtl"] .form-check {
    padding-right: 1.5rem;
    padding-left: 0;
}

[dir="rtl"] .form-check-input {
    margin-right: -1.5rem;
    margin-left: 0;
}

[dir="rtl"] .form-check-label {
    margin-right: 0.25rem;
    margin-left: 0;
}

/* RTL Switch Toggle */
[dir="rtl"] .form-switch {
    padding-right: 2.5rem;
    padding-left: 0;
}

[dir="rtl"] .form-switch .form-check-input {
    margin-right: -2.5rem;
    margin-left: 0;
}

/* RTL Badge Positions */
[dir="rtl"] .badge-start {
    left: auto;
    right: 0;
}

[dir="rtl"] .badge-end {
    right: auto;
    left: 0;
}

/* RTL Avatar Group */
[dir="rtl"] .avatar-group .avatar {
    margin-left: 0;
    margin-right: -0.5rem;
}

[dir="rtl"] .avatar-group .avatar:first-child {
    margin-right: 0;
}

/* RTL Timeline */
[dir="rtl"] .timeline {
    padding-right: 2rem;
    padding-left: 0;
}

[dir="rtl"] .timeline::before {
    right: 0.5rem;
    left: auto;
}

[dir="rtl"] .timeline-item::before {
    right: -1.5rem;
    left: auto;
}

/* RTL Stepper */
[dir="rtl"] .stepper {
    flex-direction: row-reverse;
}

[dir="rtl"] .stepper-line {
    right: auto;
    left: calc(50% + 1.5rem);
}

/* RTL Toast/Snackbar */
[dir="rtl"] .toast-container.position-end {
    left: 1rem;
    right: auto;
}

[dir="rtl"] .toast-container.position-start {
    right: 1rem;
    left: auto;
}

/* RTL Tabs */
[dir="rtl"] .tabs {
    flex-direction: row-reverse;
}

/* RTL Search Input */
[dir="rtl"] .search-input .search-icon {
    left: auto;
    right: 0.75rem;
}

[dir="rtl"] .search-input input {
    padding-left: 1rem;
    padding-right: 2.5rem;
}

/* RTL Transaction List (SDPKT specific) */
[dir="rtl"] .transaction-item {
    flex-direction: row-reverse;
}

[dir="rtl"] .transaction-icon {
    margin-left: 1rem;
    margin-right: 0;
}

[dir="rtl"] .transaction-amount {
    text-align: left;
}

/* RTL Wallet Card (SDPKT specific) */
[dir="rtl"] .wallet-card {
    text-align: right;
}

[dir="rtl"] .wallet-balance {
    direction: ltr;
    display: inline-block;
}

/* RTL Quick Actions Grid (SDPKT specific) */
[dir="rtl"] .quick-actions {
    direction: rtl;
}

/* RTL Service Cards (SDPKT specific) */
[dir="rtl"] .service-card {
    text-align: right;
}

[dir="rtl"] .service-card .icon {
    margin-left: 0.75rem;
    margin-right: 0;
}

/* RTL Loyalty Points (SDPKT specific) */
[dir="rtl"] .loyalty-points {
    direction: ltr;
    display: inline-block;
}

/* RTL Animation Directions */
[dir="rtl"] .slide-in-left {
    animation-name: slideInRight;
}

[dir="rtl"] .slide-in-right {
    animation-name: slideInLeft;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* RTL Print Styles */
@media print {
    [dir="rtl"] {
        direction: rtl;
        text-align: right;
    }
}

/* End of RTL Support */

/* ========================================
   Merchant QR Receipt Page
   ======================================== */

.merchant-qr-receipt-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 16px);
}

.merchant-qr-receipt-status-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs, 6px);
    padding: var(--spacing-sm, 10px) var(--spacing-md, 16px);
    border-radius: var(--radius-lg, 12px);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.merchant-qr-receipt-status-badge.status-completed {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.merchant-qr-receipt-status-badge.status-pending {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.merchant-qr-receipt-status-badge.status-failed {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.merchant-qr-receipt-status-icon {
    font-size: 1.1rem;
}

.merchant-qr-receipt-status-text {
    font-size: 0.85rem;
}

.merchant-qr-receipt-merchant-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm, 10px);
    padding: var(--spacing-md, 16px);
    text-align: center;
}

.merchant-qr-receipt-merchant-logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--tgn-app-primary, var(--tgn-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
}

.merchant-qr-receipt-merchant-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.merchant-qr-receipt-merchant-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #1a1a2e);
    margin: 0;
}

.merchant-qr-receipt-merchant-address {
    font-size: 0.85rem;
    color: var(--text-muted, #6b7280);
    margin: 0;
}

.merchant-qr-receipt-amounts {
    background: var(--surface-primary, #ffffff);
    border-radius: var(--radius-lg, 12px);
    padding: var(--spacing-md, 16px);
    border: 1px solid var(--border-light, #e5e7eb);
}

.merchant-qr-receipt-amount-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs, 6px) 0;
}

.merchant-qr-receipt-amount-label {
    font-size: 0.9rem;
    color: var(--text-muted, #6b7280);
}

.merchant-qr-receipt-amount-value {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary, #1a1a2e);
}

.merchant-qr-receipt-total-row {
    border-top: 1px solid var(--border-light, #e5e7eb);
    margin-top: var(--spacing-xs, 6px);
    padding-top: var(--spacing-sm, 10px);
}

.merchant-qr-receipt-total-row .merchant-qr-receipt-amount-label {
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
}

.merchant-qr-receipt-total-row .merchant-qr-receipt-amount-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tgn-app-primary, var(--tgn-primary));
}

.merchant-qr-receipt-details {
    background: var(--surface-primary, #ffffff);
    border-radius: var(--radius-lg, 12px);
    padding: var(--spacing-md, 16px);
    border: 1px solid var(--border-light, #e5e7eb);
}

.merchant-qr-receipt-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin: 0 0 var(--spacing-sm, 10px) 0;
}

.merchant-qr-receipt-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs, 6px) 0;
    border-bottom: 1px solid var(--border-light, #e5e7eb);
}

.merchant-qr-receipt-detail-row:last-child {
    border-bottom: none;
}

.merchant-qr-receipt-detail-label {
    font-size: 0.85rem;
    color: var(--text-muted, #6b7280);
}

.merchant-qr-receipt-detail-value {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary, #1a1a2e);
    text-align: right;
}

.merchant-qr-receipt-detail-value-with-copy {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 6px);
}

.merchant-qr-receipt-copy-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 4px;
    border-radius: var(--radius-sm, 6px);
    color: var(--text-muted, #6b7280);
    transition: all 0.15s ease;
}

.merchant-qr-receipt-copy-btn:hover {
    background: var(--surface-hover, #f3f4f6);
    color: var(--tgn-app-primary, var(--tgn-primary));
}

.merchant-qr-receipt-points-block {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 10px);
    padding: var(--spacing-md, 16px);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
    border-radius: var(--radius-lg, 12px);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.merchant-qr-receipt-points-icon {
    font-size: 1.75rem;
}

.merchant-qr-receipt-points-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.merchant-qr-receipt-points-earned {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
}

.merchant-qr-receipt-points-link {
    font-size: 0.8rem;
    color: var(--tgn-app-primary, var(--tgn-primary));
    text-decoration: none;
}

.merchant-qr-receipt-points-link:hover {
    text-decoration: underline;
}

.merchant-qr-receipt-qr-block {
    text-align: center;
    padding: var(--spacing-md, 16px);
    background: var(--surface-primary, #ffffff);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--border-light, #e5e7eb);
}

.merchant-qr-receipt-qr-image {
    width: 160px;
    height: 160px;
    margin: var(--spacing-sm, 10px) auto;
    display: block;
}

.merchant-qr-receipt-qr-description {
    font-size: 0.8rem;
    color: var(--text-muted, #6b7280);
    margin: 0;
}

.merchant-qr-receipt-copy-notification {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--tgn-app-primary, var(--tgn-primary));
    color: white;
    padding: var(--spacing-xs, 6px) var(--spacing-md, 16px);
    border-radius: var(--radius-lg, 12px);
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.merchant-qr-receipt-actions {
    display: flex;
    gap: var(--spacing-sm, 10px);
    margin-top: var(--spacing-sm, 10px);
}

.merchant-qr-receipt-actions .tgn-retail-btn {
    flex: 1;
}

.merchant-qr-receipt-footer {
    text-align: center;
    padding: var(--spacing-sm, 10px) 0;
}

.merchant-qr-receipt-history-link {
    font-size: 0.85rem;
    color: var(--tgn-app-primary, var(--tgn-primary));
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 6px);
}

.merchant-qr-receipt-history-link:hover {
    text-decoration: underline;
}

/* ========================================
   Loyalty Reward Detail Page
   ======================================== */

.loyalty-reward-detail-hero {
    position: relative;
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    margin-bottom: var(--spacing-md, 16px);
}

.loyalty-reward-detail-hero-image {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

.loyalty-reward-detail-hero-placeholder {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.15));
    color: var(--tgn-app-primary, var(--tgn-primary));
}

.loyalty-reward-detail-featured-badge {
    position: absolute;
    top: var(--spacing-sm, 10px);
    right: var(--spacing-sm, 10px);
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.loyalty-reward-detail-title-section {
    margin-bottom: var(--spacing-md, 16px);
}

.loyalty-reward-detail-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary, #1a1a2e);
    margin: 0 0 var(--spacing-xs, 6px) 0;
}

.loyalty-reward-detail-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.loyalty-reward-detail-type-voucher { background: rgba(99, 102, 241, 0.12); color: var(--tgn-primary); }
.loyalty-reward-detail-type-discount { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.loyalty-reward-detail-type-product { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.loyalty-reward-detail-type-cashback { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.loyalty-reward-detail-type-experience { background: rgba(168, 85, 247, 0.12); color: #9333ea; }

.loyalty-reward-detail-short-description {
    font-size: 0.9rem;
    color: var(--text-secondary, #4b5563);
    margin: var(--spacing-sm, 10px) 0 0 0;
    line-height: 1.5;
}

.loyalty-reward-detail-cost-card {
    background: linear-gradient(135deg, var(--tgn-app-primary, var(--tgn-primary)), var(--tgn-app-secondary, #8b5cf6));
    color: white;
    border-radius: var(--radius-lg, 12px);
    padding: var(--spacing-md, 16px);
    text-align: center;
    margin-bottom: var(--spacing-md, 16px);
}

.loyalty-reward-detail-cost-label {
    font-size: 0.8rem;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.loyalty-reward-detail-cost-value {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.loyalty-reward-detail-cost-worth {
    margin-top: var(--spacing-xs, 6px);
    font-size: 0.85rem;
    opacity: 0.9;
}

.loyalty-reward-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm, 10px);
    margin-bottom: var(--spacing-md, 16px);
}

.loyalty-reward-detail-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: var(--surface-secondary, #f3f4f6);
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary, #4b5563);
}

.loyalty-reward-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.loyalty-reward-detail-tag {
    padding: 3px 10px;
    background: var(--surface-secondary, #f3f4f6);
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted, #6b7280);
}

.loyalty-reward-detail-availability {
    background: var(--surface-primary, #ffffff);
    border-radius: var(--radius-lg, 12px);
    padding: var(--spacing-md, 16px);
    border: 1px solid var(--border-light, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 10px);
    margin-bottom: var(--spacing-md, 16px);
}

.loyalty-reward-detail-availability-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.loyalty-reward-detail-availability-label {
    font-size: 0.85rem;
    color: var(--text-muted, #6b7280);
}

.loyalty-reward-detail-availability-value {
    font-size: 0.85rem;
    font-weight: 600;
}

.loyalty-reward-detail-availability-value.in-stock { color: #16a34a; }
.loyalty-reward-detail-availability-value.low-stock { color: #d97706; }
.loyalty-reward-detail-availability-value.out-of-stock { color: #dc2626; }

.loyalty-reward-detail-description,
.loyalty-reward-detail-instructions {
    background: var(--surface-primary, #ffffff);
    border-radius: var(--radius-lg, 12px);
    padding: var(--spacing-md, 16px);
    border: 1px solid var(--border-light, #e5e7eb);
    margin-bottom: var(--spacing-md, 16px);
}

.loyalty-reward-detail-description h3,
.loyalty-reward-detail-instructions h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin: 0 0 var(--spacing-sm, 10px) 0;
}

.loyalty-reward-detail-description p,
.loyalty-reward-detail-instructions p {
    font-size: 0.88rem;
    color: var(--text-secondary, #4b5563);
    line-height: 1.6;
    margin: 0;
    white-space: pre-line;
}

.loyalty-reward-detail-terms-section {
    margin-bottom: var(--spacing-lg, 24px);
}

.loyalty-reward-detail-terms-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface-primary, #ffffff);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    padding: var(--spacing-sm, 10px) var(--spacing-md, 16px);
    cursor: pointer;
    transition: background 0.15s ease;
}

.loyalty-reward-detail-terms-toggle:hover {
    background: var(--surface-hover, #f9fafb);
}

.loyalty-reward-detail-terms-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
}

.loyalty-reward-detail-terms-icon {
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
    transition: transform 0.2s ease;
}

.loyalty-reward-detail-terms-content {
    background: var(--surface-primary, #ffffff);
    border: 1px solid var(--border-light, #e5e7eb);
    border-top: none;
    border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
    padding: var(--spacing-md, 16px);
    font-size: 0.82rem;
    color: var(--text-secondary, #4b5563);
    line-height: 1.6;
    white-space: pre-line;
}

.loyalty-reward-detail-cta-bar {
    position: sticky;
    bottom: 0;
    background: var(--surface-primary, #ffffff);
    padding: var(--spacing-md, 16px);
    border-top: 1px solid var(--border-light, #e5e7eb);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    z-index: 10;
}

.loyalty-reward-detail-cta-btn {
    width: 100%;
    padding: var(--spacing-sm, 10px) var(--spacing-md, 16px);
    border: none;
    border-radius: var(--radius-lg, 12px);
    background: var(--tgn-app-primary, var(--tgn-primary));
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.loyalty-reward-detail-cta-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.loyalty-reward-detail-cta-btn:active {
    transform: translateY(0);
}

.loyalty-reward-detail-cta-btn-disabled {
    background: var(--surface-secondary, #e5e7eb);
    color: var(--text-muted, #9ca3af);
    cursor: not-allowed;
}

.loyalty-reward-detail-cta-btn-disabled:hover {
    opacity: 1;
    transform: none;
}

/* ============================================================
   SDPKT COMPREHENSIVE DARK MODE OVERRIDES
   Catches all shared component white backgrounds that the
   design system dark overrides miss.
   ============================================================ */

/* Retail Light wrapper - force all white backgrounds to dark */
[data-theme="dark"] .tgn-retail-light .tgn-retail-icon-grid,
[data-theme="dark"] .tgn-retail-light .tgn-retail-empty,
[data-theme="dark"] .tgn-retail-light .tgn-retail-section,
[data-theme="dark"] .tgn-retail-light .tgn-retail-form-section,
[data-theme="dark"] .tgn-retail-light .tgn-retail-service-unavailable,
[data-theme="dark"] .tgn-retail-light .tgn-retail-how-it-works,
[data-theme="dark"] .tgn-retail-light .tgn-retail-info-section,
[data-theme="dark"] .tgn-retail-light .tgn-retail-history-section,
[data-theme="dark"] .tgn-retail-light .tgn-retail-details-section {
    background: transparent !important;
    color: var(--text-primary, #fff) !important;
}

[data-theme="dark"] .tgn-retail-light .tgn-retail-empty-text,
[data-theme="dark"] .tgn-retail-light .tgn-retail-info-text,
[data-theme="dark"] .tgn-retail-light .tgn-retail-helper-text,
[data-theme="dark"] .tgn-retail-light .tgn-retail-description,
[data-theme="dark"] .tgn-retail-light label,
[data-theme="dark"] .tgn-retail-light p,
[data-theme="dark"] .tgn-retail-light h2,
[data-theme="dark"] .tgn-retail-light h3 {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .tgn-retail-light h1,
[data-theme="dark"] .tgn-retail-light .tgn-retail-section-title {
    color: #fff !important;
}

/* Retail cards and list items */
[data-theme="dark"] .tgn-retail-light .tgn-retail-card,
[data-theme="dark"] .tgn-retail-light .tgn-retail-list-item,
[data-theme="dark"] .tgn-retail-light .tgn-retail-option,
[data-theme="dark"] .tgn-retail-light .tgn-retail-step {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

/* Chat page dark mode */
[data-theme="dark"] .chat-page {
    background: var(--bg-primary, #0a0a0a) !important;
    color: var(--text-primary, #fff) !important;
}

[data-theme="dark"] .chat-page .chat-list,
[data-theme="dark"] .chat-page .chat-header,
[data-theme="dark"] .chat-page .chat-search {
    background: transparent !important;
}

[data-theme="dark"] .chat-page .chat-item,
[data-theme="dark"] .chat-page .conversation-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .chat-page .chat-item-name,
[data-theme="dark"] .chat-page .conversation-name {
    color: #fff !important;
}

[data-theme="dark"] .chat-page .chat-item-message,
[data-theme="dark"] .chat-page .conversation-last-message,
[data-theme="dark"] .chat-page .chat-item-time {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .chat-page input[type="search"],
[data-theme="dark"] .chat-page input[type="text"] {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* Receive page dark mode override */
[data-theme="dark"] .receive-page {
    background: var(--bg-primary, #0a0a0a) !important;
}

[data-theme="dark"] .receive-page .receive-card,
[data-theme="dark"] .receive-page .qr-card,
[data-theme="dark"] .receive-page .payment-details-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .receive-page .tab-btn:not(.active) {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.5);
}

/* Statements page dark mode */
[data-theme="dark"] .statements-section,
[data-theme="dark"] .statement-card,
[data-theme="dark"] .date-picker-section {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .statement-period-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .statement-period-card:hover {
    background: rgba(33, 150, 243, 0.1) !important;
    border-color: rgba(33, 150, 243, 0.3) !important;
}

/* ============================================================
   LIGHT MODE LEGIBILITY FIXES
   In light mode, --text-primary is blue (#2196F3) which makes
   body text hard to read. Override for readability.
   ============================================================ */

[data-theme="light"] .main-content,
:root:not([data-theme="dark"]) .main-content {
    color: #0a0a0a;
}

/* In light mode, body text should be dark, not blue */
[data-theme="light"] p,
[data-theme="light"] span:not(.landing-brand):not(.nav-label):not(.balance-value):not(.amount-value),
[data-theme="light"] label,
[data-theme="light"] li,
:root:not([data-theme="dark"]) .tgn-retail-light p,
:root:not([data-theme="dark"]) .tgn-retail-light label {
    color: rgba(10, 10, 10, 0.8);
}

/* Headings in light mode - brand blue */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3 {
    color: #2196F3;
}

/* Light mode form inputs - dark text on white bg */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
:root:not([data-theme="dark"]) input,
:root:not([data-theme="dark"]) select,
:root:not([data-theme="dark"]) textarea {
    color: #0a0a0a;
    background: #fff;
    border-color: rgba(10, 10, 10, 0.15);
}

[data-theme="light"] input::placeholder,
:root:not([data-theme="dark"]) input::placeholder {
    color: rgba(10, 10, 10, 0.4);
}

/* Light mode cards - subtle shadow for depth */
[data-theme="light"] .glassmorphic,
[data-theme="light"] .card {
    background: #fff;
    border-color: rgba(10, 10, 10, 0.08);
    box-shadow: 0 2px 12px rgba(10, 10, 10, 0.06);
}

/* Light mode muted text */
[data-theme="light"] .text-muted,
[data-theme="light"] .detail-label,
[data-theme="light"] .subtitle {
    color: rgba(10, 10, 10, 0.5);
}

/* ---------------------------------------------------------------------------
   Blazor's error banner.

   NOTHING in this app ever hid #blazor-error-ui. The div is declared in every
   host page and Blazor only reveals it when an error occurs — but with no
   display:none rule anywhere, it rendered on EVERY screen, permanently. It cost
   a long hunt for an exception that did not exist: the banner said "An unhandled
   error has occurred" from a clean start, with nothing in logcat, nothing in the
   JS console, and no .NET exception, because there was no error at all.

   Keep this rule. If the banner is visible, something actually broke.
   --------------------------------------------------------------------------- */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.75rem 1.25rem;
    background: #7f1d1d;
    color: #fff;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.3);
}

#blazor-error-ui a {
    color: #fff;
    text-decoration: underline;
    margin-left: 0.5rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
    padding: 0 0.5rem;
}