/*Floynex Pay\frontend\css\style.css*/
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  font-size: 14px;

  /* 👇 added layout fix (no repetition) */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  body {
    font-size: 13px; /* optional */
  }
}
.main {
  flex: 1;
  padding: 10px;

}

@media (max-width: 768px) {
  .main {
    padding: 10px;
     padding-bottom: 90px;
  }
}

html, body {
  height: 100%;
}
.container {
  width: 300px;
  margin: 100px auto;
  background: white;
  padding: 20px;
  border-radius: 10px;
}

h2 {
  text-align: center;
  color: #4caf50; /* Safaricom green */
}

input {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
}

button {
  width: 100%;
  padding: 10px;
  margin-top: 15px;
  background: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background: #388e3c;
}

.options {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 10px;
}
select {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
}

 .topbar {
  background: #4caf50;
  color: white;
  height: 60px;              /* ✅ required */
  display: flex;
  align-items: center;
  padding: 0 15px;
  position: sticky;
  top: 0;
  z-index: 1000;
}
/* TOPBAR (MOBILE ONLY) */
@media (max-width: 600px) {
  .topbar {
    height: 80px;   /* or 52px if you want tighter */
    padding: 0 10px;
  }
}
 .top-actions { display:flex; justify-content:flex-end; margin-bottom:10px; } 
 .btn { background:#4caf50; color:white; padding:10px 15px; border:none; cursor:pointer; } 
 table { width:100%; border-collapse: collapse; } 
 th, td { border:1px solid #ddd; padding:8px; text-align:center; } 
 th { background:#4caf50; color:white; } 
 .table-container {
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  display: block;
}
 input { padding:8px; width:100%; margin-bottom:10px; } 
 .modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); justify-content:center; align-items:center; } 
 .modal-box { background:white; padding:20px; width:300px; text-align:center; border-radius:10px; } 
 .spinner { border:4px solid #eee; border-top:4px solid #4caf50; border-radius:50%; width:40px; height:40px; animation: spin 1s linear infinite; margin:auto; } 
 @keyframes spin { 100% { transform: rotate(360deg); } } 
 .success { color:green; font-size:40px; } 
 .error { color:red; font-size:40px; }
.top-actions .btn {
  width: auto;
  display: inline-block;
  margin-top: 0;
}
/* ===== TOPBAR LEFT SECTION ===== */
.top-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* MENU BUTTON */
.menu-btn {
  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  flex-shrink: 0;

  border-radius: 8px;
}

/* ICON */
.menu-btn i {
  font-size: 25px;   /* slightly bigger for clarity */
  line-height: 1;
}

/* OPTIONAL: tap feedback */
.menu-btn:active {
  background: rgba(0,0,0,0.08);
}
/* LOGO */
/* RESPONSIVE LOGO (CLEAN + MOBILE FRIENDLY) */
.logo {
  width: 140px;        /* default (desktop) */
  height: 60px;
  object-fit: contain;
}

/* MOBILE ADJUSTMENT */
@media (max-width: 600px) {
  .logo {
    width: 160px;      /* slightly bigger on mobile */
    height: 80px;
  }
}

/* APP NAME */
.app-name {
  font-size: 18px;
  font-weight: bold;
}


/* ===== SIDEBAR (FIXED) ===== */
/* ===== SIDEBAR (FIXED + FLUSH + MOBILE SAFE) ===== */
.sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0px;
  width: 260px;
  max-width: 80%;
  background: #4caf50;
  color: white;
  padding-top: 10px;

  overflow-y: auto;

  /* hidden state */
  transform: translateX(-100%);
  transition: transform 0.3s ease;

  z-index: 999;

  /* removes “gap feel” */
  box-shadow: 5px 0 15px rgba(0,0,0,0.15);
}

/* OPEN STATE */
.sidebar.active {
  transform: translateX(0);
}

/* SIDEBAR LINKS (DESKTOP BASE - CLEAN SMALL UI) */
.sidebar a {
  display: flex;
  align-items: center;

  padding: 12px 16px;
  min-height: 35px;

  color: white;
  text-decoration: none;

  font-size: 18px;   /* smaller for desktop */
  gap: 8px;

  border-radius: 6px;

  transition: background 0.2s ease;
}

/* ICONS */
.sidebar a i {
  font-size: 16px;   /* smaller icons for desktop */
  width: 22px;
  text-align: center;
}

/* HOVER */
.sidebar a:hover {
  background: #388e3c;
}
@media (max-width: 600px) {
  .sidebar a {
    padding: 14px 18px;
    min-height: 50px;

    font-size: 22px;  /* your original mobile size */
    gap: 12px;
  }

  .sidebar a i {
    font-size: 25px;  /* your original mobile icon size */
    width: 22px;
  }
}
/* CLOSE BUTTON */
.close-btn {
  text-align: right;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
}
/* ===== LOGIN TOPBAR ===== */
.topbar-login {
  background: #4caf50;
  color: white;
  height: 60px;             /* same height as dashboard */
  display: flex;
  align-items: center;
  padding: 0 15px;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* optional shadow */
}

.topbar-login .top-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-login .logo {
  width: 150px;      /* same size as dashboard */
  height: 40px;
  object-fit: contain;
}


/* Container for all charts */
/* Container for all charts */
.charts-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;               /* gap between charts */
  justify-content: space-between; /* push top charts to edges */
  align-items: flex-start;
}

/* Top two charts side by side */
.chart-card {
  flex: 0 0 48%;       /* take almost half width each */
  height: 250px;       /* top charts height */
  background: #f5f5f5; /* optional background */
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Full-width bottom chart */
.chart-card.full-width {
  flex: 0 0 100%;      /* spans full row */
  height: 300px;       /* taller bottom chart */
  max-width: none;     /* remove max-width so it touches edges */
}

/* SETTINGS PAGE CARDS */

.card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  flex: 1 1 300px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card h3 {
  color: #4caf50;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card input,
.card select {
  padding: 10px;
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.card button {
  background: #4caf50;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.card button:hover {
  background: #388e3c;
}

/* SUCCESS / ERROR MESSAGE */
#msg {
  text-align: center;
  margin-top: 15px;
  font-weight: bold;
  color: #4caf50;
}

#msg.error {
  color: red;
}

/* RESPONSIVE */
@media screen and (max-width: 900px) {
  .settings-container {
    flex-direction: column;
  }
}
.msg-card {
  display: none;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  text-align: center;
}

.msg-card.success {
  background: #4caf50; /* Safaricom green */
}

.msg-card.error {
  background: #e74c3c; /* red for errors */
}
.profile-photo-container {
  text-align: center;
  margin-bottom: 15px;
}

.profile-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #4caf50;
  margin-bottom: 10px;
}

.photo-buttons button {
  margin: 3px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}
/* Flex layout for profile page */
/* Container for all cards */
.profile-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;  /* keep cards aligned left */
  max-width: 900px;             /* restrict overall width */
  margin: 0 auto;               /* center container horizontally */
  padding: 20px 10px;           /* spacing around container */
}

/* Profile photo card */
.photo-card {
  flex: 0 0 200px;               /* fixed width for box */
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Profile image inside box */
.photo-card img {
  max-width: 100%;
  max-height: 180px;
  width: auto;
  height: auto;
  border-radius: 0;              /* rectangular, no circle */
  object-fit: contain;
  display: block;
}

/* Info cards container */
.info-cards {
  flex: 1;                        /* take remaining space */
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;               /* prevent stretching too far right */
}

/* Info cards */
.info-cards .profile-card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Card headings */
.profile-card h3 {
  margin-top: 0;
  color: #4caf50;
}

/* Paragraph spacing */
.profile-card p {
  margin: 5px 0;
  font-size: 16px;
}

/* Responsive for mobile */
@media screen and (max-width: 900px) {
  .profile-container {
    flex-direction: column;
    align-items: center;
  }
  .photo-card, .info-cards {
    max-width: 100%;
  }
}

/* ================= FOOTER ================= */
.footer {
  background: #4caf50;
  color: white;
  padding: 15px 20px;
   margin-top: auto; /* ✅ this is the correct fix */
  border-radius: 10px;
  font-size: 14px;
}

/* TOP LINKS */
.footer-top {
  text-align: center;
  margin-bottom: 10px;
}

.footer-links a {
  color: white;
  text-decoration: none;
  margin: 0 6px;
}

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

/* MIDDLE SECTION */
.footer-middle {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
}

/* LEFT TEXT */
.footer-left {
  flex: 1;
}

/* RIGHT TEXT */
.footer-right {
  flex: 1;
  text-align: right;
  font-size: 12px;
}

/* BOTTOM COPYRIGHT */
.footer-bottom {
  text-align: center;
  font-size: 13px;
}

/* LINKS INSIDE RIGHT */
.footer-right a {
  color: white;
  text-decoration: none;
}

.footer-right a:hover {
  text-decoration: underline;
}

/* ================= MOBILE FIX ================= */
@media (max-width: 768px) {
  .footer-middle {
    flex-direction: column;
    text-align: center;
  }

  .footer-left,
  .footer-right {
    text-align: center;
  }
}
/* Password box styling for settings page */
.password-box {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 10px;
}

.password-box input {
  flex: 1;
  padding: 10px;
  font-size: 14px;
}

.password-box span.toggle-eye {
  cursor: pointer;
  margin-left: -30px; /* sits inside input on the right */
  font-size: 16px;
}
/* ================= SUBSCRIPTION CARD ================= */
#subscriptionCard {
  font-size: 1rem;
  transition: background-color 0.3s;
}

