/* Post-Payment Notification Modal Animation */
#post-payment-notification-modal .my_wallet_modal_content {
    animation: postPaymentModalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes postPaymentModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mobile Widget Styles */
.mobile-widget-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9999;
}

.mobile-widget-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 80vh;
    background: white;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -5px 30px rgba(0,0,0,0.2);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 10000;
    pointer-events: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mobile-widget-panel.active {
    transform: translateY(0);
}

.mobile-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobile-panel-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.mobile-panel-header h3 i {
    margin-right: 10px;
}

.close-mobile-panel {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.close-mobile-panel:hover {
    background: rgba(255,255,255,0.1);
}

.mobile-panel-content {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(80vh - 70px);
    background: white;
}

.mobile-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    display: none;
    pointer-events: auto;
}

/* Ensure footer icons are clickable */
.mobile-footer-icon {
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-footer-icon.active {
    transform: scale(1.1);
}

.mobile-footer-icon.active .mobile-icon-container {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* Ensure proper stacking */
.mobile-widget-panel,
.mobile-widget-overlay {
    pointer-events: auto;
}
/* Mobile widget panel sliding styles - UPDATED FOR ALL PANELS */
.mobile-widget-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 85vh;
    background: white;
    z-index: 10002;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mobile-widget-panel.active {
    transform: translateY(0);
}

/* Profile Completion Mobile Panel - Inherits from above but with specific styles */
.mobile-widget-panel.profile-completion-mobile-panel .mobile-panel-header {
    padding: 15px 20px;
    background: white;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.mobile-widget-panel.profile-completion-mobile-panel .mobile-panel-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-widget-panel.profile-completion-mobile-panel .mobile-panel-header h3 i {
    color: #667eea;
    font-size: 18px;
}

.mobile-widget-panel.profile-completion-mobile-panel .mobile-panel-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 15px;
}

/* Ensure profile widget displays properly in mobile panel */
.mobile-widget-panel .profile-widget-minimal {
    border: none;
    padding: 0;
    box-shadow: none;
    background: transparent;
}

.mobile-widget-panel .profile-actions-vertical {
    margin-top: 15px;
}

.mobile-widget-panel .profile-btn-minimal {
    background: white;
    border: 1px solid #eaeaea;
    padding: 12px 15px;
    border-radius: 8px;
    width: 100%;
    margin-bottom: 8px;
}

.mobile-widget-panel .profile-btn-minimal i {
    font-size: 14px;
}

.mobile-widget-panel .profile-header-minimal {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Overlay */
.mobile-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10001;
    display: none;
    backdrop-filter: blur(3px);
}

/* Ensure close button is properly styled */
.close-mobile-panel {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    padding: 0 8px;
    line-height: 1;
    transition: color 0.2s ease;
}

.close-mobile-panel:hover {
    color: #ff69b4;
}

/*before update*/
/* Profile Questionnaire Modal Styles */
.questionnaire-question {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.questionnaire-question label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 13px;
    color: #2c3e50;
}

.questionnaire-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    transition: all 0.2s ease;
}

.questionnaire-input:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 3px rgba(52,152,219,0.1);
}

.questionnaire-input.error {
    border-color: #e74c3c;
    background-color: #fff5f5;
}

.questionnaire-input.error:focus {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231,76,60,0.1);
}

.questionnaire-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    background-color: white;
    cursor: pointer;
}

.questionnaire-select.error {
    border-color: #e74c3c;
    background-color: #fff5f5;
}

/* Success animation for profile badge */
@keyframes badgePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); background: #27ae60; }
    100% { transform: scale(1); }
}

.profile-badge.completed {
    animation: badgePulse 0.5s ease;
}

/*before update*/
/* Profile Completion Badge */
.desktop-nav-badge.profile-badge {
    background: #27ae60;
}

.mobile-icon-badge.profile-badge {
    background: #27ae60;
}

/* Profile Completion Preview */
.profile-completion-preview {
    min-width: 250px;
}

.profile-completion-preview .profile-message {
    animation: fadeIn 0.3s ease;
}

/* Mobile Profile Panel */
.profile-mobile-content {
    animation: slideUp 0.3s ease;
}

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

/*before update*/
.remove-record-btn {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.remove-record-btn:hover {
    background: #c0392b;
    transform: translateY(-1px);
}

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

.remove-record-btn i {
    font-size: 11px;
}

/* Confirmation modal styles */
.remove-confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100050;
    animation: fadeIn 0.3s ease;
}

.remove-confirm-modal {
    background: white;
    padding: 25px;
    border-radius: 10px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease;
}

.remove-confirm-icon {
    text-align: center;
    margin-bottom: 20px;
}

.remove-confirm-icon i {
    font-size: 48px;
    color: #e74c3c;
}

.remove-confirm-title {
    text-align: center;
    margin-bottom: 15px;
    color: #2c3e50;
}

.remove-confirm-message {
    text-align: center;
    margin-bottom: 20px;
    color: #495057;
    line-height: 1.5;
}

.remove-confirm-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.remove-confirm-warning i {
    color: #856404;
    font-size: 16px;
    margin-top: 2px;
}

.remove-confirm-warning strong {
    display: block;
    color: #856404;
    margin-bottom: 5px;
}

.remove-confirm-warning span {
    color: #856404;
    font-size: 13px;
    line-height: 1.4;
}

.remove-confirm-account-info {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
}

.remove-confirm-account-info div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}

.remove-confirm-account-info div:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.remove-confirm-account-label {
    font-weight: 500;
    color: #495057;
    font-size: 13px;
}

.remove-confirm-account-value {
    color: #212529;
    font-size: 13px;
    font-weight: 500;
}

.remove-confirm-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.remove-confirm-btn {
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 150px;
    justify-content: center;
}

.remove-confirm-cancel {
    background: #6c757d;
    color: white;
}

.remove-confirm-cancel:hover {
    background: #5a6268;
}

.remove-confirm-proceed {
    background: #e74c3c;
    color: white;
}

.remove-confirm-proceed:hover {
    background: #c0392b;
}

/*before update*/
/* Status badge styles */
.status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
}

.status-completed {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-scheduled {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.status-partial {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.status-pending {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.status-cancelled {
    background: #d6d8d9;
    color: #383d41;
    border: 1px solid #c6c8ca;
}

.status-other {
    background-color: #e2e3e5;
    color: #383d41;
    border: 1px solid #d6d8d9;
}

.due-amount {
    font-size: 10px !important;
    color: #e74c3c !important;
    margin-top: 2px !important;
    font-weight: 500;
}

/*before update*/
/* Transaction type styles */
.ach-transaction {
    border-left: 3px solid #27ae60;
}

.payment-link-transaction {
    border-left: 3px solid #3498db;
}

.method-column {
    width: 150px;
    flex: 0 0 150px;
}

.method-display {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}

.method-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .method-column {
        width: 120px;
        flex: 0 0 120px;
    }
    
    .method-display {
        font-size: 11px;
    }
}

/*Before update*/
/* Bank Form Loading Styles */
.bank-form-loading {
    padding: 40px 20px;
    text-align: center;
    animation: fadeIn 0.3s ease;
}

.bank-form-loading i {
    font-size: 32px;
    color: #3498db;
    margin-bottom: 15px;
    display: block;
}

.bank-form-loading p {
    color: #6c757d;
    font-size: 14px;
    margin: 0;
}

/* Saved Account Styles */
.saved-account-display {
    animation: slideInUp 0.4s ease;
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Quick Amount Button Hover Effects */
.quick-amount-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.quick-amount-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.quick-amount-btn.active {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3) !important;
}

/* Remove Button Animation */
.remove-record-btn {
    transition: all 0.2s ease !important;
}

.remove-record-btn:hover {
    transform: scale(1.05) !important;
}

/* Account Badge Styles */
.account-type-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.owner-type-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

/* Bonus Badge Animation */
.bonus-badge {
    animation: pulse 2s infinite;
}

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

/*before update*/
/* Loading states */
.my_wallet_payment_option.loading {
    opacity: 0.7;
    pointer-events: none;
}

.my_wallet_payment_option.loading .my_wallet_payment_toggle {
    animation: spin 1s linear infinite;
}

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

/* Form loading */
.bank-form-loading {
    padding: 40px;
    text-align: center;
    color: #6c757d;
}

.bank-form-loading i {
    font-size: 24px;
    color: #3498db;
    margin-bottom: 15px;
    display: block;
}

/* Retry notification */
.bank-loading-retry-notice {
    margin: 10px 0;
    padding: 10px;
    background: #fff3cd;
    border-radius: 6px;
    border: 1px solid #ffeaa7;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.my_wallet_payment_option.pulse {
    animation: pulse 2s infinite;
}

/*before update*/
/* Transaction History Modal - Professional Design */
.transaction-history-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    z-index: 100010;
    overscroll-behavior: contain;
}

.transaction-history-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(1px);
}

.transaction-history-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 1200px;
    max-height: 90vh;
    max-height: calc(100dvh - 24px);
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
}

.transaction-history-modal-header {
    padding: 24px 32px;
    background: #ffffff;
    color: #1a202c;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid #e2e8f0;
}

.header-history-info h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #2d3748;
}

.header-history-info h3 i {
    font-size: 20px;
    color: #4a5568;
}

.history-summary-display {
    display: flex;
    gap: 24px;
    margin-top: 12px;
}

.history-summary-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #718096;
}

.history-summary-item i {
    font-size: 14px;
    color: #4a5568;
}

.history-summary-item strong {
    font-weight: 600;
    color: #2d3748;
    margin-left: 4px;
}

.transaction-history-modal-close {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    color: #4a5568;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.transaction-history-modal-close:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
    color: #2d3748;
}

.transaction-history-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
    background: #f8fafc;
}

.transaction-history-loading {
    text-align: center;
    padding: 60px 20px;
}

.loading-spinner {
    font-size: 36px;
    color: #4a5568;
    margin-bottom: 20px;
}

.loading-spinner i {
    animation: spin 1s linear infinite;
}

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

/* Wallet page embedded in Transaction History modal */
#transaction-history-modal .transaction-history-modal-body--embed {
    padding: 0;
    overflow: hidden;
    background: #fff;
}

#transaction-history-modal .smdb-wallet-embed-iframe {
    display: block;
    width: 100%;
    min-height: 70vh;
    border: 0;
    background: #fff;
}

/* ===== TRANSACTION HISTORY MODAL - WOO WALLET STYLING ===== */
#transaction-history-modal .transaction-history-modal-body .woo-wallet-my-wallet-container {
    background: transparent;
    padding: 0;
}

#transaction-history-modal .woo-wallet-header {
    display: none;
}

#transaction-history-modal .woo-wallet-top-section {
    display: none;
}

#transaction-history-modal .woo-wallet-nav-tabs {
    display: none;
}

#transaction-history-modal .woo-wallet-nav-item-wrapper {
    display: none;
}

#transaction-history-modal .woo-wallet-content-area {
    padding: 0;
}

#transaction-history-modal .woo-wallet-transactions-list {
    padding: 0;
}

#transaction-history-modal .woo-wallet-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e2e8f0;
}

#transaction-history-modal .woo-wallet-transactions-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#transaction-history-modal .woo-wallet-transactions-table thead {
    background: #f7fafc;
    border-bottom: 2px solid #cbd5e0;
}

#transaction-history-modal .woo-wallet-transactions-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#transaction-history-modal .woo-wallet-transactions-table th[style*="text-align: right"] {
    text-align: right;
}

#transaction-history-modal .woo-wallet-transactions-table tbody tr {
    border-bottom: 1px solid #e2e8f0;
    transition: background-color 0.2s ease;
}

#transaction-history-modal .woo-wallet-transactions-table tbody tr:last-child {
    border-bottom: none;
}

#transaction-history-modal .woo-wallet-transactions-table tbody tr:hover {
    background-color: #f9fafb;
}

#transaction-history-modal .woo-wallet-transactions-table td {
    padding: 14px 16px;
    font-size: 14px;
    color: #2d3748;
}

#transaction-history-modal .woo-wallet-transactions-table td:first-child {
    color: #718096;
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
}

#transaction-history-modal .woo-wallet-transactions-table td:nth-child(2) {
    color: #4a5568;
    font-size: 13px;
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#transaction-history-modal .woo-wallet-transactions-table td.amount {
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

#transaction-history-modal .woo-wallet-transactions-table td.amount.credit {
    color: #22863a;
}

#transaction-history-modal .woo-wallet-transactions-table td.amount.debit {
    color: #b1130d;
}

#transaction-history-modal .woocommerce-Price-amount {
    font-weight: 600;
}

/* Mobile Responsive for Transaction History Modal */
@media (max-width: 768px) {
    #transaction-history-modal .transaction-history-modal-body {
        padding: 16px;
    }
    
    #transaction-history-modal .woo-wallet-transactions-table {
        font-size: 12px;
    }
    
    #transaction-history-modal .woo-wallet-transactions-table th,
    #transaction-history-modal .woo-wallet-transactions-table td {
        padding: 10px 8px;
    }
    
    #transaction-history-modal .woo-wallet-transactions-table td:nth-child(2) {
        max-width: 150px;
    }
    
    #transaction-history-modal .woo-wallet-section-title {
        font-size: 14px;
        margin-bottom: 16px;
    }
}

@media (max-width: 480px) {
    #transaction-history-modal .transaction-history-modal-body {
        padding: 12px;
    }
    
    #transaction-history-modal .woo-wallet-transactions-table th,
    #transaction-history-modal .woo-wallet-transactions-table td {
        padding: 8px 6px;
        font-size: 11px;
    }
    
    #transaction-history-modal .woo-wallet-transactions-table td:nth-child(2) {
        max-width: 80px;
    }
}

.transaction-history-loading p {
    color: #718096;
    font-size: 15px;
    margin: 0;
}

.transaction-history-empty {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    max-width: 400px;
    margin: 0 auto;
}

.empty-state-icon {
    font-size: 48px;
    color: #cbd5e0;
    margin-bottom: 20px;
}

.transaction-history-empty h4 {
    font-size: 18px;
    color: #2d3748;
    margin: 0 0 12px 0;
    font-weight: 600;
}

