.wallet-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
      }
    
      .wallet-modal-overlay.active {
        opacity: 1;
        visibility: visible;
      }
    
      .wallet-modal {
        background: #ffffff;
        border-radius: 20px;
        width: 800px;
        max-width: 1000px;
        max-height: 75vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 25px;
        position: relative;
        transform: translateY(40px);
        opacity: 0;
        transition: opacity 0.4s ease, transform 0.4s ease;
      }
    
      .wallet-modal-overlay.active .wallet-modal {
        transform: translateY(0);
        opacity: 1;
        animation: wallet-shake 0.4s ease-in-out;
      }
    
      @keyframes wallet-shake {
        0% { transform: translateY(0) translateX(0); }
        25% { transform: translateY(0) translateX(-10px); }
        50% { transform: translateY(0) translateX(10px); }
        75% { transform: translateY(0) translateX(-6px); }
        100% { transform: translateY(0) translateX(0); }
      }
    

      
      /* spinner + minor disabled styling (add near end of your CSS) */
@keyframes wm-spin {
  to { transform: rotate(360deg); }
}

.wallet-spinner {
  width: 14px;
  height: 14px;
  border: 1x solid rgba(0,0,0,0.12);
  border-top-color: #05c364; /* green accent */
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  animation: wm-spin 0.9s linear infinite;
}

/* make the temporary badge match existing pill style */
.wallet-modal-recommended.loading {
  background-color: transparent;
  color: transparent; /* hide text (we'll replace with spinner) */
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
}

/* If spinner was appended as new badge */
.wallet-modal-recommended.inserted {
  font-size: 10px;
  color: #05c364;
  background-color: #d7fae2;
  border-radius: 5px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Disable pointer events on list while processing */
.wallet-modal-wallet-list.processing {
  pointer-events: none;
  opacity: 0.85;
}

      @media (min-width: 900px) {
        .wallet-modal {
          flex-direction: row;
        }
      }
    
      .wallet-modal-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        max-height: 100%;
        overflow: hidden;
        padding-right: 20px;
      }
    
      .wallet-modal-header,
      .wallet-modal-subtitle {
        flex-shrink: 0;
        background: #fff;
        padding-bottom: 4px;
        z-index: 1;
      }
    
      .wallet-modal-wallet-list {
        overflow-y: auto;
        flex-grow: 1;
        padding-right: 4px;
        margin-top: 4px;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
    
      .wallet-modal-right {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 0px;
      }
    
      .wallet-modal-header {
        font-weight: bold;
        font-size: 14px;
        color: #000;
        margin-bottom: 10px;
      }
    
    
    
      .wallet-modal-subtitle {
        color: #000;
        font-size: 17px;
        font-family: '', monospace; /* or 'Courier New', monospace */
        font-weight: 100;
        margin-bottom: 8px;
        padding: 4px 7px;
        display: inline-block;
    
    
      }
    
      .wallet-modal-wallet-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 20px;
        height: 60px;
          background-color: #fff;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.1s ease;
    }
    
    .wallet-modal-wallet-item:hover {
    background-color: #f3f4f6; /* Light hover background */
    }
    
    .wallet-modal-wallet-item:active {
    transform: scale(0.98); /* Slight press effect */
    background-color: #e5e7eb; /* Slightly darker on click */
    
      }
    
      .wallet-modal-wallet-info {
        display: flex;
        align-items: center;
        gap: 12px;
      }
    
    
      .wallet-modal-wallet-info img {
    width: 40px;
    height: 40px;
    padding: 0px;
    border-radius: 10px;
    background-color: #f3f4f6; /* light background */
    border: 1px solid #e5e7eb; /* optional soft border */
    object-fit: contain;
    }
    
    
    .wallet-modal-recommended {
      font-size: 10px;
      color: #05c364; /* dark green text */
      font-weight: 600;
      background-color: #d7fae2; /* light green background */
      padding: 1 6px;       /* no vertical padding, just horizontal */
      line-height: 18px;    /* adjust line-height for vertical size */      display: inline-block;
      user-select: none;
      font-family: sans-serif;
      border-radius: 5px;
    }
    
  
      .wallet-modal-connect-box {
        width: 100%;
        background: #f3f4f6;
        border-radius: 20px;
        height: 380px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #666;
        padding: 20px;
      }
    
      .wallet-modal-connect-box svg {
        width: 48px;
        height: 48px;
        margin-bottom: 12px;
        stroke: #999;
      }
    
     
      .wallet-modal-wallet-list::-webkit-scrollbar {
    width: 6px;
    }
    
    .wallet-modal-wallet-list::-webkit-scrollbar-track {
    background: transparent;
    }
    
    .wallet-modal-wallet-list::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1); /* faint */
    border-radius: 8px;
    }
    
    
    /* Right section fade animation */
    .wallet-modal-connect-box {
    opacity: 0;
    transition: opacity 0.4s ease;
    }

    .wallet-modal-overlay.active .wallet-modal-connect-box {
    opacity: 1;
    }

    /* scrollbars */
    .wallet-modal-wallet-list::-webkit-scrollbar { width:6px; }
    .wallet-modal-wallet-list::-webkit-scrollbar-track { background:transparent; }
    .wallet-modal-wallet-list::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.1); border-radius:8px; }

    /* ---------- Mobile-specific: slide up from bottom ---------- */
    @media (max-width: 800px) {
      .wallet-modal-overlay {
        align-items: flex-end; /* stick modal to bottom on mobile */
      }

      .wallet-modal {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        margin: 0;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%); /* start off-screen at bottom on mobile */
        transition: transform 0.4s ease, opacity 0.3s ease;
      }

      /* Slide up when active (mobile) */
      .wallet-modal-overlay.active .wallet-modal {
        transform: translateY(0);
        opacity: 1;
        animation: none; /* no shake on mobile */
      }

      .wallet-modal-left { max-height:400px; padding-right:0; margin-bottom:20px; }
      .wallet-modal-right { padding-top:0; }
      .wallet-modal-wallet-item { padding:10px; }
      .wallet-modal-connect-box { height:130px; }

      /* Only apply the 'closing' slide-down on mobile */
      .wallet-modal.closing {
        transform: translateY(100%) !important;
        opacity: 0;
        transition: transform 0.4s ease, opacity 0.25s ease;
      }

      .wallet-modal-wallet-list::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.082); }
    }

    
    @keyframes fadePulse {
      0% { opacity: 0.3; }
      50% { opacity: 1; }
      100% { opacity: 0.3; }
    }
    
    .wallet-modal-right.pulsing {
      animation: fadePulse 2s ease-in-out infinite;
    }
    
     
  /* MOBILE slide-up */
  @media (max-width: 800px) {
    .wallet-modal-overlay {
      align-items: flex-end;
    }
  
    .wallet-modal {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      width: 100%;
      margin: 0;
      transform: translateY(100%); /* hidden below screen */
    }
  
    /* Slide up when active */
    .wallet-modal-overlay.active .wallet-modal {
      transform: translateY(0);
    }
  
    /* Slide down when closing */
    .wallet-modal.closing {
      transform: translateY(100%);
      opacity: 0;
    }
  }
      /* little helpers */
      .hidden { display:none !important; }
  
      .wallet-modal-connect-box {
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
      }
      
      .wallet-modal-connect-box.show {
        opacity: 1;
      }