/* ============================================================
   Split — Buy page (buy.html). Loads after styles.css.
   ============================================================ */

.page-head--swap{ padding-bottom:28px; }
.page-head--swap .page-head__lead{ max-width:620px; }

.swap-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:28px; align-items:start;
}

/* ---------- the swap card ---------- */
.swap{ padding:20px; max-width:560px; width:100%; justify-self:center; box-shadow:var(--shadow); border-color:var(--line-strong); }
.swap__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }

.swap__tabs{
  display:inline-flex; padding:3px; gap:2px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-pill);
}
.swap__tabs button{
  border:0; background:transparent; color:var(--muted); cursor:pointer;
  font-weight:600; font-size:14px; padding:7px 18px; border-radius:var(--radius-pill);
  transition:background .15s, color .15s;
}
.swap__tabs button:hover{ color:var(--ink); }
.swap__tabs button[aria-selected="true"]{ background:var(--surface-3); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-strong); }

.swap__gear{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:var(--radius-pill);
  color:var(--muted); font-size:13px; padding:6px 12px;
  transition:border-color .15s, color .15s;
}
.swap__gear:hover, .swap__gear[aria-expanded="true"]{ color:var(--ink); border-color:var(--line-strong); }
.swap__gear strong{ color:var(--ink); font-weight:600; }

