@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
    :root { --dark-blue: #003d63; --light-blue: #ebf2fa; --accent-red: #d32f2f; --bg-gray: #f2f5f9; --text-dark: #1e293b; --text-muted: #64748b; }
    body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--bg-gray); margin: 0; color: var(--text-dark); }

    /* Navbar */
    .navbar { background: transparent; padding: 25px 0 15px 0; width: 100%; position: relative;  }
    .hamburger { display: none; color: var(--dark-blue); cursor: pointer; border-radius: 8px; padding: 6px; }
    .hamburger:hover { background: #E9EFFA; }
    .mobile-menu {
      display: none !important;
      position: absolute;
      top: 75px;
      left: 15px;
      right: 15px;
      background: white;
      padding: 20px;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      border: 1px solid #EAECF0;
      z-index: 100;
      flex-direction: column;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-12px) scale(0.98);
      transform-origin: top center;
      pointer-events: none;
      transition:
        opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.28s ease;
    }
    .mobile-menu.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
      pointer-events: auto;
      box-shadow: 0 16px 40px rgba(0, 61, 99, 0.12);
    }
    .mobile-menu .nav-links { display: flex !important; flex-direction: column; align-items: stretch; width: 100%; }
    .mobile-menu .nav-links > div {
      justify-content: center;
      padding: 12px;
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 0.22s ease, transform 0.22s ease, background-color 0.2s;
    }
    .mobile-menu.show .nav-links > div {
      opacity: 1;
      transform: translateY(0);
    }
    .mobile-menu.show .nav-links > div:nth-child(1) { transition-delay: 0.04s; }
    .mobile-menu.show .nav-links > div:nth-child(2) { transition-delay: 0.08s; }
    .mobile-menu.show .nav-links > div:nth-child(3) { transition-delay: 0.12s; }
    .mobile-menu.show .nav-links > div:nth-child(4) { transition-delay: 0.16s; }
    .mobile-menu > div:last-child {
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 0.22s ease, transform 0.22s ease;
    }
    .mobile-menu.show > div:last-child {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.2s;
    }
    @media (prefers-reduced-motion: reduce) {
      .mobile-menu,
      .mobile-menu .nav-links > div,
      .mobile-menu > div:last-child {
        transition: none;
      }
      .mobile-menu.show .nav-links > div,
      .mobile-menu.show > div:last-child {
        transition-delay: 0s;
      }
    }

    .nav-container { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; width: 100%; box-sizing: border-box; }
    .nav-left { background: #E9EFFA; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 25px; border-radius: 999px; height: 60px; }
    .nav-logo { display: flex; align-items: center; padding-right: 15px; }
    .nav-logo img { height: 40px; width: 99px;}
    .nav-links { display: flex; gap: 5px; align-items: center; font-size: 13px; font-weight: bold; color: var(--dark-blue); }
    .nav-links > div { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 30px; cursor: pointer; transition: 0.2s; }
    .nav-links > div.active, .nav-links > div:hover { background-color: var(--dark-blue); color: white; }
    .nav-links > div.active img, .nav-links > div:hover img { filter: brightness(0) invert(1); }
    .nav-links img { width: 18px; height: 18px; object-fit: contain; }
    .nav-right { display: flex; align-items: center; gap: 15px; }
    .icon-btn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: all 0.3s ease; }
    .icon-btn:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
    .icon-btn img { width: 38px; height: 38px; object-fit: contain; }
    .profile { position: relative; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 14px; background: #E9EFFA; border-radius: 999px; padding: 0px 15px 0px 12px; height: 60px; min-width: 145px; box-sizing: border-box; transition: 0.2s; }
    .profile:hover { background: #E2E8F4; }
    .profile img { width: 40px; height: 40px; border-radius: 50%; }
    .dropdown-menu { position: absolute; top: 70px; right: 0; background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 140px; padding: 10px; opacity: 0; transform: translateY(-10px); transition: all 0.2s ease; pointer-events: none; z-index: 100; border: 1px solid #e2e8f0; }
    .profile.open .dropdown-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .dropdown-menu div { padding: 10px 15px; border-radius: 8px; font-weight: bold; color: var(--accent-red); cursor: pointer; transition: 0.2s; }
    .dropdown-menu div:hover { background: #fee2e2; }

    /* Layout */
    .layout-container { max-width: 1400px; margin: 0 auto; padding: 0; background: white; border-radius: 24px; border: 1px solid #EAECF0; margin-top: 10px; box-sizing: border-box; overflow: hidden; }

    /* Cards (Integrated) */
    .card-container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; padding: 40px; background: #f5f9ff; margin-bottom: 0; }
    .card { flex: 1; min-width: 300px; max-width: 330px; height: 180px; position: relative; padding: 20px; color: white; box-sizing: border-box; background-size: 100% 100%; }
    .dark-card { background-repeat: no-repeat; background-size: 97% 100%; border-radius: 20px; }
    .dark-card--verified { background-image: url("blue.png"); }
    .dark-card--pending { background-image: url("yellow.png"); }
    .dark-card--unverified { background-image: url("red.png"); }
    .light-card { color: var(--dark-blue); background-image: url("white.png"); background-repeat: no-repeat; background-size: 95% 100%; }
    .btn { position: absolute; bottom: 10px; right: 17px; z-index: 2; border: none; border-radius: 22px; font-weight: bold; cursor: pointer; min-width: 112px; height: 42px; font-size: 12px; top: 133px; transition: 0.2s; }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
    .btn-red { background-color: #15B79E; color: white; right: 3px!important;}
    .btn-red:hover { background-color: #06a48c; }
    .btn-grey { background-color: #15B79E; color: white; right: 20px!important;}
    .btn-grey:hover { background-color: #06a48c; }
    .btn-dark { background-color: var(--dark-blue); color: white; }
    .btn-dark:hover { background-color: #00233d; }
    .card-content { position: relative; z-index: 0; }
    .header { display: flex; justify-content: space-between; font-size: 14px; }
    .label { font-size: 14px; opacity: 0.8; }
    .balance { font-size: 24px; margin: 5px 0; }
    .name { font-weight: bold; }
    .icon-box { background: white; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
    .title { margin: 0; font-size: 18px; }
    .sub-text { font-size: 12px; margin-top: 5px; opacity: 0.7; }

    /* Main Two-Column Layout */
    .main-grid { display: flex; margin: 30px; max-width: 1400px; box-sizing: border-box; }

    /* Sidebar */
    .sidebar { width: 300px; flex-shrink: 0; background: #f4f7fb; border: 1px solid #EAECF0; border-radius: 20px 0 0px 20px; box-sizing: border-box; overflow: hidden; padding-bottom: 20px; display: flex; flex-direction: column; min-height: 100%; }
    .sidebar-title { font-size: 18px; color: var(--dark-blue); font-weight: bold; margin: 0; padding: 30px; border-bottom: none; }
    .sidebar-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px 12px 30px; background: #E9EFFA; border-radius: 0 40px 40px 0; margin-bottom: 8px; margin-right: 20px; font-size: 14px; font-weight: bold; color: var(--dark-blue); cursor: pointer; transition: 0.2s; position: relative; }
    .sidebar-item:hover { background: #f0f3fa; }
    .sidebar-item-left { display: flex; align-items: center; gap: 12px; }
    .sidebar-qr-card {
      position: relative;
      margin: 16px 20px 20px 0;
      padding: 18px 16px 16px;
      background: #E9EFFA;
      border-radius: 0 40px 40px 0;
      box-sizing: border-box;
      overflow: hidden;
      flex-shrink: 0;
      height: 155px;
    }
    /* Decorative "D" arc — matches design screenshot */
    .sidebar-qr-card::before {
      content: '';
      position: absolute;
      right: -28px;
      top: -32px;
      width: 118px;
      height: 118px;
      border-radius: 50%;
      border: 16px solid rgba(255, 255, 255, 0.5);
      border-left-color: transparent;
      border-bottom-color: transparent;
      pointer-events: none;
      z-index: 0;
    }
    .sidebar-qr-card::after {
      content: '';
      position: absolute;
      right: 8px;
      bottom: -42px;
      width: 96px;
      height: 96px;
      border-radius: 50%;
      border: 12px solid rgba(255, 255, 255, 0.28);
      border-top-color: transparent;
      border-left-color: transparent;
      pointer-events: none;
      z-index: 0;
    }
    .sidebar-qr-card > * {
      position: relative;
      z-index: 1;
    }
    .sidebar-qr-icon-wrap {
      width: 48px;
      height: 48px;
      /* background: #fff; */
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
      /* box-shadow: 0 2px 6px rgba(0, 61, 99, 0.06); */
    }
    .sidebar-qr-icon-wrap img {
      width: 54px;
      height: 54px;
      object-fit: contain;
    }
    .sidebar-qr-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .sidebar-qr-text {
      flex: 1;
      min-width: 0;
    }
    .sidebar-qr-title {
      margin: 0 0 4px;
      font-size: 15px;
      font-weight: 700;
      color: var(--dark-blue);
      line-height: 1.3;
    }
    .sidebar-qr-sub {
      margin: 0;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
      line-height: 1.4;
    }
    .sidebar-qr-btn {
      flex-shrink: 0;
      border: none;
      background: var(--dark-blue);
      color: #fff;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      padding: 10px 22px;
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .sidebar-qr-btn:hover {
      background: #00233d;
      transform: translateY(-1px);
    }

    /* Main Content Form */
    .content-area { flex-grow: 1; display: flex; flex-direction: column; gap: 24px; }
    .content-area > section { background: white; border: 1px solid #EAECF0; border-radius: 0px 20px 20px 0px; overflow: hidden; display: flex; flex-direction: column; }

    .section-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; background: #f4f7fb; border-bottom: 1px solid #EAECF0; z-index: 1; }
    .section-title { font-size: 18px; font-weight: bold; color: var(--dark-blue); margin: 0; }
    .view-all { font-size: 13px; color: var(--dark-blue); font-weight: bold; cursor: pointer; }

    .list-item { display: grid; grid-template-columns: 1.5fr 1.3fr 1fr 220px; align-items: center; padding: 25px 30px; gap: 15px; }
    .list-item.tx-item { grid-template-columns: 2fr 1fr auto; }
    .list-item:last-child { border-bottom: none; }
    .user-info { display: flex; align-items: center; gap: 12px; }
    .user-info img { width: 44px; height: 44px; border-radius: 50%; }
    .user-name { font-weight: bold; font-size: 15px; color: var(--dark-blue); margin: 0 0 4px 0; }
    .user-sub { font-size: 12px; color: var(--text-muted); margin: 0; }
    .date-time { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); font-weight: 500; }
    .amount { font-size: 20px; font-weight: bold; color: #000; }
    .amount span { font-size: 14px; font-weight: bold; color: var(--dark-blue); }
    .actions { display: flex; gap: 10px; justify-content: flex-end; }

    .btn-outline { border: 1px solid #cbd5e1; background: transparent; padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: bold; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
    .btn-outline:hover { background: #f1f5f9; border-color: #94a3b8; color: var(--dark-blue); }
    .btn-decline { border: 1px solid #fca5a5; color: var(--accent-red); background: white; }
    .btn-decline:hover { background: var(--accent-red); color: white; }
    .btn-decline:hover img { filter: brightness(0) invert(1); }
    .btn-accept { border: none; background: #15B79E; color: white; padding: 9px 20px; cursor: pointer; transition: 0.2s; }
    .btn-accept:hover { background: #0f937d; }

    /* Deposit & Withdraw */
    .dw-box { display: flex; flex-direction: column; }
    .dw-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; background: #f4f7fb; border-bottom: 1px solid #EAECF0; }
    .stat-item { text-align: right; }
    .stat-value { font-weight: bold; color: var(--dark-blue); font-size: 15px; }
    .stat-value span { color: var(--text-muted); font-size: 13px; font-weight: normal; }
    .stat-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

    .dw-form { display: flex; align-items: flex-end; gap: 20px; padding: 25px 30px 30px 30px; }
    .input-grp { flex: 1; }
    .input-grp label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
    .search-input { width: 100%; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 8px; box-sizing: border-box; font-size: 14px; }
    .dw-actions { display: flex; gap: 15px; }
    .btn-deposit { border: 1px solid var(--accent-red); color: var(--accent-red); background: transparent; padding: 10px 24px; border-radius: 25px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
    .btn-deposit:hover { background: #fef2f2; }
    .btn-withdraw { border: 1px solid #10b981; color: #10b981; background: transparent; padding: 10px 24px; border-radius: 25px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
    .btn-withdraw:hover { background: #ecfdf5; }

        /* Responsive Layout Support */
    @media (max-width: 1060px) {.main-grid { flex-direction: column; margin: 15px; }.sidebar { width: 100%; border-right: none; border-bottom: 1px solid #EAECF0; padding-bottom: 20px; border-radius: 20px 20px 0 0; min-height: 0; }.sidebar-item { border-radius: 40px; margin: 0 20px 8px 20px; }.sidebar-qr-card { margin: 16px 20px 20px; border-radius: 18px; }.sidebar-qr-card::before { right: -20px; top: -24px; width: 100px; height: 100px; }.sidebar-qr-card::after { right: 12px; bottom: -36px; width: 80px; height: 80px; }.content-area > section { border-radius: 0 0 20px 20px; }}
    @media (max-width: 768px) {.nav-container { gap: 0; padding: 0 15px; }.hamburger { display: block; }.mobile-menu { display: flex !important; }.nav-left { background: transparent; padding: 0; height: auto; gap: 0; width: auto; align-items: center; }.nav-logo { padding-right: 0; }.nav-logo img { height: 35px; width: auto; }.desktop-links { display: none; }.nav-right { width: auto; gap: 0; }.desktop-icons { display: none !important; }.profile { padding: 0; background: transparent; min-width: 0; height: auto; }.desktop-profile-text, .desktop-profile-icon { display: none; }.profile img { width: 44px; height: 44px; }.card-container { padding: 20px; }.list-item, .list-item.tx-item { grid-template-columns: 1fr; gap: 15px; padding: 20px; }.list-item > div { justify-content: flex-start !important; text-align: left !important; }.dw-header, .dw-form { flex-direction: column; align-items: stretch; padding: 20px; gap: 15px; }.dw-header > div { flex-direction: column; gap: 10px; align-items: flex-start !important; }.stat-item { text-align: left; }.dw-actions { flex-direction: column; }.btn-deposit, .btn-withdraw {justify-content: center; }.section-header { padding: 20px; }}

    /* --- Sign-in Page Specifics --- */
    .login-wrapper { display: flex; height: 100vh; width: 100%; overflow: hidden; background: #003d63; padding: 15px; box-sizing: border-box; gap: 15px; }
    .login-left { flex: 1; background-color: #003a5e; background-image: repeating-radial-gradient(circle at 50% -10%, transparent 0, transparent 90px, rgba(255,255,255,0.04) 90px, rgba(255,255,255,0.04) 91px), linear-gradient(180deg, #003859 0%, #001f35 100%); position: relative; overflow: hidden; border-radius: 20px; display: flex; flex-direction: column; align-items: center; padding-top: 80px; }
    .left-text-content { text-align: center; color: white; max-width: 90%; z-index: 10; margin-bottom: 25px; }
    .left-text-content h2 { font-size: 34px; line-height: 1.3; margin: 0 0 16px 0; font-weight: 700; letter-spacing: -0.5px; }
    .left-text-content p { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.6; margin: 0 0 30px 0; font-weight: 500; padding: 0 25px; }
    .slider-dots { display: flex; gap: 6px; justify-content: center; }
    .slider-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); display: inline-block; }
    .slider-dots .dot.active-dot { width: 22px; border-radius: 4px; background: white; }
    .left-images-content {position: relative;width: 100%;flex-grow: 1;display: flex;align-items: flex-end;justify-content: center;overflow: hidden;}
    .images-inner {position: relative;width: 90%;max-width: 400px;aspect-ratio: 1 / 1.05;margin-bottom: 0;}
    .images-inner .fram1 {position: absolute;top: 0;left: 0;width: 78%;height: auto;z-index: 2;filter: drop-shadow(0px 24px 48px rgba(0, 0, 0, 0.35));}
    .images-inner .fram2 {position: absolute;bottom: 0;right: 0;width: 52%;height: auto;z-index: 3;filter: drop-shadow(0px 16px 32px rgba(0, 0, 0, 0.3));}
    .left-images-content::after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 35%;background: linear-gradient(to bottom, transparent, #001f35);z-index: 10;pointer-events: none;}
    .left-images-content .fram1 { position: absolute; height: auto; z-index: 2; top: 40px; left: -13%; object-fit: contain; }
    .left-images-content .fram2 { position: absolute; height: auto; z-index: 3; top: 52%; right: -36%; object-fit: contain; width: 74%;}
    .left-images-content .shadow-img { position: absolute; bottom: -120px; left: 0; width: 100%; height: 50%; object-fit: cover; z-index: 4; pointer-events: none; }
    .login-right { flex: 1; padding: 40px; display: flex; flex-direction: column; position: relative; border-radius: 16px; background-color: white;}
    .login-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
    .login-top .logo img { height: 35px; }
    .login-top .signup-text { font-size: 14px; font-weight: 500; color: var(--text-muted); }
    .login-top .signup-text a { color: var(--dark-blue); font-weight: bold; text-decoration: none; margin-left: 5px; }

    .login-center { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; max-width: 480px; width: 100%; margin: 0 auto; text-align: center; }
    .login-center h1 { font-size: 30px; font-weight: bold; color: #1e293b; margin: 0 0 10px 0; }
    .login-center p { font-size: 15px; color: var(--text-muted); margin: 0 0 16px 0; font-weight: 700; }

    .form-group { margin-bottom: 20px; text-align: left; }
    .form-group label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 8px; }
    .phone-input-wrapper { display: flex; align-items: center; border: 1px solid #e2e8f0; border-radius: 12px; padding: 0 20px; height: 55px; transition: 0.2s; background: white; }
    .phone-input-wrapper:focus-within { border-color: var(--dark-blue); box-shadow: 0 0 0 3px rgba(0,61,99,0.05); }
    .country-code { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: #1e293b; padding-right: 15px; border-right: 1px solid #e2e8f0; }
    .phone-input { flex-grow: 1; border: none; outline: none; padding-left: 15px; font-size: 15px; color: #1e293b; font-family: 'Plus Jakarta Sans', sans-serif; background: transparent; }
    .phone-input::placeholder { color: #94a3b8; font-weight: 500; }

    .form-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; font-size: 13px; font-weight: 500; }
    .form-footer .info-text { color: var(--text-muted); }
    .form-footer .forgot-link { color: var(--dark-blue); font-weight: 700; text-decoration: none; cursor: pointer; transition: 0.2s; }
    .form-footer .forgot-link:hover { color: #00233d; }

    .btn-primary { width: 100%; height: 55px; background: var(--dark-blue); color: white; border: none; border-radius: 30px; font-size: 15px; font-weight: bold; cursor: pointer; margin-top: 25px; transition: 0.2s; }
    .btn-primary:hover { background: #002b47; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,61,99,0.2); }

    .login-bottom { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 12px; color: var(--text-muted); font-weight: 500; }
    .login-bottom .links { display: flex; gap: 20px; }
    .login-bottom .links a { color: var(--text-muted); text-decoration: none; cursor: pointer; transition: 0.2s; }
    .login-bottom .links a:hover { color: var(--dark-blue); }

    /* Login Responsive Breakpoints */
    @media (max-width: 1024px) {
      .login-left { display: none; }
      .login-right { max-width: 100%; padding: 40px; }
    }
    @media (max-width: 480px) {
      .login-wrapper { padding: 0; background: white; gap: 0; height: auto; min-height: 100vh; overflow-y: auto; }
      .login-right { padding: 30px 20px; border-radius: 0; display: flex; flex-direction: column; justify-content: flex-start; min-height: 100vh; }
      .login-top { flex-direction: row; gap: 10px; align-items: center; justify-content: space-between; }
      .login-top .logo img { height: 28px; }
      .login-top .signup-text { font-size: 13px; }
      .login-center { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; margin-top: 40px; margin-bottom: 40px; }
      .login-center h1 { font-size: 26px; margin-bottom: 8px; }
      .login-center p { font-size: 14px; margin-bottom: 30px; }
      .login-bottom { flex-direction: row; gap: 10px; align-items: center; justify-content: space-between; font-size: 11px; }
      .phone-input-wrapper { padding: 0 15px; height: 50px; }
      .btn-primary { margin-top: 35px; }
    }

    /* OTP Modal */
    .modal-overlay {display: none; position: fixed; inset: 0; background: rgba(0, 30, 55, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 999; align-items: center; justify-content: center;}
    .modal-overlay.active {display: flex;}
    .modal-box {background: white; border-radius: 24px; padding: 40px 36px; width: 100%; max-width: 400px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);}
    .modal-icon {width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 10px;}
    .modal-title {font-size: 22px; font-weight: 700; color: #1e293b; margin: 0 0 4px 0;}
    .modal-sub {font-size: 14px; color: var(--text-muted); margin: 0; font-weight: 500;}
    .modal-phone {font-size: 15px; font-weight: 700; color: #1e293b; margin: 4px 0;}
    .modal-btn-sms {margin-top: 16px !important; border-radius: 30px;}
    .modal-btn-back {width: 100%; height: 50px; background: transparent; color: #1e293b; border: 1.5px solid #e2e8f0; border-radius: 30px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 10px; transition: 0.2s; font-family: 'Plus Jakarta Sans', sans-serif;}
    .modal-btn-back:hover { background: #f1f5f9; border-color: #cbd5e1;}
    @media (max-width: 480px) { .modal-box { padding: 30px 20px; margin: 0 20px; } }

    /* Toastr.js — E-Collect theme (scoped; avoids .toast conflict) */
    #toast-container {
      z-index: 100000;
      pointer-events: none;
    }
    #toast-container > div {
      opacity: 1;
      box-shadow: 0 12px 32px rgba(0, 30, 55, 0.2);
      border-radius: 14px;
      font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 600;
      padding: 16px 18px 16px 50px;
      width: 340px;
      max-width: calc(100vw - 32px);
      background-image: none !important;
      position: relative;
      pointer-events: auto;
    }
    #toast-container > .toast-success {
      background-color: var(--dark-blue, #003d63) !important;
      color: #fff !important;
    }
    #toast-container > .toast-error {
      background-color: var(--accent-red, #d32f2f) !important;
      color: #fff !important;
    }
    #toast-container > .toast-info {
      background-color: #1e293b !important;
      color: #fff !important;
    }
    #toast-container > .toast-warning {
      background-color: #DE4400 !important;
      color: #fff !important;
    }
    #toast-container > div .toast-title {
      font-weight: 700;
      font-size: 14px;
      color: #fff;
    }
    #toast-container > div .toast-message {
      font-weight: 500;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.92);
    }
    #toast-container > div .toast-progress {
      background: rgba(255, 255, 255, 0.35) !important;
      opacity: 1;
    }
    #toast-container > div .toast-close-button {
      color: #fff !important;
      opacity: 0.85;
      font-weight: 700;
    }
    #toast-container > div .toast-close-button:hover {
      opacity: 1;
      color: #fff !important;
    }
    @media (max-width: 480px) {
      #toast-container.toast-top-right,
      #toast-container.toast-top-left {
        top: 12px;
        right: 12px;
        left: 12px;
      }
      #toast-container > div {
        width: 100%;
        margin: 0 0 8px 0;
      }
    }

    .otp-inputs { display: flex; gap: 12px; justify-content: center; margin: 28px 0 10px 0; }
    .otp-inputs input { width: 58px; height: 58px; border: 1.5px solid #e2e8f0; border-radius: 14px; text-align: center; font-size: 22px; font-weight: 700; color: #1e293b; font-family: 'Plus Jakarta Sans', sans-serif; outline: none; transition: 0.2s; background: white;}
    .otp-inputs input:focus { border-color: var(--dark-blue); box-shadow: 0 0 0 3px rgba(0,61,99,0.06); }
    .otp-inputs input.filled { border-color: #cbd5e1; background: #f8fafc; }
    .resend-row { text-align: center; font-size: 13px; font-weight: 500; color: var(--text-muted); margin: 12px 0 24px 0;}
    .resend-row .resend-link { color: var(--dark-blue); font-weight: 700; cursor: pointer; text-decoration: none; font-size: 17px;}
    .resend-row .resend-link:hover { color: #00233d; }
    .edit-number { display: block; text-align: center; font-size: 15px; font-weight: 700; color: #1e293b; cursor: pointer; text-decoration: none; transition: 0.2s; margin-top: 10px;}
    .edit-number:hover { color: var(--dark-blue); }
    .verify-phone { font-size: 15px; font-weight: 700; color: #1e293b; margin: 4px 0 6px 0;}
    .login-center .verify-phone{ color: #000; margin-top: 10px;}

    .modal-icon-otp,
    .modal-icon-pin {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
    }
    .modal-icon-otp img,
    .modal-icon-pin img {
      width: 48px;
      height: 48px;
      object-fit: contain;
    }
    .pin-section-label {
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      text-align: left;
      width: 100%;
      margin: 0 0 10px 0;
    }
    .pin-inputs {
      display: flex;
      gap: 12px;
      justify-content: space-evenly;
      margin-bottom: 10px;
      width: 100%;
    }
    .pin-inputs input,
    .pin-inputs .pin-box {
      width: 58px;
      height: 58px;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      text-align: center;
      font-size: 22px;
      font-weight: 700;
      color: #1e293b;
      font-family: 'Plus Jakarta Sans', sans-serif;
      outline: none;
      transition: 0.2s;
      background: white;
    }
    .pin-inputs input:focus,
    .pin-inputs .pin-box:focus {
      border-color: var(--dark-blue);
      box-shadow: 0 0 0 3px rgba(0,61,99,0.06);
    }
    .pin-inputs input.filled,
    .pin-inputs .pin-box.filled {
      background: #f8fafc;
      border-color: #cbd5e1;
    }
    .pin-inputs input.error,
    .pin-inputs .pin-box.error {
      border-color: #ef4444;
      box-shadow: 0 0 0 3px rgba(239,68,68,0.08);
    }
    .pin-error-msg {
      font-size: 13px;
      color: #ef4444;
      font-weight: 500;
      text-align: left;
      width: 100%;
      margin: -6px 0 16px 0;
      display: none;
    }
    .pin-error-msg.show {
      display: block;
    }
    .auth-register-step[hidden],
    #step-1[hidden],
    #step-2[hidden] {
      display: none !important;
    }

    .input-icon-wrapper { display: flex; align-items: center; border: 1px solid #e2e8f0; border-radius: 12px; padding: 0 16px; height: 55px; transition: 0.2s; background: white; gap: 10px;}
    .input-icon-wrapper:focus-within { border-color: var(--dark-blue); box-shadow: 0 0 0 3px rgba(0,61,99,0.05);}
    .input-icon-wrapper svg { flex-shrink: 0; color: #94a3b8; }
    .input-icon-wrapper input { flex-grow: 1; border: none; outline: none; font-size: 15px; color: #1e293b; font-family: 'Plus Jakarta Sans', sans-serif; background: transparent;}
    .input-icon-wrapper input::placeholder { color: #94a3b8; font-weight: 500; }
    .cal-icon { cursor: pointer; color: #94a3b8; flex-shrink: 0; }
    .cal-icon:hover { color: var(--dark-blue); }

    /* Hide default date picker icon */
    input[type="date"]::-webkit-calendar-picker-indicator { display: none !important; -webkit-appearance: none;}

    /* --- Send Money Flow Styles --- */
    .send-money-layout { display: flex; width: 100%; min-height: 500px; background: #ffffff; gap: 15px;  padding: 15px;  box-sizing: border-box;}
    .stepper-sidebar { width: 260px; padding: 30px 15px; border: 1px solid #ebf2fa; flex-shrink: 0; border-radius: 16px; background-color: #e9effa;}
    .stepper-header { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: bold; margin-bottom: 20px; padding-left: 15px; }
    .step-item { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 10px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: #dde6f2; transition: 0.2s; }
    .step-item .step-num { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #cbd5e1; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-muted); background: white; flex-shrink: 0;}
    .step-item.active { background: white; color: var(--dark-blue); box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
    .step-item.active .step-num { border-color: var(--dark-blue); background: var(--dark-blue); color: white; border-width: 2px;}
    .step-item.completed { background: #dde6f2; color: #10b981; }
    .step-item.account-sidebar { background: #dde6f2; }
    .step-item.completed .step-num { border-color: #10b981; background: #d1fae5; color: #10b981; }

    .send-money-content { flex-grow: 1; display: flex; flex-direction: column; background: white; border-radius: 16px; overflow: hidden; border: 1px solid #ebf2fa;}
    .step-header-area { padding: 30px 40px; background: #e9effa; border-bottom: 1px solid #EAECF0; display: flex; align-items: center; gap: 15px; }
    .back-btn { cursor: pointer; display: flex; align-items: center; width: 32px; height: 32px; transition:0.2s;}
    .back-btn:hover { background: #f1f5f9; }
    .step-title-box h2 { font-size: 20px; color: var(--dark-blue); margin: 0 0 5px 0; }
    .step-title-box p { font-size: 13px; color: var(--text-muted); margin: 0; }

    .step-body { flex-grow: 1; padding: 40px; display: flex; flex-direction: column; align-items: center; overflow-y: auto; }
    .step-card { width: 100%; max-width: 620px; background: #e9effa; padding: 30px; border-radius: 20px; box-sizing: border-box; }
    .recipient-search-box { background: white; padding: 15px 20px; border-radius: 12px; display: flex; align-items: center; gap: 10px; border: 1px solid #EAECF0; margin-bottom: 20px; }
    .recipient-search-input { border: none; outline: none; flex-grow: 1; font-size: 14px; font-family: inherit; }

    .section-label { font-size: 15px; font-weight: bold; color: var(--dark-blue); margin-bottom: 20px; display: block; }
    .recipient-list { background: white; border-radius: 16px; overflow: visible; border-radius: 16px;border: 1px solid #EAECF0;}
    .recipient-item {display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: 0.2s; position: relative; background: white;}
    .recipient-item:last-child { border-bottom: none; }
    .recipient-item:hover { background: #f8fafc; }
    .recipient-item.selected {background: #EBF2FA; border: 2px solid var(--dark-blue) !important; border-radius: 12px; margin: 4px;}
    .select-indicator {width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--dark-blue); display: flex; align-items: center; justify-content: center; background: var(--dark-blue); flex-shrink: 0;}
    .recipient-avatar { width: 44px; height: 44px; border-radius: 50%; background: #003d63; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 13px; flex-shrink: 0; }
    .recipient-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
    .recipient-info { margin-left: 15px; flex-grow: 1; text-align: left;}
    .recipient-name { font-weight: bold; font-size: 14px; color: var(--dark-blue); margin: 0 0 4px 0; }
    .recipient-phone { font-size: 11px; color: var(--text-muted); margin: 0; }

    .amount-input-card { background: white; border-radius: 16px; padding: 25px; margin-top: 20px; border: 1px solid #EAECF0; width: 100%; box-sizing: border-box; }
    .amount-val-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
    .amount-field { flex-grow: 1; }
    .amount-field label { font-size: 12px; color: var(--text-muted); display: block; margin-bottom: 8px; text-align: left;}
    .input-with-currency { display: flex; align-items: center; gap: 10px; }
    .input-with-currency input { font-size: 24px; font-weight: bold; border: none; outline: none; width: 100%; color: var(--dark-blue);}
    .currency-tag { display: flex; align-items: center; gap: 8px; background: #f8fafc; padding: 6px 12px; border-radius: 10px; font-size: 13px; font-weight: bold; border: 1px solid #e2e8f0; cursor: pointer; }

    .balance-info { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted); margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px dashed #e2e8f0; }
    .balance-info .add { color: var(--dark-blue); text-decoration: none; font-weight: bold; border-bottom: 2px solid; }

    .fee-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 12px; color: var(--text-muted); }
    .total-row { display: flex; justify-content: space-between; font-size: 16px; font-weight: bold; color: var(--dark-blue); margin-top: 15px; padding-top: 15px; border-top: 1px solid #f1f5f9; }

    .note-box { width: 100%; border: 1px solid #e2e8f0; border-radius: 12px; padding: 15px; font-family: inherit; font-size: 13px; outline: none; min-height: 90px; resize: none; box-sizing: border-box; }

    .step-footer { padding: 20px 40px; background: #e9effa; border-top: 1px solid #EAECF0; display: flex; justify-content: flex-end; gap: 15px; }
    .btn-cancel { background: transparent; border: 1px solid #003d63; color: var(--dark-blue); padding: 12px 30px; border-radius: 30px; font-weight: bold; cursor: pointer; transition: 0.2s; }
    .btn-continue { background: var(--dark-blue); color: white; border: none; padding: 12px 35px; border-radius: 30px; font-weight: bold; cursor: pointer; display: flex; align-items: center; transition: 0.2s; }
    .btn-continue:hover { background: #00233d; }

    .review-section { background: white; border-radius: 16px; padding: 25px; margin-bottom: 20px; border: 1px solid #EAECF0; width: 100%; box-sizing: border-box;}
    .review-row { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 14px; }
    .review-row .label { color: var(--text-muted); }
    .review-row .value { font-weight: bold; color: var(--dark-blue); }
    .review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .edit-btn { font-size: 13px; color: var(--dark-blue); font-weight: bold; text-decoration: none; display: flex; align-items: center; gap: 5px; }

    /* Invoice Extra */
    .invoice-card { background: white; border-radius: 24px; padding: 50px 40px; border: 1px solid #EAECF0; text-align: center; max-width: 550px; width: 100%; }
    .success-badge { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px auto; }
    .invoice-details { text-align: left; background: #f8fafc; border-radius: 16px; padding: 25px; margin: 30px 0; border: 1px solid #EAECF0; }
    .inv-row { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 14px; }
    .inv-row .label { color: #475467; }
    .inv-row .value { font-weight: bold; color: var(--dark-blue); }

    .change-btn { background: white; border: 1.5px solid #e2e8f0; border-radius: 20px; padding: 10px 15px; font-size: 12px; font-weight: 600; color: #1e293b; cursor: pointer;}

    /* Invoice Tool Buttons */
    .inv-actions { margin-top: 25px; }
    .inv-tool-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #EAECF0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: white; }
    .inv-tool-btn:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); border-color: var(--dark-blue); background-color: #f8fafc; }
    .inv-tool-btn img { width: 52px; height: 52px; transition: transform 0.3s ease; }
    .inv-tool-btn:hover img { transform: scale(1.1); }


    /* --- Responsive Multi-Step Flow --- */
    @media (max-width: 992px) {
      .send-money-layout { flex-direction: column; padding: 10px; gap: 10px; }
      .stepper-sidebar { display: none; }

      .send-money-content { border-radius: 12px; }
      .step-header-area { padding: 20px; }
      .step-body { padding: 20px 15px; }
      .step-card { padding: 20px 15px; }
      .step-footer { padding: 15px 20px; }
      .change-btn {padding: 2px 12px;}
    }

    @media (max-width: 600px) {
      .step-item { flex-direction: column; text-align: center; font-size: 9px; padding: 8px 4px; }
      .step-item .step-num { margin: 0 auto; }

      .btn-cancel, .btn-continue { padding: 12px 20px; font-size: 13px; }
      .change-btn {padding: 2px 12px;}
    }

     /* Toggle Switch Styles */
    .toggle-container { display: flex; align-items: center; gap: 10px; }
    .switch { position: relative; display: inline-block; width: 44px; 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: #cbd5e1; 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: var(--dark-blue); }
    input:checked + .slider:before { transform: translateX(20px); }

    /* Form Styles Override */
    .account-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; margin-top: 30px; }
    .field-group { display: flex; flex-direction: column; gap: 8px; }
    .field-group label { font-size: 13px; font-weight: 500; color: var(--text-muted); }
    .account-input {
      padding: 14px 18px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      font-size: 14px;
      outline: none;
      background: white;
      color: #1e293b;
      font-family: inherit;
    }
    .account-input:disabled { background-color: #f8fafc; color: #64748b; cursor: not-allowed; }

    .upload-box {
      border: 1px dashed #cbd5e1;
      border-radius: 12px;
      padding: 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      font-size: 13px;
      color: var(--text-muted);
      background: #fafbfc;
    }
    .upload-box:hover { border-color: var(--dark-blue); background: #f0f7ff; }

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

  /* span 2 wali div ko single column par reset karein */
  .account-form-grid > div[style*="span 2"],
  .account-form-grid > div[style*="grid-column"] {
    grid-column: span 1 !important;
  }

  /* Toggle row stack karein */
  .account-form-grid > div[style*="span 2"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Step body padding kam karein */
  .step-body {
    padding: 20px 15px !important;
  }

  /* Step footer bhi */
  .step-footer {
    padding: 15px 20px;
    flex-direction: row;
    gap: 10px;
  }
  .step-footer .btn-cancel,
  .step-footer .btn-continue {
    flex: 1;
    justify-content: center;
    padding: 12px 10px;
    font-size: 13px;
  }

  /* Profile header stack */
  .send-money-content > div:first-child {
    /* flex-direction: column !important; */
    align-items: flex-start !important;
    gap: 12px;
    padding: 18px 20px !important;
  }
  #edit-mode-btn {
    width: 100%;
    justify-content: center;
  }
}


     .al-content-wrap {
      padding: 35px 40px;
      display: flex;
      flex-direction: column;
      gap: 30px;
      overflow-y: auto;
      flex-grow: 1;
    }

    /* Current Level Card */
    .current-level-card {
      background: white;
      border: 1px solid #EAECF0;
      border-radius: 20px;
      padding: 28px 30px;
      display: flex;
      flex-direction: column;
      gap: 22px;
    }
    .current-level-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    .current-level-top h3 {
      font-size: 18px;
      font-weight: 700;
      color: var(--dark-blue);
      margin: 0 0 6px 0;
    }
    .current-level-top p {
      font-size: 13px;
      color: var(--text-muted);
      margin: 0;
    }
    .level-icon-badge {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #fff8e6;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* Level Steps */
    .level-steps {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    .level-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 40px;
      border-radius: 999px;
      border: 1.5px solid #e2e8f0;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      background: white;
      cursor: pointer;
      transition: 0.2s;
    }
    .level-badge .badge-icon {
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .level-badge.active {
      border-color: #f59e0b;
      color: #f59e0b;
      background: #fffbeb;
    }
    .level-badge.inactive { opacity: 0.6; }

    /* Section Title */
    .limit-section-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 17px;
      font-weight: 700;
      color: var(--dark-blue);
      margin: 0;
    }
    .limit-section-title svg { flex-shrink: 0; }

    /* Limit Cards Grid */
    .limit-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .limit-card {
      background: white;
      border: 1px solid #EAECF0;
      border-radius: 16px;
      padding: 22px 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .limit-card-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    .limit-period {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 500;
      margin: 0 0 3px 0;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .limit-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--dark-blue);
      margin: 0;
    }
    .limit-arrow {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .limit-arrow.up { background: #fef2f2; color: #ef4444; }
    .limit-arrow.down { background: #f0fdf4; color: #10b981; }

    .limit-amount-row {
      display: flex;
      align-items: baseline;
      gap: 6px;
    }
    .limit-used-amount {
      font-size: 24px;
      font-weight: 700;
      line-height: 1;
    }
    .limit-used-amount.red { color: #ef4444; }
    .limit-used-amount.green { color: #10b981; }
    .limit-used-amount.orange { color: #f59e0b; }

    .limit-total {
      font-size: 13px;
      color: var(--text-muted);
      font-weight: 500;
    }
    .limit-unit {
      font-size: 13px;
      font-weight: 700;
      color: var(--dark-blue);
    }

    .limit-percent-label {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
    }

    /* Progress Bar */
    .progress-bar-track {
      width: 100%;
      height: 6px;
      background: #f1f5f9;
      border-radius: 999px;
      overflow: hidden;
    }
    .progress-bar-fill {
      height: 100%;
      border-radius: 999px;
      transition: width 0.6s ease;
    }
    .progress-bar-fill.red { background: #ef4444; }
    .progress-bar-fill.green { background: #10b981; }
    .progress-bar-fill.orange { background: #f59e0b; }

    /* Sidebar active override for account level */
    .sidebar-active {
      background: white !important;
      color: var(--dark-blue) !important;
      box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    }
    .sidebar-active .step-num {
      background: var(--dark-blue) !important;
    }
    .sidebar-active .step-num img {
      filter: brightness(0) invert(1);
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 900px) {
      .limit-cards-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .send-money-layout { flex-direction: column; gap: 0; padding: 0; background: #f4f7fb; }
      .stepper-sidebar {
        width: 100%;
        border-radius: 0;
        padding: 15px 10px 10px 10px;
        background: #ebf2fa;
        border-bottom: 1px solid #EAECF0;
      }
      .sidebar-scroll-row {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .sidebar-scroll-row::-webkit-scrollbar { display: none; }
      .stepper-sidebar .step-item {
        white-space: nowrap;
        padding: 10px 16px;
        margin-bottom: 0;
        font-size: 12px;
        border-radius: 999px;
      }
      .stepper-header { padding-left: 10px; margin-bottom: 12px; font-size: 10px; }
      .send-money-content { border-radius: 0; }
      .al-content-wrap { padding: 20px; gap: 20px; }
      .limit-cards-grid { grid-template-columns: 1fr; }
      .level-steps { gap: 8px; }
      .level-badge { padding: 8px 14px; font-size: 12px; }
    }


    .lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  background: white;
  transition: all 0.2s;
  min-width: 100px;
  justify-content: space-between;
  user-select: none;
}

.lang-option.active {
  border-color: var(--dark-blue);
  background: #f0f7ff;
  color: var(--dark-blue);
}

.custom-radio {
  width: 22px;
  height: 22px;
  border: 2px solid #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.lang-option.active .custom-radio {
  border-color: var(--dark-blue);
  background: var(--dark-blue);
}

.inner-dot {
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition: all 0.25s ease;
}

.lang-option.active .inner-dot {
  opacity: 1;
  transform: scale(1);
}

 /* Transaction History Styles */
    .tx-page-header {
      padding: 24px 35px;
      border-bottom: 1px solid #EAECF0;
      background: #f4f7fb;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px;
    }
    .tx-page-header-left h2 {
      font-size: 20px; font-weight: 700;
      color: var(--dark-blue); margin: 0 0 5px 0;
    }
    .tx-page-header-left p {
      font-size: 13px; color: var(--text-muted); margin: 0;
    }

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

    .tx-search-box {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #e2e8f0;
      border-radius: 999px;
      padding: 8px 18px;
      background: white;
      font-size: 13px;
      color: var(--text-muted);
    }
    .tx-search-box input {
      border: none;
      outline: none;
      font-family: inherit;
      font-size: 13px;
      color: #1e293b;
      width: 200px;
      background: transparent;
    }
    .tx-search-box input::placeholder { color: #94a3b8; }

    .tx-filter-btn {
      display: flex;
      align-items: center;
      gap: 7px;
      border: 1px solid #e2e8f0;
      border-radius: 999px;
      padding: 8px 18px;
      background: white;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      color: var(--dark-blue);
      font-family: inherit;
      transition: 0.2s;
    }
    .tx-filter-btn:hover { background: #f1f5f9; }

    /* Main Card Container - Screenshot jaisa */
    .tx-card {
      background: white;
      border: 1px solid #EAECF0;
      border-radius: 16px;
      margin: 20px 35px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .tx-table-wrap {
      padding: 0;
    }

    .tx-row {
      display: grid;
      grid-template-columns: 2fr 2fr 1.8fr;
      align-items: center;
      padding: 18px 25px;
      border-bottom: 1px solid #f1f5f9;
      transition: 0.15s;
    }
    .tx-row:hover {
      background: #f8fafc;
    }
    .tx-row:last-child {
      border-bottom: none;
    }

    .tx-user {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .tx-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: #fef2f2;
      border: 1px solid #fecaca;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .tx-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--dark-blue);
      margin: 0 0 3px 0;
    }
    .tx-phone {
      font-size: 12px;
      color: var(--text-muted);
      margin: 0;
    }

    .tx-meta {
      text-align: left;
    }
    .tx-type {
      font-size: 13px;
      font-weight: 600;
      color: #1e293b;
      margin: 0 0 4px 0;
    }
    .tx-date {
      font-size: 12px;
      color: var(--text-muted);
      margin: 0;
    }

    .tx-amount-col {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
    }
    .tx-amount {
      font-size: 17px;
      font-weight: 700;
      color: #1e293b;
    }
    .tx-amount span {
      font-size: 13px;
      font-weight: 700;
      color: var(--dark-blue);
    }

    .tx-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .tx-tag {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 999px;
      border: 1px solid #e2e8f0;
      color: var(--text-muted);
      background: white;
    }
    .tx-tag.sent {
      background: #f0fdf4;
      border-color: #10b981;
      color: #10b981;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .tx-tag.sent::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #10b981;
    }

    /* Pagination */
    .tx-pagination {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 35px;
      border-top: 1px solid #EAECF0;
      background: white;
      flex-wrap: wrap;
      gap: 10px;
      border-radius: 0 0 16px 16px;
    }

    .tx-show-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
    .tx-show-row select {
      border: 1px solid #e2e8f0; border-radius: 8px; padding: 5px 10px;
      font-family: inherit; font-size: 13px; color: #1e293b; outline: none; cursor: pointer;
    }
    .tx-pages { display: flex; gap: 6px; align-items: center; }
    .tx-page-btn {
      width: 34px; height: 34px; border-radius: 8px; border: 1px solid #e2e8f0;
      background: white; font-size: 13px; font-weight: 600; color: #1e293b;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      font-family: inherit; transition: 0.2s;
    }
    .tx-page-btn:hover { background: #f1f5f9; }
    .tx-page-btn.active { background: var(--dark-blue); color: white; border-color: var(--dark-blue); }
    .tx-page-btn.nav { border-radius: 50%; }

   @media (max-width: 768px) {
      .tx-page-header { padding: 18px 20px; flex-direction: column; align-items: flex-start; }
      .tx-search-filter { width: 100%; }
      .tx-search-box input { width: 120px; }
      .tx-table-wrap { padding: 15px 15px; }
      .tx-row { grid-template-columns: 1fr; gap: 8px; padding: 15px 10px; }
      .tx-amount-col { align-items: flex-start; }
      .tx-tags { justify-content: flex-start; }
      .tx-pagination { padding: 15px 20px; }
    }

    .qr-page-header {
      padding: 24px 35px;
      border-bottom: 1px solid #EAECF0;
      background: #f4f7fb;
    }
    .qr-page-header h2 { font-size: 20px; font-weight: 700; color: var(--dark-blue); margin: 0 0 5px 0; }
    .qr-page-header p { font-size: 13px; color: var(--text-muted); margin: 0; }

    .qr-center-wrap {
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
    }
    .qr-card {
      background: white;
      border: 1px solid #EAECF0;
      border-radius: 20px;
      padding: 45px 50px;
      width: 100%;
      max-width: 420px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }
    .qr-icon-circle {
      width: 54px; height: 54px; border-radius: 50%;
      background: var(--dark-blue);
      display: flex; align-items: center; justify-content: center;
    }
    .qr-card h2 {
      font-size: 22px; font-weight: 700; color: #1e293b; margin: 0;
    }
    .qr-card .qr-subtitle {
      font-size: 14px; font-weight: 600; color: #1e293b; margin: 0;
    }
    .qr-card .qr-name {
      font-size: 13px; color: var(--text-muted); margin: 0;
    }
    .qr-image-box {
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      background: white;
      margin: 4px 0;
    }
    /* Generated QR using CSS grid pattern */
    .qr-grid {
      width: 120px; height: 120px;
      display: grid; grid-template-columns: repeat(10, 1fr);
      gap: 2px;
    }
    .qr-cell { border-radius: 1px; }
    .qr-cell.b { background: #1e293b; }
    .qr-cell.w { background: white; }

    .qr-back-btn {
      width: 100%; height: 48px;
      background: white; color: #1e293b;
      border: 1.5px solid #e2e8f0;
      border-radius: 30px; font-size: 15px; font-weight: 600;
      cursor: pointer; font-family: inherit; transition: 0.2s;
      margin-top: 6px;
    }
    .qr-back-btn:hover { background: #f8fafc; border-color: #cbd5e1; }

     /* ===== MERCHANT STEPPER ===== */
  .merchant-header {
    padding: 24px 35px;
    border-bottom: 1px solid #EAECF0;
    background: #f4f7fb;
  }
  .merchant-header h2 { font-size: 20px; font-weight: 700; color: var(--dark-blue); margin: 0 0 4px 0; }
  .merchant-header p { font-size: 13px; color: var(--text-muted); margin: 0; }

  /* Top Stepper Progress */
  .merchant-progress {
    padding: 28px 40px 20px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  .mp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
  }
  .mp-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: #f1f5f9; border: 2px solid #e2e8f0;
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s; flex-shrink: 0;
  }
  .mp-icon.active { background: var(--dark-blue); border-color: var(--dark-blue); }
  .mp-icon.done { background: #00C950; border-color: #00C950; }
  .mp-label { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
  .mp-label.active, .mp-label.done { color: var(--dark-blue); }
  .mp-line {
    width: 100px; height: 3px;
    background: #e2e8f0; border-radius: 2px;
    margin: 0 8px; margin-bottom: 22px; flex-shrink: 0;
    transition: 0.4s;
  }
  .mp-line.done { background: #10b981; }

  /* Content area */
  .merchant-body {
    flex-grow: 1;
    padding: 30px 40px;
    display: none;
    flex-direction: column;
  }
  .merchant-body.active { display: flex; }

  /* Footer */
  .merchant-footer {
    padding: 20px 35px;
    border-top: 1px solid #EAECF0;
    background: white;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
  .m-btn-back {
    border: 1.5px solid #e2e8f0; background: white; color: #1e293b;
    padding: 11px 28px; border-radius: 30px; font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: 0.2s;
  }
  .m-btn-back:hover { background: #f8fafc; }
  .m-btn-next {
    background: var(--dark-blue); color: white; border: none;
    padding: 11px 28px; border-radius: 30px; font-size: 14px; font-weight: 700;
    cursor: pointer; font-family: inherit; transition: 0.2s;
    display: flex; align-items: center; gap: 8px;
  }
  .m-btn-next:hover { background: #00233d; }

  /* ===== STEP 1: Benefits ===== */
  .benefits-title { text-align: center; font-size: 20px; font-weight: 700; color: #1e293b; margin: 0 0 6px 0; }
  .benefits-sub { text-align: center; font-size: 13px; color: var(--text-muted); margin: 0 0 28px 0; }
  .benefits-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  }
  .benefit-card {
    border-radius: 16px; padding: 24px 20px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .benefit-card.blue { background: linear-gradient(to bottom, #EFF6FF, #DBEAFE); border: 1px solid #BEDBFF;}
  .benefit-card.purple { background: linear-gradient(to bottom, #FAF5FF, #F3E8FF); border: 1px solid #E9D4FF;}
  .benefit-card.green { background: linear-gradient(to bottom, #F0FDF4, #DCFCE7); border: 1px solid #B9F8CF;}
  .benefit-card.orange { background: linear-gradient(to bottom, #FFF7ED, #FFD6A8); border: 1px solid #FFD6A8;}
  .benefit-card.yellow { background: linear-gradient(to bottom, #FFFBEB, #F3EAC9); border: 1px solid #E9D4FF;}
  .benefit-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
  }
  .benefit-icon.blue { background: #3b82f6; }
  .benefit-icon.purple { background: #8b5cf6; }
  .benefit-icon.green { background: #10b981; }
  .benefit-icon.orange { background: #f97316; }
  .benefit-icon.yellow { background: #eab308; }
  .benefit-card h4 { font-size: 15px; font-weight: 700; color: #1e293b; margin: 0 0 6px 0; }
  .benefit-card p { font-size: 13px; color: #475569; margin: 0; line-height: 1.5; }
  .benefit-card p b { color: var(--dark-blue); }

  /* ===== STEP 2: Business Info ===== */
  .biz-profile { text-align: center; margin-bottom: 28px; }
  .biz-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--dark-blue); margin: 0 auto 10px auto;
  }
  .biz-name { font-size: 18px; font-weight: 700; color: #1e293b; margin: 0 0 4px 0; }
  .biz-phone { font-size: 13px; color: var(--text-muted); margin: 0; }
  .biz-form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  }
  .biz-field { display: flex; flex-direction: column; gap: 7px; }
  .biz-field label {
    font-size: 13px; font-weight: 600; color: #334155;
    display: flex; align-items: center; gap: 3px;
  }
  .biz-field label span { color: #ef4444; }
  .biz-field input {
    height: 48px; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 0 16px; font-size: 14px; font-family: inherit; outline: none;
    color: #1e293b; transition: 0.2s;
  }
  .biz-field input:focus { border-color: var(--dark-blue); box-shadow: 0 0 0 3px rgba(0,61,99,0.06); }
  .biz-field input::placeholder { color: #94a3b8; }

  /* ===== STEP 3 & 4: Upload ===== */
  .upload-title { text-align: center; font-size: 20px; font-weight: 700; color: #1e293b; margin: 0 0 6px 0; }
  .upload-sub { text-align: center; font-size: 13px; color: var(--text-muted); margin: 0 0 28px 0; }
  .upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
  .upload-box-card {
    border: 1.5px dashed #cbd5e1; border-radius: 16px; padding: 30px 20px;
    text-align: center; cursor: pointer; transition: 0.2s; background: white;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
  }
  .upload-box-card:hover { border-color: var(--dark-blue); background: #f0f7ff; }
  .upload-box-card.uploaded { border-color: #10b981; border-style: solid; }
  .upload-file-icon { color: #ef4444; }
  .upload-check-icon { color: var(--dark-blue); }
  .upload-box-card h4 { font-size: 14px; font-weight: 700; color: #1e293b; margin: 0; }
  .upload-box-card p { font-size: 12px; color: #CA8504; margin: 0; }
  .upload-choose-btn {
    background: var(--dark-blue); color: white; border: none;
    padding: 14px 22px; border-radius: 999px; font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: inherit; transition: 0.2s;
  }
  .upload-choose-btn:hover { background: #00233d; }
  .upload-filename {
    background: #f0fdf4; border: 1px solid #10b981; border-radius: 999px;
    padding: 4px 12px; font-size: 12px; font-weight: 600; color: #10b981;
    display: flex; align-items: center; gap: 6px;
  }
  .upload-pending { font-size: 12px; font-weight: 600; color: #f59e0b; }
  .upload-change { font-size: 13px; font-weight: 600; color: #334155; cursor: pointer; }
  .upload-change:hover { color: var(--dark-blue); }

  .upload-info-bar {
    display: flex; justify-content: space-between; align-items: center;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 10px 16px; font-size: 12px; color: var(--text-muted);
    flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
  }
  .upload-format-tags { display: flex; gap: 6px; align-items: center; }
  .fmt-tag {
    background: white; border: 1px solid #e2e8f0; border-radius: 6px;
    padding: 2px 8px; font-size: 11px; font-weight: 600; color: #475569;
  }
  .secure-bar {
    background: #e9effa; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 10px 16px; font-size: 13px; color: var(--text-muted);
    display: flex; align-items: center; gap: 8px;
  }

  /* ===== STEP 5: Review ===== */
  .review-title { font-size: 20px; font-weight: 700; color: #1e293b; margin: 0 0 6px 0; }
  .review-sub { text-align: center; font-size: 13px; color: var(--text-muted); margin: 0 0 24px 0; }
  .review-docs-box {
    background: white; border: 1px solid #EAECF0; border-radius: 16px;
    overflow: hidden; margin-bottom: 20px;
  }
  .review-docs-header {
    padding: 16px 20px; background: #f0fdf4; border-bottom: 1px solid #d1fae5;
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: #1e293b;
  }
  .review-doc-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid #f1f5f9;
  }
  .review-doc-row:last-child { border-bottom: none; }
  .review-doc-left { display: flex; align-items: center; gap: 12px; }
  .review-doc-name { font-size: 14px; font-weight: 600; color: #1e293b; margin: 0 0 3px 0; }
  .review-doc-type { font-size: 12px; color: var(--text-muted); margin: 0; }
  .verified-badge {
    background: #00A63E; color: white; border: none;
    padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; gap: 5px;
  }
  .whats-next-box {
    background: #e9effa; border: 1px solid #EAECF0; border-radius: 16px; padding: 24px;
  }
  .whats-next-box h4 { font-size: 15px; font-weight: 700; color: #1e293b; margin: 0 0 14px 0; }
  .whats-next-box ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .whats-next-box ul li {
    font-size: 13px; color: #475569; display: flex; align-items: center; gap: 8px;
  }
  .whats-next-box ul li::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--dark-blue); flex-shrink: 0;
  }

  @media (max-width: 768px) {
    .benefits-grid { grid-template-columns: 1fr; }
    .biz-form-grid { grid-template-columns: 1fr; }
    .upload-grid { grid-template-columns: 1fr; }
    .merchant-body { padding: 20px; }
    .merchant-progress { padding: 20px 15px 12px 15px; }
    .mp-line { width: 50px; }
    .merchant-footer { padding: 15px 20px; }
    .merchant-header { padding: 18px 20px; }

  }

    /* ===== MODAL BASE STYLES ===== */
    .modal-overlay {
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.4);
      display: none; /* Hidden by default */
      align-items: center; justify-content: center;
      z-index: 2000;
      backdrop-filter: blur(4px);
    }
    .modal-overlay.show { display: flex; }

    .modal-box {
      background: white;
      border-radius: 24px;
      width: 100%;
      max-width: 540px;
      padding: 30px;
      position: relative;
      box-shadow: 0 10px 40px rgba(0,0,0,0.12);
      animation: modalFadeUp 0.3s ease-out;
    }
    @keyframes modalFadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .modal-close-btn {
      position: absolute;
      top: 20px; right: 20px;
      width: 32px; height: 32px;
      border-radius: 50%;
      background: #f1f5f9;
      border: none;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: #64748b; font-size: 20px;
      transition: 0.2s; z-index: 10;
    }
    .modal-close-btn:hover { background: #e2e8f0; color: #1e293b; }

    /* Receipt Modal Specifics */
    .receipt-modal { text-align: center; }
    .receipt-logo { height: 28px; margin-bottom: 25px; }
    .receipt-table {
      background: #F5F9FF; border-radius: 16px;
      padding: 20px; margin-bottom: 25px;
      border: 1px solid #f1f5f9;
      text-align: left; width: 100%; box-sizing: border-box;
    }
    .receipt-row {
      display: flex; justify-content: space-between;
      padding: 8px 0; border-bottom: 1px dashed #e2e8f0;
    }
    .receipt-row:last-child { border-bottom: none; }
    .receipt-label { font-size: 13px; color: #64748b; font-weight: 500; }
    .receipt-value { font-size: 13px; color: var(--dark-blue); font-weight: 600; text-align: right; }

    .receipt-qr {
      margin: 10px auto 25px auto;
      padding: 12px; border: 1px solid #e2e8f0;
      border-radius: 12px; display: inline-block;
      background: white;
    }
    .receipt-actions { display: flex; justify-content: center; gap: 30px; }
.receipt-action-btn{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #e2e8f0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.receipt-action-btn:hover{
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    border-color: var(--dark-blue);
    background-color: #f8fafc;
}

.receipt-action-btn img{
    width: 52px;
    height: 52px;
    transition: transform 0.3s ease;
}

.receipt-action-btn:hover img{
    transform: scale(1.1);
}

    /* Filter Modal Specifics */
    .filter-modal { max-width: 680px; padding: 40px 35px; }
    .filter-header-icon {
      width: 44px; height: 44px; border-radius: 50%;
      background: var(--dark-blue); color: white;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 15px auto;
    }
    .filter-title { font-size: 20px; font-weight: 700; color: #1e293b; margin-bottom: 5px; text-align: center; }
    .filter-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 25px; text-align: center; }

    .filter-tags-grid {
      display: flex; flex-wrap: wrap; gap: 10px;
      justify-content: center; margin-bottom: 30px;
    }
    .filter-tag {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 16px; border: 1px solid #e2e8f0;
      border-radius: 10px; cursor: pointer;
      font-size: 12px; font-weight: 600; color: var(--text-muted);
      transition: 0.2s;
      user-select: none;
    }
    .filter-tag:hover { background: #f8fafc; }
    .filter-tag.active {
      border-color: var(--dark-blue); background: #f0f7ff; color: var(--dark-blue);
    }
    .filter-radio-circle {
      width: 14px; height: 14px; border: 1.5px solid #cbd5e1;
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      transition: 0.2s;
      background: white;
    }
    .filter-tag.active .filter-radio-circle {
      border-color: var(--dark-blue); background: var(--dark-blue);
    }
    .filter-radio-dot {
      width: 6px; height: 6px; background: white;
      border-radius: 50%; opacity: 0; transform: scale(0);
      transition: 0.2s;
    }
    .filter-tag.active .filter-radio-dot { opacity: 1; transform: scale(1); }

    .filter-footer { display: flex; gap: 15px; margin-top: 10px; }
    .filter-btn-back {
      flex: 1; height: 50px; border: 1.5px solid #e2e8f0;
      border-radius: 30px; background: white; font-weight: 700;
      color: #1e293b; cursor: pointer; transition: 0.2s;
      font-family: inherit;
      width: 200px;
    }
    .filter-btn-apply {
      flex: 1; height: 50px; border: none;
      border-radius: 30px; background: var(--dark-blue); font-weight: 700;
      color: white; cursor: pointer; transition: 0.2s;
      font-family: inherit;
      width: 200px;
    }
    .filter-btn-apply:hover { background: #00233d; }

    @media (max-width: 600px) {
      .modal-box { border-radius: 20px; padding: 25px; margin: 15px; width: calc(100% - 30px); max-width: none; max-height: 90vh; overflow-y: auto; }
      .receipt-modal { padding: 35px 20px 25px 20px; }
      .modal-close-btn { top: 15px; right: 15px; width: 28px; height: 28px; font-size: 18px; }
      .receipt-actions { gap: 15px; }
      .receipt-action-btn img { width: 40px; height: 40px; }
      .filter-modal { padding: 25px 20px; }
      .filter-tags-grid { gap: 8px; max-height: 300px; overflow-y: auto; padding-right: 5px; }
      .filter-tag { padding: 8px 12px; font-size: 11px; }
      .filter-footer { flex-direction: column-reverse; }
      .filter-btn-back{display: none;}
      .filter-btn-apply{padding: 14px;}
    }

        /* ── Settings Modal ── */
    .settings-modal {
      max-width: 500px;
      padding: 36px 30px 28px;
      border-radius: 24px;
      text-align: center;
      max-height: 90vh;
      overflow-y: auto;
    }

    .settings-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 24px;
      text-align: left;
    }

    .settings-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      background: #F9FAFB;
      border: 1px solid #F2F4F7;
      border-radius: 14px;
      cursor: pointer;
      transition: background 0.15s;
      width: 470px;
      box-sizing: border-box;
    }

    @media (max-width: 600px) {
      .settings-item {
        width: 100%;
      }

      .btn-delete-confirm {
        width: 270px
      }
    }
    .settings-item:hover { background: #F1F3F5; }

    .settings-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .settings-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .settings-label {
      font-size: 14px;
      font-weight: 600;
      color: #1D2939;
    }

    /* "Customer Support" section divider label */
    .settings-section-label {
      font-size: 12px;
      font-weight: 600;
      color: #667085;
      padding: 4px 4px 2px;
      text-align: left;
    }

    /* Toggle Switch */
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      flex-shrink: 0;
    }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-slider {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background-color: #EAECF0;
      transition: .3s;
      border-radius: 24px;
    }
    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background: white;
      transition: .3s;
      border-radius: 50%;
      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }
    input:checked + .toggle-slider { background-color: #003357; }
    input:checked + .toggle-slider:before { transform: translateX(20px); }

    .btn-close-settings {
      width: 100%;
      padding: 14px;
      border: 1.5px solid #EAECF0;
      border-radius: 30px;
      background: white;
      font-size: 15px;
      font-weight: 700;
      color: #344054;
      cursor: pointer;
      transition: background 0.15s;
    }
    .btn-close-settings:hover { background: #F9FAFB; }

    /* ── Delete Account Modal ── */
    .delete-account-modal {
      text-align: center;
      max-width: 440px;
      padding: 36px 30px 28px;
      border-radius: 24px;
    }



    .delete-title {
      font-size: 20px;
      font-weight: 700;
      color: #101828;
      margin: 0 0 12px;
    }

    .delete-sub {
      font-size: 14px;
      color: #667085;
      margin: 0 0 28px;
      line-height: 1.6;
      padding: 0 8px;
    }

    .delete-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .btn-delete-confirm {
      width: 100%;
      padding: 15px;
      background: #003357;
      color: white;
      border: none;
      border-radius: 30px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s;
    }
    .btn-delete-confirm:hover { background: #002244; }

    .btn-delete-cancel {
      width: 100%;
      padding: 15px;
      background: white;
      color: #344054;
      border: 1.5px solid #EAECF0;
      border-radius: 30px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s;
    }
    .btn-delete-cancel:hover { background: #F9FAFB; }

     /* ── Page wrapper ── */
    .content-wraper-area {
      max-width: 1200px;
      margin: 0 auto;
      padding: 32px 24px;
    }

    /* ── Top header row ── */
    .locator-page-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }

    .locator-page-header-left h2 {
      font-size: 20px;
      font-weight: 700;
      color: var(--dark-blue);
      margin: 0 0 4px 0;
    }

    .locator-page-header-left p {
      font-size: 13px;
      color: var(--text-muted);
      margin: 0;
    }

    .locator-page-header-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .locator-address-text {
      font-size: 13px;
      color: #334155;
      font-weight: 500;
      text-align: right;
      line-height: 1.5;
      max-width: 360px;
    }

    .locator-icon-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1.5px solid #e2e8f0;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: 0.2s;
      flex-shrink: 0;
    }

    .locator-icon-btn:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    .locator-icon-btn svg {
      width: 18px;
      height: 18px;
      color: #334155;
    }

    /* ── Map card ── */
    .locator-card {
      background: white;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }

    .map-wrapper {
      position: relative;
      width: 100%;
    }

    .map-container {
      height: 560px;
      width: 100%;
      background: #e8f0e8;
      position: relative;
      overflow: hidden;
    }

    /* Map/Satellite toggle */
    .map-toggle {
      position: absolute;
      top: 16px;
      left: 16px;
      display: flex;
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      z-index: 10;
    }

    .map-toggle-btn {
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 600;
      border: none;
      background: transparent;
      cursor: pointer;
      color: #64748b;
      transition: 0.2s;
      font-family: inherit;
    }

    .map-toggle-btn.active {
      background: white;
      color: #1e293b;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }

    /* Fullscreen btn */
    .map-fullscreen-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 36px;
      height: 36px;
      background: white;
      border: none;
      border-radius: 4px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
    }

    /* ── Merchant info panel ── */
    .merchant-info-panel {
      padding: 20px 24px;
      border-top: 1px solid #e2e8f0;
      background: #fafbfc;
    }

    .merchant-info-panel.hidden { display: none; }

    .merchant-info-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }

    .merchant-name {
      font-size: 16px;
      font-weight: 700;
      color: #1e293b;
      margin: 0 0 4px 0;
    }

    .merchant-address {
      font-size: 13px;
      color: #64748b;
      margin: 0;
      line-height: 1.5;
    }

    .merchant-actions {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-shrink: 0;
    }

    .btn-share, .btn-direction {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 18px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 44px;
      cursor: pointer;
      transition: 0.2s;
      font-family: inherit;
      background: rgba(199,43,47,0.05);
      color: #1e293b;
      border: 1.5px solid #DC3545;
    }

    .btn-share:hover { background: #DC3545; color: white; }
    .btn-direction:hover { background: #DC3545; color: white; }

    /* ── Custom locator toast (not toastr.js) ── */
    .locator-toast {
      position: fixed;
      bottom: 30px;
      right: 30px;
      background: var(--dark-blue, #003d63);
      color: white;
      padding: 14px 22px;
      border-radius: 10px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.15);
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 10000;
      font-size: 14px;
      font-weight: 500;
      animation: slideIn 0.3s ease-out;
    }

    .locator-toast.hide { animation: slideOut 0.3s ease-out; }

    @keyframes slideIn {
      from { transform: translateX(400px); opacity: 0; }
      to   { transform: translateX(0);     opacity: 1; }
    }
    @keyframes slideOut {
      from { transform: translateX(0);     opacity: 1; }
      to   { transform: translateX(400px); opacity: 0; }
    }

    /* Responsive */
    @media (max-width: 768px) {
      .locator-page-header { flex-direction: column; }
      .locator-address-text { text-align: left; }
      .map-container { height: 380px; }
      .merchant-info-content { flex-direction: column; align-items: flex-start; }
      .merchant-actions { width: 100%; flex-direction: column; }
      .btn-share, .btn-direction { width: 100%; justify-content: center; }
    }


    /* ── Voucher Sections ── */
    .voucher-sections {
      padding: 20px 24px 32px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .voucher-section-box {
      background: #f5f9ff;
      border: 1px solid #e2e8f0;
      border-radius: 18px;
      padding: 24px;
    }

    .voucher-section-title {
      font-size: 16px;
      font-weight: 700;
      color: #1e293b;
      margin: 0 0 16px;
    }

    .voucher-section-divider {
      border: none;
      border-bottom: 1px solid #EAECF0;
      margin: 0 -24px 20px -24px; /* bleed through the 24px box padding */
    }

    .voucher-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    /* ── Single Voucher Card ── */
    .voucher-card {
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: white;
      transition: 0.2s;
    }

    .voucher-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

    .voucher-card-top {
      padding: 10px 12px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .badge-discount {
      background: #003357;
      color: white;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .badge-discount svg { width: 10px; height: 10px; }

    .badge-stock {
      font-size: 11px;
      font-weight: 600;
    }

    .badge-stock.in { color: #10b981; }
    .badge-stock.out { color: #94a3b8; }

    .voucher-img-wrap {
      padding: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100px;
    }

    .voucher-img-wrap img {
      width: 90px;
      height: 80px;
      object-fit: contain;
    }

    /* Placeholder image using SVG */
    .voucher-img-placeholder {
      width: 90px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .voucher-card-body {
      padding: 0 14px 14px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .voucher-name-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .voucher-name-row div p {
      font-size: 12px;
      color: black;
      margin: 0 0 2px;
      font-weight: 600;
    }

    .voucher-name-row div h4 {
      font-size: 15px;
      font-weight: 700;
      color: #1e293b;
      margin: 0;
    }

    .voucher-brand {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .voucher-brand img { width: 30px; height: 30px; object-fit: contain; }

    .voucher-expiry-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .voucher-expiry {
      display: flex;
      align-items: flex-start;
      gap: 5px;
      color: var(--text-muted);
      font-size: 11px;
      line-height: 1.4;
    }

    .voucher-expiry svg { width: 13px; height: 13px; margin-top: 1px; flex-shrink: 0; }

    .btn-buy {
      background: #003357;
      color: white;
      border: none;
      border-radius: 30px;
      padding: 8px 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: 0.2s;
      white-space: nowrap;
    }

    .btn-buy:hover { background: #002244; }

    .btn-buy.disabled {
      background: #e2e8f0;
      color: #94a3b8;
      cursor: not-allowed;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .voucher-type-row { grid-template-columns: repeat(2, 1fr); }
      .voucher-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 600px) {
      .voucher-type-row { grid-template-columns: 1fr; }
      .voucher-grid { grid-template-columns: 1fr; }
      .voucher-sections { padding: 16px; }
    }

    .evoucher-layout {
      display: flex;
      width: 100%;
      min-height: 600px;
      background: #ffffff;
      gap: 15px;
      padding: 15px;
      box-sizing: border-box;
    }

    /* ── Sidebar — separate white rounded card ── */
    .evoucher-sidebar {
      width: 220px;
      flex-shrink: 0;
      background: #F5F9FF;
      border-radius: 16px;
      border: 1px solid #EAECF0;
      padding: 22px 0;
      display: flex;
      flex-direction: column;
    }
    .evoucher-sidebar-label {
      font-size: 10px; font-weight: 700;
      color: var(--text-muted); letter-spacing: 1px;
      text-transform: uppercase; padding: 0 20px; margin-bottom: 12px;
    }
    .evoucher-cat-item {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 16px; cursor: pointer;
      font-size: 13px; font-weight: 600; color: var(--text-muted);
      border-radius: 999px; margin: 0 10px 4px 10px; transition: 0.2s;
    }
    .evoucher-cat-item:hover { background: #f1f5f9; color: var(--dark-blue); }
    .evoucher-cat-item.active { background: #EBF2FA; color: var(--dark-blue); font-weight: 700; border: 1px solid #c3c7ca;}
    .evoucher-cat-item img { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; flex-shrink: 0; }

    /* ── Main — separate white rounded card ── */
    .evoucher-main { flex-grow: 1; display: flex; flex-direction: column; }

    .evoucher-products-panel {
      flex-grow: 1; background: white;
      border-radius: 16px; border: 1px solid #EAECF0;
      display: flex; flex-direction: column; overflow: hidden;
    }

    .products-panel-header {
      padding: 20px 22px 16px;
      display: flex; justify-content: space-between; align-items: flex-start;
      border-bottom: 1px solid #EAECF0; background: #ebf2fa;
    }
    .products-panel-header h3 { font-size: 18px; font-weight: 700; color: var(--dark-blue); margin: 0 0 4px 0; }
    .products-panel-header p  { font-size: 12px; color: var(--text-muted); margin: 0; }
    .products-close-btn {
      width: 28px; height: 28px; border-radius: 50%;
      border: 1px solid #e2e8f0; background: white;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: 0.2s; flex-shrink: 0;
    }
    .products-close-btn:hover { background: #f1f5f9; }

    .products-grid-wrap { padding: 20px; flex-grow: 1; overflow-y: auto; background: white; }
    .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

    /* ── Product Card ── */
    .product-card {
      background: white; border: 1px solid #e2e8f0;
      border-radius: 14px; overflow: hidden;
      display: flex; flex-direction: column; transition: 0.2s;
      box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }
    .product-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.09); transform: translateY(-2px); }

    .product-card-top {
      padding: 10px 12px 0;
      display: flex; align-items: center; justify-content: space-between; background-color: #F5F9FF;
    }
    /* badge with bell.png */
    .p-badge-discount {
      background: var(--dark-blue); color: white;
      font-size: 10px; font-weight: 700;
      padding: 4px 9px; border-radius: 999px;
      display: flex; align-items: center; gap: 5px;
    }
    .p-badge-discount img { width: 11px; height: 11px; object-fit: contain; filter: brightness(0) invert(1); }
    .p-badge-stock { font-size: 11px; font-weight: 600; }
    .p-badge-stock.in  { color: #10b981; }
    .p-badge-stock.out { color: #94a3b8; }

    .product-img-wrap {
      padding: 14px 14px 10px;
      display: flex; align-items: center; justify-content: center; min-height: 110px; background: #F5F9FF;
    }
    .product-img-wrap img { width: 110px; height: 95px; object-fit: contain; }
    .product-img-wrap.faded { opacity: 0.35; }

    /* ── Card body: name+price LEFT — Buy RIGHT — horizontal row ── */
    .product-card-body {
      padding: 10px 14px 14px;
      display: flex; align-items: center;
      justify-content: space-between; gap: 10px;
      border-top: 1px solid #f1f5f9;
    }
    .product-card-info p  { font-size: 11px; color: #64748b; font-weight: 500; margin: 0 0 3px 0; line-height: 1.3; }
    .product-card-info h4 { font-size: 15px; font-weight: 700; color: #1e293b; margin: 0; }

    .p-btn-buy {
      background: var(--dark-blue); color: white; border: none;
      border-radius: 30px; padding: 9px 22px;
      font-size: 13px; font-weight: 700; cursor: pointer;
      font-family: inherit; transition: 0.2s; white-space: nowrap; flex-shrink: 0;
    }
    .p-btn-buy:hover { background: #002244; }
    .p-btn-buy.disabled { background: #e2e8f0; color: #94a3b8; cursor: not-allowed; pointer-events: none; }

    /* ── Responsive ── */
    @media (max-width: 1024px) { .products-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 768px) {
      .evoucher-layout { flex-direction: column; gap: 10px; padding: 10px; }
      .evoucher-sidebar { width: 100%; padding: 14px 0; }
      .evoucher-cat-item { margin: 0 8px 4px 8px; }
      .products-grid { grid-template-columns: 1fr 1fr; }
      .products-grid-wrap { padding: 14px; }
    }
    @media (max-width: 480px) { .products-grid { grid-template-columns: 1fr; } }

        /* ── Payment Panel Styles ── */
    .pay-panel-header {
      padding: 20px 22px 16px;
      display: flex; justify-content: space-between; align-items: flex-start;
      border-bottom: 1px solid #EAECF0; background: #f4f7fb;
    }
    .pay-panel-header h3 { font-size: 18px; font-weight: 700; color: var(--dark-blue); margin: 0 0 4px 0; }
    .pay-panel-header p  { font-size: 12px; color: var(--text-muted); margin: 0; }

    /* Center body */
    .pay-body {
      flex-grow: 1; background: #ffffff;
      display: flex; align-items: flex-start;
      justify-content: center; padding: 30px 20px;
    }
    .pay-card {
      background: white; border: 1px solid #EAECF0;
      border-radius: 18px; width: 100%; max-width: 640px;
      overflow: hidden;
    }

    /* Card image top */
    .pay-card-img {
      background: #f0f4ff;
      display: flex; align-items: center; justify-content: center;
      padding: 18px; border-bottom: 1px solid #EAECF0;
    }
    .pay-card-img img {
      width: 70px; height: 55px; object-fit: contain;
      border-radius: 8px;
    }

    /* Amount section */
    .pay-amount-section {
      padding: 20px 22px 18px;
      border-bottom: 1px solid #f1f5f9;
    }
    .pay-amount-label {
      font-size: 13px; font-weight: 600; color: #334155; margin: 0 0 10px 0;
    }
    .pay-amount-input {
      border: 1px solid #e2e8f0; border-radius: 10px;
      padding: 14px 18px; font-size: 18px; font-weight: 700;
      color: #64748b; width: 100%; box-sizing: border-box;
      font-family: inherit; outline: none;
      background: #f8fafc; cursor: default;
    }
    .pay-amount-input:focus { border-color: #e2e8f0; box-shadow: none; }

    /* Deposit Method */
    .pay-method-section { padding: 18px 22px 20px; }
    .pay-method-label { font-size: 13px; font-weight: 600; color: #334155; margin: 0 0 12px 0; }

    .pay-method-item {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 16px; border: 1.5px solid #e2e8f0;
      border-radius: 12px; cursor: pointer; transition: 0.2s; margin-bottom: 10px;
    }
    .pay-method-item:last-child { margin-bottom: 0; }
    .pay-method-item:hover { border-color: var(--dark-blue); background: #f8fafc; }
    .pay-method-item.selected { border-color: var(--dark-blue); background: #f0f7ff; }

    .pay-method-icon {
      width: 48px; height: 48px; border-radius: 50%;
      background: #ebf2fa; display: flex; align-items: center;
      justify-content: center; flex-shrink: 0; overflow: hidden; flex-direction: column;
    }
    .pay-method-icon img { width: 32px; height: 32px; object-fit: contain; }
    .pay-method-icon svg { width: 18px; height: 18px; color: var(--dark-blue); }

    .pay-method-info { flex-grow: 1; }
    .pay-method-name { font-size: 14px; font-weight: 700; color: #1e293b; margin: 0 0 3px 0; }
    .pay-method-fee  { font-size: 12px; color: var(--text-muted); margin: 0; }
    .pay-method-fee b { color: #10b981; font-weight: 600; }
    .pay-method-fee .instant { color: #64748b; }

    /* Radio circle */
    .pay-radio {
      width: 20px; height: 20px; border-radius: 50%;
      border: 2px solid #e2e8f0; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      transition: 0.2s;
    }
    .pay-method-item.selected .pay-radio {
      border-color: var(--dark-blue); background: var(--dark-blue);
    }
    .pay-method-item.selected .pay-radio::after {
      content: ''; width: 8px; height: 8px;
      border-radius: 50%; background: white;
    }

    /* Footer */
    .pay-footer {
      padding: 18px 22px; border-top: 1px solid #EAECF0;
      background: #f4f7fb; display: flex; justify-content: flex-end; gap: 12px;
    }
    .pay-btn-cancel {
      border: 1.5px solid #e2e8f0; background: white; color: #1e293b;
      padding: 11px 28px; border-radius: 30px; font-size: 14px; font-weight: 600;
      cursor: pointer; font-family: inherit; transition: 0.2s;
    }
    .pay-btn-cancel:hover { background: #f8fafc; }
    .pay-btn-continue {
      background: var(--dark-blue); color: white; border: none;
      padding: 11px 28px; border-radius: 30px; font-size: 14px; font-weight: 700;
      cursor: pointer; font-family: inherit; transition: 0.2s;
      display: flex; align-items: center; gap: 8px;
    }
    .pay-btn-continue:hover { background: #002244; }

    .review-card {
      background: #EBF2FA;
      border-radius: 16px;
      padding: 24px 28px;
      margin: 24px auto;
      max-width: 640px;
      width: calc(100% - 48px);
    }
    .review-title {
      font-size: 16px;
      font-weight: 700;
      color: #1e293b;
      margin: 0 0 20px 0;
    }
    .review-content-white {
      background: #FFFFFF;
      border-radius: 12px;
      padding: 24px;
      margin-top: 10px;
    }
    .review-edit-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }
    .review-edit-row span {
      font-size: 14px;
      color: #1e293b;
    }
    .review-edit-link {
      display: flex;
      align-items: center;
      gap: 6px;
      text-decoration: none;
      color: #003d63;
      font-size: 14px;
      font-weight: 600;
    }
    .review-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
    .review-row span { font-size: 14px; color: #64748b; }
    .review-row strong { font-size: 14px; font-weight: 700; color: #1e293b; }
    .review-row img { height: 24px; object-fit: contain; }
    .review-divider {
      border: none;
      border-top: 1px solid #E2E8F0;
      margin: 20px 0;
    }
    .review-total-label { font-size: 14px; color: #64748b; margin-bottom: 8px; }
    .review-total-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .review-total-row span { font-size: 14px; color: #64748b; }
    .review-total-amount {
      font-size: 28px;
      font-weight: 700;
      color: #003d63;
    }

    .fib-card {
    background: white;
    border: 1px solid #EAECF0;
    border-radius: 20px;
    padding: 40px 36px;
    width: 100%;
    max-width: 480px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .fib-icon-circle {
    width: 54px; height: 54px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }

  .fib-title {
    font-size: 22px; font-weight: 700;
    color: #1e293b; margin: 0;
  }

  .fib-sub {
    font-size: 13px; color: var(--text-muted);
    font-weight: 500; margin: 0; line-height: 1.6;
  }

  .fib-qr-box {
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    display: inline-block;
  }

  .fib-code-box {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 1px;
    box-sizing: border-box;
  }

  .fib-secure {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin: 0;
  }

  .fib-secure img {
    height: 18px;
    object-fit: contain;
  }

  /* Footer buttons */
  .fib-footer {
    padding: 18px 22px;
    border-top: 1px solid #EAECF0;
    background: #f4f7fb;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }

  .fib-btn-home {
    border: 1.5px solid #e2e8f0;
    background: white; color: #1e293b;
    padding: 11px 24px; border-radius: 30px;
    font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: 0.2s;
    white-space: nowrap;
  }
  .fib-btn-home:hover { background: #f1f5f9; }

  .fib-btn-pay {
    background: var(--dark-blue); color: white; border: none;
    padding: 11px 24px; border-radius: 30px;
    font-size: 14px; font-weight: 700;
    cursor: pointer; font-family: inherit; transition: 0.2s;
    white-space: nowrap;
  }
  .fib-btn-pay:hover { background: #002244; }

   /* ── Page Wrapper ── */
    .page-wrapper {
      max-width: 1280px;
      margin: 0 auto;
      padding: 28px 24px 48px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      background-color: #f4f7fb;
      border: 1px solid #e2e8f0;
    }

    /* ── Main Form Card ── */
    .main-form-card {
      background: #E9EFFA;          /* ← yeh change */
      border: 1px solid #d4dff0;
      border-radius: 18px;
      overflow: hidden;
    }

    /* ── Page Header ── */
    .page-header {
      display: flex;
      align-items: center;
      gap: 14px;
      background: #E9EFFA;
      padding: 20px 24px;
      border-bottom: 1px solid  #d4dff0;
    }

    .page-header-back {
      width: 34px; height: 34px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; flex-shrink: 0;
    }
    .page-header-back svg { display: block; }

    .page-header-text h2 {
      font-size: 18px; font-weight: 700;
      color: #1e293b; margin: 0 0 2px;
    }
    .page-header-text p {
      font-size: 13px; color: #94a3b8; margin: 0;
    }

    /* ── Form Card ── */
    .form-card {
      background: white;
      padding: 28px;
    }

    .form-card-title {
      font-size: 16px; font-weight: 700;
      color: #1e293b; margin: 0 0 20px;
    }

    .balance-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 20px;
    }

    /* Your Balance box */
    .your-balance-box {
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 20px;
    }
    .box-label {
      font-size: 12px; font-weight: 600;
      color: #64748b; margin: 0 0 14px;
    }

    .balance-user-bubble {
      background: #E9EFFA;
      border: 1px solid #CCD7DF;
      border-radius: 14px;
      padding: 14px 16px;
      display: flex; align-items: center;
      justify-content: space-between; gap: 12px;
    }

    .balance-user-info {
      display: flex; align-items: center; gap: 10px;
    }
    .balance-avatar {
      width: 40px; height: 40px; border-radius: 50%;
      background: #003357; color: white;
      font-size: 13px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .balance-user-name {
      font-size: 14px; font-weight: 600;
      color: #1e293b; margin: 0 0 2px;
    }
    .balance-user-phone {
      font-size: 12px; color: #64748b; margin: 0;
    }
    .balance-amount-col {
      text-align: right; flex-shrink: 0;
    }
    .balance-amount-label {
      font-size: 11px; color: #003357;
      font-weight: 500; margin: 0 0 2px;
    }
    .balance-amount-value {
      font-size: 18px; font-weight: 700;
      color: #003357; margin: 0;
    }

    /* Request Balance box */
    .request-balance-box {
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 20px;
    }
    .amount-field-row {
      display: flex; align-items: center;
      justify-content: space-between; gap: 12px;
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
    }
    .amount-field-inner { flex-grow: 1; }
    .amount-field-inner label {
      font-size: 11px; color: #64748b;
      display: block; margin-bottom: 4px;
    }
    .amount-field-inner input {
      font-size: 20px; font-weight: 700;
      color: #1e293b; border: none; outline: none;
      background: transparent; width: 100%;
      font-family: inherit;
    }
    .currency-select {
      display: flex; align-items: center; gap: 5px;
      background: #f8fafc; border: 1px solid #e2e8f0;
      border-radius: 10px; padding: 6px 12px;
      cursor: pointer; flex-shrink: 0;
    }
    .currency-select img { width: 20px; }
    .currency-select span {
      font-size: 13px; font-weight: 600; color: #1e293b;
    }

    /* Note */
    .note-section label {
      font-size: 13px; font-weight: 600;
      color: #1e293b; display: block; margin-bottom: 10px;
    }
    .note-textarea-wrap {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 16px 18px;
    }
    .note-textarea-wrap textarea {
      width: 100%; min-height: 80px;
      border: none; outline: none;
      background: transparent; font-family: inherit;
      font-size: 13px; color: #64748b; resize: none;
    }
    .note-counter {
      text-align: right; font-size: 11px;
      color: #94a3b8; margin-top: 6px;
    }

    /* ── History Card ── */
    .history-card {
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 18px;
      overflow: hidden;
    }
    .history-card-header {
      padding: 20px 24px;
      border-bottom: 1px solid #f1f5f9;
    }
    .history-card-header h3 {
      font-size: 16px; font-weight: 700;
      color: #1e293b; margin: 0;
    }
    .history-table {
      width: 100%; border-collapse: collapse;
    }
    .history-table thead tr {
      background: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
    }
    .history-table th {
      padding: 12px 16px; font-size: 12px;
      font-weight: 600; color: #64748b;
      text-align: left; white-space: nowrap;
    }
    .history-table th .sort-icon {
      display: inline-flex; flex-direction: column;
      gap: 1px; margin-left: 4px;
      vertical-align: middle; opacity: 0.5;
    }
    .history-table th .sort-icon svg { display: block; }
    .history-table tbody tr {
      border-bottom: 1px solid #f1f5f9;
      transition: background 0.15s;
    }
    .history-table tbody tr:last-child { border-bottom: none; }
    .history-table tbody tr:hover { background: #fafbfc; }
    .history-table td {
      padding: 16px 16px; font-size: 13px;
      color: #1e293b; vertical-align: middle;
    }
    .history-table td.muted { color: #94a3b8; }

    .status-badge {
      display: inline-block; padding: 3px 12px;
      border-radius: 20px; font-size: 12px; font-weight: 600;
    }
    .status-pending  { color: #f59e0b; background: #fffbeb; }
    .status-approved { color: #10b981; background: #ecfdf5; }
    .status-rejected { color: #ef4444; background: #fef2f2; }

    /* Footer */
    .page-footer {
      display: flex; justify-content: flex-end;
      padding: 0 0 8px;
    }
    .btn-submit {
      background: #003357; color: white;
      border: none; border-radius: 30px;
      padding: 13px 25px; font-size: 15px;
      font-weight: 700; cursor: pointer;
      font-family: inherit;
      display: flex; align-items: center; gap: 8px;
      transition: background 0.2s;
      margin-top: 18px;
    }
    .btn-submit:hover { background: #002244; }

    @media (max-width: 700px) {
      .balance-row { grid-template-columns: 1fr; }
      .history-table th, .history-table td { padding: 10px; font-size: 12px; }
      .page-wrapper { padding: 16px; }
      .desktop-links, .desktop-icons, .desktop-profile-text { display: none !important; }
      .hamburger { display: block; }
    }


     /* ── Active Invitation Page ── */
    .invitation-wrapper {
      max-width: 1400px;
      margin: 0 auto;
      padding: 20px 24px 48px;
      box-sizing: border-box;
    }

    /* Main card */
    .invitation-card {
      background: white;
      border: 1px solid #EAECF0;
      border-radius: 20px;
      overflow: hidden;
    }

    /* Header */
    .invitation-header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 24px 28px;
      border-bottom: 1px solid #f1f5f9;
      background-color: #F5F9FF;
    }
    .inv-back-btn {
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: #1e293b; flex-shrink: 0;
      border-radius: 8px; transition: 0.2s;
    }
    .inv-back-btn:hover { background: #f1f5f9; }
    .invitation-header h2 {
      font-size: 20px; font-weight: 700;
      color: #1e293b; margin: 0;
    }

    /* List */
    .invitation-list { padding: 0; }

    .invitation-row {
      display: grid;
      grid-template-columns: 2fr 2fr 1.5fr auto;
      align-items: center;
      padding: 22px 28px;
      border-bottom: 1px solid #f1f5f9;
      gap: 16px;
      transition: 0.15s;
    }
    .invitation-row:last-child { border-bottom: none; }
    .invitation-row:hover { background: #fafbff; }

    /* User info */
    .inv-user {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .inv-avatar {
      width: 46px; height: 46px;
      border-radius: 50%; object-fit: cover;
      flex-shrink: 0;
      background: #e2e8f0;
    }
    .inv-name {
      font-size: 15px; font-weight: 700;
      color: var(--dark-blue); margin: 0 0 3px 0;
    }
    .inv-phone {
      font-size: 12px; color: var(--text-muted); margin: 0;
    }

    /* Date */
    .inv-date {
      display: flex; align-items: center; gap: 8px;
      font-size: 13px; color: var(--text-muted); font-weight: 500;
    }
    .inv-date-icon {
      width: 32px; height: 32px; border-radius: 50%;
      border: 1.5px solid #e2e8f0;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; background: white;
    }

    /* Amount */
    .inv-amount {
      font-size: 20px; font-weight: 700; color: #1e293b;
    }
    .inv-amount span {
      font-size: 13px; font-weight: 700; color: var(--dark-blue);
    }

    /* Actions */
    .inv-actions {
      display: flex; gap: 8px; align-items: center; justify-content: flex-end;
    }
    .inv-btn-decline {
      display: flex; align-items: center; gap: 6px;
      padding: 9px 18px; border-radius: 30px;
      border: 1.5px solid #fca5a5;
      background: white; color: var(--accent-red);
      font-size: 13px; font-weight: 600;
      cursor: pointer; font-family: inherit; transition: 0.2s;
      white-space: nowrap;
    }
    .inv-btn-decline:hover { background: var(--accent-red); color: white; }
    .inv-btn-decline:hover svg { stroke: white; }

    .inv-btn-accept {
      display: flex; align-items: center; gap: 6px;
      padding: 9px 18px; border-radius: 30px;
      border: none; background: #15B79E; color: white;
      font-size: 13px; font-weight: 600;
      cursor: pointer; font-family: inherit; transition: 0.2s;
      white-space: nowrap;
    }
    .inv-btn-accept:hover { background: #0f937d; }

   /* ── Mobile Responsive ── */
@media (max-width: 900px) {
  .invitation-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .inv-actions { grid-column: span 2; justify-content: flex-start; }
}

@media (max-width: 600px) {
  /* Layout */
  .invitation-wrapper { padding: 10px; }
  .invitation-card { border-radius: 16px; }

  /* Header */
  .invitation-header { padding: 16px 18px; gap: 10px; }
  .invitation-header h2 { font-size: 17px; }

  /* Row — full stack */
  .invitation-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
    gap: 10px;
  }

  /* User row — name + date same line */
  .inv-user { width: 100%; }
  .inv-name { font-size: 14px; }
  .inv-phone { font-size: 11px; }

  /* Date — inline under user */
  .inv-date {
    font-size: 12px;
    gap: 6px;
  }
  .inv-date-icon {
    width: 26px; height: 26px;
  }

  /* Amount — big and bold */
  .inv-amount {
    font-size: 22px;
    font-weight: 700;
  }

  /* Buttons — side by side, equal width */
  .inv-actions {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: flex-start;
  }
  .inv-btn-decline,
  .inv-btn-accept {
    flex: 1;
    justify-content: center;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 30px;
  }

  /* Pagination */
  .tx-pagination {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 18px;
    gap: 12px;
  }
  .tx-pages { flex-wrap: wrap; }
}

/* Very small screens */
@media (max-width: 380px) {
  .inv-btn-decline,
  .inv-btn-accept {
    font-size: 12px;
    padding: 9px 8px;
  }
}