/* SpillTheBuzz Lyrics — brand redesign. Fonts (Anton / Inter / Space Mono) are enqueued in spillthebuzz-lyrics.php. */

:root{
	/* ---- Brand tokens (Aug 2026 redesign) ---- */
	--stb-ink: #14121A;      /* near-black, header + dark bands */
	--stb-paper: #FAF9F7;    /* page background */
	--stb-buzz: #FF3B5C;     /* signature coral-red accent */
	--stb-gold: #F5B700;     /* chart / heat accent, used sparingly */
	--stb-violet: #241B3D;   /* Trending Lyrics band background */
	--stb-line-dark: rgba(255,255,255,.12);

	--stb-font-display: 'Anton', sans-serif;
	--stb-font-body: 'Inter', sans-serif;
	--stb-font-mono: 'Space Mono', monospace;

	/* ---- Legacy aliases kept so existing markup/selectors don't break ---- */
	--stb-accent: var(--stb-buzz);
	--stb-text: #1a1a1a;
	--stb-muted: #6b6b6b;
	--stb-border: #ececec;
	--stb-bg-card: #fafafa;
	--stb-radius: 14px;

	/* Overridden inline per-song by PHP (wp_head) — see STB_Hero_Color */
	--stb-hero-color: #1a1a1a;
	/* Must match the real rendered height of your "Song Page Header" in UAE */
	--stb-header-h: 88px;
	/* Hero inner-content width — keep this equal to your header's content width */
	--stb-content-max: 1240px;

	/* ---- Chart/trending row tokens — light (default) values here,
	   redefined per-context inside .stb-trending-band further down. Kept
	   in this SAME :root block (not a second one) because some hosting
	   CSS optimizers mis-handle a second :root block, silently dropping
	   properties declared in it. */
	--stb-row-rank: var(--stb-text);
	--stb-row-title: var(--stb-text);
	--stb-row-tag: var(--stb-muted);
	--stb-row-artist: var(--stb-muted);
	--stb-row-heat: var(--stb-buzz);
	--stb-row-views: var(--stb-muted);
	--stb-row-play-bg: var(--stb-ink);
	--stb-row-play-hover: var(--stb-buzz);
	--stb-row-hover-bg: rgba(20,18,26,.035);
}

.stb-notice{ color: var(--stb-muted); font-style: italic; }

/* ---------- Blog grid (Latest Posts) ---------- */
.stb-blog-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 26px;
	margin: 24px 0;
}
.stb-blog-card{
	border: 1px solid var(--stb-border);
	border-radius: var(--stb-radius);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
	background: #fff;
}
.stb-blog-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 32px rgba(20,18,26,.09); }
.stb-blog-card-link{ display:block; text-decoration:none; color:inherit; }
.stb-blog-card-img{ aspect-ratio: 16/10; overflow:hidden; background:#f2f2f2; }
.stb-blog-card-img img{ width:100%; height:100%; object-fit: cover; display:block; transition: transform .3s ease; }
.stb-blog-card:hover .stb-blog-card-img img{ transform: scale(1.05); }
.stb-blog-card-body{ padding: 20px 20px 22px; }
.stb-blog-card-cat{ font-family: var(--stb-font-body); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing:.07em; color: var(--stb-buzz); }
.stb-blog-card-body .stb-blog-card-title{ margin: 9px 0 8px; font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--stb-text); }
.stb-blog-card-excerpt{ margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--stb-muted); }
.stb-blog-card-foot{ display:flex; align-items:center; justify-content:space-between; }
.stb-blog-card-date{ font-family: var(--stb-font-mono); font-size: 12px; color: var(--stb-muted); }
.stb-blog-card-more{ display:flex; align-items:center; gap:5px; font-size: 13px; font-weight: 700; color: var(--stb-buzz); }
.stb-blog-card-more svg{ transition: transform .15s ease; }
.stb-blog-card:hover .stb-blog-card-more svg{ transform: translateX(3px); }

/* ---------- Charts ---------- */
.stb-charts-wrap{ margin: 16px 0; }