/* ================= MODAL STYLES ================= */
.modal-box button.btn {
  margin-right: 10px;
}

/* ================= MODALS ================= */
.modal-box h3 {
  margin-bottom: 10px;
}

/* Spinner in processing modal */
.spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #2196F3;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 10px auto;
}

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

/* Success & Error */
.success {
  color: #388E3C;
  font-size: 2rem;
  text-align: center;
}

.error {
  color: #D32F2F;
  font-size: 2rem;
  text-align: center;
}

.subscription-modal {
  display: none; /* ✅ KEEP ONLY THIS */
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);

  /* ❌ REMOVE display:flex from here */
  justify-content: center;
  align-items: center;
}
.subscription-modal-box {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.subscription-modal-box h3 {
  margin-bottom: 15px;
  color: #d9534f; /* red for access denied */
}

.subscription-modal-box p {
  margin: 5px 0;
}

.subscription-modal-box .btn {
  margin: 10px 5px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  color: white;
  background-color: #28a745; /* green for subscribe */
}

.subscription-modal-box .btn:hover {
  background: #388e3c;
}

.subscription-modal-box button:last-child {
  background-color: #d9534f; /* cancel button red */
}
/* ================= SUBSCRIPTION MODAL ================= */
.sub-payment-modal {
  display: none; /* ✅ KEEP ONLY THIS */
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);

  /* ❌ REMOVE display:flex from here */
  justify-content: center;
  align-items: center;
}
.sub-payment-modal-box {
  background: white;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.sub-payment-modal-box h3 {
  margin-bottom: 15px;
  color: #28a745;
}

.sub-phone-input {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-bottom: 15px;
}

.sub-phone-input span {
  padding: 10px;
  background: #eee;
  border-radius: 5px;
}

.sub-phone-input input {
  flex: 1;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.sub-btn {
  background: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.sub-btn:hover {
  background: #388e3c;
}

.sub-cancel-btn {
  background: #d9534f;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.sub-cancel-btn:hover {
  background: #388e3c;
}

/* SUB RESULT ICON */
.sub-success {
  color: #28a745;
  font-size: 3rem;
  text-align: center;
}

.sub-error {
  color: #d9534f;
  font-size: 3rem;
  text-align: center;
}
.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #2e7d32;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* REGISTER MODAL */
.modal-sregister {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  justify-content: center;
  align-items: center;
  z-index: 999;
}

/* SPINNER */
.spinner {
  border: 5px solid #eee;
  border-top: 5px solid #4caf50;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: 15px auto;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}
/* SUCCESS BOX */
.success-box {
  background: #4caf50;
  color: white;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  animation: popIn 0.3s ease;
}

.success-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

/* POP ANIMATION */
@keyframes popIn {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.terms-label {
  display: flex;
  align-items: center;
  gap: 8px; /* space between checkbox and text */
  font-size: 13px;
}

.terms-label input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
/* ================= TERMS WARNING ================= */
.terms-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.terms-warning {
  border: 2px solid #ffc107;
  background-color: #fff8e1;
  padding: 6px 10px;
  border-radius: 6px;
  animation: shake 0.3s;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}
.remember-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;

  white-space: nowrap;   /* ⭐ THIS FIXES YOUR PROBLEM */
}


/* Optional: make checkbox slightly bigger */
.remember-label input[type="checkbox"] {
  transform: scale(1.2);
  cursor: pointer;
}

/* ================= HELP FLOATING BUTTON ================= */
/* ================= HELP MODAL ================= */
.help-modal {
  display: none;
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 320px;
  height: 420px;
  background: transparent;
  z-index: 9999;
}

/* CHAT BOX */
.help-box {
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 20px rgba(43, 233, 6, 0.3);
  overflow: hidden;
}

/* HEADER */
.help-header {
  background: #4caf50;
  color: white;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}

.help-close {
  cursor: pointer;
  font-size: 18px;
}

/* MESSAGES AREA */
.help-messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  background: #f5f5f5;

  display: flex;              /* ✅ IMPORTANT */
  flex-direction: column;     /* ✅ stack messages */
}


/* INPUT AREA */
.help-input {
  padding: 10px;
  border-top: 1px solid #ddd;
}
/* ================= CHAT MESSAGES ================= */
.bot-msg {
  background: #e0e0e0;
  padding: 8px 12px;
  border-radius: 10px;
  margin-bottom: 8px;

  margin-right: auto;  /* ✅ ensures LEFT */
  max-width: 80%;
  font-size: 14px;
}


.user-msg {
  background: #4caf50;
  color: white;
  padding: 8px 12px;
  border-radius: 10px;
  margin-bottom: 8px;

  margin-left: auto;   /* ✅ THIS moves to RIGHT */
  max-width: 80%;
  font-size: 14px;

  text-align: left;
}

.user-msg, .bot-msg {
  animation: fadeIn 0.3s ease;
}

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

/* ================= HELP OPTIONS ================= */
.help-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.help-options button {
  flex: 1 1 45%;
  background: #4caf50;
  color: white;
  border: none;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.help-options button:hover {
  background: #388e3c;
}
/* ================= HELP TEXTAREA ================= */
#helpInputArea textarea {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  resize: none;
  font-family: Arial;
  font-size: 14px;
}


#helpBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: #00FF00; /* your theme green */
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  animation: pulse 1.5s infinite;
}

/* Pulse animation (wave effect) */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 166, 81, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(0, 166, 81, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 166, 81, 0);
  }
}

#helpBtn:hover {
  background: #388e3c;
  transform: scale(1.1);
}
.user-msg,
.bot-msg {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;

  width: fit-content;      /* ✅ grow naturally */
  max-width: 80%;          /* ✅ limit only when too long */
}
.long-msg {
  width: 100%;
  max-width: 100%;
}
#emojiPicker span {
  font-size: 20px;
  cursor: pointer;
  margin: 4px;
  display: inline-block;
  padding: 4px;
}

#emojiPicker span:hover {
  transform: scale(1.2);
  background: #eee;
  border-radius: 4px;
}
/* ===== Floynex Pay WALLET (msw) ===== */


.msw-header {
  margin-bottom: 20px;
}

.msw-header h2 {
  margin: 0;
}

.msw-header p {
  color: #666;
}

.msw-center {
  text-align: center;
  margin-top: 40px;
}

.msw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

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

.msw-card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.msw-balance {
  background: linear-gradient(135deg, #4caf50, #007a3d);
  color: white;
}

.msw-balance h1 {
  margin-top: 10px;
  font-size: 32px;
}

.msw-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.msw-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.msw-icon.small {
  font-size: 14px;
  margin-left: 5px;
}

.msw-badge {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
}

.msw-badge.green {
  background: #00FF00;
  color: #155724;
}

.msw-badge.red {
  background: #f8d7da;
  color: #721c24;
}

.msw-qr canvas {
  display: block;
  margin: 10px auto;
}
.msw-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.msw-inline h1,
.msw-inline h2 {
  margin: 0;
}
.msw-label {
  display: block;
  font-size: 30px;     /* 👈 bigger */
  font-weight: 700;    /* 👈 strong bold */
  color: #222;
  margin-bottom: 8px;
}


.msw-balance .msw-label {
  color: #fff;
  font-weight: 800;
}
.msw-click {
  cursor: pointer;   /* 👈 THIS FIXES IT */
}

.settings-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
/* ===== PIN CARD (SMALL & CLEAN) ===== */
#pinCard {
  max-width: 420px;          /* limit width */
  margin: 20px auto;         /* center horizontally */
  padding: 20px 18px;        /* tighter spacing */
  border-radius: 12px;
}

