/**
 * Wallet single native layout (Elementor decommission, Phase 3).
 * Reproduces Theme Builder template 163438's structure with a native grid:
 * facts grid → 74.5/24.5 body (main + sidebar). Every content block is a white
 * bordered "card" (the site-wide block/border design, shared with the country +
 * company singles): 1px border, 10px radius, subtle .bs-dt-like shadow, light +
 * dark. Component styling (.bs-ef fields, copy buttons, .bs-lw-* lists, media
 * carousel, advertise-sidebar, newsletter, posts grid, .bs-wc chains box, .bs-gh-*
 * github stats) comes from their own already-loaded stylesheets; this file owns the
 * scaffolding + cards. Spacing is gap-based (no card margins) so nothing double-spaces.
 * Self-contained (no dependency on bs-company-single.css).
 */

.bs-wallet-single {
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 10px 40px;
	box-sizing: border-box;
}

/* body.single's overflow-x:hidden makes the body a scroll container, which breaks
   position:sticky (the tab nav). overflow-x:clip prevents the same horizontal
   overflow WITHOUT creating a scroll container. Higher specificity (html body…)
   beats the global body.single rule; on pre-2022 browsers clip is invalid → falls
   back to the inherited hidden (sticky simply no-ops there, still no h-scroll). */
html body.single-wallet {
	overflow-x: clip;
}

/* Full-width grey band behind the facts + body cards — matches the original #f4f4f4
   section background (edge-to-edge). margin-top is the white gap under the tab nav.
   The ::before full-bleeds via inset calc (no 100vw → no scrollbar overflow). */
.bs-ws-band {
	position: relative;
	z-index: 0;
	margin-top: 20px;
	padding: 24px 0 40px;
}
.bs-ws-band::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: calc(-50vw + 50%);
	right: calc(-50vw + 50%);
	background: #f4f4f4;
}

/* ── Card shell (every content block) ─────────────────── */
.bs-ws-card,
.bs-wallet-facts__col,
.bs-ws-section {
	background: #fff;
	border: 1px solid #e4e7ed;
	border-radius: 10px;
	padding: 20px; /* matches the original Elementor cards */
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
	box-sizing: border-box;
}

/* Sticky tab nav (quick jumps) — pinned to the top while scrolling (the site header
   is static and scrolls away). Full-bleed background matching the page; the list
   already scrolls horizontally on mobile (bs-coin-tabs.css overflow-x:auto). */
.bs-wallet-single .bs-wallet-tab-nav {
	position: sticky;
	top: 0;
	z-index: 30;
	margin: 20px 0 0;
	padding: 12px 0;
}
.bs-wallet-single .bs-wallet-tab-nav::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: calc(-50vw + 50%);
	right: calc(-50vw + 50%);
	background: #fff;
	border-bottom: 1px solid #e4e7ed;
}
html.bs-dark .bs-wallet-single .bs-wallet-tab-nav::before {
	background: #141422;
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Once the tab nav is pinned to the top on scroll (bs-wallet-tabnav.js adds
   --stuck), hide the Claim & Verify / Update Wallet Data CTA pill — keep only the
   Overview / FAQ anchor tabs in the sticky state (operator). :has() is progressive:
   browsers without it simply keep the pill (graceful, no harm). */
.bs-wallet-single .bs-wallet-tab-nav--stuck .bs-coin-tab-nav__item:has(> .bs-coin-tab-nav__link--cta) {
	display: none;
}

/* Anchor targets for the sticky tab nav. scroll-margin-top clears the pinned nav. */
.bs-ws-anchor {
	display: block;
	visibility: hidden;
	height: 0;
	scroll-margin-top: 28px;
}

/* ── Section headings (inside cards) ──────────────────── */
/* Body-section headings — one H2 spec: Roboto Flex 500, 24px / 29px line-height. */
.bs-ws-heading {
	margin: 0 0 18px;
	scroll-margin-top: 90px;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 29px;
}

/* ── Facts grid (4 cards, equal height) ───────────────── */
.bs-wallet-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	align-items: stretch;
	margin: 0 0 10px;
}
.bs-wallet-facts__col {
	min-width: 0;
}
.bs-wf-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 16px;
	line-height: 1.3;
}
.bs-wf-title--sub {
	margin-top: 24px;
}
.bs-wf-fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bs-wf-fields .bs-ef {
	margin: 0;
}
@media (max-width: 900px) {
	.bs-wallet-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.bs-wallet-facts { grid-template-columns: 1fr; }
}