.stb-charts-filterbar{
	display:flex; align-items:center; gap:8px;
	padding-bottom: 14px; margin-bottom: 6px;
	border-bottom: 1px solid var(--stb-border);
	font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.stb-charts-filter-chip{ color: var(--stb-text); }
.stb-charts-filter-sep{ color: var(--stb-border); }
.stb-charts-genre-select{
	border: 1px solid var(--stb-border); border-radius: 6px;
	padding: 5px 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: var(--stb-text); background:#fff; cursor:pointer;
}

/* Row color tokens live in the single :root block at the top of this file. */
.stb-chart-row{
	display: grid;
	grid-template-columns: 32px 56px 1fr 180px 64px 72px 40px;
	align-items: center;
	gap: 16px;
	margin: 0 -14px;
	padding: 14px 14px;
	border-radius: 12px;
	position: relative;
	transition: background .15s ease;
}
.stb-chart-row:hover{ background: var(--stb-row-hover-bg); }
.stb-chart-rank{ font-family: var(--stb-font-mono); font-weight: 700; color: var(--stb-row-rank); text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; }
.stb-chart-cover{ position:relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background:#f2f2f2; flex-shrink:0; box-shadow: 0 3px 8px rgba(0,0,0,.15); }
.stb-chart-cover img{ position:absolute; inset:0; width:100%!important; height:100%!important; max-width:none; object-fit:cover; display:block; }
.stb-chart-info{ display: flex; flex-direction: column; min-width: 0; gap: 3px; }
/* .stb-chart-info prefix bumps specificity to (0,2,0) — beats Elementor's
   global ".elementor-kit-XXX a { color: ... }" rule (0,1,1), which was
   silently overriding this on every page since Elementor's kit CSS still
   loads for the header/footer. Confirmed via DevTools computed styles. */
.stb-chart-info .stb-chart-title{
	font-family: var(--stb-font-body); font-weight: 700; font-size: 16px; color: var(--stb-row-title); text-decoration: none;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	display:flex; align-items:baseline; gap:8px;
}
.stb-chart-info .stb-chart-title:hover{ color: var(--stb-buzz); }
.stb-chart-lyrics-tag{ font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing:.06em; color: var(--stb-row-tag); flex-shrink:0; }
.stb-chart-artist-inline{ display:none; font-size: 13px; color: var(--stb-row-artist); }
.stb-chart-artist-col{ font-size: 14px; color: var(--stb-row-artist); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stb-chart-heat{ display:flex; align-items:center; gap:4px; color: var(--stb-row-heat); font-weight:700; font-family: var(--stb-font-mono); font-size:13px; }
.stb-chart-heat.is-empty{ visibility:hidden; } /* keeps the grid column reserved so later columns (views, play button) don't shift */
.stb-chart-views{ display:flex; align-items:center; gap:5px; color: var(--stb-row-views); font-family: var(--stb-font-mono); font-size:13px; white-space:nowrap; }
/* General fallback so the play button looks right in ANY context (chart
   rows, playlist items, etc) via the --stb-row-* tokens — without this,
   contexts other than .stb-chart-row (like the Playlist widget) would get
   an unstyled native <button>. */
.stb-mini-play{
	box-sizing: border-box;
	width: 36px; height: 36px; min-width:36px; max-width:36px; flex-shrink:0;
	border-radius: 50%; border: none;
	background: var(--stb-row-play-bg); color: #fff; display:flex; align-items:center; justify-content:center;
	cursor: pointer; font-size: 12px; line-height:1; padding:0; margin:0; transition: transform .15s ease, background .15s ease;
	box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
.stb-mini-play:hover{ transform: scale(1.08); background: var(--stb-row-play-hover); }
.stb-mini-play.is-playing{ background: var(--stb-row-play-hover); }

/* .stb-chart-row prefix (0,2,0) beats a potential Elementor global button
   style (".elementor-kit-XXX button", 0,1,1) — without it, Elementor's
   default button padding/sizing can win and make this render wider than
   intended, which is what was pushing it off-screen on mobile. box-sizing
   and !important on the sizing props are extra insurance since padding
   alone can blow out a fixed width/height if box-sizing isn't content-box. */
.stb-chart-row .stb-mini-play{
	box-sizing: border-box !important;
	width: 36px !important; height: 36px !important; min-width:36px; max-width:36px; flex-shrink:0;
	border-radius: 50%; border: none;
	background: var(--stb-row-play-bg); color: #fff; display:flex; align-items:center; justify-content:center;
	cursor: pointer; font-size: 12px; line-height:1; padding:0 !important; margin:0; transition: transform .15s ease, background .15s ease;
	box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
.stb-chart-row .stb-mini-play:hover{ transform: scale(1.08); background: var(--stb-row-play-hover); }
.stb-chart-row .stb-mini-play.is-playing{ background: var(--stb-row-play-hover); }

.stb-charts-loadmore-wrap{ text-align:center; margin-top: 18px; }
.stb-charts-loadmore{
	border: 1px solid var(--stb-text); background:#fff; color: var(--stb-text);
	font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.04em;
	padding: 10px 28px; border-radius: 24px; cursor:pointer;
	transition: background .12s ease, color .12s ease;
}
.stb-charts-loadmore:hover{ background: var(--stb-text); color:#fff; }
.stb-charts-loadmore:disabled{ opacity:.5; cursor:default; }

/* ---------- Trending Lyrics (Trending / New Releases / Popular tabs) ---------- */
.stb-trending-wrap{ margin: 18px 0; }
.stb-trending-wrap .stb-trending-heading{ margin: 0 0 16px; font-family: var(--stb-font-display); text-transform: uppercase; font-size: 30px; letter-spacing: .015em; }
.stb-trending-tabs{ display:flex; gap:36px; border-bottom:1px solid var(--stb-border); margin-bottom:8px; }

/* Hard reset — themes/page builders often ship a global "button { background:
   black; ... }" rule that's more specific than a plain element selector and
   was overriding this (the active tab was rendering as near-invisible dark
   text on a black button background). "all: unset" strips every inherited
   button/UA style first, then we reapply only what this tab actually needs. */
.stb-trending-tabs .stb-trending-tab{
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	padding: 12px 2px 14px;
	position: relative;
	font-family: var(--stb-font-body);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--stb-muted);
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	transition: color .15s ease;
}
.stb-trending-tabs .stb-trending-tab:hover{ color: var(--stb-text); }
.stb-trending-tabs .stb-trending-tab.is-active{ color: var(--stb-text); }
.stb-trending-tabs .stb-trending-tab.is-active::after{
	content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px;
	background: var(--stb-buzz); border-radius: 3px 3px 0 0;
}
.stb-trending-list{ transition: opacity .12s ease; }
.stb-trending-list[aria-busy="true"]{ opacity:.45; pointer-events:none; }

/* ---- Dark "Trending Lyrics" band ----
   In Elementor: select the Section wrapping the [stb_trending] widget →
   Advanced → CSS Classes → add "stb-trending-band". That single class
   flips the whole block (heading, tabs, rows) to the dark violet treatment
   with gold accents, no other setup needed. Section background can stay
   whatever you like — this overrides it. All row colors below are set as
   CSS variables (not direct properties), so there's nothing for a
   plugin/theme override elsewhere to fight with. */
.stb-trending-band{
	background: var(--stb-violet);
	padding: 60px 0 64px;
	--stb-row-rank: var(--stb-gold);
	--stb-row-title: #fff;
	--stb-row-tag: var(--stb-gold);
	--stb-row-artist: rgba(255,255,255,.62);
	--stb-row-heat: var(--stb-buzz);
	--stb-row-views: rgba(255,255,255,.45);
	--stb-row-play-bg: var(--stb-buzz);
	--stb-row-play-hover: #ff5875;
	--stb-row-hover-bg: rgba(255,255,255,.055);
}
.stb-trending-band .stb-trending-heading{ color: #fff; }
.stb-trending-band .stb-trending-tabs{ border-bottom-color: var(--stb-line-dark); }
.stb-trending-band .stb-trending-tabs .stb-trending-tab{ color: rgba(255,255,255,.5); }
.stb-trending-band .stb-trending-tabs .stb-trending-tab:hover,
.stb-trending-band .stb-trending-tabs .stb-trending-tab.is-active{ color: #fff; }
.stb-trending-band .stb-trending-tabs .stb-trending-tab.is-active::after{ background: var(--stb-gold); }
/* Direct fallbacks (not routed through --stb-row-* tokens) for the two
   elements most likely to get swallowed by an aggressive CSS optimizer —
   these use the same var(--stb-gold)/var(--stb-buzz) pattern already
   proven working on the tabs above, at higher specificity than the base
   .stb-chart-rank / .stb-mini-play rules. */
.stb-trending-band .stb-chart-rank{ color: var(--stb-gold); }
.stb-trending-band .stb-chart-row .stb-mini-play{ background: var(--stb-buzz); border-radius: 50%; }
.stb-trending-band .stb-chart-row .stb-mini-play:hover,
.stb-trending-band .stb-chart-row .stb-mini-play.is-playing{ background: #ff5875; }

/* ---------- Header search bar (songs / artists / news, live suggestions) ---------- */
.stb-search{ position: relative; max-width: 260px; width: 100%; align-self: center; }
.stb-search--align-left{ margin-left: 0; margin-right: auto; }
.stb-search--align-center{ margin-left: auto; margin-right: auto; }
.stb-search--align-right{ margin-left: auto; margin-right: 0; }

/* Elementor header rows default to align-items:stretch, which was forcing
   this widget to match the tallest sibling (the logo) instead of sitting at
   its own natural pill height. Elementor auto-tags each widget's wrapper
   with "elementor-widget-{name}" — target that directly to pin this one to
   its own height and vertical-center it, regardless of row height. */
.elementor-widget-stb_search,
.elementor-widget-stb_search .elementor-widget-container{
	display: flex !important;
	align-items: center !important;
	height: auto !important;
}

/* Icon-only trigger — hidden on desktop, shown in place of the full bar on
   mobile (see the media query below). Also hard-reset for the same reason
   as everything else here: theme button defaults were leaking in. */
.stb-search-toggle{
	all: unset;
	box-sizing: border-box;
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	min-height: 34px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: rgba(255,255,255,.8) !important;
	cursor: pointer;
}
.stb-search-toggle svg{ display:block !important; width:20px !important; height:20px !important; flex-shrink:0; }
.stb-search--light .stb-search-toggle{ color: var(--stb-text) !important; }

.stb-search-panel{ position: static; height: auto; }

/* Hard reset — same theme-conflict pattern as the trending tabs: a global
   input/button rule (white bg, square corners, its own padding) was beating
   our styles and breaking a plain <input> out of the rounded pill. Every
   property below carries !important because the theme's ".elementor-kit
   button" selector has higher specificity than a single class and will win
   on anything left unguarded — that's what caused the icon to render at a
   collapsed 0×16 and the button box to inflate to 42×26 instead of 26×26. */
.stb-search-form{
	all: unset;
	box-sizing: border-box;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	width: 100% !important;
	height: 36px !important;
	max-height: 36px !important;
	background: rgba(255,255,255,.08) !important;
	border: 1px solid rgba(255,255,255,.16) !important;
	border-radius: 999px !important;
	padding: 0 12px 0 6px !important;
	transition: background .15s ease, border-color .15s ease;
}
.stb-search-form:focus-within{
	background: rgba(255,255,255,.14) !important;
	border-color: rgba(255,255,255,.32) !important;
}

.stb-search-submit{
	all: unset;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	min-height: 26px !important;
	max-width: 26px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	cursor: pointer;
	color: rgba(255,255,255,.65) !important;
	background: transparent !important;
	flex: 0 0 auto !important;
	transition: color .15s ease, background .15s ease;
}
.stb-search-submit:hover{ color: #fff !important; background: rgba(255,255,255,.12) !important; }
.stb-search-icon{
	display: block !important;
	pointer-events: none;
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0;
}

.stb-search-input{
	all: unset;
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	background: transparent !important;
	color: #fff !important;
	font-size: 13.5px !important;
	line-height: 1.3;
	padding: 3px 0 !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}
.stb-search-input::placeholder{ color: rgba(255,255,255,.5) !important; }
.stb-search-input::-webkit-search-cancel-button,
.stb-search-input::-webkit-search-decoration{ display:none; -webkit-appearance:none; }

.stb-search-close{
	all: unset;
	box-sizing: border-box !important;
	display: none;
	align-items: center;
	justify-content: center;
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	flex: 0 0 auto !important;
	font-size: 20px !important;
	line-height: 1 !important;
	color: rgba(255,255,255,.65) !important;
	background: transparent !important;
	cursor: pointer;
}

.stb-search--light .stb-search-form{ background:#fff !important; border-color: var(--stb-border) !important; }
.stb-search--light .stb-search-form:focus-within{ border-color: var(--stb-accent) !important; background:#fff !important; }
.stb-search--light .stb-search-submit{ color: var(--stb-muted) !important; }
.stb-search--light .stb-search-submit:hover{ color: var(--stb-text) !important; background: var(--stb-bg-card) !important; }
.stb-search--light .stb-search-input{ color: var(--stb-text) !important; }
.stb-search--light .stb-search-input::placeholder{ color: var(--stb-muted) !important; }
.stb-search--light .stb-search-close{ color: var(--stb-muted) !important; }

.stb-search-suggestions{
	display:none;
	position:absolute; top: calc(100% + 10px); right:0; left:auto;
	width: max-content; min-width: 320px; max-width: min(400px, 92vw); max-height: 420px; overflow-y:auto;
	background:#fff; color: var(--stb-text);
	border-radius: var(--stb-radius);
	box-shadow: 0 14px 34px rgba(0,0,0,.2);
	z-index: 9998;
}
.stb-search-suggestions.is-active{ display:block; }
.stb-search-group{ padding: 6px 0; }
.stb-search-group + .stb-search-group{ border-top: 1px solid var(--stb-border); }
.stb-search-group-label{
	display:block; padding: 8px 14px 4px;
	font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
	color: var(--stb-muted);
}
.stb-search-suggestions .stb-search-item{ display:flex; align-items:center; gap:10px; padding: 8px 14px; text-decoration:none; color: var(--stb-text); }
.stb-search-item:hover, .stb-search-item:focus-visible{ background: var(--stb-bg-card); outline:none; }
.stb-search-item-thumb{
	position:relative; width:36px; height:36px; border-radius:6px; overflow:hidden; background:#f2f2f2; flex: 0 0 auto;
	display:flex; align-items:center; justify-content:center; color:#bbb; font-size:14px;
}
.stb-search-item-thumb img{ position:absolute; inset:0; width:100%!important; height:100%!important; max-width:none; object-fit:cover; display:block; }
.stb-search-item-body{ min-width:0; display:flex; flex-direction:column; }
.stb-search-item-title{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stb-search-item-subtitle{ font-size:12px; color: var(--stb-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stb-search-empty{ padding: 18px 14px; margin:0; color: var(--stb-muted); font-size:13px; text-align:center; }

@media (max-width: 640px){
	/* Collapse to an icon-only trigger. Tapping it expands the bar to fill
	   the header row only (fixed to the very top of the viewport) — it does
	   NOT take over the page below. Live results drop down underneath it as
	   a normal scrollable card, same idea as the desktop dropdown, just
	   full width. */
	.stb-search{ max-width: none; width: auto; }
	.stb-search-toggle{ display: flex; }
	.stb-search-panel{ display: none; }

	.stb-search.is-expanded{
		position: fixed; top: 0; left: 0; right: 0; z-index: 100000;
		display: flex; align-items: center;
		background: #000;
		padding: 10px 14px;
		box-shadow: 0 2px 12px rgba(0,0,0,.25);
	}
	.stb-search--light.is-expanded{ background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.12); }
	.stb-search.is-expanded .stb-search-toggle{ display: none; }
	.stb-search.is-expanded .stb-search-panel{ display: block; width: 100%; }
	.stb-search.is-expanded .stb-search-form{
		background: rgba(255,255,255,.1) !important;
	}
	.stb-search--light.is-expanded .stb-search-form{ background: var(--stb-bg-card) !important; }
	.stb-search.is-expanded .stb-search-input{ font-size: 16px !important; } /* 16px avoids iOS auto-zoom-on-focus */
	.stb-search.is-expanded .stb-search-close{ display: flex; }

	/* Same white dropdown card as desktop — just anchored to the fixed bar
	   above and full width, capped height so it never swallows the page. */
	.stb-search.is-expanded .stb-search-suggestions{
		left: 0; right: 0; top: 100%;
		width: auto; min-width: 0;
		margin: 0;
		max-height: calc(100vh - 64px);
		border-radius: 0 0 var(--stb-radius) var(--stb-radius);
	}
}

body.stb-search-lock-scroll{ overflow: hidden; }

@media (max-width: 720px){
	.stb-chart-row{ grid-template-columns: 22px 44px 1fr auto 34px; gap: 10px; padding: 10px 4px; }
	.stb-chart-artist-col{ display:none; }
	.stb-chart-artist-inline{ display:block; }
	.stb-chart-heat{ display:none; }
	.stb-chart-lyrics-tag{ display:none; }
	.stb-chart-views{ font-size:13px; }
}

/* ---------- Playlist ---------- */
.stb-playlist{ margin: 16px 0; }
.stb-playlist-item{
	display: grid;
	grid-template-columns: 44px 1fr 40px;
	align-items: center;
	gap: 12px;
	padding: 8px 4px;
	border-bottom: 1px solid var(--stb-border);
}
.stb-playlist-cover{ position:relative; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background:#f2f2f2; }
.stb-playlist-cover img{ position:absolute; inset:0; width:100%!important; height:100%!important; max-width:none; object-fit:cover; display:block; }
.stb-playlist-info{ display:flex; flex-direction: column; min-width: 0; }
.stb-playlist-item .stb-playlist-title{ font-weight: 600; color: var(--stb-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stb-playlist-item .stb-playlist-title:hover{ color: var(--stb-accent); }
.stb-playlist-artist{ font-size: 13px; color: var(--stb-muted); }

/* .stb-mini-play is defined once, above, using CSS variables so both the
   light Charts rows and the dark Trending Lyrics band share one definition
   instead of two rules fighting over which wins by source order. */

/* ---------- Main player card ---------- */
.stb-player{
	display: flex;
	gap: 16px;
	padding: 16px;
	background: var(--stb-bg-card);
	border: 1px solid var(--stb-border);
	border-radius: var(--stb-radius);
	margin: 20px 0;
}
.stb-player-art{ position:relative; width: 96px; height: 96px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; background: #eee; }
.stb-player-art img{ position:absolute; inset:0; width:100%!important; height:100%!important; max-width:none; object-fit:cover; display:block; }
.stb-player-art-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size: 32px; color:#bbb; }
.stb-player-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.stb-player-body .stb-player-title{ margin: 0; font-size: 19px; }
.stb-player-artist{ margin: 0; font-size: 14px; color: var(--stb-muted); }
.stb-player-embed{ width:100%; border-radius: 12px; overflow:hidden; }
.stb-player-embed iframe{ display:block; width:100%!important; height:152px; border:none; }
.stb-player-embed-spotify iframe{ height:152px; }
.stb-player-embed-youtube iframe,
.stb-player-embed-soundcloud iframe{ height:166px; }
.stb-player-embed-note{ margin: 6px 0 0; font-size: 12px; color: var(--stb-muted); }
.stb-controls{ display: flex; align-items: center; gap: 10px; }
.stb-play-btn{
	width: 40px; height: 40px; border-radius: 50%;
	border: none; background: var(--stb-accent); color: #fff;
	cursor: pointer; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
}
.stb-seek{ flex: 1; accent-color: var(--stb-accent); }
.stb-time-current, .stb-time-total{ font-size: 12px; color: var(--stb-muted); min-width: 34px; }

/* ---------- Global sticky mini-player bar (used by chart/playlist mini play buttons) ---------- */
.stb-global-bar{
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
	display: none;
	align-items: center; gap: 12px;
	padding: 10px 16px;
	background: #fff;
	border-top: 1px solid var(--stb-border);
	box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
.stb-global-bar.is-active{ display: flex; }
.stb-global-bar-cover{ width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: #eee; flex: 0 0 auto; }
.stb-global-bar-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.stb-global-bar-info{ min-width: 0; flex: 0 1 200px; }
.stb-global-bar-title{ font-size: 13px; font-weight: 600; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
.stb-global-bar .stb-controls{ flex: 1; }

/* ---------- Floating panel for streaming-embed playback (Spotify/YouTube/SoundCloud/etc.) ---------- */
.stb-global-embed-panel{
	position: fixed; right: 16px; bottom: 16px; z-index: 10000;
	display: none;
	width: 340px; max-width: calc(100vw - 32px);
	background: #fff;
	border: 1px solid var(--stb-border);
	border-radius: var(--stb-radius);
	box-shadow: 0 10px 30px rgba(0,0,0,.16);
	overflow: hidden;
}
.stb-global-embed-panel.is-active{ display: block; }
.stb-global-embed-head{
	display: flex; align-items: center; justify-content: space-between;
	padding: 8px 10px 8px 14px;
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: var(--stb-muted);
	border-bottom: 1px solid var(--stb-border);
}
.stb-global-embed-title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stb-global-embed-close{
	border: none; background: none; cursor: pointer;
	font-size: 20px; line-height: 1; color: var(--stb-muted); padding: 0 2px;
	flex: 0 0 auto; margin-left: 8px;
}
.stb-global-embed-close:hover{ color: var(--stb-text); }
.stb-global-embed-frame-wrap{ line-height: 0; }
.stb-global-embed-frame-wrap iframe{ display: block; width: 100%; border: 0; }
.stb-embed-spotify{ height: 152px; }
.stb-embed-soundcloud{ height: 166px; }
.stb-embed-youtube{ height: 191px; }
.stb-embed-apple_music{ height: 175px; }
.stb-embed-deezer{ height: 175px; }
.stb-embed-generic{ height: 175px; }

.stb-mini-play-embed{ font-size: 10px; }

@media (max-width: 480px){
	.stb-global-embed-panel{ left: 12px; right: 12px; bottom: 12px; width: auto; }
}

/* ---------- Song page hero (cover, title, artist/producer links, stats, share) ---------- */
/* .stb-song-wrap is a direct child of GeneratePress's #content.site-content,
   which is display:flex. Flex items size by fit-content by default, and an
   in-flow 100vw-wide descendant (.stb-hero) inflates that fit-content
   calculation right back up — min-width:0 stops it from doing that, so this
   reliably sits at max-width:820px regardless of what its children do. */
.stb-song-wrap{ max-width: 820px; margin: 0 auto; padding: 24px 16px 60px; flex: 1 1 auto; min-width: 0; }

.stb-hero{
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 28px;
	align-items: start;

	/* Full-bleed colour panel that the transparent "Song Page Header"
	   (built in Elementor/UAE) sits on top of — see the header build guide.
	   Colour comes from --stb-hero-color, set inline per-song in wp_head().

	   NOTE: this element sits inside .stb-song-wrap, which is only 820px
	   wide — percentage-based margins/padding (e.g. "calc(50% - 50vw)" or
	   "100%" inside a calc()) resolve against THAT 820px box, not the
	   viewport, which is what made the hero sit flush left instead of
	   spanning/centering correctly. Using position:relative + left:50% +
	   a vw-based negative margin works regardless of the parent's width. */
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;

	background: var(--stb-hero-color, #1a1a1a);
	padding: calc(var(--stb-header-h) + 40px) max(20px, calc((100vw - var(--stb-content-max)) / 2)) 48px;
	box-sizing: border-box;
	transition: background .2s ease;
}
.stb-hero-cover{ position:relative; width: 220px; height: 220px; border-radius: 14px; overflow: hidden; background: #eee; box-shadow: 0 10px 30px rgba(0,0,0,.10); }
.stb-hero-cover img{ position:absolute; inset:0; width:100%!important; height:100%!important; max-width:none; object-fit:cover; display:block; }
.stb-hero-cover-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size: 48px; color:#bbb; }

.stb-hero-meta{ min-width:0; }
.stb-hero-meta .stb-hero-title{ margin: 0 0 6px; font-size: clamp(26px, 4vw, 40px); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.stb-hero-artist{ margin: 0 0 14px; font-size: 18px; color: var(--stb-text); }
.stb-hero-meta .stb-hero-artist a{ color: inherit; text-decoration: none; border-bottom: 1px solid var(--stb-border); }
.stb-hero-meta .stb-hero-artist a:hover{ color: var(--stb-accent); border-color: var(--stb-accent); }

.stb-hero-row{ display:flex; gap:6px; font-size: 14px; margin-bottom: 6px; }
.stb-hero-label{ color: var(--stb-muted); }
.stb-hero-meta .stb-hero-row a{ color: var(--stb-text); text-decoration:none; border-bottom:1px solid var(--stb-border); }
.stb-hero-meta .stb-hero-row a:hover{ color: var(--stb-accent); border-color: var(--stb-accent); }

.stb-hero-stats{ display:flex; flex-wrap:wrap; gap: 16px; font-size: 13px; color: var(--stb-muted); margin: 16px 0 14px; }
.stb-live-dot{ position: relative; padding-left: 14px; }
.stb-live-dot::before{
	content:''; position:absolute; left:0; top:50%; transform: translateY(-50%);
	width:7px; height:7px; border-radius:50%; background:#2ecc71;
	animation: stb-pulse 1.8s infinite;
}
@keyframes stb-pulse{
	0%{ box-shadow: 0 0 0 0 rgba(46,204,113,.5); }
	70%{ box-shadow: 0 0 0 6px rgba(46,204,113,0); }
	100%{ box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}

.stb-share-row{ display:flex; gap: 8px; margin-top: 4px; }
.stb-share-btn{
	width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid var(--stb-border); background:#fff;
	display:flex; align-items:center; justify-content:center;
	color: var(--stb-text); cursor:pointer; text-decoration:none;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.stb-share-btn:hover{ background: var(--stb-accent); color:#fff; border-color: var(--stb-accent); }
.stb-share-btn.is-copied{ background:#2ecc71; color:#fff; border-color:#2ecc71; }

.stb-hero-video{ grid-column: 1 / -1; border-radius: 12px; overflow:hidden; aspect-ratio: 16/9; background:#000; }
.stb-hero-video iframe{ width:100%; height:100%; display:block; border:0; }

/* ---------- Hero text colour: switches with body.stb-hero-dark / .stb-hero-light,
   set server-side from the luminance of --stb-hero-color (STB_Hero_Color::is_dark) ---------- */
body.stb-hero-dark .stb-hero-title,
body.stb-hero-dark .stb-hero-artist,
body.stb-hero-dark .stb-hero-label{ color:#fff; }
body.stb-hero-dark .stb-hero-artist a,
body.stb-hero-dark .stb-hero-row a{ color:#fff; border-color: rgba(255,255,255,.35); }
body.stb-hero-dark .stb-hero-artist a:hover,
body.stb-hero-dark .stb-hero-row a:hover{ color:#fff; border-color:#fff; }
body.stb-hero-dark .stb-hero-stats{ color: rgba(255,255,255,.75); }
body.stb-hero-dark .stb-share-btn{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color:#fff; }
body.stb-hero-dark .stb-share-btn:hover{ background:#fff; color: var(--stb-hero-color); border-color:#fff; }
body.stb-hero-dark .stb-hero-cover{ box-shadow: 0 20px 50px rgba(0,0,0,.45); }

body.stb-hero-light .stb-share-btn{ background: rgba(0,0,0,.05); }

.stb-more-songs{ margin-top:40px; }
.stb-more-songs .stb-more-heading{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--stb-muted); margin: 0 0 10px; font-weight:700; }

@media (max-width: 640px){
	:root{ --stb-header-h: 64px; } /* adjust to match your header's real mobile height */
	.stb-hero{ grid-template-columns: 1fr; }
	.stb-hero-cover{ width: 100%; height: auto; aspect-ratio: 1/1; }
}

.stb-song-lyrics{ font-size: 17px; line-height: 1.9; }

/* ---------- Artist profile page (cover, photo, bio, auto-grouped albums, songs) ---------- */
/* Same flex-item fix as .stb-song-wrap above — this is also a direct child
   of GeneratePress's flex #content.site-content. */
.stb-artist-page{ flex: 1 1 auto; min-width: 0; width: 100%; }

.stb-artist-hero{
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;

	/* Nice-looking gradient fallback for when no Cover/Banner Image is set —
	   overridden automatically by the inline background-image style once one is. */
	background: linear-gradient(135deg, #3a3a3a 0%, #161616 65%, #0c0c0c 100%) center/cover no-repeat;
	min-height: 200px;
	box-sizing: border-box;
}
.stb-artist-hero::before{
	content:'';
	position:absolute; inset:0;
	background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.15) 65%);
}
.stb-artist-hero-inner{
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	gap: 20px;
	max-width: var(--stb-content-max);
	margin: 0 auto;
	padding: 40px 20px 24px;
	box-sizing: border-box;
}
.stb-artist-photo{
	width: 120px; height: 120px; border-radius: 50%;
	object-fit: cover; background:#eee;
	border: 4px solid #fff; box-shadow: 0 6px 20px rgba(0,0,0,.3);
	flex-shrink: 0;
}
.stb-artist-photo-placeholder{
	display:flex; align-items:center; justify-content:center;
	font-size: 44px; color: rgba(255,255,255,.9);
	background: linear-gradient(135deg, var(--stb-accent), #7a1120);
}
.stb-artist-hero-meta{ padding-bottom: 8px; min-width:0; }
.stb-artist-hero-meta .stb-artist-name{ margin:0 0 4px; font-size: clamp(24px, 4vw, 36px); font-weight: 800; color:#fff; line-height:1.15; }
.stb-artist-count{ margin:0; color: rgba(255,255,255,.85); font-size: 14px; }

.stb-artist-body{ max-width: var(--stb-content-max); margin: 0 auto; padding: 32px 20px 60px; }
.stb-artist-bio{ color: var(--stb-text); font-size: 15px; line-height: 1.7; max-width: 720px; margin-bottom: 10px; }
.stb-artist-page .stb-artist-section-title{ font-size: 20px; font-weight: 800; margin: 30px 0 16px; }

.stb-artist-albums{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; margin-bottom: 10px; }
.stb-artist-albums .stb-album-card{ text-decoration:none; color:inherit; display:block; }
.stb-album-cover{ position:relative; width:100%; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:#eee; margin-bottom:8px; }
.stb-album-cover img{ position:absolute; inset:0; width:100%!important; height:100%!important; max-width:none; object-fit:cover; display:block; }
.stb-album-cover-placeholder{
	width:100%; height:100%; display:flex; align-items:center; justify-content:center;
	font-size: 26px; color: rgba(255,255,255,.9);
	background: linear-gradient(135deg, var(--stb-accent), #7a1120);
}
.stb-album-title{ font-weight:700; font-size:14px; color: var(--stb-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stb-album-count{ font-size:12px; color: var(--stb-muted); }

@media (max-width: 640px){
	.stb-artist-hero-inner{ flex-direction: column; align-items: flex-start; gap: 12px; }
	.stb-artist-photo{ width: 88px; height: 88px; }
}
.stb-song-lyrics p{ margin: 0 0 4px; }
.stb-lyrics-tag{
	margin: 26px 0 8px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--stb-accent);
}
.stb-lyrics-tag:first-child{ margin-top: 0; }
.stb-song-credits{ margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--stb-border); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px; font-size: 14px; }
.stb-song-credits strong{ display:block; color: var(--stb-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing:.04em; margin-bottom: 3px; }
.stb-ad-slot{ margin: 24px 0; text-align: center; }

@media (max-width: 480px){
	.stb-player{ flex-direction: column; }
	.stb-chart-row{ grid-template-columns: 18px 40px 1fr auto 30px; gap: 8px; padding: 9px 2px; }
	.stb-chart-rank{ font-size: 13px; }
	.stb-chart-cover{ width: 40px; height: 40px; }
	.stb-chart-info .stb-chart-title{ font-size: 14px; }
	.stb-chart-artist-inline{ font-size: 12px; }
	.stb-chart-views{ font-size: 12px; gap: 3px; }
	.stb-chart-views svg{ width: 12px; height: 12px; }
	.stb-chart-row .stb-mini-play{ width: 28px !important; height: 28px !important; min-width:28px; max-width:28px; font-size: 10px; }
}

/* ---------- All Artists grid (search + A-Z filter) ---------- */
/* .stb-artists-page is the full-width outer wrapper (add via the shortcode's
   `title` output) — centers content and gives generous top/bottom padding so
   the grid doesn't crowd the site header or crash straight into the footer. */
.stb-artists-page{ max-width: var(--stb-content-max); margin: 0 auto; padding: 44px 20px 80px; box-sizing: border-box; }
.stb-artists-page .stb-artists-title{ margin: 0 0 28px; font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -0.01em; color: var(--stb-text); }

.stb-artists-wrap{ margin: 0; }

.stb-artists-toolbar{
	display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px;
	padding-bottom: 20px; margin-bottom: 24px;
	border-bottom: 1px solid var(--stb-border);
}
.stb-artists-search-wrap{
	position: relative; flex: 1 1 240px; max-width: 340px;
}
.stb-artists-search-wrap svg{
	position:absolute; left:16px; top:50%; transform:translateY(-50%);
	color: var(--stb-muted); pointer-events:none;
}
.stb-artists-search{
	width:100%; box-sizing:border-box; -webkit-appearance:none; appearance:none;
	border: 1px solid var(--stb-border); border-radius: 24px;
	padding: 11px 16px 11px 42px; font-size: 14px; line-height:1.3;
	color: var(--stb-text); background:#fff;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.stb-artists-search::-webkit-search-cancel-button{ -webkit-appearance:none; }
.stb-artists-search:focus{ outline:none; border-color: var(--stb-accent); box-shadow: 0 0 0 3px rgba(224,38,63,.12); }

.stb-artists-letters{
	display:flex; flex-wrap:nowrap; overflow-x:auto; gap:6px; flex: 1 1 auto;
	-ms-overflow-style: none; scrollbar-width: none; padding-bottom:2px;
}
.stb-artists-letters::-webkit-scrollbar{ display:none; }
.stb-artists-letter{
	border: none; background: var(--stb-bg-card); color: var(--stb-muted);
	font-size: 12px; font-weight: 700; text-transform:uppercase; letter-spacing:.02em;
	min-width: 30px; height: 30px; padding: 0 8px; border-radius: 15px; cursor:pointer;
	display:flex; align-items:center; justify-content:center; flex-shrink:0;
	transition: background .12s ease, color .12s ease;
}
.stb-artists-letter[data-letter=""]{ padding: 0 14px; }
.stb-artists-letter:hover{ background: rgba(224,38,63,.1); color: var(--stb-accent); }
.stb-artists-letter.is-active{ background: var(--stb-accent); color:#fff; }

.stb-artists-count-line{ font-size: 13px; color: var(--stb-muted); margin: -6px 0 20px; }
.stb-artists-count-num{ font-weight: 700; color: var(--stb-text); }

.stb-artists-grid{
	display:grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 30px 20px;
	min-height: 120px;
}
.stb-artist-card{
	display:flex; flex-direction:column; align-items:center; text-align:center;
	text-decoration:none; color:inherit;
}
.stb-artist-card-photo{
	width: 132px; height: 132px; border-radius: 50%;
	overflow:hidden; background:#f2f2f2; margin-bottom: 12px;
	box-shadow: 0 4px 14px rgba(0,0,0,.08);
	transition: transform .15s ease, box-shadow .15s ease;
}
.stb-artist-card:hover .stb-artist-card-photo{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.16); }
.stb-artist-card-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.stb-artist-card-photo-placeholder{
	width:100%; height:100%; display:flex; align-items:center; justify-content:center;
	font-size: 32px; color: rgba(255,255,255,.9);
	background: linear-gradient(135deg, var(--stb-accent), #7a1120);
}
.stb-artist-card-name{
	font-weight: 700; font-size: 15px; color: var(--stb-text);
	max-width: 100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stb-artist-card:hover .stb-artist-card-name{ color: var(--stb-accent); }
.stb-artist-card-count{ font-size: 12px; color: var(--stb-muted); margin-top: 3px; }

.stb-artists-loadmore-wrap{ text-align:center; margin-top: 40px; }
.stb-artists-loadmore{
	border: 1px solid var(--stb-text); background:#fff; color: var(--stb-text);
	font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.04em;
	padding: 11px 32px; border-radius: 24px; cursor:pointer;
	transition: background .12s ease, color .12s ease;
}
.stb-artists-loadmore:hover{ background: var(--stb-text); color:#fff; }
.stb-artists-loadmore:disabled{ opacity:.5; cursor:default; }

@media (max-width: 640px){
	.stb-artists-page{ padding: 28px 16px 56px; }
	.stb-artists-page .stb-artists-title{ font-size: 26px; margin-bottom: 20px; }
	.stb-artists-toolbar{ gap: 14px; }
	.stb-artists-search-wrap{ max-width: none; flex-basis: 100%; }
	.stb-artists-grid{ grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 22px 12px; }
	.stb-artist-card-photo{ width: 88px; height: 88px; margin-bottom: 8px; }
	.stb-artist-card-name{ font-size: 13px; }
	.stb-artists-letter{ min-width: 26px; height: 26px; font-size: 11px; }
}