/* ═══════════════════════════════════════════════════════════════════════════
   public/css/layout-polish.css — shared layout + finish pass
   ───────────────────────────────────────────────────────────────────────────
   Loaded LAST on every page, so it can settle differences the individual page
   stylesheets left behind. Two jobs:

   1. STRUCTURE — every page used to pick its own content width and padding
      (1280px dashboards next to a 560px numbers wizard), which is why moving
      between pages felt like moving between two different sites. Everything now
      shares one measure, one gutter and one vertical rhythm.

   2. FINISH — the numbers flow gets real colour and hierarchy: a highlighted
      price, colour-coded stock and status chips, crisper cards and clear
      focus states.

   Only layout and presentation live here; no behaviour depends on this file.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --kls-page-w: 1180px;     /* dashboards, listings, settings */
  --kls-flow-w: 720px;      /* focused single-task flows (deposit, wizard) */
  --kls-gutter: 20px;
  --kls-block: 22px;        /* vertical space between blocks */
  --kls-ring: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}

/* ── 1. ONE CONTENT MEASURE ───────────────────────────────────────────────── */

.section-wrap,
.container,
.settings-wrap,
.page > .wrap,
.an-table-wrap {
  width: 100%;
  max-width: var(--kls-page-w);
  margin-inline: auto;
  padding-inline: var(--kls-gutter);
}

/* Focused flows stay narrow but no longer look cramped next to wide pages. */
.wrap,
.deposit-wrap,
.kls-stack.deposit-wrap {
  width: 100%;
  max-width: var(--kls-flow-w);
  margin-inline: auto;
  padding-inline: var(--kls-gutter);
}

/* Equal breathing room top and bottom on every page, so no page reads as
   "taller" or "emptier" than its neighbour. */
main,
.page,
.dep-screen {
  padding-block: clamp(16px, 3vw, 32px);
}

/* Consistent gap between stacked blocks instead of ad-hoc margins. */
.section-wrap > * + *,
.settings-wrap > * + * {
  margin-top: var(--kls-block);
}

.settings-card,
.card {
  border-radius: var(--r16, 16px);
}

/* ── 2. NUMBERS PAGE — colour + sharpness ────────────────────────────────── */

.wrap .card,
.select-tile {
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--sh2);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.select-tile:hover,
.wrap .card:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(47, 123, 246, .16);
}

.select-tile:focus-visible,
.btn:focus-visible,
.btn-outline:focus-visible,
.cs-btn:focus-visible {
  outline: none;
  box-shadow: var(--kls-ring);
}

/* Step markers read as progress, not as plain text. */
.step-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold);
}
.step-label::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold3));
}

/* The price is the single most important number on the page — make it read
   that way, and keep it legible whether it renders in ₦ or $. */
.st-value,
.cs-val {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--t1);
}
.st-value {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
}

.st-label,
.cs-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t2);
}

.st-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  color: var(--gold);
}

/* Stock / availability chips: colour carries the meaning. */
.stock-chip,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  border: 1px solid transparent;
}
.stock-chip,
.chip.ok,
.chip.in-stock {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  border-color: color-mix(in srgb, var(--green) 34%, transparent);
  color: var(--green);
}
.chip.low,
.chip.pending {
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  border-color: color-mix(in srgb, var(--gold) 36%, transparent);
  color: var(--gold);
}
.chip.out,
.chip.err,
.chip.failed {
  background: color-mix(in srgb, var(--red) 14%, transparent);
  border-color: color-mix(in srgb, var(--red) 34%, transparent);
  color: var(--red);
}

.pdot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
}

/* Primary action carries weight; secondary stays quiet. */
.wrap .btn,
.kls-btn-primary {
  font-weight: 800;
  letter-spacing: .01em;
  border-radius: var(--r12, 12px);
}
.wrap .btn-outline {
  background: transparent;
  border: 1.5px solid var(--border2);
  color: var(--t1);
}
.wrap .btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.srv-note,
.srv-sub,
.wa-note {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--t2);
}

/* ── 3. WALLET SURFACES ──────────────────────────────────────────────────── */

.wal-hero-amt {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.wal-error {
  border: 1px solid color-mix(in srgb, var(--red) 34%, transparent);
  background: color-mix(in srgb, var(--red) 8%, transparent);
}
.kls-chip-select[aria-pressed="true"] {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}
.kls-address-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  word-break: break-all;
}