.swap__slip{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:14px; margin-bottom:12px;
}
.swap__slip-label{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.swap__slip-opts{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.swap__slip-opts > button{
  border:1px solid var(--line-strong); background:transparent; color:var(--ink-2); cursor:pointer;
  font-size:13.5px; font-weight:600; padding:7px 14px; border-radius:var(--radius-sm);
}
.swap__slip-opts > button:hover{ color:var(--ink); }
.swap__slip-opts > button[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--ink); }
.swap__slip-custom{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:13.5px; }
.swap__slip-custom .input{ width:92px; padding:7px 10px; font-size:13.5px; }
.swap__slip-note{ margin:10px 0 0; font-size:13px; color:var(--muted); }
.swap__slip-note.is-warn{ color:var(--warn); }

.swap__box{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; transition:border-color .15s;
}
.swap__box:focus-within{ border-color:var(--line-strong); }
.swap__box--out{ background:var(--bg-2); }
.swap__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.swap__row + .swap__row{ margin-top:6px; }
.swap__row--sub{ min-height:24px; }
.swap__label{ font-size:13px; font-weight:500; color:var(--muted); }
.swap__bal{
  border:0; background:none; padding:0; cursor:pointer;
  font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums;
}
.swap__bal:hover{ color:var(--ink); }
.swap__bal--static{ cursor:default; }
.swap__bal--static:hover{ color:var(--muted); }

.swap__amt{
  flex:1; min-width:0; width:100%;
  background:transparent; border:0; outline:none; padding:0;
  font-size:32px; font-weight:600; letter-spacing:-.02em; line-height:1.25; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.swap__amt::placeholder{ color:var(--muted); opacity:.6; }
.swap__amt:focus-visible{ outline:none; }
.swap__amt--out{ display:block; }
.swap__amt.is-stale{ opacity:.45; }

.swap__token{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  padding:5px 12px 5px 5px; border-radius:var(--radius-pill);
  background:var(--surface-3); border:1px solid var(--line-strong);
  font-weight:600; font-size:15px;
}
.swap__token:empty{ display:none; }
.swap__token .tok-icon{ width:24px; height:24px; }
.swap__usd{ font-size:13px; color:var(--muted); }

.swap__pcts{ display:inline-flex; gap:6px; }
.swap__pcts button{
  border:1px solid var(--line-strong); background:transparent; color:var(--ink-2); cursor:pointer;
  font-size:12px; font-weight:600; padding:3px 9px; border-radius:var(--radius-pill);
}
.swap__pcts button:hover{ color:var(--ink); border-color:var(--accent-line); background:var(--accent-soft); }

.swap__flipwrap{ position:relative; height:8px; z-index:1; }
.swap__flip{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:38px; height:38px; display:grid; place-items:center; cursor:pointer;
  background:var(--surface-3); color:var(--ink-2);
  border:4px solid var(--surface); border-radius:12px;
  transition:color .15s, background .15s;
}
.swap__flip:hover{ color:var(--ink); background:#222c3d; }
.swap__flip svg{ transition:transform .2s ease; }
.swap__flip:hover svg{ transform:rotate(180deg); }

.swap__details{ margin:14px 0 0; padding:4px 2px 0; display:grid; gap:0; }
.swap__details > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:7px 0; font-size:13.5px; border-bottom:1px solid var(--line);
}
.swap__details > div:last-child{ border-bottom:0; }
.swap__details dt{ color:var(--muted); flex:none; }
.swap__details dd{ margin:0; text-align:right; color:var(--ink-2); min-width:0; overflow-wrap:anywhere; }
.swap__details dd.is-warn{ color:var(--warn); }
.swap__details dd.is-bad{ color:var(--bad); font-weight:600; }

.swap__cta{ width:100%; margin-top:16px; font-size:16px; padding:16px 22px; }
.swap__cta.is-warn{ background:#8f2a2a; }
.swap__cta.is-warn:hover{ background:#a33030; }

.swap__status{ margin:12px 0 0; font-size:13.5px; color:var(--ink-2); min-height:0; overflow-wrap:anywhere; }
.swap__status:empty{ display:none; }
.swap__status .tx-link{ font-family:inherit; font-size:inherit; white-space:nowrap; }   /* words, not a hash: body type */
.swap__status--ok{ color:var(--ink); }
.swap__status--ok strong{ color:#5fd35f; }
.swap__status--warn{ color:var(--warn); }
.swap__status--bad{ color:#ff8a8a; }
.tx-link{ color:var(--accent); font-weight:600; white-space:nowrap; }
.tx-link:hover{ text-decoration:underline; }

/* header wallet button */
#walletBtn.is-connected{ font-family:var(--mono); font-size:13px; font-weight:500; }
#walletBtn.is-connected::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--good); }
#walletBtn.is-wrong{ border-color:rgba(250,178,25,.5); color:var(--warn); }

/* ---------- side column ---------- */
.swap-side{ display:grid; gap:16px; }
.side-card{ padding:20px; }
.side-card__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.side-card__title{ font-size:15px; font-weight:700; margin:0; letter-spacing:-.01em; }
.side-card__text{ margin:0; font-size:14px; color:var(--ink-2); line-height:1.55; }
.side-card__btn{ margin-top:14px; width:100%; }

.token-row{
  display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
}
.token-row .tok-icon{ width:36px; height:36px; }
.token-row__meta{ display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.35; }
.token-row__addr{ font-family:var(--mono); font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.token-row__actions{ display:flex; gap:2px; flex:none; }

.hold__value{ font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.hold__usd{ color:var(--muted); font-size:14px; margin:2px 0 12px; min-height:1em; }
#holdCard .next__link{ font-size:14px; }

.basket-icons{
  list-style:none; margin:16px 0 14px; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px 8px;
}
.basket-icons li{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.basket-icons .tok-icon{ width:28px; height:28px; }
.basket-icons span:not(.tok-icon){ font-size:11.5px; font-weight:600; color:var(--ink-2); letter-spacing:.02em; }
.swap-side .card .next__link{ font-size:14px; }

.how-buy{ list-style:none; counter-reset:how; margin:4px 0 0; padding:0 4px; display:grid; gap:14px; }
.how-buy li{
  counter-increment:how; position:relative; padding-left:38px;
  font-size:14px; color:var(--ink-2); line-height:1.5;
}
.how-buy li::before{
  content:counter(how); position:absolute; left:0; top:-1px;
  width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--line-strong);
  font-size:12.5px; font-weight:700; color:var(--ink);
}
.how-buy strong{ color:var(--ink); font-weight:600; }

/* ---------- wallet chooser ---------- */
.wallet-pick{
  position:fixed; inset:0; z-index:100;
  background:rgba(4,7,12,.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:grid; place-items:center; padding:16px;
}
.wallet-pick__panel{ width:100%; max-width:380px; padding:18px; box-shadow:var(--shadow); border-color:var(--line-strong); }
.wallet-pick__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.wallet-pick__head h2{ font-size:17px; margin:0; }
.wallet-pick__list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.wallet-pick__list button{
  width:100%; display:flex; align-items:center; gap:12px; cursor:pointer; text-align:left;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; font-weight:600; font-size:15px;
  transition:border-color .15s, background .15s;
}
.wallet-pick__list button:hover{ border-color:var(--accent-line); background:var(--accent-soft); }
.wallet-pick__list img{ width:28px; height:28px; border-radius:6px; flex:none; }
.wallet-pick__blank{ width:28px; height:28px; border-radius:6px; background:var(--surface-3); flex:none; }

/* ---------- responsive ---------- */
@media (max-width: 1000px){
  .swap-layout{ grid-template-columns:1fr; }
  .swap{ justify-self:stretch; max-width:none; }
  .swap-side{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .how-buy{ grid-column:1 / -1; }
}
@media (max-width: 700px){
  .swap-side{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .swap{ padding:14px; }
  .swap__amt{ font-size:26px; }
  .swap__tabs button{ padding:7px 14px; }
  .swap__gear > span{ font-size:12.5px; }
  .swap__details > div{ font-size:13px; }
  .basket-icons{ grid-template-columns:repeat(4,1fr); }
  .header__actions #walletBtn{ max-width:150px; overflow:hidden; text-overflow:ellipsis; }
}
@media (max-width: 380px){
  .swap__gear > span{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .swap__flip svg, .swap__flip:hover svg{ transition:none; transform:none; }
}