/* Title spacing */
#pinCard h3 {
  font-size: 18px;
  margin-bottom: 15px;
  text-align: center;
}

/* Inputs tighter */
#pinCard .password-box {
  margin-bottom: 10px;
}

#pinCard input {
  padding: 10px;
  font-size: 14px;
}

/* Button styling */
#pinCard button {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  font-size: 14px;
  border-radius: 8px;
}

/* Danger button (reset) */
#pinCard button[style] {
  background: #e74c3c !important;
}

/* Info text */
#pinCard p {
  text-align: center;
  font-size: 12px;
  color: #888;
}

/* Divider spacing */
#pinCard hr {
  margin: 15px 0;
}

/* Message box */
#pinCard .msg-card {
  font-size: 13px;
  padding: 8px;
}
/* OTP MODAL BACKGROUND */
.otp-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);

  display: none;
  align-items: center;
  justify-content: center;

  z-index: 9999;
}

/* OTP CARD */
.otp-card {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  width: 320px;
  text-align: center;
  animation: fadeIn 0.3s ease;
}

/* INPUT */
.otp-card input {
  width: 100%;
  padding: 12px;
  font-size: 20px;
  text-align: center;
  letter-spacing: 5px;
  border: 2px solid #ddd;
  border-radius: 8px;
  margin: 15px 0;
}

/* BUTTON */
.otp-card button {
  width: 100%;
  padding: 10px;
  background: #2e7d32;
  color: white;
  border: none;
  border-radius: 6px;
  margin-top: 10px;
  cursor: pointer;
}

/* CANCEL BUTTON */
.otp-cancel {
  background: #999 !important;
}

/* MESSAGE */
.otp-msg {
  margin-top: 10px;
  font-size: 14px;
}

/* STATES */
.otp-msg.success {
  color: green;
}

.otp-msg.error {
  color: red;
}

/* ANIMATION */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
/* ===== WALLET PIN SPINNER ===== */
.wallet-pin-spinner {
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-top: 3px solid transparent;
  border-radius: 50%;
  display: inline-block;
  margin-left: 10px;
  animation: walletPinSpin 0.7s linear infinite;
  vertical-align: middle;
}

@keyframes walletPinSpin {
  to {
    transform: rotate(360deg);
  }
}
/* OTP BOXES */
.otp-boxes {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 15px 0;
}

.otp-digit {
  width: 45px;
  height: 50px;
  text-align: center;
  font-size: 20px;
  border: 2px solid #ddd;
  border-radius: 8px;
  outline: none;
  transition: 0.2s;
}

.otp-digit:focus {
  border-color: #3498db;
}

/* OTP BUTTON SPINNER */
.otp-spinner {
  width: 18px;
  height: 18px;
  border: 3px solid #ccc;
  border-top: 3px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 10px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
/* ===== Floynex Pay WITHDRAWAL PAGE ===== */

/* Withdraw button container */
.withdraw-btn-container {
  display: flex;
  justify-content: flex-end;
}

.btn-withdraw {
  width: 200px;  /* Adjust width as needed */
}

/* Buttons */
.btn-withdraw {
  background: #4caf50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
}

.btn-withdraw:hover {
  background: #388e3c;
}

.btn-withdraw-cancel {
  background: #e74c3c;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
}

.btn-withdraw-cancel:hover {
  background: #c0392b;
}

/* ===== MODALS ===== */
.modal-withdrawal {
  display: none; /* hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-withdrawal-content {
  background: white;
  padding: 25px 20px;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  position: relative;
}

.modal-withdrawal-content input {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
}

/* Modal headings */
.modal-withdrawal-content h3 {
  margin-bottom: 15px;
  color: #4caf50;
}

/* Buttons wrapper */
.modal-withdrawal-content div {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* For PIN modal relative positioning */
.modal-withdrawal-position {
  position: relative;
}

.eye-toggle-withdraw {
  position: absolute;
  right: 12px;
  top: 42px;
  cursor: pointer;
  color: #888;
}

/* ===== PROGRESS MODAL ===== */
.spinner-withdrawal {
  border: 5px solid #eee;
  border-top: 5px solid #4caf50;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: 15px auto;
  animation: spin-withdrawal 1s linear infinite;
}

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

/* ===== RESULT MODAL ===== */
.result-modal-withdrawal-content {
  background: white;
  padding: 25px 20px;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  position: relative;
}

.result-icon-withdrawal {
  font-size: 50px;
  margin-bottom: 15px;
}

.tick-withdrawal {
  color: #4caf50;
}

.cross-withdrawal {
  color: #e74c3c;
}

.result-text-withdrawal {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 480px) {
  .modal-withdrawal-content,
  .result-modal-withdrawal-content {
    width: 95%;
    padding: 20px;
  }

  .eye-toggle-withdraw {
    top: 38px;
  }
}
/* Filters row in one line */
.filters {
  display: flex;
  /*flex-wrap: nowrap;*/
  flex-wrap: wrap; /* ✅ allow wrapping */
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.filters div {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.filters input[type="date"],
.filters input[type="text"] {
  width: 140px; /* fixed width for alignment */
}

.filters button {
  height: 36px;
  align-self: flex-end; /* align with inputs */
  padding: 0 15px;
  font-size: 13px;
}

/* Horizontal scroll wrapper for table */
.table-scroll {
  overflow-x: auto;   /* horizontal scroll only */
  width: 100%;
}

/* Keep table styling intact */
.withdraw-records-table {
  width: 100%;
  min-width: 1000px;  /* ensure scroll if needed */
  border-collapse: collapse;
}

/* Keep green header */
.withdraw-records-table th {
  background-color: #4caf50; /* green header */
  color: white;
  padding: 8px 10px;
  border: 1px solid #ddd;
  text-align: center;
}

/* Table cells */
.withdraw-records-table td {
  padding: 8px 10px;
  border: 1px solid #ddd;
  text-align: center;
}
.spinner-statement {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #1976d2;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 10px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.table-scroll {
  max-height: 400px;  /* adjust height for scroll */
  overflow-y: auto;    /* scroll vertically */
}
.table-scroll thead th {
  position: sticky;
  top: 0;             /* stick to top of scroll container */
  
  z-index: 1;          /* above table rows */
  background-color: #19d251;
}
/* ================= MOBILE FIX ONLY ================= */
@media (max-width: 768px) {

  /* GENERAL SPACING */


  /* CONTAINER */
  .container {
    width: 95%;
    margin: 30px auto;
    padding: 15px;
  }


  .app-name {
    font-size: 14px;
  }

  /* SIDEBAR */


  /* GREETING 
  .greetin/g h2 {
    font-size: 22px;
  }

  .greetin/g p {
    font-size: 14px;
  }*/

  /* CHARTS STACK */
  .chart-card {
    flex: 0 0 100%;
    height: 220px;
  }

  .chart-card.full-width {
    height: 250px;
  }

  /* TABLES */
  table {
    font-size: 12px;
  }

  th, td {
    padding: 6px;
  }

  /* FILTERS (ALLOW WRAP) */
  .filters {
    flex-wrap: wrap;
  }

  .filters input,
  .filters button {
    width: 100%;
  }

  /* PROFILE PAGE */
  .profile-container {
    flex-direction: column;
    align-items: center;
  }

  .photo-card {
    width: 100%;
    max-width: 250px;
  }

  .info-cards {
    width: 100%;
  }

  /* FOOTER */
  .footer-middle {
    flex-direction: column;
    text-align: center;
  }

  .footer-left,
  .footer-right {
    max-width: 100%;
  }

  /* HELP CHAT */
  .help-modal {
    width: 90%;
    height: 70%;
    right: 5%;
    bottom: 80px;
  }

  /* BUTTONS */
  button {
    font-size: 14px;
    padding: 10px;
  }
.app-name {
  display: none;
}
/* 🔥 FORCE STACKING (THIS IS WHAT YOU WERE MISSING) */
.charts-container,
.filters,
.top-actions,
.footer-middle {
  flex-direction: column !important;
  align-items: stretch;
}

/* 🔥 FIX CHART WIDTH PROPERLY */
.chart-card {
  flex: 1 1 100% !important;
  max-width: 100%;
}

/* 🔥 FORCE FULL WIDTH ELEMENTS */
input,
select,
button {
  width: 100%;
}

}

.filters-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap; /* ✅ THIS FIXES MOBILE */
}

/* Make children behave nicely */
.filters-row > div {
  flex: 1;
  min-width: 120px;
}

/* Make total card not explode */
#totalAmountCard {
  flex: 1;
  min-width: 180px;
  text-align: center;
}

/* Mobile optimization */
@media (max-width: 600px) {
  .filters-row {
    flex-direction: column;   /* stack vertically */
    align-items: stretch;
  }

  .filters-row > div {
    width: 100%;
  }

  #totalAmountCard {
    width: 100%;
  }
}
/* DESKTOP (unchanged layout) */
.top-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.right-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

@media (max-width: 768px) {

  /* TURN TOP CONTROLS INTO SIMPLE GRID */
  .top-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "request active"
      "amount amount"
      "search search";
    gap: 10px;
  }

  /* Request */
  .top-controls > div:nth-child(1) {
    grid-area: request;
  }

  /* Active (right group) */
  .right-group {
    grid-area: active;
    display: flex;
    justify-content: flex-end;
  }

  /* Amount centered under them */
  #totalAmountCard {
    grid-area: amount;
    justify-self: center;   /* 👈 THIS centers it properly */
    width: auto;            /* NOT full stretch */
  }

  /* Search full width under amount */
  .right-group input {
    grid-area: search;
    width: 80%;
    max-width: 120px;   /* keeps it from stretching full width */
    justify-self: start; /* pushes it to LEFT */
  }
  .right-group {
  flex-direction: column;
}
}
@media (max-width: 768px) {
  .mobile-break {
    display: inline;
  }
}
button[onclick="openRequest()"] {
  border-radius: 30px;
}
button[onclick="openEmailStatementModal()"] {
  border-radius: 30px;
}
/* =========================
   KPI CARD (TODAY INCOME)
========================= */

