* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #f5f7fa; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; overflow-x: hidden; }
.container { max-width: 400px; margin: 0 auto; background: white; min-height: 100vh; position: relative; }

/* ====== PAGE CONTROL ====== */
.login-pin-page, .dashboard, .page, .transfer-page, .bank-select-page, .amount-page, .profile-page, .history-page, .confirm-page, .pin-page, .success-page, .deposit-page, .deposit-bank-select-page, .deposit-amount-page, .deposit-confirm-page, .deposit-success-page, .transaction-details-page, .activation-page { display: none; }

/* ====== ACTIVATION PAGE STYLES ====== */
.activation-page {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  background: white;
}

.activation-page * { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.activation-page body { 
  background: linear-gradient(135deg, #0062cc 0%, #0099ff 100%);
  min-height: 100vh;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.activation-page .container { 
  width: 100%;
  max-width: 380px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
}

/* Header */
.activation-page .header {
  padding: 15px; 
  background: linear-gradient(135deg, #0066cc 0%, #0099ff 100%);
  color: white;
  text-align: center;
  position: relative;
}

.activation-page .logo {
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.activation-page .logo i {
  font-size: 20px;
}

/* WhatsApp Support Button */
.activation-page .whatsapp-support {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #25D366;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  transition: all 0.3s;
  z-index: 10;
}

.activation-page .whatsapp-support:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.6);
}

/* Content */
.activation-page .content-section {
  padding: 15px;
}

.activation-page .section-title {
  font-size: 16px;
  font-weight: 700;
  color: #0066cc;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.activation-page .section-title i {
  color: #0066cc;
}

/* Payment Info */
.activation-page .payment-info {
  background: #f0f8ff;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 12px;
  border: 1px solid #cce5ff;
}

.activation-page .payment-row {
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  padding: 6px 0;
  font-size: 13px; 
  border-bottom: 1px solid #e6f2ff;
}

.activation-page .payment-row:last-child { 
  border-bottom: none; 
}

.activation-page .payment-label { 
  color: #666; 
  font-weight: 500;
}

.activation-page .payment-value { 
  font-weight: 600; 
  color: #0066cc;
  display: flex;
  align-items: center;
  gap: 5px;
}

.activation-page .copy-icon {
  color: #0066cc;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  background: rgba(0, 102, 204, 0.1);
}

.activation-page .copy-all-btn {
  background: linear-gradient(135deg, #0066cc 0%, #0099ff 100%);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-weight: 600;
  width: 100%;
  justify-content: center;
}

.activation-page .copy-all-btn:active {
  transform: translateY(1px);
}

/* Form Styles */
.activation-page .form-group {
  margin-bottom: 12px;
}

.activation-page .form-label {
  display: block; 
  font-size: 13px; 
  font-weight: 600; 
  color: #444;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.activation-page .form-input {
  width: 100%; 
  padding: 10px 12px; 
  border-radius: 6px; 
  border: 1px solid #ddd;
  font-size: 13px; 
  background: #f9f9f9;
  color: #333;
}

.activation-page .form-input:focus {
  outline: none; 
  border-color: #0066cc; 
  background: white;
}

.activation-page .form-input::placeholder {
  color: #999;
}

/* Buttons */
.activation-page .btn {
  width: 100%; 
  padding: 12px; 
  border-radius: 8px; 
  border: none;
  font-size: 14px; 
  font-weight: 600; 
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.activation-page .btn-primary {
  background: linear-gradient(135deg, #0066cc 0%, #0099ff 100%);
  color: white;
}

.activation-page .btn-primary:active {
  transform: translateY(1px);
}

.activation-page .btn-whatsapp {
  background: #25D366;
  color: white;
  margin-top: 8px;
}

.activation-page .btn:disabled { 
  background: #ccc; 
  color: #888;
  cursor: not-allowed;
}

/* Notice Box */
.activation-page .notice-box {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.activation-page .notice-title {
  color: #856404;
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.activation-page .notice-content {
  color: #856404;
  font-size: 11px;
  line-height: 1.3;
}

/* Support Notice */
.activation-page .support-notice {
  background: #e8f5e8;
  border: 1px solid #25D366;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.activation-page .support-notice i {
  color: #25D366;
  font-size: 14px;
}

.activation-page .support-notice-text {
  font-size: 11px;
  color: #2d5016;
  font-weight: 500;
}

/* Activation Notice */
.activation-page .activation-notice {
  background: #e3f2fd;
  border: 1px solid #2196f3;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
  text-align: center;
}

.activation-page .activation-notice-text {
  font-size: 11px;
  color: #0d47a1;
  font-weight: 500;
  line-height: 1.3;
}

/* UID Display */
.activation-page .uid-display {
  background: #f0f8ff;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  text-align: center;
  border: 1px dashed #cce5ff;
}

.activation-page .uid-text {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 600;
  color: #0066cc;
  margin-bottom: 8px;
  word-break: break-all;
  padding: 6px;
  background: rgba(0, 102, 204, 0.1);
  border-radius: 4px;
}

.activation-page .copy-btn {
  background: linear-gradient(135deg, #0066cc 0%, #0099ff 100%);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.activation-page .copy-btn:active {
  transform: translateY(1px);
}

/* Success Message */
.activation-page .success-message {
  text-align: center; 
  padding: 20px 15px; 
}

.activation-page .success-icon {
  font-size: 40px; 
  margin-bottom: 10px;
  color: #28a745;
}

.activation-page .success-text {
  font-size: 18px; 
  font-weight: 700; 
  margin-bottom: 8px;
  color: #28a745;
}

.activation-page .success-subtext {
  font-size: 12px; 
  color: #666;
  line-height: 1.3;
  margin-bottom: 15px;
}

/* Loading Spinner */
.activation-page .spinner {
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  animation: spin 1s linear infinite;
  display: inline-block;
}

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

/* Hidden Content */
.activation-page .hidden { display: none; }

/* ====== LOGIN PIN PAGE STYLES ====== */
.login-pin-page {
  height: 100vh;
  background: #f5f7fa;
  padding: 20px;
  position: relative;
}
.login-pin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.login-pin-header .back-btn {
  font-size: 20px;
  color: #007AFF;
  cursor: pointer;
}
.login-pin-notification {
  font-size: 12px;
  color: #007AFF;
  background: rgba(0, 122, 255, 0.1);
  padding: 4px 8px;
  border-radius: 12px;
}
.login-pin-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.en-logo {
  width: 48px;
  height: 48px;
  background: #007AFF;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 18px;
}
.login-pin-welcome {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  color: #000;
  margin-bottom: 8px;
}
.login-pin-instruction {
  font-size: 16px;
  text-align: center;
  color: #666;
  margin-bottom: 32px;
}
.login-pin-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
}
.login-pin-dots .pin-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #E5E5EA;
  transition: background 0.2s;
}
.login-pin-dots .pin-dot.active {
  background: #007AFF;
}
.login-pin-keypad {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}
.keypad-row {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.pin-key {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #F2F2F7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  transition: background 0.2s;
}
.pin-key:active {
  background: #E5E5EA;
}
.backspace-key i, .next-key i {
  font-size: 20px;
  color: #86868B;
}
.backspace-key, .next-key {
  background: #F2F2F7;
}
.login-pin-forgot {
  text-align: center;
  font-size: 16px;
  color: #007AFF;
  cursor: pointer;
  font-weight: 500;
}

/* ====== MODAL STYLES ====== */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: none; }
.setup-modal, .telegram-modal, .support-modal, .verification-modal, .failure-modal, .profile-edit-modal, .change-pin-modal, .live-support-modal, .settings-modal { position: fixed; bottom: 0; left: 0; right: 0; background: white; border-radius: 20px 20px 0 0; z-index: 2001; transform: translateY(100%); transition: transform 0.3s; max-width: 400px; margin: 0 auto; }
.setup-modal.active, .telegram-modal.active, .support-modal.active, .verification-modal.active, .failure-modal.active, .profile-edit-modal.active, .change-pin-modal.active, .live-support-modal.active, .settings-modal.active { transform: translateY(0); }
.modal-drag-handle { width: 40px; height: 4px; background: #ddd; border-radius: 2px; margin: 0 auto 16px; }
.modal-title { font-weight: 600; font-size: 18px; color: #333; margin-bottom: 4px; }
.modal-subtitle { font-size: 14px; color: #666; margin-bottom: 20px; }
.setup-content, .telegram-content, .support-content, .failure-content, .profile-edit-content, .change-pin-content, .live-support-content, .settings-content { padding: 0 16px 20px; }
.input-group { margin-bottom: 16px; }
.input-group label { display: block; font-size: 14px; color: #666; margin-bottom: 6px; }
.input-group input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; }
.setup-btn, .support-btn, .failure-close-btn { width: 100%; background: #007bff; color: white; border: none; padding: 16px; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 8px; }
.telegram-link { display: block; background: #0088cc; color: white; padding: 16px; border-radius: 12px; text-align: center; font-size: 16px; font-weight: 600; text-decoration: none; margin-top: 8px; }

/* Live Support Chat Styles - Adjusted Height */
.live-support-modal { top: 0; bottom: 0; border-radius: 0; height: 100vh; }
.live-support-content { display: flex; flex-direction: column; height: 100vh; }
.live-support-modal .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; }
.chat-messages { flex: 1; max-height: calc(100vh - 200px); padding: 16px; overflow-y: auto; background: #f8f9fa; border-radius: 12px; margin-bottom: 16px; }
.chat-message { margin-bottom: 12px; display: flex; }
.chat-message.user { justify-content: flex-end; }
.chat-message.support { justify-content: flex-start; }
.chat-message .message-bubble { max-width: 80%; padding: 10px 14px; border-radius: 18px; }
.chat-message.user .message-bubble { background: #007bff; color: white; }
.chat-message.support .message-bubble { background: white; color: #333; border: 1px solid #ddd; }
.chat-message .message-bubble img { max-width: 100%; height: auto; border-radius: 8px; }
.chat-input-group { display: flex; gap: 8px; padding: 0 16px 16px; }
.chat-input-group input[type="text"] { flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 20px; }
.chat-input-group button[type="button"] { background: #007bff; color: white; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; }
.attach-btn { background: #f0f0f0; color: #666; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; }
.typing-indicator { padding: 8px 16px; color: #666; font-style: italic; font-size: 14px; }

/* Settings Modal */
.settings-content { max-height: 70vh; overflow-y: auto; }
.settings-section { margin-bottom: 20px; }
.settings-item { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid #eee; }
.settings-label { display: flex; align-items: center; gap: 8px; font-size: 16px; color: #333; }
.settings-value { font-weight: 600; font-size: 16px; color: #007bff; }
.switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #007bff; }
input:checked + .slider:before { transform: translateX(26px); }

/* Profile Edit Modal */
.profile-edit-content { max-height: 70vh; overflow-y: auto; }
#profilePicInput { padding: 8px; }

/* Change PIN Modal */
.change-pin-content { max-height: 70vh; overflow-y: auto; }

/* ====== BANK LOGOS ====== */
.bank-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
    background: white;
    padding: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.bank-logo-small {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: contain;
    background: white;
    padding: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.bank-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.bank-list-item:hover {
    background: #f8f9fa;
}

.bank-list-item img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: contain;
}

/* ====== STICKY HEADER ====== */
.header {
  padding: 16px; display: flex; align-items: center; justify-content: space-between;
  background: #f8f9fa; border-bottom: 1px solid #eee;
  position: sticky; top: 0; z-index: 1000;
  backdrop-filter: blur(10px);
}
.logo {
  width: 40px; height: 40px; border-radius: 8px; object-fit: contain;
  background: white; padding: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); cursor: pointer;
}
.level { background: #e8f5e8; color: #4caf50; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.merchant { background: #e1d5f7; color: #6a1b9a; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-left: 6px; }
.icons i { font-size: 20px; color: #888; margin-left: 16px; }

/* ====== STICKY PROFILE ====== */
.profile {
  padding: 10px 16px 8px; display: flex; align-items: center; gap: 8px;
  background: white; position: sticky; top: 73px; z-index: 999;
  backdrop-filter: blur(8px); border-bottom: 1px solid #eee;
  cursor: pointer;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: #1976d2; color: white;
  display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 13px;
  cursor: pointer; position: relative; overflow: hidden; flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.name-account-line { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 13px; color: #333; min-width: 0; }
.name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-number { color: #666; font-size: 12.5px; cursor: pointer; user-select: all; white-space: nowrap; }
.copy-icon { font-size: 13px; color: #007bff; cursor: pointer; }
.dropdown-arrow { font-size: 11px; color: #aaa; }
.pos-icon-btn { width: 28px; height: 28px; background: #f0f0f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.pos-icon-btn i { font-size: 14px; color: #666; }

/* ====== SCROLLABLE CONTENT ====== */
.scrollable {
  padding-bottom: 80px; /* Only for bottom nav */
}

/* BALANCE CARD */
.balance-card {
  margin: 0 16px 16px; background: #1976d2; color: white; border-radius: 20px;
  padding: 10px 16px; position: relative; overflow: hidden;
  box-shadow: 0 2px 8px rgba(25,118,210,0.3); height: 68px;
  display: flex; flex-direction: column; justify-content: center;
}
.balance-label { font-size: 12px; opacity: 0.9; margin-bottom: 2px; }
.balance-amount { font-size: 24px; font-weight: 700; margin: 0; line-height: 1; }
.balance-hidden { font-size: 24px; font-weight: 700; margin: 0; line-height: 1; color: #ccc; }
.history-link { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); font-size: 12px; color: white; text-decoration: none; font-weight: 500; }

/* Recent Transactions Section */
.recent-transactions-section { margin: 0 16px 16px; }
.recent-transactions-list { max-height: 120px; overflow-y: auto; }
.recent-transaction-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee; }
.recent-transaction-icon { width: 40px; height: 40px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; margin-right: 12px; }
.recent-transaction-details { flex: 1; }
.recent-transaction-name { font-weight: 600; font-size: 14px; color: #333; }
.recent-transaction-info { font-size: 12px; color: #666; display: flex; justify-content: space-between; align-items: center; }
.recent-transaction-amount { font-weight: 600; font-size: 14px; }
.see-more-link { display: block; text-align: right; font-size: 14px; color: #007bff; margin-top: 8px; text-decoration: none; }

/* REWARDS CARD */
.rewards-card {
  margin: 0 16px 20px; background: white; border: 1px solid #eee; border-radius: 16px;
  padding: 14px; display: flex; align-items: center; justify-content: space-between; cursor: pointer;
}
.rewards-left { display: flex; align-items: center; gap: 10px; }
.rewards-icon { width: 36px; height: 36px; background: #fff8e1; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.rewards-icon i { color: #f57c00; font-size: 18px; }
.rewards-amount { font-weight: 700; font-size: 18px; }
.rewards-arrow { color: #007bff; font-size: 18px; }

/* SECTIONS */
.section { margin: 20px 16px 16px; }
.section-title { color: #666; font-size: 13px; margin-bottom: 10px; font-weight: 500; }
.options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.option { background: #f8f9fa; padding: 14px 8px; border-radius: 12px; text-align: center; cursor: pointer; }
.option-icon { width: 40px; height: 40px; margin: 0 auto 6px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: white; }
.option-icon i { font-size: 18px; color: #007bff; }
.option-text { font-size: 11px; color: #333; font-weight: 500; }

.receive-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px;
}
.pos-option { 
  background: #f8f9fa; padding: 14px; border-radius: 12px; text-align: center; position: relative;
  cursor: pointer;
}
.pos-option:active {
  background: #e9ecef;
}
.pos-icon { width: 36px; height: 36px; margin: 0 auto 6px; background: white; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.pos-icon i { font-size: 18px; color: #007bff; }
.pos-text { font-size: 12px; color: #333; }
.new-badge { background: #e91e63; color: white; font-size: 9px; padding: 2px 5px; border-radius: 6px; position: absolute; top: 8px; right: 8px; }

/* CAC BANNER */
.cac-banner {
  margin: 16px; background: #0a3d2a; color: white; border-radius: 16px; padding: 16px;
  text-align: left; position: relative; overflow: hidden; cursor: pointer;
}
.cac-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.cac-text { font-size: 11px; opacity: 0.9; margin-bottom: 10px; line-height: 1.3; }
.cac-btn { background: white; color: #0a3d2a; padding: 6px 16px; border-radius: 20px; font-weight: 600; text-decoration: none; font-size: 11px; display: inline-block; }
.cac-logo { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 60px; height: 60px; background: #0a3d2a; border: 3px solid white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: white; }

/* ====== SCROLLING DASHBOARD ====== */
.dashboard-content {
  padding: 16px; background: #f5f7fa;
}
.dashboard-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
  color: #333; font-size: 14px; font-weight: 600;
}
.view-all { color: #007bff; font-size: 13px; }

.manage-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px;
}
.manage-card {
  background: white; padding: 14px; border-radius: 12px; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); position: relative; cursor: pointer;
}
.manage-icon {
  width: 36px; height: 36px; margin: 0 auto 8px; background: #e3f2fd; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.manage-icon i { font-size: 18px; color: #007bff; }
.manage-text { font-size: 13px; color: #333; }
.manage-count { font-size: 12px; color: #007bff; margin-top: 2px; }

.gear-icon {
  position: absolute; top: 10px; right: 10px; width: 20px; height: 20px;
  background: #ddd; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.gear-icon i { font-size: 12px; color: #666; }

.suggested-title {
  font-size: 14px; color: #333; font-weight: 600; margin: 20px 0 12px;
}
.suggested-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 20px;
}
.suggested-card {
  background: white; padding: 12px; border-radius: 12px; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); cursor: pointer;
}
.suggested-icon {
  width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.uk-icon { background: #fff3e0; color: #ff6d00; }
.refer-icon { background: #e3f2fd; color: #1976d2; }
.agent-icon { background: #f3e5f5; color: #7b1fa2; }
.suggested-text { font-size: 11px; color: #333; line-height: 1.3; }

.trend-card {
  background: white; border-radius: 12px; padding: 16px; margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); cursor: pointer;
}
.trend-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
  font-size: 14px; font-weight: 600; color: #333;
}
.dropdown {
  background: #f1f3f5; padding: 6px 12px; border-radius: 8px; font-size: 12px; color: #555;
}
.trend-row {
  display: flex; justify-content: space-between; margin-bottom: 8px;
}
.trend-label { font-size: 13px; color: #666; display: flex; align-items: center; gap: 6px; }
.trend-dot { width: 8px; height: 8px; border-radius: 50%; }
.money-in .trend-dot { background: #4caf50; }
.money-out .trend-dot { background: #f44336; }
.trend-amount { font-weight: 700; font-size: 16px; }

.empty-state {
  text-align: center; padding: 30px 20px; color: #888; font-size: 13px;
  background: #f9f9f9; border-radius: 12px; margin-top: 16px;
}
.empty-icon {
  width: 50px; height: 50px; margin: 0 auto 12px; background: #eee; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 24px; color: #ccc;
}

/* ====== BOTTOM NAV ====== */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; background: white;
  display: flex; justify-content: space-around; padding: 10px 0; border-top: 1px solid #eee;
  max-width: 400px; margin: 0 auto; z-index: 1000;
}
.nav-item { text-align: center; color: #aaa; font-size: 10px; cursor: pointer; }
.nav-item.active { color: #007bff; }
.nav-item i { font-size: 20px; display: block; margin-bottom: 3px; }

/* ====== CARDS PAGE STYLES ====== */
#cardsPage h1 { font-size: 22px; margin-bottom: 8px; color: #1e40af; font-weight: 700; }
#cardsPage h2 { font-size: 18px; margin: 20px 0 8px; color: #1e40af; font-weight: 600; }
#cardsPage h3 { font-size: 16px; margin: 20px 0 8px; color: #1e40af; font-weight: 600; }
#cardsPage p { margin-bottom: 15px; color: #666666; font-size: 14px; }
#cardsPage hr { border: none; border-top: 1px solid #e0e0e0; margin: 20px 0; }
#cardsPage .pricing-section { margin: 20px 0; }
#cardsPage .price-item { display: flex; justify-content: space-between; margin-bottom: 8px; }
#cardsPage .price-item strong { font-weight: 600; }
#cardsPage .total { font-weight: 700; font-size: 16px; margin-top: 10px; }
#cardsPage .note { font-size: 12px; color: #888888; margin-top: 8px; }
#cardsPage .order-button { background-color: #1e40af; color: white; border: none; padding: 16px; width: 100%; font-size: 16px; border-radius: 8px; cursor: pointer; margin: 20px 0; font-weight: 600; }
#cardsPage .section { margin-bottom: 25px; }

/* ====== TRANSFER PAGE ====== */
.transfer-header {
  padding: 16px; display: flex; align-items: center; justify-content: space-between;
  background: #f8f9fa; border-bottom: 1px solid #eee;
}
.back-btn { font-size: 20px; color: #007bff; cursor: pointer; }
.transfer-title { font-weight: 600; font-size: 18px; color: #333; }
.refresh-btn { font-size: 20px; color: #666; cursor: pointer; }
.dots { font-size: 20px; color: #666; }

.info-banner {
  background: #f3e5f5; padding: 12px 16px; border-radius: 0 0 20px 20px; text-align: center;
}
.info-text { font-size: 12px; color: #6a1b9a; font-weight: 500; }

.paying-from {
  padding: 16px; background: white; border-bottom: 1px solid #eee;
}
.paying-label { font-size: 14px; color: #666; margin-bottom: 8px; }
.paying-card {
  background: #f8f9fa; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 10px;
}
.paying-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: #007bff; color: white;
  display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 13px;
}
.paying-info { flex: 1; }
.paying-name-line { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.paying-name { font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paying-account { color: #666; font-size: 13px; }
.paying-balance { font-weight: 700; font-size: 16px; color: #007bff; margin-top: 2px; }

.input-group {
  padding: 16px; background: white; border-bottom: 1px solid #eee;
}
.input-label { font-size: 14px; color: #666; margin-bottom: 8px; }
.input-field {
  border: 1px solid #ddd; border-radius: 12px; padding: 16px; font-size: 18px; text-align: center;
  background: #f8f9fa; color: #999; width: 100%;
}
.input-field:focus { outline: none; border-color: #007bff; background: white; color: #333; }

.search-accounts {
  margin: 16px; background: #f8f9fa; border-radius: 12px; padding: 12px;
  display: flex; align-items: center; gap: 8px;
}
.search-accounts i { font-size: 16px; color: #aaa; }
.search-accounts input { border: none; background: none; flex: 1; font-size: 14px; color: #666; }
.search-accounts input::placeholder { color: #ccc; }

.tabs {
  padding: 0 16px 8px; display: flex; gap: 8px;
}
.tab {
  flex: 1; padding: 8px; border-radius: 20px; text-align: center; font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.tab.recent { background: #007bff; color: white; }
.tab.saved { background: #f0f0f0; color: #666; }
.tab.view-all { color: #007bff; font-weight: 600; }

.empty-state {
  padding: 40px 20px; text-align: center; background: white;
}
.empty-icon {
  width: 70px; height: 70px; margin: 0 auto 16px; background: #f0f0f0; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 28px; color: #ccc;
}
.empty-title { font-weight: 600; font-size: 16px; color: #333; margin-bottom: 4px; }
.empty-text { font-size: 13px; color: #666; line-height: 1.4; }

.recent-list { display: none; padding: 0 16px; }
.recent-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eee;
  cursor: pointer;
}
.recent-avatar { 
  width: 40px; height: 40px; border-radius: 50%; 
  background: #e0e0e0; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.recent-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.recent-avatar i { color: #666; font-size: 16px; }
.recent-info { flex: 1; }
.recent-name { font-weight: 600; font-size: 14px; color: #333; }
.recent-account { font-size: 12px; color: #666; }

/* ====== AMOUNT PAGE ====== */
.amount-header {
  padding: 16px; display: flex; align-items: center; justify-content: space-between;
  background: #f8f9fa; border-bottom: 1px solid #eee;
}
.amount-title { font-weight: 600; font-size: 18px; color: #333; }
.recipient-info {
  padding: 16px; background: white; border-bottom: 1px solid #eee;
}
.recipient-label { font-size: 14px; color: #666; margin-bottom: 8px; }
.recipient-card {
  background: #f8f9fa; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 10px;
}
.recipient-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: #f0f0f0; color: #666;
  display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 13px;
}
.recipient-info-details { flex: 1; }
.recipient-name { font-weight: 600; font-size: 14px; color: #333; }
.recipient-details { color: #666; font-size: 13px; margin-top: 2px; }
.amount-input-group {
  padding: 16px; background: white; border-bottom: 1px solid #eee;
}
.amount-label { font-size: 14px; color: #666; margin-bottom: 8px; }
.amount-input {
  border: 1px solid #ddd; border-radius: 12px; padding: 16px; font-size: 24px; text-align: center;
  background: #f8f9fa; color: #333; width: 100%; font-weight: 700;
}
.amount-input:focus { outline: none; border-color: #007bff; background: white; }
.daily-limit {
  padding: 16px; background: white; border-bottom: 1px solid #eee;
  font-size: 14px; color: #666;
}
.continue-btn {
  margin: 20px 16px; background: #ddd; color: #999; border: none; border-radius: 12px;
  padding: 16px; font-weight: 600; font-size: 16px; cursor: not-allowed; width: calc(100% - 32px);
}
.continue-btn.active {
  background: #007bff; color: white; cursor: pointer;
}

/* ====== CONFIRM PAGE (Reduced spacing) ====== */
.confirm-page .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px; /* Reduced */
  padding: 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
}
.confirm-page .back-button, .confirm-page .cancel-button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #007AFF;
  padding: 8px;
}
.confirm-page h1 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.confirm-page .amount-display {
  text-align: center;
  margin-bottom: 15px; /* Reduced */
  padding: 0 16px;
}
.confirm-page .amount-large {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 2px;
  letter-spacing: -0.5px;
  color: #333;
}
.confirm-page .amount-text {
  font-size: 16px;
  color: #86868b;
}
.confirm-page .recipient, .confirm-page .payment-details, .confirm-page .paying-from, .confirm-page .narration {
  background-color: white;
  border-radius: 12px;
  padding: 10px; /* Reduced */
  margin: 0 16px 8px; /* Reduced */
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.confirm-page .recipient-name {
  font-weight: 600;
  margin-bottom: 4px; /* Reduced */
  font-size: 16px;
}
.confirm-page .bank-details {
  display: flex;
  align-items: center;
  color: #86868b;
  font-size: 15px;
}
.confirm-page .checkbox {
  margin-right: 6px;
  font-size: 16px;
}
.confirm-page .detail-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px; /* Reduced */
  font-size: 16px;
}
.confirm-page .detail-label {
  color: #86868b;
}
.confirm-page .detail-value {
  font-weight: 600;
}
.confirm-page .section-title {
  color: #86868b;
  font-size: 15px;
  margin-bottom: 6px; /* Reduced */
}
.confirm-page .account-info {
  display: flex;
  align-items: center;
}
.confirm-page .account-initials {
  background-color: #007AFF;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-right: 10px;
  font-size: 14px;
}
.confirm-page .account-details {
  flex: 1;
}
.confirm-page .account-name {
  font-weight: 600;
  margin-bottom: 2px;
  font-size: 16px;
}
.confirm-page .account-number {
  color: #86868b;
  font-size: 14px;
}
.confirm-page .account-balance {
  color: #86868b;
  font-size: 15px;
}
.confirm-page .narration-label {
  color: #86868b;
  margin-bottom: 4px; /* Reduced */
  font-size: 15px;
}
.confirm-page .narration-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 0;
}
.confirm-page .recurring-payment {
  display: flex;
  align-items: center;
  margin: 0 16px 15px; /* Reduced */
  font-size: 16px;
  padding: 10px; /* Reduced */
  background: #f8f9fa;
  border-radius: 8px;
}
.confirm-page .custom-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid #c7c7cc;
  border-radius: 4px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.confirm-page .custom-checkbox.checked {
  background-color: #007AFF;
  border-color: #007AFF;
}
.confirm-page .custom-checkbox.checked::after {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg);
  position: absolute;
  top: 3px;
}
.confirm-page .pay-button {
  background-color: #007AFF;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  width: calc(100% - 32px);
  cursor: pointer;
  transition: background-color 0.2s;
  margin: 0 16px 60px; /* Reduced bottom */
}
.confirm-page .pay-button:hover {
  background-color: #0056CC;
}
.confirm-page .pay-button:active {
  background-color: #004499;
}

/* ====== PIN PAGE ====== */
.pin-page {
  display: none;
}
.pin-header {
  padding: 16px; display: flex; align-items: center; justify-content: space-between;
  background: #f8f9fa; border-bottom: 1px solid #eee;
}
.pin-title { font-weight: 600; font-size: 18px; color: #333; }
.pin-content {
  padding: 16px; text-align: center;
}
.pin-instruction {
  font-size: 14px; color: #666; margin-bottom: 24px;
}
.pin-dots {
  display: flex; justify-content: center; gap: 16px; margin-bottom: 32px;
}
.pin-dot {
  width: 16px; height: 16px; border-radius: 50%; background: #ddd;
}
.pin-dot.active {
  background: #007bff;
}
.pin-keypad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px;
}
.pin-key {
  width: 60px; height: 60px; border-radius: 50%; background: #f8f9fa;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  font-weight: 600; cursor: pointer; margin: 0 auto;
}
.pin-key:active {
  background: #e0e0e0;
}
.pin-clear {
  font-size: 14px; color: #007bff; font-weight: 600; cursor: pointer;
}

/* ====== SUCCESS PAGE STYLES ====== */
.success-loading .loading-screen {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f8f9fa;
}

.success-loading .loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.success-loading .spinner {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-loading .spinner-border {
  position: absolute;
  width: 48px;
  height: 48px;
  border: 4px solid #e0e0e0;
  border-top: 4px solid #007AFF;
  border-radius: 50%;
  animation: spin 1s linear infinite; /* Added spinning animation */
}

.success-loading .spinner-icon {
  font-size: 18px;
  font-weight: bold;
  color: #007AFF;
}

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

.success-loading .loading-text {
  font-size: 18px;
  color: #333;
  text-align: center;
}

.success-loading .dots {
  animation: pulse 1.5s infinite;
}

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

.success-success .success-container {
  display: block;
  text-align: center;
  width: 95%;
  max-width: 420px;
  background: #ffffff;
  padding: 40px 20px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.success-success .check-wrapper {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
}

.success-success .green-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    #22c55e 0%,
    #16a34a 40%,
    #10b981 60%,
    rgba(34, 197, 94, 0.2) 80%,
    rgba(34, 197, 94, 0.1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.success-success .check-icon {
  width: 50px;
  height: 50px;
}

.success-success .title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #111827;
}

.success-success .amount-card {
  background: #fff;
  border-radius: 16px;
  padding: 25px 20px;
  margin-bottom: 35px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #f3f4f6;
}

.success-success .amount {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}

.success-success .recipient {
  color: #6b7280;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.success-success .recipient span {
  font-weight: 600;
  color: #111827;
}

.success-success .logo-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.success-success .buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.success-success .btn {
  flex: 1;
  padding: 14px 0;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.success-success .btn-share {
  background: #e0e7ff;
  color: #2563eb;
}

.success-success .btn-done {
  background: #2563eb;
  color: white;
}

.success-success .btn-share:hover {
  background: #c7d2fe;
}

.success-success .btn-done:hover {
  background: #1d4ed8;
}

.success-success .btn-done:hover {
  background: #1d4ed8;
}

/* ====== DEPOSIT LOADING STYLES ====== */
.deposit-loading .loading-screen {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f8f9fa;
}

.deposit-loading .loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.deposit-loading .spinner {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deposit-loading .spinner-border {
  position: absolute;
  width: 48px;
  height: 48px;
  border: 4px solid #e0e0e0;
  border-top: 4px solid #007AFF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.deposit-loading .spinner-icon {
  font-size: 18px;
  font-weight: bold;
  color: #007AFF;
}

.deposit-loading .loading-text {
  font-size: 18px;
  color: #333;
  text-align: center;
}

.deposit-loading .dots {
  animation: pulse 1.5s infinite;
}

/* ====== DEPOSIT SUCCESS STYLES ====== */
.deposit-success-success .deposit-success-container {
  display: block;
  text-align: center;
  width: 95%;
  max-width: 420px;
  background: #ffffff;
  padding: 40px 20px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.deposit-success-success .check-wrapper {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
}

.deposit-success-success .green-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    #22c55e 0%,
    #16a34a 40%,
    #10b981 60%,
    rgba(34, 197, 94, 0.2) 80%,
    rgba(34, 197, 94, 0.1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
  animation: ringPulse 2s ease-in-out infinite;
}

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

.deposit-success-success .check-icon {
  width: 50px;
  height: 50px;
}

.deposit-success-success .title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #111827;
}

.deposit-success-success .amount-card {
  background: #fff;
  border-radius: 16px;
  padding: 25px 20px;
  margin-bottom: 35px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #f3f4f6;
  animation: slideUp 0.6s ease-out;
}

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

.deposit-success-success .amount {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}

.deposit-success-success .recipient {
  color: #6b7280;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.deposit-success-success .recipient span {
  font-weight: 600;
  color: #111827;
}

.deposit-success-success .logo-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.deposit-success-success .buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.deposit-success-success .btn {
  flex: 1;
  min-width: 100px;
  padding: 14px 0;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.deposit-success-success .btn-share {
  background: #e0e7ff;
  color: #2563eb;
}

.deposit-success-success .btn-cancel {
  background: #f3f4f6;
  color: #6b7280;
}

.deposit-success-success .btn-done {
  background: #2563eb;
  color: white;
}

.deposit-success-success .btn-share:hover {
  background: #c7d2fe;
}

.deposit-success-success .btn-cancel:hover {
  background: #e5e7eb;
}

.deposit-success-success .btn-done:hover {
  background: #1d4ed8;
}

/* ====== PROFILE PAGE ====== */
.profile-page {
  display: none;
}
.profile-header {
  padding: 16px; display: flex; align-items: center; justify-content: space-between;
  background: #f8f9fa; border-bottom: 1px solid #eee;
}
.profile-title { font-weight: 600; font-size: 18px; color: #333; }
.edit-btn { background: #007bff; color: white; border: none; padding: 8px 16px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.profile-content {
  padding: 16px;
}
.profile-card {
  background: white; border-radius: 12px; padding: 16px; margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Profile Illustration Placeholder */
.profile-illustration {
  margin-bottom: 16px;
  text-align: center;
}

.profile-name {
  font-weight: 600; font-size: 18px; color: #333; margin-bottom: 4px;
}
.profile-role {
  color: #666; font-size: 14px; margin-bottom: 16px;
}
.merchant-tag { background: #e1d5f7; color: #6a1b9a; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; display: block; width: fit-content; margin: 0 auto 20px; }
.profile-section {
  margin-bottom: 20px;
}
.section-header {
  font-weight: 600; font-size: 14px; color: #333; margin-bottom: 12px;
}

/* Updated KYC Progress Bar for LVL 3 */
.kyc-progress-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.progress-step {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  position: relative;
  z-index: 2;
}
.progress-step.completed {
  background: #4caf50;
}
.progress-line {
  height: 2px;
  background: #ddd;
  flex: 1;
  position: relative;
  top: 11px;
}
.progress-line.completed {
  background: #4caf50;
}

.kyc-label-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 4px;
}
.kyc-label {
  font-size: 12px;
  color: #666;
  text-align: center;
  flex: 1;
}

.kyc-status-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 16px;
}
.kyc-status {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  text-align: center;
  flex: 1;
}
.kyc-registered {
  background: #e8f5e8;
  color: #4caf50;
}
.kyc-registered-plus {
  background: #e1d5f7;
  color: #6a1b9a;
}

.upgrade-btn { 
  width: 100%; 
  background: #007bff; 
  color: white; 
  border: none; 
  padding: 12px; 
  border-radius: 8px; 
  font-size: 14px; 
  cursor: pointer; 
}

.info-row {
  display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #eee;
}
.info-label {
  color: #666; font-size: 14px;
}
.info-value {
  color: #333; font-size: 14px; font-weight: 500;
}

/* Business Relationship Manager Box */
.brm-box {
  background: #f8f9fa; border-radius: 12px; padding: 16px; cursor: pointer;
}
.brm-name { font-weight: 600; font-size: 16px; color: #333; margin-bottom: 8px; }
.brm-phone, .brm-email { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; color: #666; }
.call-btn, .email-btn { background: #007bff; color: white; border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 4px; }

/* Actions Section */
.actions-section { margin-top: 20px; }
.action-item { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid #eee; cursor: pointer; font-size: 16px; color: #333; }
.action-item i { color: #007bff; font-size: 18px; width: 20px; }
.logout { color: #ff0000; }

/* ====== HISTORY PAGE ====== */
.history-page {
  display: none;
}
.history-header {
  padding: 16px; display: flex; align-items: center; justify-content: space-between;
  background: #f8f9fa; border-bottom: 1px solid #eee;
}
.history-title { font-weight: 600; font-size: 18px; color: #333; }
.history-tabs {
  display: flex; border-bottom: 1px solid #eee; background: white;
}
.history-tab {
  flex: 1; padding: 12px; text-align: center; font-size: 14px; font-weight: 500;
  color: #666; cursor: pointer;
}
.history-tab.active {
  color: #007bff; border-bottom: 2px solid #007bff;
}
.history-content {
  padding: 16px;
}
.history-list {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.transaction-item {
  display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee;
  cursor: pointer;
}
.transaction-item:hover {
  background: #f8f9fa;
}
.transaction-icon {
  width: 40px; height: 40px; border-radius: 50%; background: #f0f0f0;
  display: flex; align-items: center; justify-content: center; margin-right: 12px;
  overflow: hidden;
}
.transaction-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.transaction-icon i { font-size: 16px; color: #666; }
.transaction-icon.debit { background: #ffebee; }
.transaction-icon.debit i { color: #f44336; }
.transaction-icon.credit { background: #e8f5e8; }
.transaction-icon.credit i { color: #4caf50; }
.transaction-details {
  flex: 1;
}
.transaction-name {
  font-weight: 600; font-size: 14px; color: #333; margin-bottom: 2px;
}
.transaction-info {
  font-size: 12px; color: #666; display: flex; align-items: center;
}
.transaction-amount {
  font-weight: 600; font-size: 16px;
}
.transaction-amount.debit { color: #f44336; }
.transaction-amount.credit { color: #4caf50; }
.transaction-status {
  font-size: 11px; padding: 2px 6px; border-radius: 8px; margin-left: 6px;
  cursor: pointer;
}
.status-deposit { background: #d4edda; color: #155724; }
.status-transfer { background: #e3f2fd; color: #1976d2; }
.status-pending { background: #fff3cd; color: #856404; }
.status-reverse { background: #cce7ff; color: #004085; }
.status-successful { background: #d4edda; color: #155724; }
.status-failed { background: #f8d7da; color: #721c24; }

/* ====== DEPOSIT PAGE ====== */
.deposit-page { display: none; }
.deposit-header {
  padding: 16px; display: flex; align-items: center; justify-content: space-between;
  background: #f8f9fa; border-bottom: 1px solid #eee;
}
.deposit-title { font-weight: 600; font-size: 18px; color: #333; }
.deposit-bank-select-page { display: none; }
.deposit-amount-page { display: none; }

/* Deposit Bank Selection */
.deposit-bank-selection {
  padding: 16px; background: white; border-bottom: 1px solid #eee;
}
.deposit-bank-selection-label {
  font-size: 14px; color: #666; margin-bottom: 12px;
}
.deposit-bank-selection-card {
  background: #f8f9fa; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.deposit-bank-selection-placeholder {
  color: #999; font-size: 16px;
}
.deposit-bank-selection-name {
  font-weight: 600; font-size: 14px; color: #333;
}

/* Deposit Account Input */
.deposit-account-input {
  padding: 16px; background: white; border-bottom: 1px solid #eee;
}
.deposit-account-label {
  font-size: 14px; color: #666; margin-bottom: 8px;
}
.deposit-account-field {
  border: 1px solid #ddd; border-radius: 12px; padding: 16px; font-size: 18px; text-align: center;
  background: #f8f9fa; color: #999; width: 100%;
}
.deposit-account-field:focus { outline: none; border-color: #007bff; background: white; color: #333; }

/* Deposit Amount Page */
.deposit-amount-header {
  padding: 16px; display: flex; align-items: center; justify-content: space-between;
  background: #f8f9fa; border-bottom: 1px solid #eee;
}
.deposit-amount-title { font-weight: 600; font-size: 18px; color: #333; }
.depositor-info {
  padding: 16px; background: white; border-bottom: 1px solid #eee;
}
.depositor-label { font-size: 14px; color: #666; margin-bottom: 8px; }
.depositor-card {
  background: #f8f9fa; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 10px;
}
.depositor-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: #f0f0f0; color: #666;
  display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 13px;
}
.depositor-info-details { flex: 1; }
.depositor-name { font-weight: 600; font-size: 14px; color: #333; }
.depositor-details { color: #666; font-size: 13px; margin-top: 2px; }
.deposit-amount-input-group {
  padding: 16px; background: white; border-bottom: 1px solid #eee;
}
.deposit-amount-label { font-size: 14px; color: #666; margin-bottom: 8px; }
.deposit-amount-input {
  border: 1px solid #ddd; border-radius: 12px; padding: 16px; font-size: 24px; text-align: center;
  background: #f8f9fa; color: #333; width: 100%; font-weight: 700;
}
.deposit-amount-input:focus { outline: none; border-color: #007bff; background: white; }
.deposit-continue-btn {
  margin: 20px 16px; background: #ddd; color: #999; border: none; border-radius: 12px;
  padding: 16px; font-weight: 600; font-size: 16px; cursor: not-allowed; width: calc(100% - 32px);
}
.deposit-continue-btn.active {
  background: #007bff; color: white; cursor: pointer;
}

/* Deposit Confirm Page */
.deposit-confirm-page {
  display: none;
}
.deposit-confirm-header {
  padding: 16px; display: flex; align-items: center; justify-content: space-between;
  background: #f8f9fa; border-bottom: 1px solid #eee;
}
.deposit-confirm-title { font-weight: 600; font-size: 18px; color: #333; }
.deposit-confirm-content {
  padding: 16px;
}
.deposit-confirm-card {
  background: white; border-radius: 12px; padding: 16px; margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.deposit-confirm-amount {
  font-weight: 700; font-size: 28px; text-align: center; margin-bottom: 8px;
  color: #333;
}
.deposit-confirm-description {
  text-align: center; color: #666; font-size: 14px; margin-bottom: 20px;
}
.deposit-confirm-details {
  margin-bottom: 20px;
}
.deposit-confirm-row {
  display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #eee;
}
.deposit-confirm-label {
  color: #666; font-size: 14px;
}
.deposit-confirm-value {
  color: #333; font-size: 14px; font-weight: 500;
}
.deposit-confirm-actions {
  display: flex; flex-direction: column; gap: 12px;
}
.deposit-confirm-btn {
  padding: 16px; border-radius: 12px; font-weight: 600; font-size: 16px;
  cursor: pointer; border: none; text-align: center;
}
.deposit-change-btn {
  background: #f8f9fa; color: #666;
}
.deposit-pay-btn {
  background: #007bff; color: white;
}

/* ====== BANK SELECTION PAGE ====== */
.bank-select-page { display: none; }
.bank-select-header {
  padding: 16px; display: flex; align-items: center; justify-content: space-between;
  background: #f8f9fa; border-bottom: 1px solid #eee;
}
.bank-search {
  margin: 16px; background: #f8f9fa; border-radius: 12px; padding: 12px;
  display: flex; align-items: center; gap: 8px;
}
.bank-search i { font-size: 16px; color: #aaa; }
.bank-search input { border: none; background: none; flex: 1; font-size: 14px; color: #666; }
.bank-search input::placeholder { color: #ccc; }
.bank-list {
  max-height: calc(100vh - 300px); overflow-y: auto;
}
.bank-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #eee;
  cursor: pointer;
}
.bank-item:hover { background: #f8f9fa; }
.bank-icon {
  width: 36px; height: 36px; border-radius: 8px; background: #f0f0f0;
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: #666;
  font-weight: bold;
  overflow: hidden;
}
.bank-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bank-name { font-size: 14px; color: #333; font-weight: 500; }
.bank-code { font-size: 12px; color: #888; margin-left: auto; }
    
/* Bank Selection Section */
.bank-selection {
  padding: 16px; background: white; border-bottom: 1px solid #eee;
  display: none;
}
.bank-selection-label {
  font-size: 14px; color: #666; margin-bottom: 12px;
}
.bank-selection-card {
  background: #f8f9fa; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.bank-selection-placeholder {
  color: #999; font-size: 16px;
}
.bank-selection-name {
  font-weight: 600; font-size: 14px; color: #333;
}

/* Verification Modal */
.verification-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  z-index: 2000;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  max-width: 400px;
  margin: 0 auto;
}
.verification-modal.active {
  transform: translateY(0);
}
.modal-header {
  padding: 20px 16px 0;
  text-align: center;
  position: relative;
}
.modal-drag-handle {
  width: 40px;
  height: 4px;
  background: #ddd;
  border-radius: 2px;
  margin: 0 auto 16px;
}
.modal-title {
  font-weight: 600;
  font-size: 18px;
  color: #333;
  margin-bottom: 4px;
}
.modal-subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}
.verification-content {
  padding: 0 16px 16px;
}
.verification-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
}
.verification-name {
  font-weight: 600;
  font-size: 18px;
  color: #333;
  margin-bottom: 4px;
}
.verification-details {
  color: #666;
  font-size: 14px;
  margin-bottom: 16px;
}
.save-beneficiary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}
.save-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.save-checkbox.checked {
  background: #007bff;
  border-color: #007bff;
}
.save-checkbox.checked i {
  color: white;
  font-size: 12px;
}
.save-text {
  font-size: 14px;
  color: #333;
}
.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-btn {
  padding: 16px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  border: none;
  text-align: center;
}
.change-details-btn {
  background: #f8f9fa;
  color: #666;
}
.confirm-btn {
  background: #007bff;
  color: white;
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1999;
  display: none;
}
.modal-overlay.active {
  display: block;
}

/* Loading spinner */
.spinner {
  width: 24px; height: 24px; border: 3px solid rgba(0,0,0,0.1); border-radius: 50%;
  border-top-color: #007bff; animation: none; margin: 0 auto;
}

/* Removed @keyframes spin as it's no longer used */

.loading {
  text-align: center; padding: 20px; color: #666; font-size: 14px;
}

/* Error message */
.error-message {
  background: #ffebee; color: #c62828; padding: 12px 16px; border-radius: 8px;
  margin: 16px; text-align: center; font-size: 14px; display: none;
}

/* Editable fields styles (Disabled) */
.info-value { cursor: default; }

/* Responsive adjustments */
@media (max-width: 480px) {
  .container {
    max-width: 100%;
  }
  
  .options {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  
  .option {
    padding: 12px 6px;
  }
  
  .option-icon {
    width: 36px;
    height: 36px;
  }
}

/* Print styles for receipts */
@media print {
  .bottom-nav,
  .header,
  .back-btn {
    display: none !important;
  }
}

/* ====== TRANSACTION DETAILS PAGE STYLES ====== */
.transaction-details-page .transaction-container { max-width: 400px; margin: 0 auto; background: white; min-height: 100vh; position: relative; }
.transaction-details-page .header {
  padding: 16px; display: flex; align-items: center; gap: 12px;
  background: white; border-bottom: 1px solid #eee;
}
.transaction-details-page .back-btn { font-size: 20px; color: #007bff; cursor: pointer; }
.transaction-details-page .title { font-weight: 600; font-size: 18px; color: #333; }

/* SUMMARY CARD */
.transaction-details-page .summary-card {
  margin: 16px; background: white; border-radius: 16px; padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px dashed #ddd;
}
.transaction-details-page .summary-inner {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.transaction-details-page .left-col { text-align: left; }
.transaction-details-page .tag {
  display: inline-block; padding: 4px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 600; margin-bottom: 8px;
}
.transaction-details-page .tag.debit { background: #ffebee; color: #d32f2f; }
.transaction-details-page .tag.credit { background: #e8f5e8; color: #2e7d32; }
.transaction-details-page .amount {
  font-size: 32px; font-weight: 700; margin: 4px 0;
  color: #000 !important;
}
.transaction-details-page .date { font-size: 13px; color: #666; margin-top: 4px; }
.transaction-details-page .type {
  background: #e3f2fd; color: #1976d2; padding: 4px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 600; align-self: center;
  cursor: pointer;
}

/* ACTION BUTTONS */
.transaction-details-page .action-buttons {
  display: flex; gap: 12px; margin: 0 16px 16px;
}
.transaction-details-page .action-btn {
  flex: 1; padding: 12px; border-radius: 12px; background: #f8f9fa;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; color: #007bff; cursor: pointer;
}
.transaction-details-page .action-btn i { font-size: 18px; }

/* ALERT BOX */
.transaction-details-page .alert-box {
  margin: 0 16px 16px; background: #e3f2fd; padding: 12px; border-radius: 12px;
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: #1976d2;
}
.transaction-details-page .alert-box i { font-size: 16px; }

/* BALANCE ROW */
.transaction-details-page .balance-row {
  margin: 0 16px 16px; background: white; border-radius: 12px; padding: 16px;
  display: flex; justify-content: space-between; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px dashed #ddd;
}
.transaction-details-page .balance-col { text-align: center; flex: 1; }
.transaction-details-page .balance-label { font-size: 13px; color: #666; margin-bottom: 4px; }
.transaction-details-page .balance-amount { font-weight: 700; font-size: 16px; color: #333; }

/* DETAIL SECTION */
.transaction-details-page .detail-section {
  margin: 0 16px 16px; background: white; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden;
}
.transaction-details-page .detail-row {
  display: flex; justify-content: space-between; padding: 12px 16px;
  font-size: 14px; border-bottom: 1px solid #eee;
}
.transaction-details-page .detail-row:last-child { border-bottom: none; }
.transaction-details-page .detail-label { color: #666; }
.transaction-details-page .detail-value { font-weight: 600; color: #333; text-align: right; }
.transaction-details-page .total-row { border-bottom: 2px solid #eee; padding-bottom: 16px; }

/* OTHER DETAILS — FULLY EXPANDED */
.transaction-details-page .other-details {
  margin: 0 16px; background: white; border-radius: 16px; padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.transaction-details-page .other-title {
  font-size: 14px; font-weight: 600; color: #333; margin-bottom: 16px;
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
.transaction-details-page .other-title i { color: #007bff; font-size: 16px; transition: transform 0.2s; }
.transaction-details-page .other-title.open i { transform: rotate(180deg); }
.transaction-details-page .other-content { display: block; }
.transaction-details-page .other-item {
  padding: 12px 0; border-bottom: 1px solid #eee; text-align: left;
}
.transaction-details-page .other-item:last-child { border-bottom: none; }
.transaction-details-page .other-item .label {
  color: #666; font-weight: 500; font-size: 14px; margin-bottom: 4px;
}
.transaction-details-page .other-item .value {
  color: #333; font-weight: 600; font-size: 14px; word-break: break-all;
}

/* RECEIPT VIEW (HIDDEN BY DEFAULT) */
.transaction-details-page .receipt-view {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f5f7fa;
  z-index: 100;
  overflow-y: auto;
}

/* BLUE & YELLOW GRADIENT BACKGROUND */
.transaction-details-page .bg-gradient {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1;
  background: linear-gradient(135deg, #007bff 0%, #0056b3 40%, #ffc107 100%);
  opacity: 0.15;
}

/* RECEIPT HEADER LOGO */
.transaction-details-page .receipt-header {
  background: #007bff;
  color: white;
  padding: 20px 16px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.transaction-details-page .receipt-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
}
.transaction-details-page .receipt-logo .icon {
  width: 32px;
  height: 32px;
  background: white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #007bff;
  font-weight: bold;
  font-size: 20px;
}
.transaction-details-page .receipt-logo .text {
  display: flex;
  flex-direction: column;
}
.transaction-details-page .receipt-logo .text-main {
  font-size: 14px;
}
.transaction-details-page .receipt-logo .text-sub {
  font-size: 11px;
  opacity: 0.8;
}

/* WAVE SVG */
.transaction-details-page .wave-svg {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 1;
}

/* RECEIPT CARD */
.transaction-details-page .receipt-card {
  margin: 0 16px 100px; background: white; border-radius: 20px; overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); position: relative; padding-bottom: 20px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* TOP BAR */
.transaction-details-page .top-bar {
  padding: 20px; display: flex; justify-content: space-between; align-items: flex-start;
}
.transaction-details-page .top-bar .tag {
  display: inline-block; padding: 4px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 600; margin-bottom: 8px;
}
.transaction-details-page .top-bar .tag.debit { background: #ffebee; color: #d32f2f; }
.transaction-details-page .top-bar .amount {
  font-size: 28px; font-weight: 700; color: #000;
}
.transaction-details-page .logo {
  width: 40px; height: 40px; background: #1976d2; color: white;
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px;
}

/* DETAILS — LEFT-ALIGNED STEP BY STEP */
.transaction-details-page .details-list {
  padding: 0 20px;
}
.transaction-details-page .detail-item {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}
.transaction-details-page .detail-item:last-of-type { border-bottom: none; }
.transaction-details-page .receipt-view .detail-label {
  color: #666; font-size: 13px; font-weight: 500; margin-bottom: 4px;
  text-align: left;
}
.transaction-details-page .receipt-view .detail-value {
  color: #333; font-size: 14px; font-weight: 600;
  text-align: left;
}
.transaction-details-page .pill {
  padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
  display: inline-block; cursor: pointer;
}
.transaction-details-page .pill.blue { background: #e3f2fd; color: #1976d2; }
.transaction-details-page .pill.green { background: #d4edda; color: #155724; }
.transaction-details-page .pill.yellow { background: #fff3cd; color: #856404; }
.transaction-details-page .pill.red { background: #f8d7da; color: #721c24; }
.transaction-details-page .pill.reverse { background: #cce7ff; color: #004085; }
.transaction-details-page .pill.pending { background: #fff3cd; color: #856404; }
.transaction-details-page .pill.failed { background: #f8d7da; color: #721c24; }
.transaction-details-page .pill.successful { background: #d4edda; color: #155724; }

/* SHARE BUTTON */
.transaction-details-page .share-btn {
  position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%);
  background: white; padding: 12px 32px; border-radius: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 8px;
  font-size: 15px; color: #666; cursor: pointer; z-index: 10;
}
.transaction-details-page .share-btn i { font-size: 18px; }

/* SUCCESS POPUP */
.transaction-details-page .popup {
  position: fixed; bottom: 0; left: 0; right: 0; background: white;
  border-radius: 20px 20px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  padding: 24px 20px; text-align: center; z-index: 1000;
  animation: slideUp 0.4s ease-out; display: none;
}
.transaction-details-page .popup-icon {
  width: 80px; height: 80px; margin: 0 auto 16px;
  background: linear-gradient(135deg, #4caf50, #8bc34a); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 40px; color: white;
  box-shadow: 0 4px 12px rgba(76,175,80,0.3);
}
.transaction-details-page .popup-title { font-size: 20px; font-weight: 700; color: #333; margin-bottom: 8px; }
.transaction-details-page .popup-text { font-size: 14px; color: #666; margin-bottom: 24px; }
.transaction-details-page .popup-buttons {
  display: flex; gap: 12px;
}
.transaction-details-page .popup-btn {
  flex: 1; padding: 14px; border-radius: 12px; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.transaction-details-page .popup-btn.close { background: #f0f4ff; color: #1976d2; }
.transaction-details-page .popup-btn.view { background: #1976d2; color: white; }

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

/* ====== DEPOSIT PAGE ====== */
.deposit-page { display: none; }
.deposit-header {
  padding: 16px; display: flex;