/* ================================================================
   FriendQuiz · Leaderboard styles
   Mobile-first. Light + dark theme aware (uses [data-fq-theme]).
   Brand palette:
     #2F57D8 (Primary Blue)  #7B61FF (Soft Purple)
     #FFC93D (Friendship Yellow) #FF4F7B (Coral Pink) #12A99B (Teal Green)
     #FFF8EF (Cream BG) #EEF5FF (Soft Blue BG) #FFFFFF (Card)
     #17214A (Deep Navy) #6B7280 (Muted) #E8ECF5 (Soft Border)
   ================================================================ */

:root {
	--fq-lb-bg: #fff8ef;
	--fq-lb-bg-soft: #eef5ff;
	--fq-lb-card: #ffffff;
	--fq-lb-text: #17214a;
	--fq-lb-muted: #6b7280;
	--fq-lb-border: #e8ecf5;
	--fq-lb-primary: #2f57d8;
	--fq-lb-purple: #7b61ff;
	--fq-lb-yellow: #ffc93d;
	--fq-lb-coral: #ff4f7b;
	--fq-lb-teal: #12a99b;
	--fq-lb-shadow: 0 8px 24px rgba(23, 33, 74, 0.08);
	--fq-lb-shadow-strong: 0 14px 40px rgba(23, 33, 74, 0.18);
}

[data-fq-theme="dark"] {
	--fq-lb-bg: #0f1530;
	--fq-lb-bg-soft: #161e44;
	--fq-lb-card: #1a234d;
	--fq-lb-text: #f4f6ff;
	--fq-lb-muted: #a4abc7;
	--fq-lb-border: #2a3464;
	--fq-lb-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
	--fq-lb-shadow-strong: 0 14px 40px rgba(0, 0, 0, 0.55);
}

/* Allow wide centered layout on leaderboard pages — overrides the 560px
   .my-container cap from mobile-redesign.css for inner pages. */
body.fq-lb-body .my-container,
body.fq-lb-body.mobile-dark-ui .my-container {
	max-width: 1180px !important;
	width: calc(100% - 24px) !important;
}

/* ---------- Page shell ---------- */
.fq-lb-page {
	background: var(--fq-lb-bg);
	padding: 18px 0 60px;
	min-height: 60vh;
}

.fq-lb-wrap {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 14px;
}

.fq-lb-hero {
	text-align: center;
	padding: 18px 8px 6px;
}

.fq-lb-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(135deg, var(--fq-lb-primary), var(--fq-lb-purple));
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	margin-bottom: 12px;
}

.fq-lb-hero__title {
	font-size: clamp(24px, 5vw, 36px);
	line-height: 1.15;
	color: var(--fq-lb-text);
	margin: 0 0 6px;
	font-weight: 800;
}

.fq-lb-hero__sub {
	color: var(--fq-lb-muted);
	font-size: clamp(14px, 2.6vw, 16px);
	max-width: 620px;
	margin: 0 auto 16px;
	line-height: 1.5;
}

.fq-lb-hero__stats {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 8px auto 0;
}

.fq-lb-stat-pill {
	background: var(--fq-lb-card);
	border: 1px solid var(--fq-lb-border);
	border-radius: 999px;
	padding: 6px 14px;
	color: var(--fq-lb-text);
	font-weight: 600;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.fq-lb-stat-pill b {
	color: var(--fq-lb-primary);
}

/* ---------- Period filters ---------- */
.fq-lb-tabs {
	display: flex;
	gap: 6px;
	background: var(--fq-lb-card);
	border: 1px solid var(--fq-lb-border);
	border-radius: 14px;
	padding: 4px;
	margin: 16px auto 18px;
	max-width: 360px;
	box-shadow: var(--fq-lb-shadow);
}

.fq-lb-tab {
	flex: 1;
	text-align: center;
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fq-lb-muted);
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}

.fq-lb-tab:hover { color: var(--fq-lb-text); }

