/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* ---- Section scaffolding ---- */
.section{ padding:104px 0; }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head h2{ font-size:38px; margin-top:14px; }
.section-tight{ padding:64px 0; }

/* ---- Stat / KPI cards ---- */
.stat-card{ background:var(--white); border:1px solid var(--line-200); border-radius:var(--radius-md); padding:22px; }
.stat-card .label{ font-size:13px; color:var(--ink-400); font-weight:600; display:flex; align-items:center; justify-content:space-between; }
.stat-card .value{ font-family:var(--font-mono); font-size:28px; font-weight:600; margin-top:10px; color:var(--navy-900); }
.stat-card .delta{ font-size:12.5px; font-weight:600; margin-top:8px; display:flex; align-items:center; gap:4px; }

/* ---- Balance hero card (dashboard) ---- */
.balance-card{
  background:linear-gradient(135deg, var(--navy-900) 0%, var(--blue-700) 100%);
  border-radius:var(--radius-lg);
  padding:30px 32px;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.balance-card::after{
  content:""; position:absolute; right:-60px; top:-60px; width:240px; height:240px;
  background:radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
}
.balance-card .top-row{ display:flex; justify-content:space-between; align-items:flex-start; }
.balance-card .amount{ font-family:var(--font-mono); font-size:40px; font-weight:600; margin-top:6px; letter-spacing:-0.01em; }
.balance-card .sub{ font-size:13.5px; color:rgba(255,255,255,0.65); margin-top:2px; }
.balance-card .actions{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }

/* ---- Table ---- */
.table-wrap{ overflow-x:auto; }
table.tbl{ width:100%; border-collapse:collapse; font-size:14.5px; }
table.tbl th{ text-align:left; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-400); font-weight:600; padding:0 16px 12px; border-bottom:1px solid var(--line-200); white-space:nowrap; }
table.tbl td{ padding:16px; border-bottom:1px solid var(--line-100); vertical-align:middle; }
table.tbl tr:last-child td{ border-bottom:none; }
table.tbl tbody tr{ transition:background .12s var(--ease); }
table.tbl tbody tr:hover{ background:var(--ice-50); }
.tx-icon{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--ice-100); color:var(--blue-600); flex-shrink:0; }
.tx-row{ display:flex; align-items:center; gap:12px; }
.tx-name{ font-weight:600; color:var(--ink-900); }
.tx-meta{ font-size:12.5px; color:var(--ink-400); }
.amt-pos{ font-family:var(--font-mono); font-weight:600; color:var(--mint-600); }
.amt-neg{ font-family:var(--font-mono); font-weight:600; color:var(--ink-900); }

/* ---- Tabs ---- */
.tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line-200); margin-bottom:26px; }
.tab-btn{ background:none; border:none; padding:12px 6px; margin-right:22px; font-weight:600; font-size:14.5px; color:var(--ink-400); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s var(--ease), border-color .15s var(--ease); }
.tab-btn:hover{ color:var(--ink-700); }
.tab-btn.active{ color:var(--blue-600); border-color:var(--blue-600); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fadeIn .25s var(--ease); }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