/* ── 4. SMALL SCREENS ────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  :root { --kls-gutter: 14px; --kls-block: 16px; }
  .wrap, .deposit-wrap, .section-wrap, .container, .settings-wrap { max-width: 100%; }
}

/* ── 5. FULL-WIDTH ALIGNMENT (fixes "one part is wider than the other") ─────
   Symptom: the header/hero sat on a different width to the rest of the page,
   leaving a pale strip down one side and letting the page scroll sideways on
   phones. Cause: a child wider than the viewport (a table, a long wallet
   address, a 100vw block that ignores the scrollbar) stretched the document
   while sticky/positioned sections stayed at 100%.
   Fix: clamp the document to the viewport, make the banded sections span the
   full width, and let long unbroken strings wrap. */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.navbar,
.hero,
.footer,
.page,
main,
section {
  width: 100%;
  max-width: 100%;
}

/* Anything sized to the viewport must exclude the scrollbar, otherwise it is
   wider than the body and drags the whole layout sideways. */
[style*="100vw"],
.full-bleed {
  max-width: 100%;
}

/* Long, unbreakable strings (wallet addresses, references, emails) are the
   most common single cause of a page growing wider than the screen. */
.kls-address-value,
.va-account-number,
.mono,
code,
.ref-code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Wide tables scroll inside their own box instead of stretching the page. */
table {
  max-width: 100%;
}
.table-wrap,
.an-table-wrap,
.tx-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Media never exceeds its column.
   NOTE: inline <svg><use/></svg> sprite icons are deliberately NOT in this
   list. They carry no viewBox of their own, so `height:auto` made every one
   of them fall back to the SVG default box of 300x150 — that is what blew the
   WhatsApp buttons and link cards up into huge empty slabs. */
img,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

/* Inline sprite icons keep a fixed, sane box everywhere. */
svg.icon,
svg.wa-icon,
svg.rs-ic,
svg.ri-icon {
  flex: none;
}
svg.icon { width: 1.05em; height: 1.05em; }
svg.wa-icon { width: 17px; height: 17px; }
svg.wa-icon-lg { width: 26px; height: 26px; flex: none; }

/* Safety net: a sprite <svg> with neither a viewBox nor an explicit size has no
   intrinsic ratio, so the browser falls back to 300x150. Never let that happen. */
svg:not([viewBox]):not([width]) {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

/* Inner containers share one gutter and one max width, so the header, hero and
   body content all line up on the same left and right edges. */
.nav-inner,
.hero-inner,
.footer-inner {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--kls-gutter, 20px);
}

/* Page containers keep whatever max-width their own page sets — only the
   gutter and the "never wider than the screen" rule are shared. */
.wrap,
.container,
.deposit-wrap,
.section-wrap {
  width: 100%;
  margin-inline: auto;
}

/* ── 8. HERO + WHATSAPP ACTION POLISH ─────────────────────────────────────
   The hero used to drop a full-width, near-white slab behind "WhatsApp Us"
   on mobile, and the three WhatsApp chips wrapped into ragged rows. Both
   are now a balanced, equal-width grid that keeps the same rhythm on every
   screen size, with the WhatsApp actions carrying real WhatsApp green. */

.hero-section {
  padding: clamp(56px, 9vw, 90px) var(--kls-gutter, 20px) clamp(32px, 5vw, 56px);
}

.hero-content { max-width: 720px; }

.hero-h1 { text-wrap: balance; }
.hero-p  { text-wrap: pretty; margin-inline: auto; max-width: 56ch; }

/* Actions: side by side on desktop, two equal blocks on mobile — never a
   single stretched white panel. */
.hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 460px;
  margin-inline: auto;
  margin-bottom: clamp(24px, 4vw, 36px);
}

.hero-actions .hero-cta,
.hero-actions .hero-wa {
  width: 100%;
  justify-content: center;
  padding-block: 14px;
  border-radius: 14px;
  font-size: clamp(14px, 2.6vw, 15px);
  line-height: 1.2;
  white-space: nowrap;
}

.hero-actions .hero-cta {
  box-shadow: 0 10px 24px -12px color-mix(in oklab, var(--gold) 70%, transparent);
}
.hero-actions .hero-cta:hover { transform: translateY(-1px); }