.fq-lb-tab.is-active,
a.fq-lb-tab.is-active,
body .fq-lb-tab.is-active,
body.mobile-dark-ui .fq-lb-tab.is-active,
body.mobile-dark-ui.fq-theme-light .fq-lb-tab.is-active {
	background: linear-gradient(135deg, var(--fq-lb-primary), var(--fq-lb-purple));
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(47, 87, 216, 0.25);
}

.fq-lb-tab .fq-lb-tab__hint {
	display: block;
	font-size: 10px;
	font-weight: 500;
	opacity: 0.85;
}

/* ---------- Top 3 podium ---------- */
.fq-lb-podium {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 8px 0 22px;
}

@media (min-width: 640px) {
	.fq-lb-podium {
		grid-template-columns: 1fr 1.1fr 1fr;
		align-items: end;
		gap: 14px;
	}
	.fq-lb-podium__card--1 { order: 2; transform: translateY(-12px); }
	.fq-lb-podium__card--2 { order: 1; }
	.fq-lb-podium__card--3 { order: 3; }
}

.fq-lb-podium__card {
	background: var(--fq-lb-card);
	border: 1px solid var(--fq-lb-border);
	border-radius: 18px;
	padding: 18px 16px 16px;
	box-shadow: var(--fq-lb-shadow);
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.fq-lb-podium__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--fq-lb-shadow-strong);
}