.kpi-card {
  background: #ffffff;
  border-radius: 14px;

  padding: 16px 18px;
  width: 200px;

  box-shadow: 0 6px 18px rgba(0,0,0,0.08);

  display: flex;
  flex-direction: column;
  gap: 10px;

  border: 1px solid #f1f1f1;
}

/* top row */
.kpi-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* purple circle icon */
.kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;

  background: #efe7ff;
  color: #6f42c1;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
}

/* title */
.kpi-title p {
  margin: 0;
  font-size: 13px;
  color: #555;
  font-weight: 500;
}

/* main value */
.kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: #111;
}

/* trend */
.kpi-trend {
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* positive trend */
.kpi-trend.positive {
  color: #28a745;
}

/* negative trend (for future use) */
.kpi-trend.negative {
  color: #dc3545;
}
.yesterday-text {
  color: #000;
  font-weight: 500;
}
/* MOBILE */

/* =========================
   KPI SECTION (GRID WRAPPER)
========================= */

.kpi-section {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 15px;
}

/* =========================
   KPI CARD
========================= */

.kpi-card {
  background: #ffffff;
  border-radius: 14px;

  padding: 16px 18px;

  width: 240px;

  box-shadow: 0 6px 18px rgba(0,0,0,0.08);

  display: flex;
  flex-direction: column;
  gap: 10px;

  border: 1px solid #f1f1f1;
}

/* top row */
.kpi-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* icon */
.kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;

  background: #efe7ff;
  color: #6f42c1;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
}

/* blue icon variant */
.kpi-icon.blue {
  background: #e6f0ff;
  color: #1e6fff;
}

/* title */
.kpi-title p {
  margin: 0;
  font-size: 13px;
  color: #555;
  font-weight: 500;
}

/* main value */
.kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: #111;
}

/* trend */
.kpi-trend {
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.kpi-trend.positive {
  color: #28a745;
}

/* sub text */
.kpi-subtext {
  font-size: 12px;
  color: #777;
  font-weight: 500;
}

/* WALLET ICON STYLE */
.kpi-icon.wallet {
  background: #e9f9ef;
  color: #28a745;
}

/* SECURITY ICON */
.kpi-icon.security {
  background: #e6f4ea;
  color: #198754;
}

/* PROTECTED STATUS LINE */
.kpi-value.security-status {
  font-size: 16px;
  font-weight: 700;
  color: #111;

  display: flex;
  align-items: center;
  gap: 8px;
}

/* green dot with tick */
.statusa-dot {
  width: 16px;
  height: 16px;

  background: #28a745;
  color: white;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 10px;
  font-weight: bold;
}
.statusa-text {
  color: #28a745;
  font-weight: 700;
}
/* MOBILE */
@media (max-width: 768px) {

  .kpi-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .kpi-card {
  width: 90%;
  height: 75px;
  padding: 6px 4px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

  .kpi-top {
    gap: 2px;
    flex-wrap: wrap;
  }

  .kpi-icon {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }

  .kpi-title p {
    font-size: 7px;
    line-height: 1.1;
  }

  .kpi-value {
     font-size: 10px;
    font-weight: 700;
  }

   .kpi-trend,
  .kpi-subtext {
    font-size: 6px;
    line-height: 1.1;
  }

  .kpi-value.security-status {
    font-size: 10px;
    gap: 2px;
  }

  .status-dot {
    width: 9px;
    height: 9px;
    font-size: 6px;
  }
}
/* =========================
   QUICK ACTIONS SECTION
========================= */

.quick-actions {
  width: 95%;

  margin-top: 20px;

  background: #ffffff;

  border-radius: 16px;

  padding: 18px;

  box-shadow: 0 6px 18px rgba(0,0,0,0.08);

  border: 1px solid #f1f1f1;
}

/* HEADER */
.quick-actions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 10px;
}
/* TITLE */
.qa-title {
  font-size: 16px;
  font-weight: 700;
  color: #111;
}

/* CUSTOMIZE */
.qa-customize {
  font-size: 13px;
  color: #28a745;
  display: flex;
  align-items: center;
  gap: 5px;

  cursor: pointer;
}

/* GRID */
.qa-grid {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

  gap: 12px;

  width: 100%;
  justify-content: center;
}
/* BUTTON */
.qa-btn {
  flex: 0 0 auto;
  max-width: 100px;


  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 8px;

  cursor: pointer;

  transition: 0.2s ease;
}

/* HOVER EFFECT */
.qa-btn:hover .qa-icon {
  transform: scale(1.15);
  background: rgba(40, 167, 69, 0.25);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.25);
}

.qa-btn:hover span {
  color: #28a745;
}
/* ICON */
.qa-btn i {
  font-size: 25px;
  color: #17a13a;
}

/* TEXT */
.qa-btn span {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  text-align: center;
}
/* ICON BACKGROUND BOX */
.qa-icon {
  width: 85px;
  height: 65px;

  border-radius: 14px;

  background: rgba(40, 167, 69, 0.12);
  color: #0a8d29;

  display: flex;
  align-items: center;
  justify-content: center;
transition: all 0.25s ease;

  font-size: 18px;
}

/* REMOVE BORDER FEEL FROM BUTTON */
.qa-btn {
  flex: 0 0 auto;
  max-width: 100px;

  border: none;
  background: transparent;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 6px;

  cursor: pointer;
}
@media (max-width: 768px) {

  .quick-actions {
    width: 100%;
    margin: 15px auto;
    padding: 12px;
    box-sizing: border-box;
  }

  .qa-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    width: 100%;
  }

  .qa-btn {
    min-width: 0;
  }

  .qa-icon {
    width: 45px;
    height: 45px;
  }

  .qa-btn span {
    font-size: 8px;
  }
}
/* =========================
   LEFT HALF INFO CARD
========================= */

.left-info-card {
  width: 100%;              /* default full width */
  max-width: 700px;         /* keeps it nice on big screens */
  margin: 20px auto 0;      /* centers it */
  
  background: #ffffff;
  border-radius: 16px;

  padding: 18px;

  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border: 1px solid #f1f1f1;

  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* header */
.lic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lic-title {
  font-size: 16px;
  font-weight: 700;
  color: #111;
}

.lic-action {
  font-size: 13px;
  color: #28a745;
  cursor: pointer;
}

/* content */
.lic-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* each row */
.lic-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;

  background: #f9f9f9;
  border-radius: 10px;
}

.lic-label {
  font-size: 13px;
  color: #555;
}

.lic-value {
  font-size: 14px;
  font-weight: 700;
  color: #111;
}

