/* ═══ FogoTrade — Wallet (Fogo Sessions SDK / RebelOrcs Pattern) ═══ */

/* ══════════════════════════════════════════
   SESSION BUTTON (navbar)
   ══════════════════════════════════════════ */
.session-btn-wrap{position:relative}

.session-btn{
  display:inline-flex;align-items:center;gap:0.5rem;
  width:12rem;height:2.5rem;padding:0.25rem;
  background:#333;border:none;border-radius:0.5rem;
  cursor:pointer;color:rgba(255,255,255,.9);
  transition:background 80ms;
  font-family:inherit;font-size:13px;
}
.session-btn:hover{background:#404144}
.session-btn:active{background:#3a3a3b}

.session-btn-logo{
  width:2rem;height:2rem;background:#ff4546;border-radius:0.25rem;
  display:grid;place-items:center;flex-shrink:0;
}
.session-btn-logo svg{height:14px;color:#fff}

.session-btn-text{flex:1;text-align:left;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.session-btn-arrow{font-size:14px;color:rgba(255,255,255,.5);transition:transform .2s;padding-right:0.5rem}
.session-btn-arrow.open{transform:rotate(180deg)}

/* Connecting spinner */
.session-btn .btn-spinner{
  width:1rem;height:1rem;border:2px solid rgba(255,255,255,.3);
  border-top-color:#ff4546;border-radius:50%;
  animation:sessSpin .8s linear infinite;
}
@keyframes sessSpin{to{transform:rotate(360deg)}}

/* Connected state — green dot */
.session-btn.connected .session-btn-logo{position:relative}
.session-btn.connected .session-btn-logo::after{
  content:'';position:absolute;bottom:-2px;right:-2px;
  width:8px;height:8px;border-radius:50%;background:#38e97c;
  border:2px solid #333;
}


/* ══════════════════════════════════════════
   SELECT WALLET MODAL (disconnected state)
   ══════════════════════════════════════════ */
.sw-backdrop{
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.45);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;
  transition:all .25s ease;
  display:flex;align-items:center;justify-content:center;
}
.sw-backdrop.open{opacity:1;visibility:visible}

.sw-modal{
  background:#1f1f24;padding:1.5rem;border-radius:0.75rem;
  border:1px solid #33333d;width:23.5rem;max-width:95vw;
  max-height:90vh;overflow-y:auto;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  transform:scale(.92) translateY(10px);opacity:0;
  transition:transform .25s cubic-bezier(.16,1,.3,1),opacity .25s;
}
.sw-backdrop.open .sw-modal{transform:scale(1) translateY(0);opacity:1}

/* Modal header */
.sw-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.sw-title{font-size:16px;font-weight:600;color:rgba(255,255,255,.9)}
.sw-close{
  width:2rem;height:2rem;border-radius:0.5rem;
  border:1px solid #33333d;background:transparent;
  color:rgba(255,255,255,.5);font-size:14px;
  cursor:pointer;display:grid;place-items:center;transition:all .15s;
}
.sw-close:hover{border-color:#ff4546;color:#ff4546}

/* Detected badge section */
.sw-group-label{
  font-size:10px;text-transform:uppercase;letter-spacing:1.2px;
  color:rgba(255,255,255,.45);font-weight:600;
  padding:4px 0 6px;
}

/* Wallet item */
.sw-wallet{
  display:flex;align-items:center;gap:1rem;
  height:2.5rem;padding:0 0.75rem;
  background:rgba(255,255,255,.05);border:none;border-radius:0.5rem;
  cursor:pointer;width:100%;color:rgba(255,255,255,.9);
  margin-bottom:4px;transition:background 50ms;font-family:inherit;
}
.sw-wallet:hover{background:#404144}
.sw-wallet:active{background:#3a3a3b}
.sw-wallet.disabled{opacity:.4;cursor:default}
.sw-wallet.disabled:hover{background:rgba(255,255,255,.05)}

.sw-w-icon{width:1.5rem;height:1.5rem;border-radius:4px;overflow:hidden;flex-shrink:0;background:rgba(255,255,255,.1)}
.sw-w-icon img{width:100%;height:100%;object-fit:cover}
.sw-w-emoji{font-size:14px;display:block;text-align:center;line-height:1.5rem}
.sw-w-name{font-size:13px;font-weight:500;flex:1;text-align:left}
.sw-w-badge{font-size:10px;font-weight:600;color:#38e97c;text-transform:uppercase;letter-spacing:.5px;font-family:var(--font-mono)}

/* More options expandable */
.sw-more-toggle{
  display:flex;align-items:center;gap:8px;padding:10px 0 6px;
  font-size:12px;color:rgba(255,255,255,.5);cursor:pointer;
  border:none;background:none;width:100%;transition:color .15s;
}
.sw-more-toggle:hover{color:rgba(255,255,255,.7)}
.sw-more-toggle .sw-mt-arrow{transition:transform .2s;font-size:10px}
.sw-more-toggle.open .sw-mt-arrow{transform:rotate(90deg)}
.sw-more-list{display:none}
.sw-more-list.open{display:block}

/* Manual address input */
.sw-divider{
  display:flex;align-items:center;gap:10px;margin:14px 0 10px;
  font-size:11px;color:rgba(255,255,255,.35);
}
.sw-divider::before,.sw-divider::after{content:'';flex:1;height:1px;background:#33333d}

.sw-input-row{display:flex;gap:8px}
.sw-input{
  flex:1;background:#151519;border:1px solid #3e3e47;border-radius:0.5rem;
  padding:8px 10px;color:rgba(255,255,255,.9);font-family:var(--font-mono);
  font-size:12px;outline:none;box-sizing:border-box;
}
.sw-input:focus{border-color:#66ceff}
.sw-input::placeholder{color:rgba(255,255,255,.25)}
.sw-view-btn{
  background:#ff4546;color:#fff;border:none;border-radius:0.5rem;
  padding:8px 14px;font-size:12px;font-weight:500;cursor:pointer;
  transition:background 80ms;white-space:nowrap;
}
.sw-view-btn:hover{background:#e63e3f}

/* Legal */
.sw-legal{font-size:10px;color:rgba(255,255,255,.35);text-align:center;margin-top:16px;line-height:1.5}
.sw-legal a{color:#66ceff}

/* Empty state */
.sw-empty{text-align:center;padding:24px 0}
.sw-empty-icon{font-size:32px;opacity:.4;margin-bottom:8px}
.sw-empty-text{font-size:14px;color:rgba(255,255,255,.6);margin-bottom:4px}
.sw-empty-hint{font-size:11px;color:rgba(255,255,255,.35)}


/* ══════════════════════════════════════════
   SESSION POPOVER (connected state)
   ══════════════════════════════════════════ */
.sp-popover{
  position:absolute;top:calc(100% + 8px);right:0;
  width:22rem;max-height:80dvh;
  background:#1f1f24;border:1px solid #33333d;border-radius:0.75rem;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  overflow:hidden;z-index:250;
  /* animation */
  opacity:0;visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.sp-popover.open{opacity:1;visibility:visible;transform:translateY(0)}

/* Popover header */
.sp-header{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;border-bottom:1px solid #33333d;
  min-height:2.75rem;
}
.sp-header-title{flex:1;font-size:14px;font-weight:600;color:rgba(255,255,255,.9)}
.sp-header-btn{
  width:1.75rem;height:1.75rem;border-radius:0.375rem;
  border:1px solid #33333d;background:transparent;
  color:rgba(255,255,255,.45);font-size:12px;
  cursor:pointer;display:grid;place-items:center;transition:all .15s;
}
.sp-header-btn:hover{border-color:#ff4546;color:#ff4546}

/* Tab bar */
.sp-tabs{
  display:flex;border-bottom:1px solid #33333d;height:2.5rem;
  padding:0 16px;gap:0;
}
.sp-tab{
  position:relative;flex:1;
  background:none;border:none;
  color:rgba(255,255,255,.45);font-size:13px;font-weight:500;
  cursor:pointer;transition:color .15s;font-family:inherit;
  padding:0;display:flex;align-items:center;justify-content:center;
}
.sp-tab:hover{color:rgba(255,255,255,.7)}
.sp-tab.active{color:#66ceff}
.sp-tab.active::after{
  content:'';position:absolute;bottom:0;left:25%;right:25%;
  height:2px;background:#66ceff;border-radius:0.125rem;
}

/* Tab content */
.sp-tab-content{display:none;overflow-y:auto;max-height:calc(80dvh - 12rem)}
.sp-tab-content.active{display:block}

/* ── Wallet Tab ── */
/* Expiry banner */
.sp-expiry{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;border-bottom:1px solid #33333d;
  font-size:12px;color:rgba(255,255,255,.75);
}
.sp-expiry-dot{
  width:6px;height:6px;border-radius:50%;background:#38e97c;
  flex-shrink:0;animation:spPulse 2s ease infinite;
}
.sp-expiry.expired .sp-expiry-dot{background:#ff4546;animation:none}
.sp-expiry strong{color:#fff;font-weight:600}
@keyframes spPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Token list */
.sp-token-list{padding:8px 12px;display:flex;flex-direction:column;gap:4px}

.sp-token-item{
  display:flex;align-items:center;gap:0.75rem;
  height:3.5rem;padding:0 0.75rem;
  background:rgba(255,255,255,.05);border-radius:0.5rem;
  transition:background 80ms;
}
.sp-token-item:hover{background:rgba(255,255,255,.08)}

.sp-tk-icon{
  width:2rem;height:2rem;border-radius:9999px;
  display:grid;place-items:center;font-size:18px;
  background:rgba(255,255,255,.08);flex-shrink:0;overflow:hidden;
}
.sp-tk-icon img{width:100%;height:100%;object-fit:cover;border-radius:9999px}

.sp-tk-info{flex:1;min-width:0}
.sp-tk-symbol{font-size:13px;font-weight:600;color:rgba(255,255,255,.9);display:block}
.sp-tk-name{font-size:10px;color:rgba(255,255,255,.4);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sp-tk-bal{text-align:right;font-family:var(--font-mono)}
.sp-tk-amount{font-size:13px;color:rgba(255,255,255,.9);display:block}
.sp-tk-usd{font-size:10px;color:rgba(255,255,255,.4);display:block}

/* Action toolbar */
.sp-actions{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:8px;padding:12px 12px 8px;
}
.sp-action-btn{
  display:grid;grid-template-rows:repeat(2,max-content);
  padding:0.75rem 0.375rem;gap:0.5rem;
  background:rgba(255,255,255,.05);border:none;border-radius:0.5rem;
  cursor:pointer;place-items:center;
  color:rgba(255,255,255,.8);transition:background 80ms;font-family:inherit;
}
.sp-action-btn:hover{background:#404144}
.sp-action-btn:active{background:#3a3a3b}
.sp-action-icon{font-size:1.25rem;line-height:1}
.sp-action-label{font-size:0.6875rem;color:rgba(255,255,255,.65);white-space:nowrap}

/* ── Limits Tab ── */
.sp-limits{padding:16px}

.sp-limits-check{
  display:flex;align-items:center;gap:10px;
  margin-bottom:16px;cursor:pointer;
}
.sp-limits-check input[type="checkbox"]{
  width:16px;height:16px;accent-color:#66ceff;cursor:pointer;
}
.sp-limits-check label{
  font-size:13px;color:rgba(255,255,255,.8);cursor:pointer;
}

.sp-limit-row{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;
}
.sp-limit-token{
  width:5rem;font-size:12px;font-weight:600;
  color:rgba(255,255,255,.7);display:flex;align-items:center;gap:6px;
}
.sp-limit-token-icon{font-size:14px}
.sp-limit-input{
  flex:1;background:#151519;border:1px solid #3e3e47;border-radius:0.5rem;
  padding:8px 10px;color:rgba(255,255,255,.9);font-family:var(--font-mono);
  font-size:12px;outline:none;box-sizing:border-box;
}
.sp-limit-input:focus{border-color:#66ceff}
.sp-limit-input::placeholder{color:rgba(255,255,255,.2)}
.sp-limit-input:disabled{opacity:.35;cursor:not-allowed}

.sp-limits-footer{margin-top:16px}
.sp-update-btn{
  width:100%;background:#66ceff;color:#000;font-size:13px;font-weight:600;
  padding:10px;border:none;border-radius:0.5rem;cursor:pointer;
  transition:background 80ms;
}
.sp-update-btn:hover{background:#52b8e8}
.sp-update-btn:disabled{opacity:.4;cursor:not-allowed}

/* ── Popover Footer ── */
.sp-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;border-top:1px solid #33333d;
  min-height:2.75rem;
}
.sp-fogo-brand{
  display:flex;align-items:center;gap:6px;
  opacity:.45;font-size:11px;color:rgba(255,255,255,.5);
}
.sp-fogo-brand svg{height:12px}
.sp-signout{
  background:none;border:none;color:#ff4546;
  font-size:12px;font-weight:500;cursor:pointer;
  padding:4px 8px;border-radius:0.375rem;
  transition:background 80ms;font-family:inherit;
}
.sp-signout:hover{background:rgba(255,69,70,.1)}


/* ══════════════════════════════════════════
   CLICK-OUTSIDE OVERLAY for popover
   ══════════════════════════════════════════ */
.sp-overlay{
  position:fixed;inset:0;z-index:240;
  display:none;
}
.sp-overlay.open{display:block}


/* ══════════════════════════════════════════
   EXISTING MODALS (token select, pair select) — UNCHANGED
   ══════════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);z-index:210;display:none;align-items:center;justify-content:center}
.modal{background:#1f1f24;border:1px solid #33333d;border-radius:12px;max-height:90vh;overflow-y:auto;box-shadow:0 4px 12px rgba(0,0,0,.5);animation:fsModalIn .2s ease-out}
@keyframes fsModalIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #33333d}
.modal-header h3{font-size:16px;color:rgba(255,255,255,.9)}
.modal-close{width:32px;height:32px;border-radius:8px;border:1px solid #33333d;background:#1f1f24;color:rgba(255,255,255,.5);font-size:14px;cursor:pointer;display:grid;place-items:center}
.modal-close:hover{border-color:#ff4546;color:#ff4546}

/* Token modal */
.token-modal{width:400px}
.token-search{width:calc(100% - 40px);margin:12px 20px;padding:10px 12px;background:#27272c;border:1px solid #3e3e47;color:rgba(255,255,255,.9);border-radius:8px;outline:none;font-size:13px;box-sizing:border-box}
.token-search:focus{border-color:#66ceff}
.token-search::placeholder{color:rgba(255,255,255,.3)}
.token-popular{display:flex;gap:6px;padding:0 20px 12px;flex-wrap:wrap}
.tp-chip{padding:4px 12px;background:rgba(255,255,255,.05);border:1px solid #3e3e47;color:rgba(255,255,255,.8);font-size:12px;font-weight:500;border-radius:20px;cursor:pointer;transition:all .15s}
.tp-chip:hover{border-color:#ff4546;color:#ff4546}
.token-list{padding:0 8px 12px;max-height:300px;overflow-y:auto}
.token-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:none;border:none;border-radius:8px;cursor:pointer;transition:background .1s;color:#fff}
.token-item:hover{background:rgba(255,255,255,.05)}
.ti-icon{font-size:24px}
.ti-info{flex:1;text-align:left}
.ti-symbol{font-size:14px;font-weight:600;color:rgba(255,255,255,.9);display:block}
.ti-name{font-size:11px;color:rgba(255,255,255,.4)}
.ti-balance{text-align:right;font-family:var(--font-mono)}
.ti-bal-amount{font-size:13px;color:rgba(255,255,255,.9);display:block}
.ti-bal-usd{font-size:11px;color:rgba(255,255,255,.4)}

/* Pair modal */
.pair-modal{width:380px}
.pair-list{padding:8px}
.pair-item{display:flex;align-items:center;width:100%;padding:12px 14px;background:none;border:none;border-radius:8px;cursor:pointer;transition:background .1s;gap:12px;color:#fff}
.pair-item:hover{background:rgba(255,255,255,.05)}
.pair-item.active{background:rgba(255,255,255,.08)}
.pi-pair{flex:1;text-align:left;font-weight:600;color:rgba(255,255,255,.9);font-size:14px}
.pi-price{font-family:var(--font-mono);font-size:13px;color:rgba(255,255,255,.7)}
.pi-change{font-family:var(--font-mono);font-size:12px;min-width:50px;text-align:right}
.pi-change.positive{color:#38e97c}
.pi-change.negative{color:#ff4546}


/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media(max-width:640px){
  .session-btn{width:auto;min-width:2.5rem;max-width:12rem}
  .session-btn-text{display:none}

  /* Popover → full-width bottom sheet */
  .sp-popover{
    position:fixed;top:auto;bottom:0;left:0;right:0;
    width:100%;max-width:100%;
    border-radius:0.75rem 0.75rem 0 0;
    max-height:85dvh;
    transform:translateY(100%);
  }
  .sp-popover.open{transform:translateY(0)}

  /* Select wallet modal */
  .sw-modal{width:100%;max-width:100%;border-radius:0.75rem 0.75rem 0 0}
}

@media(max-width:480px){
  .sp-popover{max-height:90dvh}
  .sw-modal{max-width:100%;border-radius:12px 12px 0 0}
}