.transaction-history-empty p {
    color: #718096;
    font-size: 14px;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.add-funds-from-history-btn {
    background: #ffffff;
    color: #4a5568;
    border: 1px solid #cbd5e0;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.add-funds-from-history-btn:hover {
    background: #f7fafc;
    border-color: #a0aec0;
    color: #2d3748;
}

/* Transaction History Container */
.transaction-history-container {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Filters */
.transaction-history-filters {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e2e8f0;
}

.filter-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group label {
    font-size: 13px;
    color: #4a5568;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.history-filter-select {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    color: #2d3748;
    background: white;
    min-width: 180px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.history-filter-select:focus {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

.custom-date-range {
    animation: slideDown 0.3s ease;
    grid-column: span 2;
}


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

.date-input-group {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
}

.date-input {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
}

.date-input:focus {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

.date-separator {
    text-align: center;
    color: #6c757d;
}

/* Transaction Stats */
.transaction-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.transaction-legend {
    margin-bottom: 15px;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.transaction-legend-grid {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.transaction-legend-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.transaction-legend-title {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.transaction-legend-items {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.transaction-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #475569;
}

.legend-payment-link {
    color: #3498db;
}

.legend-ach {
    color: #27ae60;
}

.legend-fg {
    color: #7c3aed;
}

.stat-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.stat-card:hover {
    border-color: #cbd5e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.stat-icon {
    width: 40px;
    height: 40px;
    background: #f8f9fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3498db;
    font-size: 18px;
}

.stat-content {
    flex: 1;
}

.stat-label {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 2px;
}

.stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
}

.stat-subtext {
    font-size: 11px;
    color: #27ae60;
    margin-top: 2px;
}

/* Transactions List Container */
.transaction-history-list-container {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.transaction-history-header {
    background: #f7fafc;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.header-row {
    display: grid;
    grid-template-columns: 1.7fr 1fr 0.9fr 1fr 0.9fr 1.7fr;
    gap: 16px;
    align-items: center;
}

.header-cell {
    font-size: 12px;
    color: #718096;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.transaction-history-list {
    max-height: 400px;
    overflow-y: auto;
}

/* Custom scrollbar for transactions list */
.transaction-history-list::-webkit-scrollbar {
    width: 6px;
}

.transaction-history-list::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.transaction-history-list::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.transaction-history-list::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Transaction Row */
.transaction-row {
    display: grid;
    grid-template-columns: 1.7fr 1fr 0.9fr 1fr 0.9fr 1.7fr;
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.2s ease;
    animation: slideInRow 0.3s ease;
}

@keyframes slideInRow {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

.transaction-row:hover {
    background-color: #f8fafc;
}

.transaction-row.even {
    background-color: #fafafa;
}

.transaction-row.even:hover {
    background-color: #f7fafc;
}

.transaction-cell {
    font-size: 14px;
}

.date-column .date-display {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.date-main {
    font-size: 12px;
    font-weight: 500;
    color: #2c3e50;
    line-height: 1.3;
}

.date-time {
    font-size: 11px;
    color: #6c757d;
    margin-top: 2px;
}

.points-display, .bonus-display, .amount-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.points-display.is-credit,
.amount-display.is-credit {
    color: #166534;
}

.points-display.is-debit,
.amount-display.is-debit {
    color: #9f1239;
}

.points-display i, .bonus-display i {
    color: #4a5568;
    font-size: 15px;
}

.bonus-display i {
    color: #38a169;
}

.points-value, .bonus-value, .amount-value {
    font-weight: 600;
    color: #2d3748;
}

.points-display.is-credit .points-value,
.amount-display.is-credit .amount-value,
.amount-display.is-credit .currency {
    color: #166534;
}

.points-display.is-debit .points-value,
.amount-display.is-debit .amount-value,
.amount-display.is-debit .currency {
    color: #9f1239;
}

.amount-display .currency {
    color: #718096;
    font-size: 13px;
    margin-right: 2px;
}

.method-display {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.method-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.method-text {
    font-weight: 600;
    color: #1e293b;
    line-height: 1.25;
}

.method-meta {
    font-size: 11px;
    color: #64748b;
    line-height: 1.3;
}

.featured-goodies-transaction {
    border-left: 3px solid #7c3aed;
}

.no-bonus {
    color: #cbd5e0;
    font-style: italic;
    font-size: 13px;
}

.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-completed {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-pending {
    background-color: #fed7d7;
    color: #742a2a;
    border: 1px solid #fc8181;
}

.status-failed {
    background-color: #fed7d7;
    color: #742a2a;
    border: 1px solid #fc8181;
}

/* Load More Container */
.load-more-container {
    padding: 24px 20px;
    text-align: center;
    background: #f7fafc;
    border-top: 1px solid #e2e8f0;
}

.load-more-btn {
    background: white;
    border: 1px solid #cbd5e0;
    color: #4a5568;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.load-more-btn:hover:not(:disabled) {
    background: #edf2f7;
    border-color: #a0aec0;
    color: #2d3748;
}

.load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Modal Footer */
.transaction-history-modal-footer {
    padding: 20px 32px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
}

.transaction-history-btn {
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.transaction-history-cancel {
    background: #f7fafc;
    color: #4a5568;
    border-color: #e2e8f0;
}

.transaction-history-cancel:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
    color: #2d3748;
}

.transaction-history-export {
    background: #2d3748;
    color: white;
    border-color: #2d3748;
}

.transaction-history-export:hover {
    background: #4a5568;
    border-color: #4a5568;
}

/* Status badge updates */
.status-badge.status-unpaid {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Date column width adjustment */
.date-column {
    min-width: 150px;
    max-width: 200px;
}

.date-main {
    font-size: 12px;
    line-height: 1.3;
}



/* Responsive Design */
@media (max-width: 1200px) {
    .transaction-history-modal-content {
        width: 98%;
        max-height: 95vh;
    }
}

@media (max-width: 992px) {
    .header-row,
    .transaction-row {
        grid-template-columns: 1.5fr 1fr 0.85fr 1fr 0.9fr 1.35fr;
    }
    
    .stat-card {
        padding: 16px;
    }

    .transaction-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.filter-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.filter-group {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .transaction-history-modal-content {
        width: 100%;
        height: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .transaction-history-modal-header {
        padding: 20px;
    }
    
    .transaction-history-modal-body {
        padding: 20px;
    }
    
    .transaction-history-modal-footer {
        padding: 16px 20px;
        flex-direction: column;
        gap: 12px;
    }
    
    .transaction-history-btn {
        width: 100%;
        justify-content: center;
    }
    
    .history-summary-display {
        flex-direction: column;
        gap: 8px;
    }
    

    .history-filter-select {
        width: 100%;
    }
    
    .custom-date-range .date-input-group {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .date-input {
        width: 100%;
    }
    
    .date-separator {
        text-align: center;
        margin: 4px 0;
    }
    
    
    .header-row {
        display: none;
    }
    
    .transaction-row {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        margin-bottom: 12px;
    }
    
    .transaction-row:last-child {
        margin-bottom: 0;
    }
    
    .transaction-cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
    }
    
    .transaction-cell::before {
        content: attr(data-label);
        font-weight: 600;
        color: #4a5568;
        font-size: 13px;
        margin-right: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .date-column::before { content: 'Date'; }
    .points-column::before { content: 'Wallet Change'; }
    .bonus-column::before { content: 'Bonus'; }
    .amount-column::before { content: 'Amount'; }
    .status-column::before { content: 'Status'; }
    .method-column::before { content: 'Details'; }
    
    .date-display {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }
    
     .filter-controls {
        grid-template-columns: 1fr;
    }
    
    .custom-date-range {
        grid-column: 1;
    }
    
    .date-input-group {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .date-separator {
        display: none;
    }
    
    .transaction-stats {
        grid-template-columns: 1fr;
    }

    .transaction-legend-grid,
    .transaction-legend-items {
        flex-direction: column;
        gap: 10px;
    }

    .method-display {
        justify-content: flex-end;
        text-align: right;
    }
    
    .date-column {
        min-width: 120px;
    }
}



@media (max-width: 480px) {
    .header-history-info h3 {
        font-size: 18px;
    }
    
    .history-summary-item {
        font-size: 13px;
    }
    
    .transaction-stats {
        grid-template-columns: 1fr;
    }
    
    .stat-card {
        padding: 12px;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .stat-value {
        font-size: 18px;
    }
}

/* Print Styles */
@media print {
    .transaction-history-modal-overlay,
    .transaction-history-modal-close,
    .transaction-history-filters,
    .load-more-container,
    .transaction-history-modal-footer {
        display: none !important;
    }
    
    .transaction-history-modal {
        position: static;
        display: block !important;
        z-index: 1;
    }
    
    .transaction-history-modal-content {
        position: static;
        transform: none;
        width: 100%;
        max-width: 100%;
        max-height: none;
        box-shadow: none;
        border-radius: 0;
        border: none;
    }
    
    .transaction-history-modal-header {
        background: white !important;
        border-bottom: 2px solid #000;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .transaction-history-modal-body {
        background: white !important;
    }
    
    .transaction-history-list-container {
        border: 1px solid #000;
        page-break-inside: avoid;
    }
    
    .transaction-row {
        border-bottom: 1px solid #ccc;
        page-break-inside: avoid;
    }
}
/* before update */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
    }
}

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

/*before update*/
.amount-notification {
    margin-top: 10px;
    font-size: 12px;
}

/* Notification styling */
.amount-notification {
    margin-top: 10px;
    font-size: 12px;
    transition: all 0.3s ease;
}

.notification-warning {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
    padding: 8px 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeIn 0.3s ease;
}

.notification-warning i {
    color: #f39c12;
}

.notification-error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 8px 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeIn 0.3s ease;
}

.notification-error i {
    color: #e74c3c;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
} 
    
       /* Add this to your CSS file or in a style tag */
.my_wallet_payment_option.loading .my_wallet_payment_info {
    opacity: 0.7;
}

.my_wallet_payment_option.loading .my_wallet_payment_toggle {
    pointer-events: none;
}

/* Loading animation for the toggle */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fa-spinner.fa-spin {
    animation: spin 1s linear infinite;
}
       
        .smdb-status-indicator {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 4px;
            font-weight: bold;
            margin-right: 10px;
        }
        
        .smdb-status-indicator.active {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .smdb-status-indicator.inactive {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .smdb-actions-section .button {
            margin-bottom: 5px;
        }
        
        .debug-info pre {
            white-space: pre-wrap;
            word-wrap: break-word;
            background: white;
            padding: 10px;
            border: 1px solid #ccc;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .card {
            background: #fff;
            border: 1px solid #ccd0d4;
            box-shadow: 0 1px 1px rgba(0,0,0,.04);
            margin: 20px 0;
            padding: 20px;
        }
        
        .card h2 {
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
         /* Payment Link Final Modal Specific Styles */
#payment-link-final-modal .my_wallet_modal_content {
    animation: modalSlideInUp 0.4s ease;
}

@keyframes modalSlideInUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#open-payment-link-btn-final:hover:not(:disabled) {
    background: #219653 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(39, 174, 96, 0.2) !important;
}

#open-payment-link-btn-final:active:not(:disabled) {
    transform: translateY(0) !important;
}

#open-payment-link-btn-final:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

#payment-link-copy-section {
    transition: all 0.3s ease;
}

/* Mobile adjustments for payment link modal */
@media (max-width: 768px) {
    #payment-link-final-modal .my_wallet_modal_content {
        width: calc(100vw - 16px) !important;
        width: calc(100dvw - 16px) !important;
        max-width: 500px !important;
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px) !important;
    }
    
    #open-payment-link-btn-final {
        padding: 12px 20px !important;
        font-size: 14px !important;
        width: 100% !important;
    }
    
    .payment-link-instructions {
        padding: 10px !important;
    }
}

@media (max-width: 480px) {
    #payment-link-final-modal .my_wallet_modal_content {
        width: 98% !important;
        max-width: 360px !important;
    }
    
    #open-payment-link-btn-final {
        font-size: 13px !important;
        padding: 10px 15px !important;
    }
}
    
    
    @keyframes pulseError {
    0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

@keyframes pulseWarning {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.simple-alert-message::-webkit-scrollbar {
    width: 6px;
}

.simple-alert-message::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.simple-alert-message::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.simple-alert-message::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.simple-alert-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.simple-alert-confirm:active {
    transform: translateY(0);
}
 /* Enhanced Confirmation Modal */
.remove-confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100010 !important; /* Higher than everything else */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 12px;
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    animation: fadeIn 0.3s ease;
}

.remove-confirm-modal-overlay.active {
    display: flex;
}

.remove-confirm-modal {
    background: white;
    border-radius: 12px;
    padding: 30px;
    max-width: 450px;
    width: 90%;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease;
    text-align: center;
    z-index: 100011 !important;
}

.remove-confirm-icon {
    font-size: 48px;
    color: #e74c3c;
    margin-bottom: 20px;
    animation: pulseWarning 2s infinite;
}

@keyframes pulseWarning {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.remove-confirm-title {
    color: #2c3e50;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.remove-confirm-message {
    color: #495057;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.remove-confirm-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 12px;
    margin: 20px 0;
    text-align: left;
}

.remove-confirm-warning i {
    color: #856404;
    margin-right: 8px;
}

.remove-confirm-warning strong {
    display: block;
    color: #856404;
    font-size: 14px;
    margin-bottom: 5px;
}

.remove-confirm-warning span {
    color: #856404;
    font-size: 13px;
    line-height: 1.4;
}

.remove-confirm-account-info {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    text-align: left;
}

.remove-confirm-account-info div {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
}

.remove-confirm-account-info div:last-child {
    margin-bottom: 0;
}

.remove-confirm-account-label {
    color: #6c757d;
    font-size: 13px;
    font-weight: 500;
}

.remove-confirm-account-value {
    color: #2c3e50;
    font-size: 13px;
    font-weight: 500;
}

.remove-confirm-buttons {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.remove-confirm-btn {
    flex: 1;
    padding: 14px 20px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.remove-confirm-cancel {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #e0e0e0;
}

.remove-confirm-cancel:hover {
    background: #e9ecef;
    transform: translateY(-1px);
}

.remove-confirm-proceed {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
}

.remove-confirm-proceed:hover {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(231, 76, 60, 0.3);
}

.remove-confirm-proceed:active {
    transform: translateY(0);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mobile responsiveness */
@media (max-width: 480px) {
    .remove-confirm-modal {
        padding: 20px;
        width: 95%;
    }
    
    .remove-confirm-icon {
        font-size: 40px;
        margin-bottom: 15px;
    }
    
    .remove-confirm-title {
        font-size: 18px;
    }
    
    .remove-confirm-message {
        font-size: 14px;
    }
    
    .remove-confirm-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .remove-confirm-btn {
        padding: 12px 15px;
        font-size: 14px;
    }
}   
    /* Payment Link Styles */
.payment-link-notice {
    animation: fadeIn 0.3s ease;
}

.payment-link-summary {
    animation: slideInUp 0.3s ease;
}

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

.payment-link-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease !important;
}

.payment-link-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

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

#copy-payment-link-btn:hover {
    background: #2980b9 !important;
}

#open-payment-link-btn:hover {
    background: #219653 !important;
}

.payment-link-url {
    word-wrap: break-word;
    word-break: break-all;
    overflow-wrap: break-word;
}

#payment-link-url-display {
    font-family: monospace;
    font-size: 12px;
    line-height: 1.4;
}
    /* Improved VPN loading and status indicators */
.vpn-loading-inline {
    animation: pulse 1.5s infinite;
}

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

.vpn-success-message,
.vpn-inconclusive-warning,
.vpn-warning-container {
    animation: slideInDown 0.3s ease;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Subtle loading animation for modal */
.modal-subtle-loading {
    position: relative;
}

.modal-subtle-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.modal-subtle-loading.active::after {
    opacity: 1;
}

/* Connection status badges */
.connection-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    margin-left: 8px;
}

.connection-status-badge.verified {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.connection-status-badge.warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.connection-status-badge.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Smooth transitions for payment options */
.my_wallet_payment_option {
    transition: all 0.3s ease;
}

.my_wallet_payment_option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    position: relative;
}

.my_wallet_payment_option.disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1;
}
    
    /* VPN/Tor detection styles */
.vpn-loading-indicator {
    animation: pulse 1.5s infinite;
}

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

.vpn-inconclusive-warning {
    animation: slideInDown 0.3s ease;
}

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

/* Tor-specific styling */
.vpn-warning-container.tor-detected {
    background: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

.vpn-warning-container.tor-detected i {
    color: #856404;
}
 /* VPN Warning Styles */
.vpn-warning-container {
    margin: 15px 0;
    padding: 15px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    color: #721c24;
    animation: fadeIn 0.3s ease;
}

.vpn-warning-container i {
    color: #dc3545;
}

.vpn-disabled-option {
    opacity: 0.5 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    position: relative;
}

.vpn-disabled-option::after {
    content: "VPN Detected";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(220, 53, 69, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    z-index: 10;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}   
    
    
    .my_wallet_package_bonus {
    font-size: 10px;
    color: #27ae60; /* Green color for bonuses */
    font-weight: 500;
    line-height: 1.2;
    margin-top: 2px;
}

.my_wallet_package.selected .my_wallet_package_bonus {
    color: #219653; /* Darker green when selected */
}
/* Remove Record Button Styles */
.remove-record-btn {
     background: #e74c3c !important;
    color: white !important;
    border: none !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

.remove-record-btn:hover {
    background: #c0392b !important;
    transform: translateY(-1px) !important;
}

.remove-record-btn:active {
    transform: translateY(0) !important;
}

@media (min-width: 481px) {
    .remove-record-btn {
        width: auto !important;
        min-width: 120px !important;
    }
}

.remove-record-btn:hover {
    background: #c0392b !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.2) !important;
}

.remove-record-btn i {
    margin-right: 4px !important;
    font-size: 10px !important;
}

/* Processing Modal Styles */
.processing-modal {
    background: white !important;
    border-radius: 12px !important;
    padding: 30px !important;
    max-width: 400px !important;
    width: 90% !important;
    max-height: calc(100dvh - 32px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    text-align: center !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
    animation: modalSlideIn 0.3s ease !important;
    z-index: 100005 !important; /* Higher than main modal */
    cursor: default !important;
}

/* Processing Modal - HIGHEST z-index */
#bank-processing-modal,
#payment-link-processing-modal,
#saved-bank-processing-modal,
#wallet-processing-modal,
#remove-bank-processing-modal {
    z-index: 100003 !important; /* Higher than main modal */
}

/* Processing Modal Overlay - Even higher */
#bank-processing-modal .success-modal-overlay,
#payment-link-processing-modal .success-modal-overlay,
#saved-bank-processing-modal .success-modal-overlay,
#wallet-processing-modal .success-modal-overlay,
#remove-bank-processing-modal .success-modal-overlay {
    z-index: 100004 !important;
}

/* Processing Modal Content - Highest */
#bank-processing-modal .processing-modal,
#payment-link-processing-modal .processing-modal,
#saved-bank-processing-modal .processing-modal,
#wallet-processing-modal .processing-modal,
#remove-bank-processing-modal .processing-modal {
    z-index: 100005 !important;
}

.processing-modal .success-icon i {
    color: #3498db !important;
}

.processing-modal .success-title {
    color: #2c3e50 !important;
    margin-bottom: 15px !important;
}

.processing-modal .success-message {
    color: #6c757d !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
}

.processing-progress {
    width: 100% !important;
    height: 6px !important;
    background: #f0f0f0 !important;
    border-radius: 3px !important;
    margin: 20px 0 !important;
    overflow: hidden !important;
}

.processing-progress-bar {
    height: 100% !important;
    background: #3498db !important;
    border-radius: 3px !important;
    width: 0% !important;
    transition: width 0.3s ease !important;
}

.processing-steps {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 15px !important;
    font-size: 11px !important;
    color: #6c757d !important;
}

.processing-step {
    flex: 1 !important;
    text-align: center !important;
    padding: 5px !important;
    position: relative !important;
}

.processing-step.active {
    color: #3498db !important;
    font-weight: 500 !important;
}

.processing-step.completed {
    color: #27ae60 !important;
}

/* Error State for Form Fields */
.my_wallet_payment_form_input.error,
.my_wallet_payment_form_select.error {
    border-color: #e74c3c !important;
    background-color: #fff5f5 !important;
}

.error-message {
    color: #e74c3c !important;
    font-size: 11px !important;
    margin-top: 5px !important;
    display: block !important;
}

/* Required Field Indicator */
.my_wallet_payment_form_label.required::after {
    content: " *" !important;
    color: #e74c3c !important;
}

/* State Validation Fix */
#bank-billing-state-integrated option[value=""] {
    color: #bdc3c7 !important;
}

/* Improved Loading States */
.loading-state {
    opacity: 0.7 !important;
    pointer-events: none !important;
    position: relative !important;
}

.loading-state::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(255, 255, 255, 0.7) !important;
    z-index: 10 !important;
}

        .save-bank-info-container {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
}

.save-bank-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.save-bank-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3498db;
}

.save-bank-checkbox label {
    cursor: pointer;
    font-size: 13px;
    color: #495057;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

.save-bank-checkbox label i {
    color: #3498db;
}

.save-bank-note {
    font-size: 11px;
    color: #6c757d;
    margin-top: 8px;
    margin-left: 28px;
    line-height: 1.4;
}

/* Checkbox custom styling */
.save-bank-checkbox input[type="checkbox"]:checked {
    background-color: #3498db;
    border-color: #3498db;
}

.save-bank-checkbox input[type="checkbox"]:focus {
    outline: 2px solid rgba(52, 152, 219, 0.3);
    outline-offset: 2px;
}
.saved-account-notice {
    margin-bottom: 15px;
    padding: 12px;
    background: #d4edda;
    border-radius: 6px;
    border: 1px solid #c3e6cb;
    animation: fadeIn 0.3s ease;
}


.saved-account-notice > div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 481px) {
    .saved-account-notice > div {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.saved-account-notice i {
    color: #155724;
    font-size: 16px;
}

.saved-account-notice > div > div:first-child {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0; /* Important for text truncation */
}
.saved-account-notice .account-info {
    flex: 1;
    min-width: 0; /* Allows text to wrap properly */
}

.saved-account-notice strong {
    display: block;
    font-size: 12px;
    color: #155724;
    margin-bottom: 4px;
    word-break: break-word;
}

.saved-account-notice span {
    font-size: 11px;
    color: #155724;
    line-height: 1.4;
    word-break: break-word;
}

.update-bank-info-btn {
    background: #28a745;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.update-bank-info-btn:hover {
    background: #218838;
    transform: translateY(-1px);
}

.first-time-notice {
    margin-bottom: 15px;
    padding: 12px;
    background: #fff3cd;
    border-radius: 6px;
    border: 1px solid #ffeaa7;
    animation: fadeIn 0.3s ease;
}

.first-time-notice i {
    color: #856404;
    font-size: 16px;
}

.first-time-notice strong {
    display: block;
    font-size: 12px;
    color: #856404;
}

.first-time-notice span {
    font-size: 11px;
    color: #856404;
}

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

/* Style for saved account placeholders */
input[placeholder*="Saved"],
input[placeholder*="••••"] {
    background-color: #f8f9fa !important;
    border-color: #d1ecf1 !important;
    color: #6c757d !important;
    cursor: not-allowed;
}

input[placeholder*="Saved"]:focus,
input[placeholder*="••••"]:focus {
    border-color: #d1ecf1 !important;
    box-shadow: 0 0 0 0.2rem rgba(209, 236, 241, 0.25) !important;
}
        /* Reset and base styles */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        .bank-form-loading {
    text-align: center;
    padding: 30px;
}

.bank-form-loading i {
    font-size: 24px;
    color: #3498db;
    margin-bottom: 15px;
}

.bank-form-loading p {
    color: #6c757d;
    font-size: 14px;
}

.saved-account-notice {
    margin-bottom: 15px;
    padding: 10px;
    background: #e8f4fc;
    border-radius: 6px;
    border: 1px solid #d1ecf1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.saved-account-notice i {
    color: #27ae60;
}

.update-bank-info-btn {
    background: #3498db;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.update-bank-info-btn:hover {
    background: #2980b9;
}
        
        /* FULL WIDTH CONTAINER */
        .widgets-container-full-width {
            width: 100%;
            max-width: 100%;
            margin: 0;
            padding: 0;
            position: relative;
            z-index: 1000;
            background: #f8f9fa;
            border-bottom: 1px solid #e0e0e0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        /* ===== FULL WIDTH DESKTOP NAVIGATION ===== */
        .desktop-widget-nav-full {
            display: block;
            background: #f8f9fa;
            border: none;
            margin: 0;
            position: relative;
            z-index: 1001;
            max-width: 100%;
            overflow-x: clip;
        }
        
        .desktop-nav-inner-full {
            display: flex;
            justify-content: center;
            align-items: stretch;
            padding: 0;
            max-width: 1400px;
            width: 100%;
            margin: 0 auto;
            min-width: 0;
            box-sizing: border-box;
        }
        
        .desktop-nav-item {
            position: relative;
            flex: 1;
            min-width: 0;
        }
        
        .desktop-nav-button {
            width: 100%;
            padding: 18px 20px;
            background: transparent;
            border: none;
            color: #495057;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-size: 15px;
            transition: all 0.2s ease;
            position: relative;
            border-right: 1px solid #e0e0e0;
            height: 100%;
        }
        
        .desktop-nav-item:last-child .desktop-nav-button {
            border-right: none;
        }
        
        .desktop-nav-button:hover {
            background: rgba(0,0,0,0.03);
            color: #2c3e50;
        }
        
        .desktop-nav-button i {
            font-size: 18px;
            color: #6c757d;
        }
        
        .desktop-nav-button:hover i {
            color: #2c3e50;
        }
        
        .desktop-nav-label {
            font-weight: 500;
        }
        
        .desktop-nav-badge {
            background: #e74c3c;
            color: white;
            border-radius: 10px;
            padding: 3px 9px;
            font-size: 12px;
            font-weight: bold;
            margin-left: 5px;
        }
        
        .desktop-nav-balance {
            background: #27ae60;
            color: white;
            border-radius: 10px;
            padding: 3px 9px;
            font-size: 12px;
            font-weight: bold;
            margin-left: 5px;
        }
        
        .dropdown-arrow {
            font-size: 12px;
            transition: transform 0.2s ease;
            margin-left: 5px;
            color: #6c757d;
        }
        
        .desktop-nav-item.active .dropdown-arrow {
            transform: rotate(180deg);
            color: #2c3e50;
        }
        
        .desktop-nav-content {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: auto;
            background: #ffffff;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            border: 1px solid #e0e0e0;
            border-radius: 0 0 8px 8px;
            z-index: 10050;
            padding: 25px;
            min-height: 220px;
            max-height: 500px;
            overflow-y: auto;
            overflow-x: hidden;
            width: min(480px, calc(100vw - 32px));
            max-width: calc(100vw - 32px);
            box-sizing: border-box;
        }

        .desktop-nav-item[data-widget="notifications"] .desktop-nav-content,
        .desktop-nav-item:nth-last-child(-n+2) .desktop-nav-content {
            left: auto;
            right: 0;
        }

        .desktop-nav-item[data-widget="notifications"] .desktop-nav-content {
            width: min(540px, calc(100vw - 32px));
            min-height: auto;
        }

        .desktop-nav-widget,
        .desktop-nav-widget * {
            box-sizing: border-box;
        }

        .desktop-nav-widget {
            max-width: 100%;
            min-width: 0;
            overflow-x: hidden;
        }
        
        .desktop-nav-item.active .desktop-nav-content {
            display: block;
            animation: slideDown 0.2s ease;
        }
        
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Wallet preview styles - UPDATED LAYOUT */
        .wallet-preview-full {
            color: #495057;
            min-height: 200px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            width: 100%;
            box-sizing: border-box;
        }
        
        .wallet-balance-display-full {
            background: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            margin-bottom: 5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .balance-amount-full {
            text-align: center;
            width: 100%;
        }
        
        .balance-amount-full .balance-label {
            display: block;
            font-size: 13px;
            color: #6c757d;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        /* Smaller balance value */
        .balance-value-small {
            display: block;
            font-size: 24px;
            font-weight: 700;
            color: #27ae60;
            letter-spacing: 0.5px;
        }

        /* Bright bonus callout in wallet dropdown/mobile panel */
        .wallet-balance-display-full .bonus-balance-container,
        .wallet-balance-display .bonus-balance-container {
            margin-top: 10px;
            padding: 10px 12px 12px;
            border-radius: 10px;
            border: 1px solid #ffd36a;
            background: linear-gradient(135deg, #fff8df 0%, #ffe9ad 45%, #ffd67a 100%);
            box-shadow: 0 6px 16px rgba(255, 170, 0, 0.2);
            opacity: 1 !important;
        }

        .wallet-balance-display-full .bonus-balance-container .bonus-label-row,
        .wallet-balance-display .bonus-balance-container .bonus-label-row,
        .wallet-balance-display-full .bonus-balance-container .bonus-action-row,
        .wallet-balance-display .bonus-balance-container .bonus-action-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
        }

        .wallet-balance-display-full .bonus-balance-container .bonus-label-row,
        .wallet-balance-display .bonus-balance-container .bonus-label-row {
            margin-bottom: 4px;
        }

        .wallet-balance-display-full .bonus-balance-container .balance-label,
        .wallet-balance-display .bonus-balance-container .balance-label {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            color: #b55d00;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0;
        }

        .wallet-balance-display-full .bonus-balance-container .locked-balance-value,
        .wallet-balance-display .bonus-balance-container .locked-balance-value {
            display: inline-block;
            font-size: 26px;
            font-weight: 800;
            line-height: 1;
            letter-spacing: 0.3px;
            background: linear-gradient(180deg, #ff2a6d 0%, #ff6a00 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 12px rgba(255, 79, 61, 0.22);
            animation: bonusAmountPulse 1.8s ease-in-out infinite;
        }

        .unlock-bonus-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            min-height: 28px;
            margin-left: 8px;
            padding: 7px 14px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.25px;
            color: #ffffff;
            border: none;
            border-radius: 999px;
            cursor: pointer;
            background: linear-gradient(135deg, #ff3f1f 0%, #ff8a00 55%, #ffc300 100%);
            box-shadow: 0 8px 16px rgba(255, 112, 0, 0.28);
            transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .unlock-bonus-btn::after {
            content: "";
            position: absolute;
            top: -120%;
            left: -40%;
            width: 35%;
            height: 300%;
            background: rgba(255, 255, 255, 0.42);
            transform: rotate(25deg);
            animation: unlockShimmer 2.4s linear infinite;
            pointer-events: none;
        }

        .unlock-bonus-btn:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 12px 22px rgba(255, 102, 0, 0.34);
            filter: saturate(1.1);
        }

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

        .unlock-bonus-btn i {
            filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.45));
        }

        .bonus-info-btn {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            min-width: 20px;
            min-height: 20px;
            padding: 0 !important;
            margin: 0 0 0 2px;
            border: 1px solid rgba(181, 93, 0, 0.35);
            border-radius: 50%;
            background: #ffffff;
            color: #b55d00;
            cursor: pointer;
            font-size: 12px;
            font-weight: 800;
            line-height: 1;
            text-align: center;
            vertical-align: middle;
            appearance: none;
            box-shadow: 0 2px 5px rgba(181, 93, 0, 0.12);
            position: relative;
            z-index: 2;
        }

        .bonus-info-btn:hover {
            background: #fff5d8;
            transform: translateY(-1px);
        }

        .advisor-perks-guide-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 0 2px;
            margin: 0 0 0 6px;
            border: 0;
            border-bottom: 2px solid currentColor;
            border-radius: 0;
            background: transparent;
            color: #ff8a00;
            cursor: pointer;
            font: inherit;
            font-weight: 800;
            line-height: 1.1;
            text-decoration: none;
            appearance: none;
        }

        .advisor-perks-guide-link:hover,
        .advisor-perks-guide-link:focus {
            color: #d86f00;
            outline: none;
        }

        .wallet-balance-display-full .bonus-balance-container.bonus-received,
        .wallet-balance-display .bonus-balance-container.bonus-received {
            border-color: #8ed6a1;
            background: linear-gradient(135deg, #eaffef 0%, #d4f7de 100%);
            box-shadow: 0 6px 16px rgba(39, 174, 96, 0.18);
        }

        .wallet-balance-display-full .bonus-balance-container.bonus-received .balance-label,
        .wallet-balance-display .bonus-balance-container.bonus-received .balance-label {
            color: #1f8f4c;
        }

        .wallet-balance-display-full .bonus-balance-container.bonus-received .locked-balance-value,
        .wallet-balance-display .bonus-balance-container.bonus-received .locked-balance-value {
            background: none;
            -webkit-text-fill-color: #1f8f4c;
            color: #1f8f4c;
            text-shadow: none;
            animation: none;
        }

        .bonus-received-badge {
            margin-left: 8px;
            padding: 7px 14px;
            border: none;
            border-radius: 999px;
            background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            color: #ffffff;
            font-size: 12px;
            font-weight: 800;
            cursor: default;
            box-shadow: 0 8px 16px rgba(39, 174, 96, 0.24);
        }

        .bonus-received-badge i {
            margin-right: 4px;
        }

        .smdb-bonus-info-modal {
            position: fixed;
            inset: 0;
            z-index: 999999;
            display: none;
            padding: 12px;
            background: rgba(17, 24, 39, 0.62);
            overflow-y: auto;
        }

        .smdb-bonus-info-dialog {
            position: relative;
            width: min(820px, 100%);
            margin: 2vh auto;
            padding: 18px;
            border-radius: 20px;
            background: #ffffff;
            color: #1f2937;
            box-shadow: 0 24px 70px rgba(15, 23, 42, 0.32);
        }

        .smdb-bonus-info-close {
            position: absolute;
            top: 14px;
            right: 14px;
            width: 34px;
            height: 34px;
            border: none;
            border-radius: 50%;
            background: #f3f4f6;
            color: #4b5563;
            cursor: pointer;
            font-size: 22px;
            line-height: 1;
        }

        .smdb-bonus-info-header {
            display: flex;
            gap: 12px;
            padding-right: 34px;
            align-items: flex-start;
        }

        .smdb-bonus-info-icon {
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            background: linear-gradient(135deg, #ff3f1f 0%, #ffc300 100%);
            color: #ffffff;
            font-size: 20px;
        }

        .smdb-bonus-info-header h3 {
            margin: 0 0 6px;
            color: #111827;
            font-size: 20px;
            line-height: 1.2;
        }

        .smdb-bonus-info-header p {
            margin: 0;
            color: #6b7280;
            font-size: 13px;
            line-height: 1.45;
        }

        .smdb-bonus-unlocked-card {
            display: grid;
            grid-template-columns: 54px minmax(0, 1fr);
            gap: 14px;
            margin: 18px 0;
            padding: 18px;
            border: 1px solid #b7ebc4;
            border-radius: 18px;
            background: linear-gradient(135deg, #effff4 0%, #dcfce7 100%);
            box-shadow: 0 14px 34px rgba(22, 163, 74, 0.14);
        }

        .smdb-bonus-unlocked-card[hidden] {
            display: none;
        }

        .smdb-bonus-unlocked-icon {
            width: 54px;
            height: 54px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            color: #ffffff;
            font-size: 26px;
            box-shadow: 0 10px 22px rgba(39, 174, 96, 0.24);
        }

        .smdb-bonus-unlocked-copy strong,
        .smdb-bonus-unlocked-copy span {
            display: block;
        }

        .smdb-bonus-unlocked-copy strong {
            color: #14532d;
            font-size: 18px;
        }

        .smdb-bonus-unlocked-copy span {
            margin-top: 4px;
            color: #166534;
            font-size: 13px;
            line-height: 1.45;
        }

        .smdb-bonus-unlocked-stats {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-top: 2px;
        }

        .smdb-bonus-unlocked-stats div {
            padding: 12px;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.76);
            border: 1px solid rgba(22, 163, 74, 0.18);
        }

        .smdb-bonus-unlocked-stats span,
        .smdb-bonus-unlocked-stats strong {
            display: block;
        }

        .smdb-bonus-unlocked-stats span {
            color: #4b5563;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .smdb-bonus-unlocked-stats strong {
            margin-top: 4px;
            color: #15803d;
            font-size: 19px;
        }

        .smdb-bonus-info-progress {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 12px 0;
            padding: 10px 14px;
            border-radius: 14px;
            background: #f8fafc;
            color: #4b5563;
            font-size: 13px;
            font-weight: 700;
        }

        .smdb-bonus-info-progress strong {
            color: #ff3f1f;
            font-size: 18px;
        }

        .smdb-bonus-checklist {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .smdb-bonus-checklist li {
            display: block;
            padding: 0;
            border: 0;
            border-radius: 14px;
            background: transparent;
        }

        .smdb-bonus-section-card {
            width: 100%;
            min-height: 52px;
            display: grid;
            grid-template-columns: 28px minmax(0, 1fr) auto;
            gap: 8px;
            align-items: center;
            padding: 8px 10px;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            background: #ffffff;
            text-align: left;
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        }

        .smdb-bonus-checklist li.is-complete .smdb-bonus-section-card {
            border-color: #b7ebc4;
            background: #f2fff5;
        }

        .smdb-bonus-checklist li.is-incomplete .smdb-bonus-section-card:hover,
        .smdb-bonus-checklist li.is-complete .smdb-bonus-section-card:hover {
            border-color: #ffb24a;
            box-shadow: 0 8px 18px rgba(255, 138, 0, 0.12);
            transform: translateY(-1px);
        }

        .smdb-bonus-check-icon {
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #fee2e2;
            color: #dc2626;
        }

        .smdb-bonus-checklist li.is-complete .smdb-bonus-check-icon {
            background: #dcfce7;
            color: #16a34a;
        }

        .smdb-bonus-check-copy strong,
        .smdb-bonus-check-copy span {
            display: block;
        }

        .smdb-bonus-check-copy strong {
            color: #111827;
            font-size: 13px;
            font-weight: 800;
        }

        .smdb-bonus-check-copy span {
            margin-top: 2px;
            color: #6b7280;
            font-size: 11px;
            font-weight: 600;
            line-height: 1.35;
        }

        .smdb-bonus-card-action {
            padding: 6px 9px;
            border-radius: 999px;
            background: #f3f4f6;
            color: #374151;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
        }

        .smdb-bonus-section-btn,
        .smdb-bonus-open-profile,
        .smdb-bonus-unlock-now,
        .smdb-bonus-done {
            border: none;
            border-radius: 999px;
            cursor: pointer;
            font-weight: 800;
        }

        .smdb-bonus-section-btn {
            padding: 7px 12px;
            background: #f3f4f6;
            color: #374151;
            font-size: 12px;
        }

        .smdb-bonus-section-btn:hover {
            background: #e5e7eb;
        }

        .smdb-bonus-info-status {
            min-height: 16px;
            margin: 8px 0 0;
            font-size: 12px;
            font-weight: 700;
        }

        .smdb-bonus-info-status.is-success {
            color: #15803d;
        }

        .smdb-bonus-info-status.is-error {
            color: #dc2626;
        }

        .smdb-bonus-info-status.is-loading {
            color: #f97316;
        }

        .smdb-bonus-info-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        .smdb-bonus-open-profile,
        .smdb-bonus-unlock-now,
        .smdb-bonus-done {
            padding: 9px 14px;
            font-size: 12px;
        }

        .smdb-bonus-open-profile {
            background: #111827;
            color: #ffffff;
        }

        .smdb-bonus-unlock-now {
            background: #e5e7eb;
            color: #6b7280;
        }

        .smdb-bonus-unlock-now.is-ready {
            background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            color: #ffffff;
        }

        .smdb-bonus-unlock-now:disabled {
            cursor: not-allowed;
            opacity: 0.68;
        }

        .smdb-bonus-done {
            display: none;
            background: #111827;
            color: #ffffff;
        }

        .smdb-bonus-info-modal.bonus-is-received .smdb-bonus-checklist,
        .smdb-bonus-info-modal.bonus-is-received .smdb-bonus-open-profile,
        .smdb-bonus-info-modal.bonus-is-received .smdb-bonus-info-status {
            display: none;
        }

        .smdb-bonus-info-modal.bonus-is-received .smdb-bonus-info-icon {
            background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
        }

        .smdb-bonus-info-modal.bonus-is-received .smdb-bonus-info-progress {
            border: 1px solid #b7ebc4;
            background: #f2fff5;
        }

        .smdb-bonus-info-modal.bonus-is-received .smdb-bonus-info-progress strong {
            color: #15803d;
        }

        .smdb-bonus-info-modal.bonus-is-received .smdb-bonus-unlock-now {
            background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            color: #ffffff;
            opacity: 1;
        }

        .smdb-bonus-info-modal.bonus-is-received .smdb-bonus-done {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        @media (max-width: 680px) {
            .smdb-bonus-info-dialog {
                padding: 16px;
                margin: 10px auto;
            }

            .smdb-bonus-checklist {
                grid-template-columns: 1fr;
            }

            .smdb-bonus-section-card {
                min-height: 52px;
            }

            .smdb-bonus-info-actions {
                display: grid;
                grid-template-columns: 1fr;
            }

            .smdb-bonus-open-profile,
            .smdb-bonus-unlock-now,
            .smdb-bonus-done {
                width: 100%;
            }
        }

        .smdb-perks-guide-modal {
            position: fixed;
            inset: 0;
            z-index: 999999;
            display: none;
            padding: clamp(10px, 2vw, 20px);
            background: rgba(17, 24, 39, 0.66);
            overflow: hidden;
        }

        .smdb-perks-guide-dialog {
            position: relative;
            width: min(900px, calc(100vw - 28px));
            max-height: calc(100vh - 28px);
            margin: 0 auto;
            padding: clamp(14px, 2vw, 20px);
            border-radius: 22px;
            background: #ffffff;
            color: #1f2937;
            box-shadow: 0 24px 70px rgba(15, 23, 42, 0.34);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .smdb-perks-guide-close {
            position: absolute;
            top: 14px;
            right: 14px;
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: none;
            border-radius: 50%;
            background: #fff7ed;
            color: #9a3412;
            cursor: pointer;
            font-size: 22px;
            font-weight: 700;
            line-height: 34px;
            text-align: center;
        }

        .smdb-perks-hero {
            display: flex;
            gap: 14px;
            padding: 16px;
            padding-right: 42px;
            border-radius: 20px;
            background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 55%, #fed7aa 100%);
            border: 1px solid #fed7aa;
            flex: 0 0 auto;
        }

        .smdb-perks-hero-icon {
            width: 48px;
            height: 48px;
            flex: 0 0 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            background: linear-gradient(135deg, #f97316 0%, #facc15 100%);
            color: #ffffff;
            font-size: 22px;
            box-shadow: 0 12px 24px rgba(249, 115, 22, 0.24);
        }

        .smdb-perks-kicker {
            margin: 0 0 5px;
            color: #c2410c;
            font-size: 12px;
            font-weight: 900;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .smdb-perks-hero h3 {
            margin: 0;
            color: #111827;
            font-size: clamp(18px, 2.4vw, 24px);
            line-height: 1.18;
        }

        .smdb-perks-hero p:last-child {
            margin: 8px 0 0;
            color: #7c2d12;
            font-size: 14px;
            line-height: 1.45;
        }

        .smdb-perks-quick-setup {
            margin-top: 12px;
            padding: 9px 22px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, #ff1493 0%, #ff4fb8 100%);
            color: #ffffff;
            cursor: pointer;
            font-size: 14px;
            font-weight: 900;
            box-shadow: 0 12px 24px rgba(255, 20, 147, 0.28);
        }

        .smdb-perks-tabs {
            display: flex;
            gap: 8px;
            margin: 12px 0;
            padding: 6px;
            border: 1px solid #f3d4b5;
            border-radius: 16px;
            background: #fff7ed;
            overflow-x: auto;
            flex: 0 0 auto;
            scrollbar-width: none;
        }

        .smdb-perks-tabs::-webkit-scrollbar {
            display: none;
        }

        .smdb-perks-tab {
            flex: 1 0 max-content;
            padding: 9px 12px;
            border: 0;
            border-radius: 12px;
            background: transparent;
            color: #9a3412;
            cursor: pointer;
            font-size: 12px;
            font-weight: 900;
            white-space: nowrap;
        }

        .smdb-perks-tab.is-active {
            background: linear-gradient(135deg, #ff1493 0%, #f97316 100%);
            color: #ffffff;
            box-shadow: 0 10px 22px rgba(249, 115, 22, 0.2);
        }

        .smdb-perks-tab-panels {
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
        }

        .smdb-perks-panel {
            height: 100%;
            min-height: 0;
            overflow-y: auto;
            padding-right: 2px;
            scrollbar-width: thin;
            animation: smdbPerksPanelIn 0.16s ease;
        }

        .smdb-perks-panel::-webkit-scrollbar {
            width: 6px;
        }

        .smdb-perks-panel::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: rgba(249, 115, 22, 0.24);
        }

        .smdb-perks-panel[hidden] {
            display: none;
        }

        .smdb-perks-panel.is-active {
            display: grid;
            align-content: start;
            gap: 12px;
        }

        .smdb-perks-callout {
            margin: 0;
            padding: 14px;
            border: 1px solid rgba(255, 20, 147, 0.28);
            border-radius: 16px;
            background: linear-gradient(135deg, #fff5fb 0%, #fff 100%);
            color: #1f2937;
        }

        .smdb-perks-callout.is-private {
            background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
            border-color: #e5e7eb;
        }

        .smdb-perks-callout h4,
        .smdb-perks-section-title h4,
        .smdb-perks-two-col h4 {
            margin: 0;
            color: #111827;
            font-size: 16px;
            line-height: 1.25;
        }

        .smdb-perks-callout h4 i,
        .smdb-perks-section-title i,
        .smdb-perks-two-col h4 i {
            margin-right: 8px;
            color: #ff1493;
        }

        .smdb-perks-callout p {
            margin: 8px 0 0;
            color: #4b5563;
            font-size: 13px;
            line-height: 1.42;
        }

        .smdb-perks-section-title {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0;
        }

        .smdb-perks-income-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
            margin: 0;
        }

        .smdb-perks-income-grid div {
            padding: 13px;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            background: #ffffff;
        }

        .smdb-perks-income-grid i,
        .smdb-perks-income-grid strong,
        .smdb-perks-income-grid span {
            display: block;
        }

        .smdb-perks-income-grid i {
            width: 32px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            border-radius: 12px;
            background: #fff5fb;
            color: #ff1493;
        }

        .smdb-perks-income-grid strong {
            color: #111827;
            font-size: 14px;
        }

        .smdb-perks-income-grid span {
            margin-top: 4px;
            color: #6b7280;
            font-size: 12px;
            line-height: 1.4;
        }

        .smdb-perks-roadmap {
            padding: 14px;
            border-radius: 18px;
            background: #f8fafc;
            border: 1px solid #e5e7eb;
        }

        .smdb-perks-roadmap-heading {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: flex-end;
            margin-bottom: 10px;
        }

        .smdb-perks-roadmap-heading h4 {
            margin: 0;
            color: #111827;
            font-size: 16px;
        }

        .smdb-perks-roadmap-heading span {
            color: #6b7280;
            font-size: 12px;
            font-weight: 700;
        }

        .smdb-perks-list-block ul,
        .smdb-perks-two-col ul {
            margin: 0;
            padding-left: 18px;
            color: #4b5563;
            font-size: 13px;
            line-height: 1.45;
        }

        .smdb-perks-two-col {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            margin: 0;
        }

        .smdb-perks-two-col > div {
            padding: 14px;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            background: #ffffff;
        }

        .smdb-perks-two-col ul,
        .smdb-perks-two-col p {
            margin-top: 10px;
        }

        .smdb-perks-two-col p {
            color: #4b5563;
            font-size: 13px;
            line-height: 1.5;
        }

        .smdb-perks-step {
            width: 100%;
            display: grid;
            grid-template-columns: 34px minmax(0, 1fr);
            gap: 10px;
            align-items: center;
            margin-top: 0;
            padding: 10px;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            background: #ffffff;
            color: inherit;
            cursor: pointer;
            text-align: left;
            transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
        }

        .smdb-perks-step-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .smdb-perks-step:hover {
            transform: translateY(-1px);
            border-color: #fdba74;
            box-shadow: 0 10px 24px rgba(249, 115, 22, 0.12);
        }

        .smdb-perks-step span {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            grid-row: span 2;
            border-radius: 50%;
            background: linear-gradient(135deg, #f97316 0%, #facc15 100%);
            color: #ffffff;
            font-size: 14px;
            font-weight: 900;
        }

        .smdb-perks-step strong,
        .smdb-perks-step em {
            display: block;
        }

        .smdb-perks-step strong {
            color: #111827;
            font-size: 14px;
        }

        .smdb-perks-step em {
            margin-top: 2px;
            color: #6b7280;
            font-size: 12px;
            font-style: normal;
            line-height: 1.35;
        }

        .smdb-perks-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #f3f4f6;
            flex: 0 0 auto;
        }

        .smdb-perks-primary,
        .smdb-perks-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 11px 16px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 900;
            text-decoration: none;
        }

        .smdb-perks-primary {
            border: none;
            background: linear-gradient(135deg, #f97316 0%, #facc15 100%);
            color: #ffffff;
            cursor: pointer;
            box-shadow: 0 12px 24px rgba(249, 115, 22, 0.22);
        }

        .smdb-perks-secondary {
            border: 1px solid #fed7aa;
            background: #fff7ed;
            color: #c2410c;
        }

        @media (max-width: 640px) {
            .smdb-bonus-info-modal {
                padding: 14px;
            }

            .smdb-bonus-info-dialog {
                margin: 4vh auto;
                padding: 20px;
            }

            .smdb-bonus-checklist li {
                grid-template-columns: 28px minmax(0, 1fr);
            }

            .smdb-bonus-section-btn {
                grid-column: 2;
                justify-self: start;
            }

            .smdb-bonus-unlocked-card {
                grid-template-columns: 1fr;
            }

            .smdb-bonus-unlocked-stats {
                grid-template-columns: 1fr;
            }

            .smdb-perks-guide-modal {
                padding: 14px;
            }

            .smdb-perks-guide-dialog {
                max-height: calc(100vh - 28px);
                margin: 0 auto;
                padding: 18px;
            }

            .smdb-perks-hero,
            .smdb-perks-income-grid,
            .smdb-perks-roadmap-heading {
                display: block;
            }

            .smdb-perks-hero-icon {
                margin-bottom: 12px;
            }

            .smdb-perks-income-grid {
                grid-template-columns: 1fr;
            }

            .smdb-perks-two-col {
                grid-template-columns: 1fr;
            }

            .smdb-perks-step-grid {
                grid-template-columns: 1fr;
            }

            .smdb-perks-tabs {
                gap: 6px;
                margin: 10px 0;
            }

            .smdb-perks-tab {
                flex: 0 0 auto;
                padding: 8px 11px;
            }

            .smdb-perks-actions {
                display: grid;
                grid-template-columns: 1fr;
            }

            .smdb-perks-primary,
            .smdb-perks-secondary {
                width: 100%;
            }

            .smdb-perks-income-grid div {
                margin-top: 10px;
            }

            .smdb-perks-roadmap-heading span {
                display: block;
                margin-top: 3px;
            }
        }

        @keyframes bonusAmountPulse {
            0%,
            100% {
                filter: brightness(1);
                transform: scale(1);
            }
            50% {
                filter: brightness(1.16);
                transform: scale(1.03);
            }
        }

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

        @keyframes unlockShimmer {
            0% {
                left: -45%;
            }
            100% {
                left: 130%;
            }
        }
        
        /* Advisor Perks Promo Note */
        .advisor-perks-promo {
            background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 100%);
            border-left: 4px solid #ff9800;
            border-radius: 6px;
            padding: 12px 16px;
            margin-bottom: 16px;
            font-size: 14px;
            color: #333;
        }

        .advisor-perks-promo p {
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
        }

        .advisor-perks-promo i {
            color: #ff9800;
            font-size: 16px;
        }

        .advisor-perks-promo a {
            color: #ff9800;
            text-decoration: none;
            font-weight: 700;
            transition: all 0.2s ease;
            border-bottom: 2px solid #ff9800;
        }

        .advisor-perks-promo a:hover {
            color: #e68900;
            border-bottom-color: #e68900;
            padding-bottom: 2px;
        }
        
        /* Each button in its own row */
        .wallet-action-row {
            width: 100%;
        }
        
        /* Desktop wallet buttons - each in its own row */
        .smdb-wallet-add-funds-btn,
        .wallet-history-btn,
        .wallet-monthly-plans-btn {
            background: #ffffff;
            color: #495057;
            border: 1px solid #e0e0e0;
            padding: 14px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 15px;
            font-weight: 500;
            transition: all 0.2s ease;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 10px;
            height: auto;
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 8px;
        }
        
        .smdb-wallet-add-funds-btn:hover,
        .wallet-history-btn:hover {
            background: #f8f9fa;
            border-color: #3498db;
            color: #2c3e50;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(52, 152, 219, 0.1);
        }
        
        .wallet-monthly-plans-btn {
            background: #3498db;
            color: white;
            border: 1px solid #2980b9;
        }
        
        .wallet-monthly-plans-btn:hover {
            background: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(41, 128, 185, 0.2);
        }
        
        .smdb-wallet-add-funds-btn i,
        .wallet-history-btn i {
            color: #27ae60;
            width: 18px;
            font-size: 16px;
        }
        
        .wallet-monthly-plans-btn i {
            color: white;
            width: 18px;
            font-size: 16px;
        }
        
        /* Desktop widget preview styles */
        .widget-content-preview {
            color: #495057;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
            overflow-x: hidden;
        }
        
        .notifications-preview-header {
            padding: 12px 15px;
            background: #f8f9fa;
            color: #495057;
            margin-bottom: 15px;
            border-radius: 8px;
            font-weight: 500;
            border-left: 4px solid #3498db;
            word-break: break-word;
            overflow-wrap: anywhere;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        .notifications-preview-items {
            list-style: none;
            padding: 0;
            margin: 0;
            max-width: 100%;
            min-width: 0;
        }
        
        .notification-preview-item {
            padding: 12px;
            margin-bottom: 10px;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            word-break: break-word;
            overflow-wrap: anywhere;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }
        
        .notification-preview-item.unread {
            border-left: 4px solid #3498db;
        }
        
        .notification-preview-item:hover {
            background: #f0f2f5;
            transform: translateX(4px);
        }
        
        .notification-preview-content {
            display: flex;
            align-items: center;
            gap: 12px;
            max-width: 100%;
            min-width: 0;
        }
        
        .notification-preview-photo {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .notification-preview-details {
            flex-grow: 1;
            min-width: 0;
            max-width: 100%;
        }
        
        .notification-preview-text {
            color: #495057;
            font-size: 14px;
            line-height: 1.4;
            margin-bottom: 4px;
            word-break: break-word;
            overflow-wrap: anywhere;
            max-width: 100%;
        }
        
        .notification-preview-time {
            font-size: 12px;
            color: #6c757d;
        }
        
        .no-notifications-preview {
            padding: 40px 20px;
            text-align: center;
            color: #6c757d;
            font-size: 15px;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        .view-all-link {
            margin-top: 15px;
            text-align: center;
            max-width: 100%;
            min-width: 0;
        }
        
        .view-all-link a {
            color: #3498db;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        
        .view-all-link a:hover {
            text-decoration: underline;
            color: #2980b9;
        }

        .view-all-notifications-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-block;
            max-width: 100%;
            white-space: normal;
            overflow-wrap: anywhere;
        }

        .view-all-notifications-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
        }

        /* Ensure critical wallet/notification actions stay clickable above preview layers */
        .desktop-nav-content .wallet-action-row,
        .desktop-nav-content .view-all-link {
            position: relative;
            z-index: 2;
            pointer-events: auto !important;
        }

        .desktop-nav-content .smdb-wallet-add-funds-btn,
        .desktop-nav-content .view-all-notifications-btn {
            position: relative;
            z-index: 3;
            pointer-events: auto !important;
            touch-action: manipulation;
        }

        /* Unlock lives outside .wallet-action-row — keep bonus strip + all wallet controls clickable */
        .desktop-nav-content .wallet-preview-full,
        .desktop-nav-content .wallet-balance-display-full,
        .desktop-nav-content .bonus-balance-container,
        .desktop-nav-content .unlock-bonus-btn,
        .desktop-nav-content .bonus-info-btn,
        .desktop-nav-content .bonus-received-badge,
        .desktop-nav-content .advisor-perks-promo,
        .desktop-nav-content .advisor-perks-guide-link,
        .desktop-nav-content .wallet-history-btn,
        .desktop-nav-content .wallet-monthly-plans-btn {
            position: relative;
            z-index: 4;
            pointer-events: auto !important;
            touch-action: manipulation;
        }

        .desktop-nav-content .unlock-bonus-btn {
            z-index: 6;
        }

        /* Notifications Modal Styles */
        .notifications-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .notifications-modal {
            background: white;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 600px;
            width: 100%;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            animation: slideInUp 0.3s ease;
        }

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

        .notifications-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px;
            border-bottom: 1px solid #e2e8f0;
            background: #f8f9fa;
            border-radius: 12px 12px 0 0;
        }

        .notifications-modal-title {
            margin: 0;
            font-size: 1.3rem;
            font-weight: 600;
            color: #0f172a;
        }

        .notifications-modal-close {
            background: none;
            border: none;
            font-size: 24px;
            color: #94a3b8;
            cursor: pointer;
            padding: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            transition: all 0.2s ease;
        }

        .notifications-modal-close:hover {
            background: #e2e8f0;
            color: #0f172a;
        }

        .notifications-modal-content {
            flex: 1;
            overflow-y: auto;
            padding: 0;
        }

        .notifications-modal-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .notifications-modal-item {
            padding: 16px 20px;
            border-bottom: 1px solid #e2e8f0;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .notifications-modal-item:hover {
            background: #f8f9fa;
        }

        .notifications-modal-item.unread {
            background: #f0f4f8;
            font-weight: 500;
        }

        .notifications-modal-item.unread::before {
            content: '';
            width: 8px;
            height: 8px;
            background: #667eea;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 6px;
        }

        .notifications-modal-item-content {
            flex: 1;
        }

        .notifications-modal-item-text {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .notifications-modal-item-title {
            display: block;
            color: #0f172a;
            font-size: 14px;
            line-height: 1.5;
        }

        .notifications-modal-item-time {
            display: block;
            color: #94a3b8;
            font-size: 12px;
        }

        @media (max-width: 768px) {
            .notifications-modal-overlay {
                align-items: flex-end;
                padding: 12px;
                padding-top: calc(12px + env(safe-area-inset-top));
                padding-bottom: calc(12px + env(safe-area-inset-bottom));
            }

            .notifications-modal {
                width: 100%;
                max-width: 100%;
                max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
                border-radius: 12px 12px 0 0;
            }

            .notifications-modal-header {
                padding: 16px;
            }

            .notifications-modal-item {
                padding: 14px 16px;
            }
        }

        @media (max-width: 480px) {
            .notifications-modal-title {
                font-size: 1.1rem;
            }
        }
        
        /* Categories preview */
        .categories-preview-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .category-preview-item {
            margin-bottom: 10px;
        }
        
        .category-preview-link {
            display: block;
            padding: 12px 15px;
            background: #f8f9fa;
            color: #495057;
            text-decoration: none;
            border-radius: 8px;
            transition: all 0.2s ease;
            font-size: 15px;
            border: 1px solid transparent;
            word-break: break-word;
            overflow-wrap: break-word;
        }
        
        .category-preview-link:hover {
            background: #f0f2f5;
            border-color: #e0e0e0;
            color: #2c3e50;
            transform: translateX(4px);
        }
        
        .category-preview-count {
            float: right;
            background: #ffffff;
            color: #6c757d;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 3px 10px;
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
        }
        
        /* Cart preview */
        .cart-preview-items {
            list-style: none;
            padding: 0;
            margin: 0 0 15px 0;
            max-width: 100%;
        }
        
        .cart-preview-item {
            padding: 12px;
            margin-bottom: 8px;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            word-break: break-word;
            max-width: 100%;
            min-width: 0;
        }
        
        .cart-preview-name {
            color: #495057;
            font-size: 14px;
            flex: 1;
            min-width: 0;
            padding-right: 15px;
            word-break: break-word;
            overflow-wrap: anywhere;
        }
        
        .cart-preview-price {
            color: #27ae60;
            font-size: 14px;
            font-weight: 600;
            white-space: nowrap;
            flex-shrink: 0;
        }
        
        .cart-preview-more {
            text-align: center;
            font-size: 13px;
            color: #6c757d;
            margin: 8px 0;
        }
        
          .cart-preview-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            margin-top: 15px;
            flex-wrap: wrap;
            gap: 15px;
            max-width: 100%;
            min-width: 0;
        }
        
        .cart-preview-total span {
            color: #495057;
            font-size: 15px;
            flex: 1;
            min-width: 0;
        }
        
        .cart-preview-total strong {
            color: #27ae60;
            font-size: 18px;
        }
        
        .view-cart-btn {
            background: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
            flex-shrink: 0;
            max-width: 100%;
        }
        
        .view-cart-btn:hover {
            background: #2980b9;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(41, 128, 185, 0.2);
        }
        
        .cart-preview-empty {
            padding: 40px 20px;
            text-align: center;
            color: #6c757d;
            font-size: 15px;
        }
        
        /* ===== MOBILE FOOTER (Keep existing styles) ===== */
        .mobile-widget-footer {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #ffffff;
            border-top: 1px solid #e0e0e0;
            box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
            z-index: 9998;
            padding: 10px 0 5px 0;
        }
        
        .mobile-footer-inner {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        
        .mobile-footer-icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 6px;
            transition: all 0.2s ease;
            flex: 1;
            max-width: 80px;
        }
        
        .mobile-footer-icon.active {
            background: #f8f9fa;
        }
        
        .mobile-icon-container {
            position: relative;
            width: 40px;
            height: 40px;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 5px;
        }
        
        .mobile-icon-container i {
            font-size: 18px;
            color: #6c757d;
        }
        
        .mobile-footer-icon.active .mobile-icon-container i {
            color: #2c3e50;
        }
        
        .mobile-icon-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #e74c3c;
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
        }
        
        .mobile-balance-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #27ae60;
            color: white;
            border-radius: 10px;
            padding: 1px 4px;
            font-size: 9px;
            font-weight: bold;
            min-width: 30px;
            text-align: center;
        }
        
        .mobile-icon-label {
            color: #6c757d;
            font-size: 11px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
        }
        
        .mobile-footer-icon.active .mobile-icon-label {
            color: #2c3e50;
            font-weight: 500;
        }
        
        /* ===== MOBILE WIDGET MODALS (Keep existing styles) ===== */
        .mobile-widget-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 9999;
        }
        
        .mobile-widget-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10000;
            display: flex;
            align-items: flex-end;
            pointer-events: none;
        }
        
        .mobile-widget-panel {
            display: none;
            background: #ffffff;
            border: 1px solid #e0e0e0;
            box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
            border-radius: 16px 16px 0 0;
            width: 100%;
            max-height: 85vh;
            transform: translateY(100%);
            transition: transform 0.3s ease;
            pointer-events: all;
        }
        
        .mobile-widget-panel.active {
            display: block;
            transform: translateY(0);
        }
        
        .mobile-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 16px 16px 0 0;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .mobile-panel-header h3 {
            color: #2c3e50;
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .mobile-panel-header h3 i {
            color: #3498db;
        }
        
        .close-mobile-panel {
            background: transparent;
            border: none;
            color: #6c757d;
            font-size: 24px;
            cursor: pointer;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s ease;
        }
        
        .close-mobile-panel:hover {
            background: #e0e0e0;
            color: #2c3e50;
        }
        
        .mobile-panel-content {
            padding: 20px;
            max-height: calc(85vh - 80px);
            overflow-y: auto;
            color: #495057;
            box-sizing: border-box;
        }
        
        /* Mobile wallet styles */
        .wallet-mobile-content {
            min-height: 200px;
            display: flex;
            flex-direction: column;
        }

        .wallet-mobile-content .wallet-balance-display,
        .wallet-mobile-content .bonus-balance-container,
        .wallet-mobile-content .unlock-bonus-btn {
            pointer-events: auto !important;
            touch-action: manipulation;
            position: relative;
            z-index: 5;
        }

        .wallet-mobile-content .unlock-bonus-btn {
            z-index: 6;
        }
        
        .wallet-mobile-actions {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        /* Mobile wallet action buttons */
        .wallet-mobile-actions .smdb-wallet-add-funds-btn,
        .wallet-mobile-actions .wallet-history-btn,
        .wallet-mobile-actions .wallet-monthly-plans-btn {
            background: #ffffff;
            color: #495057;
            border: 1px solid #e0e0e0;
            padding: 15px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.2s ease;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            box-sizing: border-box;
            position: relative;
            z-index: 4;
            pointer-events: auto !important;
            touch-action: manipulation;
        }
        
        .wallet-mobile-actions .smdb-wallet-add-funds-btn:hover,
        .wallet-mobile-actions .wallet-history-btn:hover {
            background: #f8f9fa;
            border-color: #3498db;
            color: #2c3e50;
        }
        
        .wallet-mobile-actions .wallet-monthly-plans-btn {
            background: #3498db;
            color: white;
            border: 1px solid #2980b9;
        }
        
        .wallet-mobile-actions .wallet-monthly-plans-btn:hover {
            background: #2980b9;
        }
        
        .wallet-mobile-actions .smdb-wallet-add-funds-btn i,
        .wallet-mobile-actions .wallet-history-btn i {
            color: #27ae60;
            width: 24px;
        }
        
        .wallet-mobile-actions .wallet-monthly-plans-btn i {
            color: white;
            width: 24px;
        }
        
        /* Mobile notification styles */
        .notifications-mobile-header {
            padding: 12px;
            background: #f8f9fa;
            color: #495057;
            margin-bottom: 10px;
            border-radius: 8px;
            font-weight: 500;
            border-left: 3px solid #3498db;
            display: flex;
            justify-content: space-between;
            align-items: center;
            word-break: break-word;
        }
        
        .notifications-mobile-items {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .notification-mobile-item {
            padding: 12px;
            margin-bottom: 8px;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            cursor: pointer;
        }
        
        .notification-mobile-item.unread {
            border-left: 3px solid #3498db;
        }
        
        .notification-mobile-content {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .notification-mobile-photo {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .notification-mobile-details {
            flex-grow: 1;
            min-width: 0;
        }
        
        .notification-mobile-text {
            color: #495057;
            font-size: 14px;
            line-height: 1.4;
            margin-bottom: 5px;
            word-break: break-word;
            overflow-wrap: break-word;
        }
        
        .notification-mobile-time {
            font-size: 12px;
            color: #6c757d;
        }
        
        .unread-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #3498db;
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        .no-notifications-mobile {
            padding: 40px 20px;
            text-align: center;
            color: #6c757d;
        }
        
        /* Mobile category styles */
        .user-categories-mobile-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .category-mobile-container {
            margin-bottom: 10px;
        }
        
        .category-mobile-main {
            display: flex;
            align-items: center;
        }
        
        .category-mobile-link {
            flex-grow: 1;
            padding: 12px 15px;
            color: #495057;
            text-decoration: none;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            transition: all 0.2s ease;
            font-size: 15px;
            display: block;
            word-break: break-word;
        }
        
        .category-mobile-link:hover {
            background: #f0f2f5;
            border-color: #3498db;
            color: #2c3e50;
        }
        
        .user-mobile-count {
            float: right;
            background: #f8f9fa;
            color: #6c757d;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 2px 8px;
            font-size: 12px;
            white-space: nowrap;
        }
        
        .toggle-mobile-subcategories {
            margin-left: 8px;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            color: #6c757d;
            width: 30px;
            height: 30px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }
        
        .toggle-mobile-subcategories:hover {
            border-color: #3498db;
            color: #2c3e50;
        }
        
        .subcategory-mobile-dropdown {
            margin-top: 8px;
            display: none;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 10px;
        }
        
        .subcategory-mobile-item {
            padding: 8px 0;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .subcategory-mobile-item:last-child {
            border-bottom: none;
        }
        
        .subcategory-mobile-link {
            color: #495057;
            text-decoration: none;
            display: block;
            transition: all 0.2s ease;
            word-break: break-word;
        }
        
        .subcategory-mobile-link:hover {
            color: #2c3e50;
        }
        
        .subcategory-mobile-count {
            float: right;
            color: #6c757d;
            font-size: 12px;
            white-space: nowrap;
        }
        
        /* Mobile cart styles */
        .cart-mobile-items {
            list-style: none;
            padding: 0;
            margin: 0;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .cart-mobile-item {
            padding: 12px;
            margin-bottom: 10px;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            word-break: break-word;
        }
        
        .cart-mobile-details {
            flex-grow: 1;
            min-width: 0;
            padding-right: 10px;
        }
        
        .cart-mobile-name {
            color: #2c3e50;
            font-weight: 500;
            margin-bottom: 5px;
            word-break: break-word;
        }
        
        .cart-mobile-meta {
            font-size: 12px;
            color: #6c757d;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        
        .cart-mobile-meta span {
            display: block;
        }
        
        .cart-mobile-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        
        .remove-cart-mobile-item {
            background: none;
            border: none;
            color: #e74c3c;
            cursor: pointer;
            font-size: 18px;
            padding: 4px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }
        
        .remove-cart-mobile-item:hover {
            background: #f8f9fa;
        }
        
        .cart-mobile-footer {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #e0e0e0;
        }
        
        .cart-mobile-info {
            font-size: 12px;
            color: #6c757d;
            margin-bottom: 10px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 6px;
            border: 1px solid #e0e0e0;
            word-break: break-word;
        }
        
        .cart-mobile-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .total-mobile-amount {
            font-weight: 600;
            color: #2c3e50;
            font-size: 16px;
            flex: 1;
            min-width: 0;
        }
        
        .pay-now-mobile-button {
            background: #27ae60;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }
        
        .pay-now-mobile-button:hover {
            background: #219653;
        }
        
        .empty-cart-mobile {
            text-align: center;
            padding: 40px 20px;
            color: #6c757d;
        }
        
        /* ===== COMPACT ADD FUNDS MODAL STYLES WITH INTEGRATED PAYMENT METHODS ===== */
/* Modal Overlay - HIGHER Z-INDEX */
.my_wallet_modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    z-index: 100000; /* Keep this high but not highest */
    animation: my_wallet_fadeIn 0.2s ease;
    overscroll-behavior: contain;
}

.my_wallet_modal_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100001; /* Higher than modal but lower than processing */
}

/* Modal Content - WIDER FOR PAYMENT METHODS */
.my_wallet_modal_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(90%, 800px);
    max-width: 800px;
    max-width: calc(100vw - 24px);
    height: auto;
    max-height: 90vh;
    max-height: calc(100dvh - 24px);
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 100002; /* Content higher than overlay */
}
        
        /* Modal Header - COMPACT with Balance Display */
        .my_wallet_modal_header {
            padding: 12px 16px;
            background: #f8f9fa;
            color: #2c3e50;
            border-bottom: 1px solid #e0e0e0;
            flex-shrink: 0;
        }
        
        .header-balance-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
        }
        
        .my_wallet_modal_header h3 {
            margin: 0;
            font-size: 15px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .my_wallet_modal_header h3 i {
            color: #27ae60;
            font-size: 14px;
        }
        
        .user-balance-display {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #ffffff;
            padding: 6px 12px;
            border-radius: 6px;
            border: 1px solid #e0e0e0;
            font-size: 13px;
        }
        
        .user-balance-display i {
            color: #27ae60;
            font-size: 12px;
        }
        
        #modal-current-balance {
            font-weight: 600;
            color: #2c3e50;
            font-size: 14px;
        }
        
        .my_wallet_modal_close {
            background: transparent;
            border: none;
            color: #6c757d;
            font-size: 20px;
            cursor: pointer;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s ease;
        }
        
        .my_wallet_modal_close:hover {
            background: #e0e0e0;
            color: #2c3e50;
        }
        
        /* Modal Body - WIDER FOR PAYMENT METHODS */
        .my_wallet_modal_body {
            padding: 12px;
            overflow-y: auto;
            flex-grow: 1;
            min-height: 0;
            color: #495057;
            max-height: calc(90vh - 120px);
            box-sizing: border-box;
        }
        
        /* Main content layout - two columns */
        .my_wallet_main_content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 15px;
        }
        
       @media (max-width: 768px) {
    /* Ensure modal is properly displayed on mobile */
    .my_wallet_modal {
        z-index: 1000000 !important; /* Higher z-index for mobile */
    }
    
    .my_wallet_modal_content {
        width: calc(100vw - 16px) !important;
        width: calc(100dvw - 16px) !important;
        max-width: 500px !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px) !important;
        overflow-y: auto !important;
    }

    .my_wallet_modal_body {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Make modal more mobile-friendly */
    .my_wallet_main_content {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Better touch targets for mobile */
    .my_wallet_payment_option,
    .my_wallet_package,
    .smdb-wallet-add-funds-btn,
    .wallet-history-btn,
    .wallet-monthly-plans-btn {
        min-height: 48px !important; /* Larger touch targets */
        padding: 12px 15px !important;
    }
    
    /* Adjust font sizes for mobile */
    .my_wallet_modal_header h3 {
        font-size: 16px !important;
    }
    
    .my_wallet_package_amount {
        font-size: 16px !important;
    }
    
    /* Ensure modal doesn't get hidden by other elements */
    .desktop-widget-nav-full {
        z-index: 999 !important;
    }
    
    .mobile-widget-footer {
        z-index: 998 !important;
    }
}
        
        /* Left column - Packages and amount */
        .my_wallet_left_column {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        /* Right column - Payment methods */
        .my_wallet_right_column {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        /* Compact Packages Section */
.my_wallet_packages_title {
    text-align: center;
    margin: 0 0 10px 0;
    color: #2c3e50;
    font-size: 13px;
    font-weight: 500;
}

.my_wallet_packages_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
        
.my_wallet_package {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 60px;
    box-sizing: border-box;
}

.my_wallet_package:hover {
    border-color: #3498db;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.1);
}

.my_wallet_package.selected {
    border-color: #27ae60;
    background: #f8fff9;
    box-shadow: 0 2px 6px rgba(39, 174, 96, 0.1);
}

.my_wallet_package_amount {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 2px;
}

.my_wallet_package.selected .my_wallet_package_amount {
    color: #27ae60;
}

.my_wallet_package_bonus {
    font-size: 10px;
    color: #27ae60;
    font-weight: 500;
    line-height: 1.2;
}
        
        .my_wallet_package_custom {
            background: #ffffff;
            border: 1px dashed #bdc3c7;
            border-radius: 6px;
            padding: 10px 6px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            grid-column: span 2;
            min-height: 60px;
            box-sizing: border-box;
        }
        
        .my_wallet_package_custom:hover {
            border-color: #3498db;
            transform: translateY(-1px);
        }
        
        .my_wallet_package_custom.selected {
            border-color: #27ae60;
            border-style: solid;
            background: #f8fff9;
        }
        
        .my_wallet_package_custom .my_wallet_package_amount {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            color: #495057;
            font-size: 13px;
        }
        
        .my_wallet_package_custom .my_wallet_package_amount i {
            color: #27ae60;
            font-size: 13px;
        }
        
        /* Compact Custom Amount Section */
        .my_wallet_custom_amount {
            margin: 10px 0;
            padding: 10px;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            cursor: pointer;
        }
        
        .my_wallet_custom_amount:hover {
            border-color: #3498db;
            background: #f0f7ff;
        }
        
        .my_wallet_custom_amount label {
            display: block;
            margin-bottom: 6px;
            color: #2c3e50;
            font-weight: 500;
            font-size: 12px;
        }
        
        .my_wallet_custom_input_group {
            display: flex;
            align-items: center;
            background: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            overflow: hidden;
            transition: all 0.2s ease;
        }
        
.my_wallet_custom_input_group:focus-within {
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
}

.my_wallet_currency_symbol {
    padding: 8px 10px;
    background: #f8f9fa;
    color: #495057;
    font-weight: 500;
    border-right: 1px solid #e0e0e0;
    font-size: 13px;
}

.my_wallet_custom_input {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: #2c3e50;
    padding: 8px 10px;
    font-size: 13px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
        
        .my_wallet_custom_input::placeholder {
            color: #bdc3c7;
        }
        
        .my_wallet_amount_validation {
            font-size: 10px;
            color: #6c757d;
            margin-top: 4px;
            text-align: center;
        }
        
        /* Compact Selected Amount Display */
        .my_wallet_selected_amount,
        .my_wallet_total_amount {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            margin: 6px 0;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
        }
        
        .my_wallet_selected_label,
        .my_wallet_total_label {
            color: #2c3e50;
            font-weight: 500;
            font-size: 12px;
        }
        
        .my_wallet_selected_value {
            font-size: 14px;
            color: #2c3e50;
            font-weight: 600;
        }
        
        .my_wallet_total_value {
            font-size: 16px;
            color: #27ae60;
            font-weight: 600;
        }
        
        .my_wallet_total_amount {
            border-color: #27ae60;
            background: #f8fff9;
            margin-bottom: 10px;
        }
        
        /* Payment Method Section - NOW INSIDE THE MODAL */
        .my_wallet_payment_method {
            margin-top: 0;
            padding-top: 0;
            border-top: none;
        }
        
        .my_wallet_payment_method h4 {
            margin: 0 0 12px 0;
            color: #2c3e50;
            font-size: 14px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .my_wallet_payment_method h4 i {
            color: #3498db;
            font-size: 14px;
        }
        
        /* Payment Method Options */
        .my_wallet_payment_options {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .my_wallet_payment_option {
            background: #ffffff;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            padding: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .my_wallet_payment_option:hover {
            border-color: #3498db;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(52, 152, 219, 0.1);
        }
        
        .my_wallet_payment_option.active {
            border-color: #27ae60;
            background: #f8fff9;
            box-shadow: 0 4px 12px rgba(39, 174, 96, 0.1);
        }
        
        .my_wallet_payment_info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .my_wallet_payment_icon {
            width: 36px;
            height: 36px;
            background: #f8f9fa;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #3498db;
            border: 1px solid #e0e0e0;
        }
        
        .my_wallet_payment_text h5 {
            margin: 0 0 4px 0;
            color: #2c3e50;
            font-size: 14px;
            font-weight: 600;
        }
        
        .my_wallet_payment_text p {
            margin: 0;
            color: #6c757d;
            font-size: 11px;
        }
        
        .my_wallet_payment_toggle {
            font-size: 18px;
            color: #6c757d;
            transition: transform 0.3s ease;
        }
        
        .my_wallet_payment_toggle.expanded {
            transform: rotate(180deg);
            color: #27ae60;
        }
        
        /* Crypto / gateway auth in progress — visible feedback on row */
        .my_wallet_payment_option.processing,
        .my_wallet_payment_option.smdb-fallback-np-busy {
            opacity: 0.92;
            cursor: wait;
            pointer-events: none;
        }
        
        .my_wallet_payment_option.processing .my_wallet_payment_toggle,
        .my_wallet_payment_option.smdb-fallback-np-busy .my_wallet_payment_toggle {
            min-width: 22px;
            text-align: center;
            font-size: 18px;
            color: #3498db;
        }
        
        .my_wallet_payment_option.processing .my_wallet_payment_text p,
        .my_wallet_payment_option.smdb-fallback-np-busy .my_wallet_payment_text p {
            color: #3498db;
        }
        
        /* Saved Bank Account Styles */
        .saved-bank-account-details {
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
        }
        
        .account-summary {
            margin-bottom: 15px;
        }
        
        .account-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .account-item:last-child {
            border-bottom: none;
        }
        
        .account-label {
            color: #6c757d;
            font-weight: 500;
            font-size: 12px;
        }
        
        .account-value {
            color: #2c3e50;
            font-weight: 500;
            font-size: 12px;
        }
        
        .quick-payment-options {
            margin: 15px 0;
            padding-top: 15px;
            border-top: 1px solid #e0e0e0;
        }
        
        .quick-pay-title {
            margin: 0 0 10px 0;
            color: #2c3e50;
            font-size: 13px;
            font-weight: 500;
        }
        
        .quick-amount-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        
        .quick-amount-btn {
            padding: 10px;
            background: #ffffff;
            border: 1px solid #3498db;
            color: #3498db;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.2s ease;
            font-size: 13px;
        }
        
        .quick-amount-btn:hover {
            background: #3498db;
            color: white;
            transform: translateY(-1px);
        }
        
        .quick-amount-btn.active {
            background: #3498db;
            color: white;
            box-shadow: 0 2px 6px rgba(52, 152, 219, 0.2);
        }
        
        .saved-bank-note {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px;
            background: #e8f4fc;
            border-radius: 6px;
            border: 1px solid #d1ecf1;
            margin-top: 15px;
        }
        
        .saved-bank-note i {
            color: #3498db;
            font-size: 14px;
        }
        
        .saved-bank-note span {
            color: #31708f;
            font-size: 11px;
            line-height: 1.4;
        }
        
        /* Payment Form Section */
        .my_wallet_payment_form_section {
            display: none;
            animation: slideDown 0.3s ease;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 15px;
            margin-top: 10px;
        }
        
        .my_wallet_payment_form_section.active {
            display: block;
        }
        
        .my_wallet_payment_form_title {
            margin: 0 0 12px 0;
            color: #2c3e50;
            font-size: 13px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .my_wallet_payment_form_title i {
            color: #27ae60;
            font-size: 12px;
        }
        
        /* Form Grid - UPDATED FOR BANK TRANSFER */
        .my_wallet_payment_form_grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 15px;
        }
        
        /* Row layout for first and last name */
        .my_wallet_payment_form_group-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            grid-column: span 2;
        }
        
        .my_wallet_payment_form_group {
            display: flex;
            flex-direction: column;
        }
        
        .my_wallet_payment_form_group.full-width {
            grid-column: span 2;
        }
        
        .my_wallet_payment_form_label {
            margin-bottom: 6px;
            color: #2c3e50;
            font-weight: 500;
            font-size: 11px;
        }
        
        .my_wallet_payment_form_input {
            padding: 8px 10px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            font-size: 12px;
            color: #495057;
            background: #ffffff;
            transition: all 0.2s ease;
        }
        
        .my_wallet_payment_form_input:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
        }
        
        .my_wallet_payment_form_input::placeholder {
            color: #bdc3c7;
        }
        
        .my_wallet_payment_form_select {
            padding: 8px 10px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            font-size: 12px;
            color: #495057;
            background: #ffffff;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .my_wallet_payment_form_select:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
        }
        
        /* Summary Section */
        .my_wallet_payment_summary {
            background: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 15px;
            margin-top: 15px;
        }
        
        .my_wallet_payment_summary_title {
            margin: 0 0 12px 0;
            color: #2c3e50;
            font-size: 14px;
            font-weight: 600;
            border-bottom: 1px solid #e0e0e0;
            padding-bottom: 8px;
        }
        
        .my_wallet_payment_summary_row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .my_wallet_payment_summary_row:last-child {
            border-bottom: none;
        }
        
        .my_wallet_payment_summary_label {
            color: #6c757d;
            font-size: 12px;
        }
        
        .my_wallet_payment_summary_value {
            color: #2c3e50;
            font-size: 12px;
            font-weight: 500;
        }
        
        .my_wallet_payment_summary_total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0 0 0;
            margin-top: 12px;
            border-top: 1px solid #e0e0e0;
        }
        
        .my_wallet_payment_summary_total_label {
            color: #2c3e50;
            font-size: 14px;
            font-weight: 600;
        }
        
        .my_wallet_payment_summary_total_value {
            color: #27ae60;
            font-size: 18px;
            font-weight: 700;
        }
        
        /* Compact Modal Footer */
        .my_wallet_modal_footer {
            padding: 12px;
            background: #f8f9fa;
            border-top: 1px solid #e0e0e0;
            display: flex;
            gap: 8px;
            flex-shrink: 0;
        }
        
        .my_wallet_modal_button {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        
        .my_wallet_modal_cancel {
            background: #ffffff;
            color: #495057;
            border: 1px solid #e0e0e0;
        }
        
        .my_wallet_modal_cancel:hover {
            background: #f8f9fa;
            border-color: #bdc3c7;
        }
        
        .my_wallet_modal_proceed {
            background: #27ae60;
            color: white;
            border: 1px solid #219653;
        }
        
        .my_wallet_modal_proceed:not(:disabled):hover {
            background: #219653;
            transform: translateY(-1px);
        }
        
        .my_wallet_modal_proceed:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background: #95a5a6;
            border-color: #7f8c8d;
        }
        
        /* Animation */
        @keyframes my_wallet_fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Body class for modal open */
        body.my_wallet_modal_open {
            overflow: hidden;
        }
        
/* SweetAlert2 adjustments - EVEN HIGHER Z-INDEX */
.swal2-container {
    z-index: 100003 !important; /* Higher than main modal */
    padding: 12px !important;
    padding-top: calc(12px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
}

.swal2-popup {
    font-size: 14px !important;
    padding: 20px !important;
    max-width: 400px !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #ffffff !important;
    color: #495057 !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}

#custom-alert-modal .success-modal {
    z-index: 100005 !important;
}
        
        .swal2-title {
            font-size: 16px !important;
            color: #2c3e50 !important;
        }
        
        .swal2-content {
            font-size: 13px !important;
            color: #6c757d !important;
        }
        
        .swal2-confirm {
            background: #27ae60 !important;
        }
        
        /* Success Modal Styling */
        .success-modal-overlay.click-to-close {
            cursor: pointer;
        }
        
/* Success Modal */
.success-modal {
    background: white;
    border-radius: 12px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    animation: modalSlideIn 0.3s ease;
    z-index: 100007;
    cursor: default;
}

.success-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 100006; /* Higher than processing modals */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding-top: calc(16px + env(safe-area-inset-top));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.success-modal-overlay.active,
.success-modal-overlay.click-to-close.active {
    display: flex;
}
        
        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .success-icon {
            font-size: 48px;
            color: #27ae60;
            margin-bottom: 20px;
        }
        
        .success-title {
            font-size: 20px;
            color: #2c3e50;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .success-message {
            color: #6c757d;
            margin-bottom: 25px;
            line-height: 1.5;
            max-height: 300px;
            overflow-y: auto;
            padding-right: 10px;
        }
        
        .success-message::-webkit-scrollbar {
            width: 6px;
        }
        
        .success-message::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }
        
        .success-message::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 3px;
        }
        
        .success-message::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        
        .success-confirm-btn {
            background: #27ae60;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .success-confirm-btn:hover {
            background: #219653;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
        }
        
/* Unified Response Modal */
.unified-response-modal {
    background: white;
    border-radius: 12px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    animation: modalSlideIn 0.3s ease;
    z-index: 100005; /* Higher than main modal */
    cursor: default;
    max-height: 80vh;
    overflow-y: auto;
}

/* Unified Response Modal - Highest priority */
#unified-response-modal {
    z-index: 100008 !important;
}

.unified-response-modal {
    z-index: 100009 !important;
}
        
        .unified-response-content {
            text-align: left;
            margin: 15px 0;
            max-height: 500px;
            overflow-y: auto;
            padding-right: 10px;
        }
        
        .unified-response-content::-webkit-scrollbar {
            width: 6px;
        }
        
        .unified-response-content::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }
        
        .unified-response-content::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 3px;
        }
        
        .unified-response-content::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        
        /* ===== RESPONSIVE BREAKPOINTS ===== */
        @media (min-width: 769px) {
            .desktop-widget-nav-full {
                display: block;
            }
            
            .mobile-widget-footer {
                display: none !important;
            }
            
            .mobile-widget-overlay,
            .mobile-widget-container {
                display: none !important;
            }
            
            /* Desktop wallet layout adjustments */
            .wallet-balance-display-full {
                min-height: 80px;
            }
            
            .balance-value-small {
                font-size: 28px;
            }
            
            .smdb-wallet-add-funds-btn,
            .wallet-history-btn,
            .wallet-monthly-plans-btn {
                font-size: 15px;
                padding: 14px 20px;
            }
        }
        
        @media (max-width: 1400px) {
            .desktop-nav-inner-full {
                max-width: 100%;
                padding: 0 20px;
            }
        }
        
        @media (max-width: 768px) {
            .desktop-widget-nav-full {
                display: none;
            }
            
            .mobile-widget-footer {
                display: block;
            }
            
            body {
                padding-bottom: calc(70px + env(safe-area-inset-bottom));
            }
            
            /* Mobile wallet layout */
            .balance-value-small {
                font-size: 22px;
            }

            .wallet-balance-display .bonus-balance-container .locked-balance-value {
                font-size: 22px;
            }
            
            /* Modal adjustments */
            .my_wallet_modal_content {
                width: 95%;
                max-width: 500px;
            }
            
            .my_wallet_packages_grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .my_wallet_package_custom {
                grid-column: span 2;
            }
            
            .my_wallet_payment_form_grid {
                grid-template-columns: 1fr;
            }
            
            .my_wallet_payment_form_group.full-width {
                grid-column: span 1;
            }
            
            /* Mobile-specific improvements for forms */
            .my_wallet_payment_form_input,
            .my_wallet_payment_form_select {
                font-size: 14px;
                padding: 10px 12px;
            }
            
            .my_wallet_payment_form_label {
                font-size: 12px;
            }
            
            .header-balance-info {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
            
            .user-balance-display {
                align-self: flex-start;
            }
        }
        
        @media (max-width: 480px) {
            .saved-account-notice {
        padding: 10px;
    }
    
    .saved-account-notice > div > div:first-child {
        align-items: center;
    }
    
    .saved-account-notice i {
        font-size: 14px;
        margin-top: 2px;
    }
    
    .saved-account-notice strong {
        font-size: 11px;
    }
    
    .saved-account-notice span {
        font-size: 10px;
    }
    
    .remove-record-btn {
        padding: 6px 10px !important;
        font-size: 10px !important;
        min-height: 28px !important;
    }
    .my_wallet_modal_content {
        width: 98% !important;
        max-width: 360px !important;
    }

    .my_wallet_modal_footer {
        flex-direction: column;
        gap: 10px;
    }

    .my_wallet_modal_button {
        width: 100%;
    }
    
    .my_wallet_packages_grid {
        grid-template-columns: 1fr !important;
    }
    
    .my_wallet_payment_form_grid {
        grid-template-columns: 1fr !important;
    }
    
    .my_wallet_payment_form_group.full-width {
        grid-column: span 1 !important;
    }
    
    /* Prevent iOS zoom on input focus */
    input[type="number"],
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important;
    }
}
        
        @media (max-width: 360px) {
                .saved-account-notice > div {
        gap: 8px;
    }
    
    .saved-account-notice > div > div:first-child {
        gap: 8px;
    }
    
    .remove-record-btn {
        padding: 5px 8px !important;
        font-size: 9px !important;
        min-height: 26px !important;
    }
    
    .remove-record-btn i {
        margin-right: 3px !important;
        font-size: 9px !important;
    }
            .balance-value-small {
                font-size: 20px;
            }
            
            .smdb-wallet-add-funds-btn,
            .wallet-history-btn,
            .wallet-monthly-plans-btn {
                font-size: 14px;
                padding: 12px 15px;
            }
            
            .my_wallet_modal_content {
                width: 98%;
                max-width: 320px;
            }
            
            /* Very small screens - adjust form spacing */
            .my_wallet_main_content {
                gap: 10px;
            }
            
            .my_wallet_payment_option {
                padding: 10px;
            }
        }
        
        /* Touch-friendly improvements for mobile */
        @media (hover: none) and (pointer: coarse) {
            .my_wallet_payment_option,
            .my_wallet_package,
            .smdb-wallet-add-funds-btn,
            .wallet-history-btn,
            .wallet-monthly-plans-btn {
                min-height: 44px; /* Apple's recommended minimum touch target */
            }
            
            .my_wallet_modal_button {
                min-height: 44px;
                padding: 12px;
            }
            
            .my_wallet_payment_form_input,
            .my_wallet_payment_form_select {
                font-size: 16px; /* Prevents iOS zoom on focus */
            }
        }
        
        /* ===== FULL WIDTH DESKTOP NAVIGATION ===== */
.desktop-widget-nav-full {
    display: block;
    background: #f8f9fa;
    border: none;
    margin: 0;
    position: relative;
    z-index: 10020;
}

.desktop-nav-inner-full {
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 0;
    max-width: 1400px;
    margin: 0 auto;
}

.desktop-nav-item {
    position: relative;
    flex: 1;
}

.desktop-nav-item.active {
    z-index: 10021;
}

.desktop-nav-content,
.desktop-nav-widget,
.desktop-nav-content *,
.desktop-nav-widget * {
    pointer-events: auto;
}

.desktop-nav-item .desktop-nav-content {
    z-index: 10022;
}

/* Hide all desktop nav items on mobile except profile */
@media (max-width: 768px) {
    .desktop-nav-item {
        display: none;
    }
    
    /* Keep profile item visible and give it special styling */
    .desktop-nav-item[data-widget="profile-completion"] {
        display: block;
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 10000;
        flex: none;
        width: auto;
        max-width: 200px;
    }
    
    /* Special mobile styling for profile button */
    .desktop-nav-item[data-widget="profile-completion"] .desktop-nav-button {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 30px;
        padding: 10px 18px;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        border: 1px solid rgba(255,255,255,0.2);
        width: auto;
        min-width: 140px;
        justify-content: flex-start;
        gap: 8px;
        transition: all 0.3s ease;
    }
    
    .desktop-nav-item[data-widget="profile-completion"] .desktop-nav-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }
    
    .desktop-nav-item[data-widget="profile-completion"] .desktop-nav-button i {
        color: white;
        font-size: 16px;
    }
    
    .desktop-nav-item[data-widget="profile-completion"] .desktop-nav-label {
        color: white;
        font-size: 13px;
        font-weight: 500;
    }
    
    .desktop-nav-item[data-widget="profile-completion"] .dropdown-arrow {
        color: rgba(255,255,255,0.8);
        font-size: 10px;
        margin-left: auto;
    }
    
    /* Special styling for profile dropdown content on mobile */
    .desktop-nav-item[data-widget="profile-completion"] .desktop-nav-content {
        position: fixed;
        top: 70px;
        right: 10px;
        left: auto;
        width: 300px;
        max-width: calc(100vw - 20px);
        background: white;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        border: 1px solid #e0e0e0;
        padding: 20px;
        max-height: 80vh;
        overflow-y: auto;
    }
    
    /* Profile widget inside dropdown on mobile */
    .desktop-nav-item[data-widget="profile-completion"] .profile-completion-preview {
        min-width: auto;
        width: 100%;
    }
    
    .desktop-nav-item[data-widget="profile-completion"] .profile-message {
        font-size: 14px;
        padding: 12px;
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 15px;
        text-align: center;
    }
    
    .desktop-nav-item[data-widget="profile-completion"] .profile-progress {
        margin: 15px 0;
    }
    
    .desktop-nav-item[data-widget="profile-completion"] .progress-bar {
        height: 10px;
        background: #e0e0e0;
        border-radius: 5px;
        overflow: hidden;
    }
    
    .desktop-nav-item[data-widget="profile-completion"] .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #667eea, #764ba2);
        border-radius: 5px;
        transition: width 0.3s ease;
    }
    
    .desktop-nav-item[data-widget="profile-completion"] .progress-text {
        font-size: 12px;
        color: #6c757d;
        text-align: center;
        margin-top: 8px;
    }
    
    /* Profile action buttons in mobile dropdown */
    .desktop-nav-item[data-widget="profile-completion"] .profile-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 15px;
    }
    
    .desktop-nav-item[data-widget="profile-completion"] .profile-btn {
        background: white;
        border: 1px solid #e0e0e0;
        padding: 12px 15px;
        border-radius: 8px;
        font-size: 14px;
        color: #495057;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: all 0.2s ease;
        cursor: pointer;
        width: 100%;
    }
    
    .desktop-nav-item[data-widget="profile-completion"] .profile-btn:hover {
        background: #f8f9fa;
        border-color: #667eea;
        transform: translateY(-1px);
    }
    
    .desktop-nav-item[data-widget="profile-completion"] .profile-btn i {
        color: #667eea;
        width: 20px;
        font-size: 16px;
    }
    
    .desktop-nav-item[data-widget="profile-completion"] .profile-btn:last-child {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        justify-content: center;
    }
    
    .desktop-nav-item[data-widget="profile-completion"] .profile-btn:last-child i {
        color: white;
    }
    
    /* Completion badge styling */
    .desktop-nav-item[data-widget="profile-completion"] .desktop-nav-badge.profile-badge {
        background: #27ae60;
        margin-left: 5px;
        font-size: 11px;
        padding: 2px 6px;
    }
}

/* Additional mobile adjustments for very small screens */
@media (max-width: 480px) {
    .desktop-nav-item[data-widget="profile-completion"] .desktop-nav-button {
        padding: 8px 14px;
        min-width: 120px;
    }
    
    .desktop-nav-item[data-widget="profile-completion"] .desktop-nav-label {
        font-size: 12px;
    }
    
    .desktop-nav-item[data-widget="profile-completion"] .desktop-nav-content {
        top: 60px;
        width: 280px;
    }
}

@media (max-width: 360px) {
    .desktop-nav-item[data-widget="profile-completion"] .desktop-nav-button {
        padding: 6px 12px;
        min-width: 100px;
    }
    
    .desktop-nav-item[data-widget="profile-completion"] .desktop-nav-label {
        font-size: 11px;
    }
    
    .desktop-nav-item[data-widget="profile-completion"] .desktop-nav-content {
        width: 260px;
    }
}

/* Ensure the dropdown arrow is visible on mobile */
@media (max-width: 768px) {
    .desktop-nav-item[data-widget="profile-completion"] .dropdown-arrow {
        display: inline-block;
    }
}

/* Animation for mobile profile dropdown */
@keyframes slideDownMobile {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.desktop-nav-item[data-widget="profile-completion"] .desktop-nav-content {
    animation: slideDownMobile 0.3s ease;
}

/* ---- Locked wallet button (email unverified) ---- */
.wallet-btn-locked,
.wallet-btn-locked:hover {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f0f0f0 !important;
    border-color: #ccc !important;
    color: #888 !important;
}
.wallet-btn-locked i {
    color: #888 !important;
}

/* Verify-email notice inside wallet */
.wallet-verify-notice {
    margin: 4px 0 0 0;
    padding: 6px 8px;
    font-size: 11px;
    color: #c05621;
    background: #fffaf0;
    border: 1px solid #f6ad55;
    border-radius: 4px;
    line-height: 1.4;
}
.wallet-verify-email-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 600;
    color: #c05621;
    text-decoration: underline;
    cursor: pointer;
    display: inline;
}
.wallet-verify-email-link:hover {
    color: #9c4221;
}

/* ---- SMD B: Transaction history (wallet iframe) — smdb-tx-embed__* ---- */
.smdb-tx-embed {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100095;
    overscroll-behavior: contain;
}

.smdb-tx-embed__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}

.smdb-tx-embed__panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 96%;
    max-width: 1120px;
    max-height: min(92vh, 920px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.smdb-tx-embed__header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.smdb-tx-embed__heading {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.smdb-tx-embed__heading i {
    color: #64748b;
}

.smdb-tx-embed__close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.smdb-tx-embed__close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.smdb-tx-embed__body {
    flex: 1;
    min-height: 0;
    padding: 0;
    background: #fff;
}

.smdb-tx-embed__iframe {
    display: block;
    width: 100%;
    height: min(75vh, 720px);
    min-height: 420px;
    border: 0;
    background: #fff;
}

.smdb-tx-embed__footer {
    flex-shrink: 0;
    padding: 12px 16px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    justify-content: flex-end;
}

.smdb-tx-embed__footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #3498db;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.smdb-tx-embed__footer-btn:hover {
    background: #2980b9;
}

@media (max-width: 768px) {
    .smdb-tx-embed__panel {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
    }

    .smdb-tx-embed__iframe {
        height: calc(100dvh - 200px);
        min-height: 280px;
    }
}

/* ---- SMD B: Monthly plans coming soon — smdb-mp-cs__* ---- */
.smdb-mp-cs {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100096;
    overscroll-behavior: contain;
}

.smdb-mp-cs__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
}

.smdb-mp-cs__panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 420px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.smdb-mp-cs__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #fdf4ff 0%, #fff 100%);
}

.smdb-mp-cs__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.smdb-mp-cs__dismiss {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}

.smdb-mp-cs__body {
    padding: 24px 22px 12px;
    text-align: center;
}

.smdb-mp-cs__badge {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #fef3c7;
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.smdb-mp-cs__lead {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
}

.smdb-mp-cs__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #64748b;
}

.smdb-mp-cs__footer {
    padding: 14px 18px 20px;
    display: flex;
    justify-content: center;
}

.smdb-mp-cs__primary {
    min-width: 120px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #ec4899;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35);
}

.smdb-mp-cs__primary:hover {
    filter: brightness(1.05);
}

/* Advisor Transaction History / Earnings Report Modal */
.smdb-earnings-report-modal {
    z-index: 100120;
}

.smdb-earnings-report-modal .transaction-history-modal-overlay {
    background:
        radial-gradient(circle at top left, rgba(236, 72, 153, 0.24), transparent 34%),
        radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.22), transparent 32%),
        rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(8px);
}

.smdb-earnings-report-panel {
    width: min(1180px, calc(100vw - 28px));
    max-height: calc(100dvh - 28px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.36);
    background: #f8fafc;
}

.smdb-earnings-report-header {
    padding: 18px 22px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(236, 72, 153, 0.98), rgba(124, 58, 237, 0.96)),
        #ec4899;
    border-bottom: none;
}

.smdb-earnings-report-header .header-history-info h3,
.smdb-earnings-report-header .history-summary-item,
.smdb-earnings-report-header .history-summary-item strong,
.smdb-earnings-report-header .header-history-info h3 i {
    color: #fff;
}

.smdb-earnings-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.smdb-earnings-report-header .transaction-history-modal-close {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
    border-radius: 999px;
}

.smdb-earnings-report-header .transaction-history-modal-close:hover {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}

.smdb-earnings-report-modal .transaction-history-modal-body {
    padding: 18px;
    background: #f8fafc;
}

.smdb-earnings-filters {
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.smdb-earnings-filters .filter-controls {
    display: grid;
    grid-template-columns: minmax(150px, 0.9fr) minmax(190px, 1fr) minmax(240px, 1.4fr);
    gap: 12px;
    align-items: end;
    margin-bottom: 0;
}

.smdb-earnings-filters .filter-group {
    min-width: 0;
}

.smdb-earnings-filters .custom-date-range {
    grid-column: 1 / -1;
}

.smdb-earnings-filters .history-filter-select,
.smdb-earnings-filters .date-input {
    width: 100%;
    min-width: 0;
    border-radius: 12px;
    border-color: #e2e8f0;
    background: #fff;
}

.smdb-history-search {
    cursor: text;
}

.smdb-earnings-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.smdb-earnings-stats .stat-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.smdb-earnings-stats .stat-icon {
    border-radius: 14px;
    background: linear-gradient(135deg, #fdf2f8, #ede9fe);
    color: #c026d3;
}

.smdb-earnings-report-modal .transaction-history-list-container {
    border-radius: 18px;
    border-color: #e2e8f0;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
}

.smdb-earnings-report-modal .transaction-history-header {
    background: #fff;
}

.smdb-earnings-report-modal .transaction-history-list {
    max-height: min(42vh, 430px);
}

.smdb-earnings-report-modal .transaction-row {
    background: #fff;
}

.smdb-earnings-report-modal .transaction-row:hover {
    background: #fdf2f8;
}

.smdb-earnings-report-modal .wallet-ledger-transaction {
    border-left: 3px solid #0ea5e9;
}

.smdb-earnings-report-modal .ach-transaction {
    border-left: 3px solid #10b981;
}

.smdb-earnings-report-modal .payment-link-transaction {
    border-left: 3px solid #f59e0b;
}

.smdb-earnings-report-modal .featured-goodies-transaction {
    border-left: 3px solid #a855f7;
}

.smdb-transaction-no-results {
    display: block;
    padding: 26px;
    text-align: center;
}

.smdb-transaction-no-results .transaction-cell {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #64748b;
}

.smdb-transaction-no-results strong {
    color: #0f172a;
    font-size: 15px;
}

.smdb-earnings-report-modal .transaction-history-modal-footer {
    padding: 14px 18px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

.smdb-earnings-report-modal .transaction-history-btn.primary {
    color: #fff;
    border: none;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
}

.smdb-earnings-report-modal .transaction-history-btn.secondary {
    color: #475569;
    border: 1px solid #e2e8f0;
    background: #fff;
}

@media (max-width: 860px) {
    .smdb-earnings-report-panel {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 18px;
    }

    .smdb-earnings-report-header {
        padding: 15px;
    }

    .smdb-earnings-report-modal .history-summary-display {
        flex-wrap: wrap;
        gap: 9px;
    }

    .smdb-earnings-report-modal .transaction-history-modal-body {
        padding: 12px;
    }

    .smdb-earnings-filters .filter-controls,
    .smdb-earnings-stats {
        grid-template-columns: 1fr;
    }

    .smdb-earnings-report-modal .header-row {
        display: none;
    }

    .smdb-earnings-report-modal .transaction-row {
        display: block;
        padding: 14px;
    }

    .smdb-earnings-report-modal .transaction-cell {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
    }

    .smdb-earnings-report-modal .transaction-cell::before {
        content: attr(data-label);
        flex: 0 0 108px;
        color: #94a3b8;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .smdb-earnings-report-modal .method-display {
        justify-content: flex-end;
        text-align: right;
    }
}