/* MOBILE */
@media (max-width: 768px) {
  .left-info-card {
    width: 100%;
    margin: 15px 0;
    padding: 14px;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
  }
}
/* =========================
   TRANSACTIONS MODAL
========================= */

.tx-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.6);

  justify-content: center;
  align-items: center;

  z-index: 9999;
}

/* card */
.tx-modal-box {
  width: 90%;
  max-width: 1000px;

  background: #fff;
  border-radius: 14px;

  padding: 16px;

  max-height: 90vh;
  overflow-y: auto;
}

/* header */
.tx-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 10px;
}

.tx-modal-header h3 {
  margin: 0;
}

.tx-modal-header span {
  cursor: pointer;
  font-size: 18px;
}
/* =========================
   RECENT TRANSACTIONS LIST
========================= */

.tx-row {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;

  cursor: pointer;
  margin-bottom: 10px;
}

.tx-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* GREEN CIRCLE */
.tx-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;

  background: transparent;
  border: 1px solid #17c94d;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}

/* inner white circle */
.tx-circle-inner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 10px;
  font-weight: 700;
  color: #17c94d;
}

/* TEXT */
.tx-amount {
  font-weight: 700;
  color: #111;
}

.tx-time {
  font-size: 12px;
  color: #777;
}

/* STATUS */
/* =========================
   STATUS BADGE (COMBINED)
========================= */

.tx-status {
  display: flex;
  align-items: center;
}

/* SINGLE GREEN BADGE CONTAINER */
/* =========================
   STATUS BADGE (LIGHTER + TIGHTER)
========================= */

.tx-status-badge {
  display: flex;
  align-items: center;
  gap: 6px;

  background: #d6f3dd;   /* stronger light green (more visible) */
  color: #0f6b2d;        /* darker green text for contrast */

  padding: 4px 9px;      /* balanced padding */
  border-radius: 14px;

  font-size: 11px;
  font-weight: 600;
}


/* SMALL GREEN CIRCLE WITH WHITE TICK INSIDE */
.tx-status-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;

  background: #1b8f3a;

  display: flex;
  align-items: center;
  justify-content: center;

  color: white;
  font-size: 11px;
  font-weight: bold;
}
.sms-card {
  background: #fff;
  color: #111;
  border-radius: 10px;
  max-width: 340px;
  margin: auto;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  font-family: Arial, sans-serif;
}

/* HEADER */
.sms-header {
  background: #1e8e3e; /* simple green */
  color: white;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 14px;
}

/* BODY */
.sms-body {
  padding: 14px;
  font-size: 14px;
  color: #111;
}

/* RECEIPT */
.sms-title {
  font-weight: bold;
  color: #1e8e3e;
  margin-bottom: 8px;
}

/* MESSAGE */
.sms-message {
  line-height: 1.5;
  white-space: pre-line;
  color: #111;
}

/* FOOTER */
.sms-footer {
  padding: 8px 12px;
  font-size: 11px;
  text-align: right;
  color: #666;
  border-top: 1px solid #eee;
}
/* Hide original footer on mobile only */
@media (max-width: 768px) {
  .footer {
    display: none;
  }
}

@media (max-width:768px){

  #helpBtn{
    bottom:80px;
  }

}
.mobile-footer{
  display:none;
}

@media (max-width:768px){

  .mobile-footer{
    display:flex;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:65px;

    background:#ffffff;
    box-shadow:0 -2px 10px rgba(0,0,0,0.15);

    z-index:999;
  }

  .nav-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-decoration:none;
  }

  .nav-item i{
    font-size:20px;
    color:#00c853;
    margin-bottom:3px;

    transition:0.2s ease;
  }

  .nav-item span{
    font-size:11px;
    font-weight:bold;
    color:#000;
  }

  /* HOVER EFFECT (desktop) */
  .nav-item:hover i{
  transform:scale(1.2);
  background: rgba(0, 200, 83, 0.15);
  border-radius: 50%;
}

  /* TAP EFFECT (mobile) */
  .nav-item:active i{
    transform:scale(1.25);
    color:#007f3a;
  }

}

.greeting {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 15px;
  gap: 10px;
}

/* LEFT */
.greeting-left {
  justify-self: start;
}

/* CENTER */
.greeting-center {
  justify-self: center;
}

.greeting-center h2 {
  margin: 0;
  font-size: 32px;
  font-weight: bold;
  color: #4caf50;
}

/* RIGHT */
.greeting-right {
  justify-self: end;
}

/* TEXT */
.greeting p {
  margin: 5px 0 0 0;
  font-size: 18px;
  color: #555;
}