/* ---- Steps / process ---- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.step{ position:relative; padding-top:20px; }
.step .num{ font-family:var(--font-mono); font-size:13px; color:var(--blue-600); font-weight:700; }
.step h3{ font-size:20px; margin:12px 0 8px; }
.step p{ color:var(--ink-600); font-size:15px; line-height:1.6; }

/* Transfer status timeline */
.tl{ display:flex; flex-direction:column; }
.tl-item{ display:flex; gap:16px; position:relative; padding-bottom:30px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{ content:""; position:absolute; left:11px; top:26px; bottom:0; width:2px; background:var(--line-200); }
.tl-item:last-child::before{ display:none; }
.tl-dot{ width:24px; height:24px; border-radius:50%; background:var(--mint-100); color:var(--mint-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; z-index:1; }
.tl-item.pending .tl-dot{ background:var(--ice-100); color:var(--blue-600); }
.tl-item.future .tl-dot{ background:var(--line-100); color:var(--ink-400); }
.tl-body .t{ font-weight:600; font-size:14.5px; }
.tl-body .d{ font-size:13px; color:var(--ink-400); margin-top:2px; }

/* ---- Toggle switch ---- */
.switch{ position:relative; display:inline-block; width:44px; height:26px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; inset:0; background:var(--line-200); border-radius:999px; transition:.2s var(--ease); }
.slider::before{ content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s var(--ease); box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.switch input:checked + .slider{ background:var(--blue-600); }
.switch input:checked + .slider::before{ transform:translateX(18px); }

/* ---- Settings row ---- */
.setting-row{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--line-100); gap:20px; }
.setting-row:last-child{ border-bottom:none; }
.setting-row .t{ font-weight:600; font-size:15px; }
.setting-row .d{ font-size:13.5px; color:var(--ink-600); margin-top:3px; }

/* ---- Alert / banner ---- */
.alert{ display:flex; gap:12px; padding:16px 18px; border-radius:var(--radius-sm); font-size:14px; align-items:flex-start; }
.alert-blue{ background:var(--ice-100); color:var(--blue-700); }
.alert-amber{ background:var(--amber-100); color:var(--amber-600); }
.alert-mint{ background:var(--mint-100); color:var(--mint-600); }
.alert svg{ flex-shrink:0; margin-top:1px; }

/* ---- Modal ---- */
.modal-overlay{ position:fixed; inset:0; background:rgba(6,15,34,0.55); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:500; padding:20px; }
.modal-overlay.open{ display:flex; }
.modal{ background:#fff; border-radius:var(--radius-lg); max-width:440px; width:100%; padding:30px; box-shadow:var(--shadow-lg); }
.modal-close{ position:absolute; }

/* ---- Rate ticker ---- */
.rate-ticker{ display:flex; gap:0; overflow:hidden; border-top:1px solid var(--line-200); border-bottom:1px solid var(--line-200); background:var(--white); }
.rate-ticker .track{ display:flex; gap:48px; padding:14px 0; animation:scroll 28s linear infinite; white-space:nowrap; }
.rate-ticker .pair{ font-family:var(--font-mono); font-size:13.5px; color:var(--ink-600); display:flex; gap:8px; align-items:center; }
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---- Pricing / service cards ---- */
.svc-card{ background:#fff; border:1px solid var(--line-200); border-radius:var(--radius-lg); padding:30px; transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--ice-200); }
.svc-icon{ width:48px; height:48px; border-radius:13px; background:var(--ice-100); color:var(--blue-600); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.svc-card h3{ font-size:19px; margin-bottom:8px; }
.svc-card p{ font-size:14.5px; color:var(--ink-600); line-height:1.6; }
.svc-card .rate{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line-100); font-family:var(--font-mono); font-size:13px; color:var(--blue-600); font-weight:600; }

/* ---- FAQ accordion ---- */
.faq-item{ border-bottom:1px solid var(--line-200); }
.faq-q{ width:100%; text-align:left; background:none; border:none; padding:20px 4px; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:16px; color:var(--navy-900); }
.faq-q svg{ transition:transform .2s var(--ease); flex-shrink:0; color:var(--blue-600); }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s var(--ease); }
.faq-item.open .faq-a{ max-height:240px; }
.faq-a p{ padding:0 4px 20px; color:var(--ink-600); font-size:14.5px; line-height:1.65; max-width:640px; }

/* ---- Chat widget ---- */
.chat-fab{ position:fixed; bottom:26px; right:26px; width:58px; height:58px; border-radius:50%; background:var(--blue-600); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); border:none; z-index:400; transition:transform .18s var(--ease); }
.chat-fab:hover{ transform:scale(1.06); }
.chat-panel{ position:fixed; bottom:96px; right:26px; width:340px; max-width:calc(100vw - 40px); background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); z-index:400; display:none; flex-direction:column; overflow:hidden; border:1px solid var(--line-200); }
.chat-panel.open{ display:flex; }
.chat-head{ background:var(--navy-900); color:#fff; padding:16px 18px; display:flex; align-items:center; gap:10px; }
.chat-head .dot{ width:8px; height:8px; border-radius:50%; background:var(--mint-600); }
.chat-body{ padding:16px; display:flex; flex-direction:column; gap:10px; height:280px; overflow-y:auto; background:var(--paper-50); }
.chat-bubble{ padding:10px 14px; border-radius:14px; font-size:13.5px; max-width:80%; line-height:1.45; }
.chat-bubble.agent{ background:#fff; border:1px solid var(--line-200); align-self:flex-start; border-bottom-left-radius:4px; }
.chat-bubble.user{ background:var(--blue-600); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.chat-input-row{ display:flex; border-top:1px solid var(--line-200); padding:10px; gap:8px; }
.chat-input-row input{ flex:1; border:none; outline:none; font-size:13.5px; background:none; }

/* ---- Avatar stack ---- */
.avatar-stack{ display:flex; }
.avatar-stack .av{ width:32px; height:32px; border-radius:50%; border:2px solid #fff; margin-left:-10px; background:var(--ice-200); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--blue-700); }
.avatar-stack .av:first-child{ margin-left:0; }

/* ---- Currency swap card ---- */
.fx-box{ background:var(--paper-50); border:1.5px solid var(--line-200); border-radius:var(--radius-md); padding:18px; }
.fx-swap-btn{ width:38px; height:38px; border-radius:50%; background:#fff; border:1.5px solid var(--line-200); display:flex; align-items:center; justify-content:center; margin:-14px auto; position:relative; z-index:2; color:var(--blue-600); transition:transform .2s var(--ease); }
.fx-swap-btn:hover{ transform:rotate(180deg); border-color:var(--blue-500); }
.fx-flag{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; background:var(--ice-100); font-weight:700; color:var(--blue-700); flex-shrink:0; }

/* ---- Misc ---- */
.divider{ height:1px; background:var(--line-200); border:none; margin:24px 0; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--radius-pill); border:1.5px solid var(--line-200); font-size:13.5px; font-weight:600; color:var(--ink-700); background:#fff; transition:.15s var(--ease); }
.chip.active, .chip:hover{ border-color:var(--blue-500); color:var(--blue-600); background:var(--ice-50); }
.breadcrumb{ font-size:13px; color:var(--ink-400); display:flex; gap:8px; margin-bottom:18px; }
.breadcrumb a:hover{ color:var(--blue-600); }
.progress{ height:6px; background:var(--line-200); border-radius:999px; overflow:hidden; }
.progress .bar{ height:100%; background:var(--blue-600); border-radius:999px; transition:width .3s var(--ease); }
.empty-state{ text-align:center; padding:60px 20px; color:var(--ink-400); }
.empty-state svg{ margin:0 auto 16px; opacity:0.5; }

/* ---- Notification dropdown ---- */
.notif-wrap{ position:relative; }
.notif-panel{ position:absolute; top:calc(100% + 10px); right:0; width:320px; max-height:400px; overflow-y:auto; background:#fff; border:1px solid var(--line-200); border-radius:14px; box-shadow:var(--shadow-lg); z-index:250; display:none; }
.notif-panel.open{ display:block; animation:fadeIn .18s var(--ease); }
.notif-head{ padding:14px 16px; font-weight:700; font-size:13.5px; border-bottom:1px solid var(--line-100); color:var(--navy-900); }
.notif-item{ display:flex; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line-100); }
.notif-item:last-child{ border-bottom:none; }
.notif-item .ic{ width:32px; height:32px; border-radius:50%; background:var(--ice-100); color:var(--blue-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notif-item .txt{ flex:1; min-width:0; }
.notif-item .t{ font-size:13px; font-weight:600; color:var(--navy-900); line-height:1.4; }
.notif-item .d{ font-size:11.5px; color:var(--ink-400); margin-top:3px; }
.notif-empty{ padding:34px 16px; text-align:center; color:var(--ink-400); font-size:13px; }

@media (max-width: 640px){
  .notif-panel{ width:min(320px, calc(100vw - 32px)); right:-8px; }
  .section{ padding:64px 0; }
  .steps{ grid-template-columns:1fr; }
  .section-head h2{ font-size:29px; }
  .balance-card .amount{ font-size:32px; }
  .chat-panel{ right:16px; bottom:88px; }
  .chat-fab{ right:16px; bottom:16px; }
}