.fq-lb-podium__card--1 {
	border-color: rgba(255, 201, 61, 0.55);
	background: linear-gradient(180deg, #fff8e1 0%, var(--fq-lb-card) 60%);
}
[data-fq-theme="dark"] .fq-lb-podium__card--1 {
	background: linear-gradient(180deg, rgba(255, 201, 61, 0.18) 0%, var(--fq-lb-card) 60%);
}

.fq-lb-podium__card--2 {
	border-color: rgba(123, 97, 255, 0.4);
}

.fq-lb-podium__card--3 {
	border-color: rgba(255, 79, 123, 0.4);
}

.fq-lb-podium__medal {
	font-size: 38px;
	line-height: 1;
	margin-bottom: 6px;
}

.fq-lb-podium__rank {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: var(--fq-lb-muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.fq-lb-podium__name {
	font-size: 18px;
	font-weight: 800;
	color: var(--fq-lb-text);
	margin: 0 0 6px;
	line-height: 1.25;
	word-break: break-word;
}

.fq-lb-podium__meta {
	color: var(--fq-lb-muted);
	font-size: 13px;
	display: flex;
	justify-content: center;
	gap: 8px;
	align-items: center;
	margin-bottom: 12px;
}

.fq-lb-flag {
	display: inline-block;
	font-size: 18px;
	line-height: 1;
}

.fq-lb-podium__plays {
	font-size: 22px;
	font-weight: 800;
	color: var(--fq-lb-primary);
	margin-bottom: 14px;
}

.fq-lb-podium__plays small {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--fq-lb-muted);
	margin-top: 2px;
}

.fq-lb-podium__actions {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.fq-lb-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 700;
	border-radius: 10px;
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
	cursor: pointer;
	white-space: nowrap;
}

.fq-lb-btn:active { transform: translateY(1px); }

/*
 * Colored CTAs MUST keep white text in every theme. We use !important here on
 * purpose because the global `body.mobile-dark-ui a { color: #9fc0ff; }` rule
 * (and similar light-mode link rules) otherwise win on specificity and wash the
 * text out so badly the buttons become unreadable on the gradient background.
 */
.fq-lb-btn--primary,
a.fq-lb-btn--primary,
button.fq-lb-btn--primary {
	background: linear-gradient(135deg, var(--fq-lb-primary), var(--fq-lb-purple));
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(47, 87, 216, 0.28);
}

.fq-lb-btn--primary:hover,
.fq-lb-btn--primary:focus,
.fq-lb-btn--primary:visited {
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(47, 87, 216, 0.36);
}

.fq-lb-btn--primary i,
.fq-lb-btn--primary .fa,
.fq-lb-btn--primary svg { color: #fff !important; }

.fq-lb-btn--ghost,
a.fq-lb-btn--ghost,
button.fq-lb-btn--ghost {
	background: var(--fq-lb-card);
	color: var(--fq-lb-text) !important;
	border-color: var(--fq-lb-border);
}

.fq-lb-btn--ghost:hover,
.fq-lb-btn--ghost:focus {
	color: var(--fq-lb-primary) !important;
	border-color: var(--fq-lb-primary);
}

.fq-lb-btn--ghost:visited { color: var(--fq-lb-text) !important; }

.fq-lb-btn--coral,
a.fq-lb-btn--coral,
button.fq-lb-btn--coral {
	background: var(--fq-lb-coral);
	color: #fff !important;
}
.fq-lb-btn--coral:hover,
.fq-lb-btn--coral:focus,
.fq-lb-btn--coral:visited { color: #fff !important; opacity: 0.92; }
.fq-lb-btn--coral i,
.fq-lb-btn--coral .fa,
.fq-lb-btn--coral svg { color: #fff !important; }

.fq-lb-btn--whatsapp,
a.fq-lb-btn--whatsapp,
button.fq-lb-btn--whatsapp {
	background: #25d366;
	color: #fff !important;
}
.fq-lb-btn--whatsapp:hover,
.fq-lb-btn--whatsapp:focus,
.fq-lb-btn--whatsapp:visited { color: #fff !important; opacity: 0.92; }
.fq-lb-btn--whatsapp i,
.fq-lb-btn--whatsapp .fa,
.fq-lb-btn--whatsapp svg { color: #fff !important; }

/*
 * Light-theme override (`body.mobile-dark-ui.fq-theme-light a` is 0,3,1 +
 * !important and would otherwise paint our colored CTAs blue). We re-assert
 * white at matching/higher specificity so the buttons stay readable in
 * BOTH themes.
 */
body .fq-lb-btn--primary,
body .fq-lb-btn--primary i,
body .fq-lb-btn--primary .fa,
body .fq-lb-btn--primary svg,
body.mobile-dark-ui .fq-lb-btn--primary,
body.mobile-dark-ui.fq-theme-light .fq-lb-btn--primary,
body.mobile-dark-ui .fq-lb-btn--primary i,
body.mobile-dark-ui.fq-theme-light .fq-lb-btn--primary i,
body.mobile-dark-ui .fq-lb-btn--primary .fa,
body.mobile-dark-ui.fq-theme-light .fq-lb-btn--primary .fa { color: #fff !important; }

body .fq-lb-btn--whatsapp,
body .fq-lb-btn--whatsapp i,
body .fq-lb-btn--whatsapp .fa,
body .fq-lb-btn--whatsapp svg,
body.mobile-dark-ui .fq-lb-btn--whatsapp,
body.mobile-dark-ui.fq-theme-light .fq-lb-btn--whatsapp,
body.mobile-dark-ui .fq-lb-btn--whatsapp i,
body.mobile-dark-ui.fq-theme-light .fq-lb-btn--whatsapp i,
body.mobile-dark-ui .fq-lb-btn--whatsapp .fa,
body.mobile-dark-ui.fq-theme-light .fq-lb-btn--whatsapp .fa { color: #fff !important; }

body .fq-lb-btn--coral,
body .fq-lb-btn--coral i,
body .fq-lb-btn--coral .fa,
body .fq-lb-btn--coral svg,
body.mobile-dark-ui .fq-lb-btn--coral,
body.mobile-dark-ui.fq-theme-light .fq-lb-btn--coral,
body.mobile-dark-ui .fq-lb-btn--coral i,
body.mobile-dark-ui.fq-theme-light .fq-lb-btn--coral i,
body.mobile-dark-ui .fq-lb-btn--coral .fa,
body.mobile-dark-ui.fq-theme-light .fq-lb-btn--coral .fa { color: #fff !important; }

.fq-lb-btn--block {
	display: flex;
	width: 100%;
	justify-content: center;
}

/* ---------- Section title ---------- */
.fq-lb-section-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 24px 4px 10px;
	gap: 12px;
}

.fq-lb-section-title h2 {
	font-size: 18px;
	color: var(--fq-lb-text);
	margin: 0;
	font-weight: 800;
}

.fq-lb-section-title .fq-lb-section-meta {
	color: var(--fq-lb-muted);
	font-size: 13px;
}

/* ---------- Top 100 list (mobile cards) ---------- */
.fq-lb-list {
	display: grid;
	gap: 8px;
}

.fq-lb-row {
	display: grid;
	grid-template-columns: 38px 1fr auto;
	gap: 10px;
	align-items: center;
	background: var(--fq-lb-card);
	border: 1px solid var(--fq-lb-border);
	border-radius: 14px;
	padding: 10px 12px;
	box-shadow: var(--fq-lb-shadow);
	color: var(--fq-lb-text);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.fq-lb-row:hover {
	transform: translateY(-1px);
	box-shadow: var(--fq-lb-shadow-strong);
}

.fq-lb-row__rank {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--fq-lb-bg-soft);
	color: var(--fq-lb-primary);
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.fq-lb-row__rank--top { background: linear-gradient(135deg, var(--fq-lb-yellow), var(--fq-lb-coral)); color: #fff; }

.fq-lb-row__main {
	min-width: 0;
}

.fq-lb-row__name {
	font-size: 15px;
	font-weight: 700;
	margin: 0;
	color: var(--fq-lb-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fq-lb-row__meta {
	color: var(--fq-lb-muted);
	font-size: 12.5px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 2px;
}

.fq-lb-row__meta b { color: var(--fq-lb-primary); font-weight: 700; }

.fq-lb-row__actions {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

@media (max-width: 520px) {
	.fq-lb-row {
		grid-template-columns: 38px 1fr;
	}
	.fq-lb-row__actions {
		grid-column: 1 / -1;
		padding-left: 48px;
	}
}

/* ---------- Empty state ---------- */
.fq-lb-empty {
	background: var(--fq-lb-card);
	border: 1px dashed var(--fq-lb-border);
	border-radius: 16px;
	padding: 28px 18px;
	text-align: center;
	color: var(--fq-lb-muted);
	box-shadow: var(--fq-lb-shadow);
}

.fq-lb-empty h3 {
	color: var(--fq-lb-text);
	margin: 6px 0 8px;
	font-size: 18px;
	font-weight: 700;
}

/* ---------- Per-quiz leaderboard ---------- */
.fq-lb-quizhero {
	background: var(--fq-lb-card);
	border: 1px solid var(--fq-lb-border);
	border-radius: 18px;
	padding: 18px;
	box-shadow: var(--fq-lb-shadow);
	margin-bottom: 16px;
}

.fq-lb-quizhero__eyebrow {
	color: var(--fq-lb-primary);
	font-size: 12px;
	letter-spacing: 0.06em;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.fq-lb-quizhero__title {
	margin: 0 0 12px;
	font-size: clamp(20px, 4vw, 26px);
	color: var(--fq-lb-text);
	font-weight: 800;
}

.fq-lb-quizhero__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-bottom: 14px;
}

@media (min-width: 600px) {
	.fq-lb-quizhero__stats { grid-template-columns: repeat(4, 1fr); }
}

.fq-lb-stat {
	background: var(--fq-lb-bg-soft);
	border: 1px solid var(--fq-lb-border);
	border-radius: 12px;
	padding: 10px;
	text-align: center;
}

.fq-lb-stat__value {
	display: block;
	font-size: 20px;
	font-weight: 800;
	color: var(--fq-lb-text);
	line-height: 1.1;
}

.fq-lb-stat__label {
	display: block;
	color: var(--fq-lb-muted);
	font-size: 12px;
	margin-top: 2px;
}

.fq-lb-quizhero__cta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* ---------- Player rows ---------- */
.fq-lb-player {
	display: grid;
	grid-template-columns: 38px 1fr auto;
	gap: 10px;
	align-items: center;
	background: var(--fq-lb-card);
	border: 1px solid var(--fq-lb-border);
	border-radius: 14px;
	padding: 10px 12px;
	box-shadow: var(--fq-lb-shadow);
	color: var(--fq-lb-text);
}

.fq-lb-player--mine {
	border-color: var(--fq-lb-primary);
	background: linear-gradient(180deg, rgba(47, 87, 216, 0.07), var(--fq-lb-card));
}

.fq-lb-player__name { font-weight: 700; font-size: 15px; }
.fq-lb-player__date { color: var(--fq-lb-muted); font-size: 12px; }

.fq-lb-score-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--fq-lb-bg-soft);
	border: 1px solid var(--fq-lb-border);
	border-radius: 999px;
	padding: 4px 10px;
	font-weight: 700;
	font-size: 13px;
	color: var(--fq-lb-text);
}

.fq-lb-score-pill b { color: var(--fq-lb-primary); }

/* Result label badges */
.fq-lb-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--fq-lb-bg-soft);
	color: var(--fq-lb-primary);
	margin-left: 6px;
}
.fq-lb-badge--super  { background: rgba(255, 201, 61, 0.18); color: #b58200; }
.fq-lb-badge--close  { background: rgba(123, 97, 255, 0.16); color: var(--fq-lb-purple); }
.fq-lb-badge--good   { background: rgba(18, 169, 155, 0.16); color: var(--fq-lb-teal); }
.fq-lb-badge--needs  { background: rgba(255, 79, 123, 0.16); color: var(--fq-lb-coral); }
.fq-lb-badge--strgr  { background: rgba(107, 114, 128, 0.18); color: var(--fq-lb-muted); }

[data-fq-theme="dark"] .fq-lb-badge--super { color: #ffe27a; }

/* ---------- Quiz play teaser (Feature C) ---------- */
.fq-lb-teaser {
	background: linear-gradient(135deg, rgba(47, 87, 216, 0.06), rgba(255, 201, 61, 0.12));
	border: 1px solid var(--fq-lb-border);
	border-radius: 14px;
	padding: 12px 14px;
	margin: 12px auto 14px;
	max-width: 460px;
	color: var(--fq-lb-text);
	text-align: center;
	box-shadow: var(--fq-lb-shadow);
}

[data-fq-theme="dark"] .fq-lb-teaser {
	background: linear-gradient(135deg, rgba(47, 87, 216, 0.18), rgba(255, 201, 61, 0.14));
}

.fq-lb-teaser__head {
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 6px;
	color: var(--fq-lb-text);
}

.fq-lb-teaser__head b { color: var(--fq-lb-primary); }

.fq-lb-teaser__top {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 13px;
	margin-top: 6px;
	color: var(--fq-lb-muted);
}

.fq-lb-teaser__top span { color: var(--fq-lb-text); font-weight: 600; }

.fq-lb-teaser__cta {
	color: var(--fq-lb-primary);
	font-size: 12px;
	margin-top: 6px;
	display: block;
}

/* ---------- Owner cards (Feature E) ---------- */
.fq-owner-cards {
	display: grid;
	gap: 12px;
	margin: 18px 0;
}

@media (min-width: 600px) {
	.fq-owner-cards { grid-template-columns: 1fr 1fr; }
	.fq-owner-cards .fq-owner-card--span2 { grid-column: 1 / -1; }
}

.fq-owner-card {
	background: var(--fq-lb-card);
	border: 1px solid var(--fq-lb-border);
	border-radius: 16px;
	padding: 14px 16px;
	box-shadow: var(--fq-lb-shadow);
	color: var(--fq-lb-text);
}

.fq-owner-card__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--fq-lb-text);
}

.fq-owner-card__title .fa, .fq-owner-card__title i { color: var(--fq-lb-primary); }

.fq-owner-card__text {
	color: var(--fq-lb-muted);
	font-size: 13.5px;
	line-height: 1.5;
	margin: 0 0 10px;
}

.fq-owner-card__text b { color: var(--fq-lb-primary); }

.fq-owner-card__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.fq-owner-card--rank {
	background: linear-gradient(135deg, rgba(255, 201, 61, 0.14), var(--fq-lb-card));
	border-color: rgba(255, 201, 61, 0.35);
}

.fq-owner-card--boost {
	background: linear-gradient(135deg, rgba(123, 97, 255, 0.10), var(--fq-lb-card));
}

/* ---------- Landing social-proof leaderboard section (Feature D) ---------- */
.fq-lb-social {
	background: var(--fq-lb-bg-soft);
	border-radius: 22px;
	padding: 28px 18px;
	margin: 32px auto;
}

[data-fq-theme="dark"] .fq-lb-social { background: var(--fq-lb-bg-soft); }

.fq-lb-social__head {
	text-align: center;
	margin-bottom: 18px;
}

.fq-lb-social__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fq-lb-primary);
	margin-bottom: 6px;
}

.fq-lb-social__title {
	font-size: clamp(22px, 4vw, 30px);
	color: var(--fq-lb-text);
	font-weight: 800;
	margin: 0 0 4px;
}

.fq-lb-social__sub {
	color: var(--fq-lb-muted);
	font-size: 14px;
	max-width: 560px;
	margin: 0 auto;
}

.fq-lb-social__grid {
	display: grid;
	gap: 14px;
	max-width: 980px;
	margin: 0 auto;
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.fq-lb-social__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 480px) and (max-width: 719px) {
	.fq-lb-social__grid { grid-template-columns: repeat(2, 1fr); }
}

.fq-lb-social__card {
	background: var(--fq-lb-card);
	border: 1px solid var(--fq-lb-border);
	border-radius: 18px;
	padding: 20px 18px;
	box-shadow: var(--fq-lb-shadow);
	color: var(--fq-lb-text);
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fq-lb-social__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--fq-lb-shadow-strong);
}

.fq-lb-social__icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--fq-lb-primary), var(--fq-lb-purple));
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.fq-lb-social__card--b .fq-lb-social__icon { background: linear-gradient(135deg, var(--fq-lb-coral), var(--fq-lb-yellow)); }
.fq-lb-social__card--c .fq-lb-social__icon { background: linear-gradient(135deg, var(--fq-lb-teal), var(--fq-lb-primary)); }

.fq-lb-social__card h3 {
	margin: 0;
	font-size: 16px;
	color: var(--fq-lb-text);
	font-weight: 800;
}

.fq-lb-social__card p {
	margin: 0;
	color: var(--fq-lb-muted);
	font-size: 13.5px;
	line-height: 1.55;
}

.fq-lb-social__card .fq-lb-btn {
	margin-top: auto;
	align-self: flex-start;
}

/* ---------- Result page CTAs (Feature F) ---------- */
.fq-lb-result-cta {
	background: var(--fq-lb-card);
	border: 1px solid var(--fq-lb-border);
	border-radius: 14px;
	padding: 14px 16px;
	margin: 16px auto;
	max-width: 520px;
	box-shadow: var(--fq-lb-shadow);
	text-align: center;
	color: var(--fq-lb-text);
}

.fq-lb-result-cta__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 8px;
}

/* ---------- Inline CTA cards on share + article pages ---------- */
.fq-lb-inline-cta {
	background: linear-gradient(135deg, rgba(47, 87, 216, 0.10), rgba(255, 201, 61, 0.12));
	border: 1px solid var(--fq-lb-border);
	border-radius: 16px;
	padding: 18px;
	margin: 24px auto;
	max-width: 720px;
	text-align: center;
	box-shadow: var(--fq-lb-shadow);
}

.fq-lb-inline-cta h3 {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 800;
	color: var(--fq-lb-text);
}

.fq-lb-inline-cta p {
	margin: 0 0 12px;
	color: var(--fq-lb-muted);
	font-size: 14px;
}