/* USER NAME */
#welcome-msg #user-name {
  color: #4caf50;
  font-weight: bold;
}
/* WHITE CONTAINER */
.sub-box{
  background:#fff;
  width:140px;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sub-header{
  font-size:15px;
  font-weight:bold;
  text-align:center;
  padding-bottom:4px;
  border-bottom:1px solid #eee;
}

/*.sub-body{
  height:40px; /* empty space for now 
}*/
.sub-body {
  height: auto;
  min-height: 0;
  padding: 0;
}
/* ACTIVE CONTAINER */
.sub-active{
  display:flex;
  align-items:center;
  justify-content:space-between;

  background:#e7f9ed;
  border-radius:10px;
  padding:6px 8px;

  font-size:12px;
  font-weight:bold;
}

/* TEXT */
.sub-text{
  color:#207436;
}

/* RIGHT GREEN CIRCLE WITH TICK (YOUR "A") */
.sub-icon-a{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#1a8f3a;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;
  font-size:11px;
  font-weight:bold;
}
/* PENDING CONTAINER */
.sub-pending{
  display:flex;
  align-items:center;
  justify-content:space-between;

  background:#fff4e5;
  border-radius:10px;
  padding:6px 8px;

  font-size:12px;
  font-weight:bold;
}

/* TEXT */
.sub-pending .sub-text{
  color:#b86b00; /* deep orange */
}

/* RIGHT ICON (CLOCK) */
.sub-icon-pending{
  color:#ff9800;
  font-size:14px;
}
/* INACTIVE CONTAINER */
.sub-inactive{
  display:flex;
  align-items:center;
  justify-content:space-between;

  background:#fdeaea;   /* FIX: red light background (NOT green) */
  border-radius:10px;
  padding:6px 8px;

  font-size:12px;
  font-weight:bold;
}

/* TEXT */
.sub-inactive .sub-text{
  color:#c0392b; /* FIX: red text */
}

/* ICON */
.sub-icon-inactive{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#e74c3c;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;
  font-size:11px;
  font-weight:bold;
} 
@media (max-width: 768px) {

  /* SUB BOX SIZE REDUCTION */
  .sub-box {
    width: 110px;        /* reduced from 140px */
    padding: 6px;        /* tighter spacing */
    gap: 4px;
    border-radius: 8px;
  }

  /* HEADER */
  .sub-header {
    font-size: 12px;
    padding-bottom: 3px;
  }

  /* BODY HEIGHT (IMPORTANT)
  .sub-body {
    height: 28px;   /* reduced from 40px 
  } */
.sub-body {
    height: auto;
    padding: 0;
  }

  /* ACTIVE / PENDING / INACTIVE */
  .sub-active,
  .sub-pending,
  .sub-inactive {
    font-size: 10px;
    padding: 4px 6px;
  }

  /* ICONS SMALLER */
  .sub-icon-a,
  .sub-icon-pending,
  .sub-icon-inactive {
    width: 14px;
    height: 14px;
    font-size: 9px;
  }

  /* TEXT TIGHTER */
  .sub-text {
    font-size: 10px;
  }
  .greeting-center h2 {
    font-size: 20px; /* reduced dashboard only */
  }

}
@media (max-width: 768px) {
  .greeting {
    align-items: start;
  }

  .sub-box {
    align-self: start;
  }
}


/*recored*/
.total-card {
  display: flex;
  flex-direction: row;
   align-items: flex-start;   /* 👈 important */
  justify-content: flex-start;

  gap: 12px;             /* space between icon and text */

  background: #fff;
  padding: 14px;
  width: 200px;
  min-height: 100px;

  border-radius: 12px;
  margin: 10px 0 20px 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.total-text .currency {
  font-size: 12px;
  color: #777;
  margin-top: 2px;
}
/* green soft circle */
.icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #dff5e5;
  display: flex;
  align-items: center;
  justify-content: center;

  color: #2e7d32;
  font-size: 16px;

  margin-top: 2px; /* 👈 small lift to match text top */
}

/* text section */
.total-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

/* green label */
.total-text .label {
  color: #2e7d32;
  font-size: 13px;
  font-weight: 600;
margin-top: -2px;
}

/* bold black amount */
.total-text .amount {
  color: #000;
  font-weight: 800;
  font-size: 16px;
  margin-top: 25px;   
  display: inline-block;
}
/* MOBILE ONLY */
/* MOBILE ONLY */
@media (max-width: 768px) {

  .total-card {
    width: 160px;
    min-height: 75px;
    padding: 10px;
  }

  .icon-circle {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .total-text .label {
    font-size: 11px;
  }

  .total-text .amount {
    font-size: 13px;
    margin-top: 15px;
  }

}



.transaction-box {
  width: 50%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  padding: 15px;
}

/* HEAD.transaction-header {ER INSIDE RIGHT BOX */
.transaction-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.transaction-body {
  height: 250px; /* important for chart visibility */
  gap: 8px;
    padding: 15px 15px 5px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
}

/* LEFT TEXT */
.transaction-title {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

/* RIGHT TEXT */
.view-all {
  font-size: 14px;
  font-weight: 600;
  color: #2bb132;

  cursor: pointer;
}

.transaction-item {
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #ffffff;
   display: flex;
  align-items: center;
  gap: 12px;
}

.status-dot {
  width: 25px;
  height: 25px;
  border: 1px solid #21c029;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transform: scale(1.5);
  position: relative;
  cursor: pointer;
}
.status-text {
  font-size: 8px;   /* or 18px if you want it more prominent */
  font-weight: 700;
  color: #28a745;
  text-transform: lowercase;
}

.transaction-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.amount {
  font-size: 14px;
  font-weight: 700;
  color: #000;
}

.time {
  font-size: 12px;
  color: #777;
}


.left {
  display: flex;
  align-items: center;
}
.status-badge {
  margin-left: auto;   /* 🔥 pushes it to far right */
  display: flex;
  align-items: center;
  gap: 6px;

  background: #e8f5e9;  /* light green */
  padding: 5px 10px;
  border-radius: 20px;
}
.status-label {
  font-size: 12px;
  font-weight: 600;
  color: #21c029;
}
.status-check {
  width: 16px;
  height: 16px;
  background: #21c029;
  color: #fff;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 10px;
  font-weight: bold;
}
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}

.modal-content {
  background: #fff;
  width: 90%;
  max-width: 900px;
  margin: 5% auto;
  padding: 20px;
  border-radius: 12px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.close-modal {
  font-size: 24px;
  cursor: pointer;
}
.modal-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px;
  margin: 10px 0 15px 0;

  background: #f7f9fc;
  border: 1px solid #e6eaf0;
  border-radius: 12px;
}

/* INPUT STYLING */
.modal-filters input {
  flex: 1;
  min-width: 160px;

  padding: 10px 12px;
  border: 1px solid #d7dde6;
  border-radius: 10px;

  font-size: 14px;
  outline: none;

  background: #fff;
  transition: all 0.2s ease;
}

/* FOCUS EFFECT */
.modal-filters input:focus {
  border-color: #2bb132;
  box-shadow: 0 0 0 3px rgba(43, 177, 50, 0.12);
}

/* PLACEHOLDER STYLE */
.modal-filters input::placeholder {
  color: #999;
  font-size: 13px;
}
/* TRANSACTION MODAL */
.tx-modal{
  display:none;
  position:fixed;
  inset:0;

  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);

  justify-content:center;
  align-items:center;
  z-index:9999;
}

.tx-box{
  width:92%;
  max-width:380px;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  animation:popup .25s ease;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.tx-header{
  background:#1db954;
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.tx-title{
  color:#fff;
  font-weight:600;
  font-size:14px;
}

.tx-close{
  color:#fff;
  font-size:22px;
  cursor:pointer;
  line-height:1;
}
.tx-ref{
  font-weight:600;
  margin-bottom:12px;
  color:#1db954;
  font-size:13px;
}

.tx-message{
  font-size:14px;
  line-height:1.6;
  color:#333;
  padding:0 12px;
}

/* FOOTER */
.tx-footer{
  padding:10px 15px;
  font-size:12px;
  color:#888;
  text-align:right;
  border-top:1px solid #eee;
}

@keyframes popup{
  from{ transform:scale(0.8); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}


.request-box {
 
  background: #fff;
  border-radius: 12px;
  margin-top: 15px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.request-header {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.request-header .title {
  font-weight: 700;
}

.request-header select {
  flex-shrink: 0;
  max-width: 140px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.request-body {
  padding: 15px;
}
.dashboard-row {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 100%;
  flex-wrap: nowrap; /* IMPORTANT FIX */
}

/* LEFT */


/* RIGHT */
.request-box {
  width: 50%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  padding: 15px;
}

/* HEADER INSIDE RIGHT BOX */
.request-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.request-body {
  height: 250px; /* important for chart visibility */
}
/* =========================
   MOBILE FIX (SAFE WIDTH CONTROL)
========================= */
@media (max-width: 768px) {

  /* STACK DASHBOARD */
  .dashboard-row {
    flex-direction: column;
    gap: 12px;
  }

  /* REDUCE WIDTH TO PREVENT OVERFLOW */
  .transaction-box,
  .request-box {
    width: 96%;          /* 👈 key fix (was 100%) */
    margin: 0 auto;      /* center it */
    box-sizing: border-box;
  }

  /* TOTAL CARD */
  .total-card {
    width: 96%;          /* 👈 same principle */
    margin: 10px auto;
    box-sizing: border-box;
  }

  /* CHART AREAS */
  .transaction-body,
  .request-body {
    min-height: 200px;
    height: auto;
  }
 

.modal-content {
    width: 100%;
    height: 75%;
    margin: 0;
    border-radius: 12px;
    padding: 12px;
    box-sizing: border-box;
    
  }


  /* STOP HORIZONTAL SCROLL */
  html, body {
    overflow-x: hidden;
  }
}

/*------------------------------------*/
.send-cards {
  display: flex;
  gap: 12px;
  margin: 15px 20px;
}

.send-card {
  flex: 1;
  height: 130px;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
cursor: pointer;
  transition: all 0.2s ease;
}

.send-card p {
  margin-top: 8px;
  font-size: 13px;
  color: #333;
  font-weight: bold;
}
.send-card-inner {
  width: 40%;
  height: 75%;
  border-radius: 10px;
margin-top: 12px;
  background: #e3f8e3;

   display: flex;
  justify-content: center;
  align-items: center;
}
.send-card-inner i {
  font-size: 30px;
  color: #02940c;
}
.send-card:hover {
  transform: translateY(-4px);
}

.send-card:hover .send-card-inner {
  box-shadow: 0 0 10px rgba(2, 148, 12, 0.25);
}

@media (max-width: 768px) {

  .send-cards {
    flex-wrap: nowrap;
    gap: 3px;              /* smaller gap */
    margin: 10px 8px;      /* smaller side space */
  }

  .send-card {
    flex: 1;
    min-width: 0;
    height: 90px;
    padding: 6px;
  }

  .send-card-inner {
    width: 60%;
    height: 55px;
    margin-top: 6px;
  }

  .send-card p {
    font-size: 8px;
  }

  .send-card-inner i {
    font-size: 18px;
  }
  .send-card:active {
  transform: scale(0.97);
}
}
/*---------------------------------------------------------------*/
.w2w-card {
  background: #ffffff;
  border-radius: 12px;
  margin: 15px 20px;
  padding: 12px;
  box-sizing: border-box;
}

.w2w-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 15px 0;   /* increased height */
  border-bottom: 1px solid #eee;
}
.w2w-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.w2w-header a {
  font-size: 13px;
  color: #18e225;
  text-decoration: none;
  font-weight: bold;
}
.w2w-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.w2w-row {
  height: 65px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  margin: 6px 0;
  background: #fff;

  padding: 0 10px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
 
}

.w2w-circle {
  width: 50px;
  height: 50px;
  border: 1.8px solid #18e225;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 17px;
  color: #18e225;
  margin-right: 10px;

}
.w2w-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.amt-title {
  font-size: 13px;
  color: #555;
}

.amt-value {
  font-size: 13px;
  font-weight: bold;
  color: #000;
}

.w2w-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.w2w-col .label {
  font-size: 13px;
  color: #777;
}

.w2w-col .value {
  font-size: 13px;
  font-weight: bold;
  color: #000;
}
.w2w-col.time {
  margin-left: 20%;
}
.w2w-col.name {
  margin-left: 25%;
}
.w2w-status {
  margin-left: auto; /* pushes it to far right */
}

.status-cardi {
  background: #e3f8e3;
  color: #18e225;
  font-size: 12px;
  font-weight: bold;

  padding: 9px 10px;
  border-radius: 20px;

  display: flex;
  align-items: center;
  gap: 6px;
}
.status-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #18e225;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  font-size: 11px;
  font-weight: bold;
}
@media (max-width: 768px) {

  .w2w-row {
    height: auto;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
  }

  .w2w-col.time,
  .w2w-col.name {
    margin-left: 0;
  }

  .w2w-info,
  .w2w-col.time,
  .w2w-col.name {
    flex: 1 1 45%;
  }

  .w2w-circle {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  .status-card {
    padding: 6px 8px;
    font-size: 11px;
  }

  .status-icon {
    width: 14px;
    height: 14px;
    font-size: 10px;
  }
}


/* ================================
   W2W MODAL (SAFE ISOLATED)
================================ */

.w2w-modal-t {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.w2w-modal-t-content {
  width: 320px;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* HEADER */
.w2w-modal-t-header {
  background: #16a34a; /* green */
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
}

.w2w-modal-t-header h3 {
  margin: 0;
  font-size: 16px;
  color: #ffffff;
}

/* CLOSE BUTTON */
.w2w-modal-t-close {
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
}

/* BODY */
.w2w-modal-t-body {
  padding: 15px;
  color: #000000;
  font-size: 14px;
  line-height: 1.5;
}

/*------------------------------------------------------*/

/* ====================================
   W2W VIEW ALL TRANSACTIONS MODAL
==================================== */

.w2w-vall-trans{
  position:fixed;
  top:0;
  left:0;

  width:100%;
  height:100%;

  background:rgba(0,0,0,0.45);

  display:none;

  justify-content:center;
  align-items:center;

  z-index:999999;
}

/* MODAL BOX */
.w2w-vall-trans-content{

  width:95%;
  max-width:700px;

  height:92%;

  background:#ffffff;

  border-radius:14px;

  overflow:hidden;

  display:flex;
  flex-direction:column;

  box-shadow:0 10px 35px rgba(0,0,0,0.25);
}

/* HEADER */
.w2w-vall-trans-header{

  height:65px;

  /*background:#18e225;*/
  background:#18be23;

  color:white;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 15px;

  flex-shrink:0;
}

/* TITLE */
.w2w-vall-trans-title{
  font-size:18px;
  font-weight:600;
}

/* ACTIONS */
.w2w-vall-trans-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* BUTTONS */
.w2w-vall-trans-search-btn,
.w2w-vall-trans-close-btn{

  width:38px;
  height:38px;

  border:none;

  background:rgba(255,255,255,0.18);

  color:white;

  border-radius:10px;

  cursor:pointer;

  font-size:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:0.2s;
}

/* HOVER */
.w2w-vall-trans-search-btn:hover,
.w2w-vall-trans-close-btn:hover{
  background:rgba(255,255,255,0.28);
}

/* BODY */
.w2w-vall-trans-body{

  flex:1;

  overflow-y:auto;

  background:#ffffff;

  padding:15px;
}
/* INNER CONTENT AREA */
.w2w-vall-trans-inner{

  width:100%;

  min-height:100%;

  background:#ffffff;

  border:1px solid #e5e5e5;

  border-radius:12px;

  padding:15px;

  box-sizing:border-box;
}
.w2w-sms-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.w2w-sms-header {
  font-weight: bold;
  font-size: 13px;
  color: #18e225;
  margin-bottom: 6px;
}

.w2w-sms-body {
  font-size: 13px;
  color: #111;
  line-height: 1.5;
}

.w2w-sms-time {
  font-size: 11px;
  color: #777;
  margin-top: 6px;
  text-align: right;
}


#w2wSearchInput {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  outline: none;
}
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: #18e225;
  color: white;
  padding: 10px 16px;
  border-radius: 25px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 9999;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-10px);
}
/* ================= SEND MONEY LOADING MODAL ================= */

.send-loading-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.45);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.send-loading-box {
  width: 90%;
  max-width: 320px;
  background: #fff;
  border-radius: 18px;
  padding: 25px;
  text-align: center;
  animation: popIn 0.25s ease;
}

.send-loading-spinner {
  width: 60px;
  height: 60px;
  border: 5px solid #eee;
  border-top: 5px solid #18e225;
  border-radius: 50%;
  margin: 0 auto 15px;
  animation: sendSpin 1s linear infinite;
}

.send-loading-text {
  font-size: 15px;
  color: #333;
  font-weight: 600;
}

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

@keyframes popIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* =========================
   M2W MODAL OVERLAY
========================= */
.m2w-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9999;

  justify-content: center;
  align-items: center;
}

/* =========================
   WHITE CARD
========================= */
.m2w-card {
  width: 95%;
  max-width: 600px;
  height: 80vh;
  background: #ffffff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.m2w-inbox-box {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;

  overflow-y: auto;
}
.m2w-status {
  color: #2ecc71;
  font-weight: 600;
  font-size: 12px;
}
/* =========================
   HEADER (COMPACT FIX)
========================= */
.m2w-header {
  background: #18e225;
  color: #ffffff;

  padding: 6px 12px;   /* very small padding */

  display: flex;
  justify-content: space-between;
  align-items: center;

  height: 50px;        /* FORCE HEIGHT */
  box-sizing: border-box;
}

/* TITLE */
.m2w-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
}

/* ACTION AREA */
.m2w-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* BUTTONS */
.m2w-search-btn,
.m2w-close-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
}

.m2w-search-btn {
  font-size: 16px;
}
.m2w-close-btn {
  font-size: 20px;
  font-weight: 600;
}

/* =========================
   BODY AREA
========================= */
.m2w-body {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  background: #ffffff;
}
.m2w-inbox-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

/* WhatsApp bubble */
.m2w-inbox-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background: #f5f5f5; /* optional soft chat background */
}