/* ── Body: shares the facts grid's 4-column track so the sidebar lines up exactly
   under the 4th facts card (main spans cols 1-3, sidebar is col 4). ── */
.bs-ws-body {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	align-items: start;
}
.bs-ws-main {
	grid-column: 1 / 4;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bs-ws-sidebar {
	grid-column: 4 / 5;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
@media (max-width: 1024px) {
	.bs-ws-body { grid-template-columns: 1fr; }
	.bs-ws-main,
	.bs-ws-sidebar { grid-column: auto; }
}

/* About | FAQ side-by-side row (stacks on mobile). */
.bs-ws-subcols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	align-items: start;
}
@media (max-width: 768px) {
	.bs-ws-subcols { grid-template-columns: 1fr; }
}

/* About card: What is X? + clamped description + Read-more button. .cpt_description
   clamp/fade come from style.css (global); public.js toggles them via #description-
   readmore. Reproduces the original Elementor button (small brand-blue pill). */
.bs-ws-about .bs-ws-readmore {
	display: inline-block;
	margin-top: 14px;
	padding: 7px 16px;
	background: #1db0e1;
	color: #fff;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
}
.bs-ws-about .bs-ws-readmore:hover {
	background: #189bc7;
	color: #fff;
}

/* Posts sections: h2 heading + "see more" link on one row, grid below. */
.bs-ws-posts-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.bs-ws-posts-head .bs-ws-heading {
	margin: 0;
}
.bs-ws-morelink {
	margin: 0;
	font-size: 14px;
}
.bs-ws-morelink a {
	color: #206389;
	text-decoration: none;
	white-space: nowrap;
}
.bs-ws-morelink a:hover {
	text-decoration: underline;
}
.bs-ws-posts .bs-posts-grid { margin-top: 0; }

/* Newsletter: the widget carries its own visual container, so no extra card. */
.bs-ws-newsletter-inline > * {
	margin: 0;
}

/* Chains supported-coins box: renders its own bordered .bs-wc-box (bs-wallet-
   chains.css), so it sits as a standalone block (NO outer card = no box-in-box).
   The "Coins supported by X" h2 lives INSIDE the box, top-left (padded to line up
   with the search bar below it). */
.bs-ws-main .bs-wc {
	margin: 0;
}
.bs-ws-main .bs-wc-title {
	font-family: 'Roboto Flex', sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 29px;
	margin: 0;
	padding: 16px 18px 0;
}

/* Sidebar "Crypto News" CTA — "Submit a Press Release" (was an Elementor button).
   :link,:visited out-specifies the global `.single a:link{color:#2B7BB9}` so the
   button text stays white on light mode. */
.bs-ws-sidebar .bs-ws-cta,
.bs-ws-sidebar .bs-ws-cta:link,
.bs-ws-sidebar .bs-ws-cta:visited {
	display: block;
	margin-top: 14px;
	padding: 10px 16px;
	background: #1db0e1;
	color: #fff;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}
.bs-ws-sidebar .bs-ws-cta:hover {
	background: #189bc7;
	color: #fff;
}

/* github-statistics card: the widget's content.php carries all .bs-gh-* styling
   (incl. its own chart panel); the outer .bs-ws-card just supplies the card frame. */
.bs-ws-github .bs-gh-wrap {
	margin-top: 4px;
}

/* Media block — moved from the sidebar into the About card, directly under the
   description + read-more, so it takes the description's width (the carousel is
   width:100% + aspect-ratio 16/9, so it sizes to the About column automatically).
   The lone-YT facade case (no carousel wrapper) gets an explicit aspect box so it
   can't collapse. */
.bs-ws-media {
	margin-top: 16px;
}
.bs-ws-media-heading {
	margin: 0 0 10px;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
}
.bs-ws-media > .bs-yt-facade {
	display: block;
	aspect-ratio: 16 / 9;
	height: auto;
	border-radius: 8px;
	overflow: hidden;
}

/* ── Dark mode ────────────────────────────────────────── */
html.bs-dark .bs-ws-card,
html.bs-dark .bs-wallet-facts__col,
html.bs-dark .bs-ws-section {
	background: #22223a;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
html.bs-dark .bs-ws-band::before {
	background: #16161f;
}