/* Branded WhatsApp button — readable in light, dark and off themes. */
.hero-wa {
  background: color-mix(in oklab, #25d366 16%, transparent);
  border: 1.5px solid color-mix(in oklab, #25d366 45%, transparent);
  color: var(--t1);
}
.hero-wa:hover {
  background: color-mix(in oklab, #25d366 26%, transparent);
  border-color: #25d366;
  transform: translateY(-1px);
}
.hero-wa .wa-icon { color: #25d366; }

@media (max-width: 380px) {
  .hero-actions { grid-template-columns: minmax(0, 1fr); }
}

/* Three WhatsApp destinations as one even row (or a clean 1-column stack on
   small phones) instead of three differently sized floating pills. */
.hero-links-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 620px;
  margin-inline: auto;
  padding: 0 var(--kls-gutter, 20px) clamp(28px, 5vw, 44px);
}

.hero-links-row .hlink {
  justify-content: center;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
  background: var(--card);
  border: 1px solid var(--border2);
  text-align: center;
  min-width: 0;
}
.hero-links-row .hlink .wa-icon { color: #25d366; flex: none; }
.hero-links-row .hlink:hover {
  border-color: color-mix(in oklab, #25d366 55%, transparent);
  background: color-mix(in oklab, #25d366 10%, var(--card));
  transform: translateY(-1px);
}

@media (max-width: 560px) {
  .hero-links-row { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
}

/* Stats strip: even columns so the numbers stop drifting off-centre. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 6px;
  max-width: 560px;
  margin-inline: auto;
}
.hero-stats .hstat { flex-direction: column; text-align: center; }
.hero-stats .hstat-div { display: none; }
@media (min-width: 720px) {
  .hero-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 760px; }
}

/* ── Navbar: keep every control (incl. the profile button) on screen ───────── */
.nav-inner { gap: 10px; }
.nav-right { gap: 8px; min-width: 0; flex-wrap: nowrap; }
.nav-right > * { flex: none; }
.brand-ksl { display: inline-flex; align-items: center; gap: 5px; }
.brand-verified { width: 15px; height: 15px; flex: none; }
.hero-tick { width: 15px; height: 15px; flex: none; vertical-align: -2px; }

@media (max-width: 720px) {
  .nav-inner { gap: 8px; padding: 0 12px; }
  .nav-right { gap: 6px; }
  .nav-hide-sm { display: none !important; }
  .brand-full { display: none; }
  .nav-avatar, .notif-btn, .theme-btn, .hamburger { width: 34px; height: 34px; }
  .nav-balance-btn { padding: 6px 9px; font-size: 12px; max-width: 118px; overflow: hidden; }
  .kls-lang-btn { padding: 6px 8px; }
  .btn-nav-login, .btn-nav-reg { padding: 8px 12px; font-size: 12.5px; white-space: nowrap; }
}
@media (max-width: 420px) {
  .nav-inner { padding: 0 10px; gap: 6px; }
  .nav-right { gap: 5px; }
  .brand-icon { width: 32px; height: 32px; }
  .nav-balance-btn { max-width: 96px; }
  .kls-lang-code { display: none; }
}
/* The profile button is the point of the logged-in navbar — never let it be clipped. */
.nav-avatar-wrap { flex: none !important; }
body:not(.logged-out) #navAvatarWrap { display: block !important; }

/* ── Trust row ─────────────────────────────────────────────────────────────── */
.trust-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin: 18px 0 22px;
}
.trust-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border2);
  font-size: 12.5px; font-weight: 700; color: var(--t1);
}

/* ── Live activity (last 5 hours) ──────────────────────────────────────────── */
.live-stats-sec { padding: 8px var(--kls-gutter, 20px) 6px; }
.ls-head { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 14px; }
.ls-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #1f6fd6;
  background: color-mix(in oklab, #1f6fd6 12%, transparent);
  border: 1px solid color-mix(in oklab, #1f6fd6 35%, transparent);
  padding: 4px 9px; border-radius: 999px;
}
.ls-dot { width: 7px; height: 7px; border-radius: 50%; background: #1f6fd6; animation: lsPulse 1.6s infinite; }
@keyframes lsPulse { 0%,100% { opacity: 1; transform: scale(1) } 50% { opacity: .35; transform: scale(.8) } }
.ls-title { font-size: 13px; font-weight: 700; color: var(--t2); }
.ls-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  max-width: 860px; margin: 0 auto;
}
@media (min-width: 720px) { .ls-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ls-card {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 14px; padding: 14px 12px; text-align: center;
}
.ls-num { font-family: 'Sora', system-ui, sans-serif; font-size: clamp(18px, 4.4vw, 24px); font-weight: 800; color: var(--t1); }
.ls-label { margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--t2); }
.ls-feed { max-width: 860px; margin: 12px auto 0; display: grid; gap: 6px; }
.ls-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 12px;
  background: var(--card2); border: 1px solid var(--border);
  font-size: 12.5px; color: var(--t1);
}
.ls-row .ls-when { margin-left: auto; color: var(--t3); font-size: 11.5px; white-space: nowrap; }
.ls-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  padding: 3px 7px; border-radius: 6px;
}
.ls-tag.buy { background: color-mix(in oklab, #2f7bf6 15%, transparent); color: #2f7bf6; }
.ls-tag.dep { background: color-mix(in oklab, #1f6fd6 15%, transparent); color: #1f6fd6; }