/* BUBBLE */
.m2w-bubble {
  max-width: 80%;
  background: #ffffff;
  border-radius: 14px;
  padding: 10px 12px;

  /* softer, cleaner shadow */
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);

  align-self: flex-start;

  /* ❌ REMOVE GREEN BORDER */
  border-left: none;
}

/* HEADER */
.m2w-bubble-header {
  margin-bottom: 5px;
}


/* MESSAGE TEXT */
.m2w-bubble-text {
  font-size: 14px;
  line-height: 1.4;
  color: #222;

  white-space: pre-line;
}

/* DATE */
.m2w-bubble-footer {
  font-size: 11px;
  opacity: 0.6;
  text-align: right;
  margin-top: 6px;
}

/*--------------------------------------------------------------------*/

/* B2C CARDS CONTAINER */
.b2c-cards{
  display:flex;
  gap:15px;
  margin-top:20px;
  flex-wrap:wrap;
}

/* OUTER WHITE CARD */
.b2c-card{
  background:#ffffff;
  padding:15px;
  border-radius:12px;

  width:180px;
  height:100px;

  box-shadow:0 2px 8px rgba(0,0,0,0.08);

  display:flex;
  justify-content:center;
  align-items:center;
  cursor:pointer;
}
.b2c-card:hover .b2c-card-inner{
  transform: scale(1.1);
  transition: 0.2s ease;
}
/* INNER CARD */
.b2c-card-inner{
  padding:12px;
  border-radius:10px;
  width:50px;
  height:22px;

  display:flex;
  justify-content:center;
  align-items:center;
}
/* GREEN INNER CARD */
.green-card{
  background:#e1ffe9;
}

/* WHITE INNER CARD */
.white-card{
  background:#e1ffe9;
}
/* CARD CONTENT */
.b2c-card-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

/* TEXT BELOW INNER CARD */
.b2c-card-text{
  color:#000000;
  font-size:14px;
  font-weight:600;
  margin:0;
}
/* ICONS INSIDE INNER CARDS */
.b2c-icon{
  color:#16b83c;
  font-size:23px;
}
@media (max-width: 768px) {
  .b2c-cards {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .b2c-card {
    flex: 1;              /* all cards share equal space */
    width: auto;          /* remove fixed width */
    height: 100px;
    padding: 10px;
  }

  .b2c-card-inner {
    width: 45px;
    height: 45px;
  }

  .b2c-card-text {
    font-size: 12px;
  }
}

/*-------------------------------------------------------------------*/

/* MAIN WHITE CARD */
.records-card{
  background:#ffffff;
  border-radius:16px; /* soft rounded corners */
  padding:15px;
  margin-top:20px;

  box-shadow:0 2px 10px rgba(0,0,0,0.06);
}

/* HEADER ROW */
.records-header{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding-bottom:10px;
  border-bottom:1px solid #eee;
}

/* LEFT TITLE */
.records-title{
  font-size:16px;
  font-weight:700;
  color:#000;
}

/* RIGHT BUTTON TEXT */
.records-viewall{
  font-size:14px;
  font-weight:600;
  color:#16b83c;
  cursor:pointer;
}

/* BODY AREA */
.records-body{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding-top:10px;
}

/* SIMPLE STATIC DIVIDED CARDS */
.mini-record-card:last-of-type{
  margin-bottom:0;
}
.mini-record-card{
  background:#ffffff;
  border:1px solid #eee;
  border-radius:12px;

  height:60px;

  display:flex;
  align-items:center;
  justify-content:space-between; /* 🔥 THIS FIXES ALIGNMENT */

  padding:0 15px;
  box-shadow:none;
}
.view-ring{
  width:46px;
  height:46px;

  border:1.8px solid #16b83c;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#16b83c;
  font-size:15px;
  font-weight:300;

  cursor:pointer;
}

.mini-record-card{
  position:relative;
}

/* TEXT BLOCK (does NOT touch ring) */
.amt-float{
  position:absolute;
  left:70px; /* increased spacing so it doesn't touch ring */
  top:50%;
  transform:translateY(-50%);

  display:flex;
  flex-direction:column;
  gap:2px;

  line-height:1.2;
}

/* "Amt" NOT bold */
.amt-label{
  font-size:12px;
  color:#888;
  font-weight:400; /* normal */
}

/* ONLY amount bold */
.amt-value{
  font-size:14px;
  font-weight:700; /* bold only here */
  color:#000;
}
.name-float{
  position:absolute;
  left:60%;  /* moved left */
  top:50%;
  transform:translateY(-50%);

  display:flex;
  flex-direction:column;
  align-items:flex-start; /* important */
  gap:2px;

  line-height:1.2;
}

.name-label{
  font-size:12px;
  color:#888;
  font-weight:400;
}

.name-value{
  font-size:14px;
  font-weight:600;
  color:#000;
  text-align:right;
}
.time-float{
  position:absolute;
  left:40%;  /* moved left */
  top:50%;
  transform:translateY(-50%);

  display:flex;
  flex-direction:column;
  align-items:flex-start; /* important */
  gap:2px;

  line-height:1.2;
}

.time-label{
  font-size:12px;
  color:#888;
  font-weight:400;
}

.time-value{
  font-size:14px;
  font-weight:600;
  color:#000;
  text-align:right;
}
.cost-float{
  position:absolute;
  left:20%;  /* moved left */
  top:50%;
  transform:translateY(-50%);

  display:flex;
  flex-direction:column;
  align-items:flex-start; /* important */
  gap:2px;

  line-height:1.2;
}

.cost-label{
  font-size:12px;
  color:#888;
  font-weight:400;
}

.cost-value{
  font-size:14px;
  font-weight:600;
  color:#000;
  text-align:right;
}
.status-card{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);

  width:100px;
  height:15px;

  background:#e1ffe9;
  border-radius:8px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;

  color:#16b83c;
  font-size:15px;
  font-weight:600;
}

/* green circle */
.status-card::after{
  content:"✓";

  width:14px;
  height:14px;

  background:#16b83c;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;
  font-size:11px;
  font-weight:700;
}
@media (max-width:768px){

  .mini-record-card{
    height:120px;
    padding:12px;
  }

  .amt-float{
    left:15px;
    top:55px;
    transform:none;
  }

  .cost-float{
    left:55%;
    top:20px;
    transform:none;
  }

  .time-float{
    left:15px;
    top:100px;
    transform:none;
  }

  .name-float{
    left:55%;
    top:65px;
    transform:none;
  }

.view-ring{
  position:absolute;
  top:5px;
  left:10px;

  width:40px;
  height:40px;
  font-size:16px;
  font-weight:600;
}

  .status-card{
    right:10px;
    bottom:10px;
    top:auto;
    transform:none;

    width:85px;
    height:22px;

    font-size:13px;
  }

}


.withdraw-detail-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  justify-content:center;
  align-items:center;
  z-index:9999;
  padding:15px;
}

.withdraw-detail-box{
  width:100%;
  max-width:520px;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,0.25);

  /* 🔥 FIX HEIGHT ISSUE */
  max-height:80vh;
  display:flex;
  flex-direction:column;
}

.withdraw-detail-header{
  background:#16b83c;
  color:#fff;
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
}

.withdraw-detail-body{
  padding:16px;
  overflow-y:auto;
  flex:1;
}

.withdraw-title{
  font-weight:700;
  color:#16b83c;
  margin-bottom:10px;
}

.withdraw-message{
  font-size:14px;
  line-height:1.6;
  color:#000;
}

.withdraw-detail-footer{
  padding:10px;
  font-size:12px;
  text-align:center;
  border-top:1px solid #eee;
  color:#777;
}

.close-x{
  cursor:pointer;
  font-size:20px;
}

.withdraw-inbox-modal{
  display:none;              /* stays hidden by default */
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:30%;
  height:95%;
  background:#ffffff;
  z-index:9999;
  flex-direction:column;
  border-radius:20px;
  overflow:hidden;
  padding:0;
  box-shadow:0 8px 30px rgba(0,0,0,0.25);
}

/* HEADER */
.withdraw-inbox-header{
  background:#16b83c;
  color:#fff;
  padding:12px 15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
}

/* ACTION ICONS */
.inbox-actions{
  display:flex;
  gap:15px;
  font-size:18px;
  cursor:pointer;
}


.withdraw-inbox-body{
  flex:1;
  display:flex;
  overflow:hidden;   /* IMPORTANT */
  padding:15px;
  background:#ffffff;
}

.withdraw-inbox-inner{
  background:#f7f7f7;
  border-radius:16px;
  padding:15px;

  flex:1;              /* IMPORTANT */
  overflow-y:auto;     /* SCROLL ONLY HERE */
  min-height:0;        /* CRITICAL FIX for flex scroll bug */
}

@media (max-width:768px){

  .withdraw-inbox-modal{
    width:95%;
    height:92%;
    border-radius:18px;
  }

  .withdraw-inbox-body{
    padding:10px;
  }

  .withdraw-inbox-inner{
    padding:12px;
    height:96%;
  }
  .withdraw-inbox-header{
    padding:12px 14px;
    font-size:15px;
  }

  .inbox-title{
    font-size:18px;
    font-weight:600;
  }

  .inbox-actions{
    gap:18px;
    font-size:16px;
  }

  .inbox-close{
    font-size:28px;
    line-height:1;
  }
}

/* SMS CARD */
.withdraw-sms-card{
  background:#ffffff;
  border-radius:14px;
  padding:16px;
  margin-bottom:14px;
  color:#111;
  line-height:1.6;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
  border:1px solid #ececec;
}

/* TITLE */
.withdraw-sms-title{
  font-weight:700;
  font-size:16px;
  margin-bottom:12px;
  color:#16b83c;

  display:flex;
  align-items:center;
  gap:8px;
}

/* MESSAGE */
.withdraw-sms-message{
  font-size:14px;
  word-break:break-word;
}

/* FOOTER DATE */
.withdraw-sms-date{
  margin-top:14px;
  text-align:right;
  font-size:12px;
  color:#666;
}

/*-----------------------------------------------------------------*/

.inbox-card {
  background: white;
  padding: 15px;
  margin: 10px 0;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.inbox-card h3 {
  margin: 0;
  color: #4caf50;
}

.inbox-card p {
  margin: 5px 0;
  color: #333;
}

.inbox-card small {
  color: gray;
}

/*--------------------------------*/
.inbox-icon-box{
  position: relative;
  display: inline-block;
}

.inbox-badge{
  position: absolute;

  top: -10px;
  right: -16px;

  min-width: 16px;
  height: 16px;

  border-radius: 50%;

  background: white;
  border: 2px solid #00b894;
 /*border: 2px solid #b82b00;*/
  color: #00b894;

  display: none;
  align-items: center;
  justify-content: center;

  font-size: 9px;
  font-weight: bold;

  line-height: 1;

  padding: 1px;
}