/* ═══════════════════════════════════════════════════════════════════════════
   BGW Baby Gender Quiz — /tools/baby-gender-quiz/
   ---------------------------------------------------------------------------
   Fourth distinct metaphor in the tool family:
     registry   → rail + ledger        size chart → range bars + brand rows
     due date   → timeline             gender quiz → STEP-THROUGH + REVEAL

   YMYL POSITION — this page is a game and must never imply otherwise:
     · no confidence percentage (the old plugin showed "75% confident" — invented)
     · no claims that any tale predicts anything
     · states plainly that a scan or NIPT is the only thing that actually can
   ═══════════════════════════════════════════════════════════════════════════ */

.bgw-gender {
	--ink:   #F7F2EA;
	--mint:  rgb(143, 179, 159);
	--mint-d:rgb(110, 150, 128);
	--line:  rgba(255, 255, 255, .10);
	--line-s:rgba(255, 255, 255, .06);
	--field: rgba(255, 255, 255, .055);
	--muted: rgba(247, 242, 234, .6);
	--void:  rgb(43, 42, 40);
	--rose:  #D98F9A;
	--blue:  #8FB3C7;
	color: var(--ink);
}
.bgw-gender .gq-card {
	background: var(--void);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 26px;
	color: var(--ink);
}

/* ── start screen ───────────────────────────────────────────────────────── */
.bgw-gender .gq-kicker {
	margin: 0 0 8px;
	font-size: .68rem; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--mint);
}
.bgw-gender .gq-title {
	margin: 0 0 12px;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 2rem; font-weight: 600; line-height: 1.15; color: var(--ink);
}
.bgw-gender .gq-sub { margin: 0 0 22px; font-size: .96rem; line-height: 1.65; color: var(--ink); max-width: 62ch; }

.bgw-gender .gq-start {
	appearance: none; font: inherit; font-size: 1rem; font-weight: 700;
	padding: 14px 28px; border-radius: 6px; cursor: pointer;
	background: var(--mint); color: #fff; border: 1px solid var(--mint);
	transition: background .15s ease, border-color .15s ease;
}
.bgw-gender .gq-start:hover { background: var(--mint-d); border-color: var(--mint-d); }
.bgw-gender .gq-start:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

/* ── progress dots ──────────────────────────────────────────────────────── */
.bgw-gender .gq-dots { display: flex; gap: 7px; margin: 0 0 22px; }
.bgw-gender .gq-dots i {
	display: block; width: 26px; height: 4px; border-radius: 999px;
	background: rgba(255,255,255,.12);
}
.bgw-gender .gq-dots i.on { background: var(--mint); }

/* ── question ───────────────────────────────────────────────────────────── */
.bgw-gender .gq-q {
	margin: 0 0 6px;
	font-size: .68rem; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--mint);
}
.bgw-gender .gq-qt {
	margin: 0 0 6px;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.8rem; font-weight: 600; line-height: 1.2; color: #fff;
}
.bgw-gender .gq-tale {
	margin: 0 0 20px; font-size: .88rem; line-height: 1.6; color: var(--muted);
}
.bgw-gender .gq-tale b { color: var(--muted); font-weight: 700; }

.bgw-gender .gq-opts { display: grid; gap: 10px; margin: 0 0 20px; }
.bgw-gender .gq-opt {
	appearance: none; font: inherit; text-align: left; cursor: pointer;
	background: var(--field); border: 1px solid var(--line);
	border-radius: 8px; padding: 15px 18px; color: var(--ink);
	font-size: .98rem; line-height: 1.5;
	transition: background .14s ease, border-color .14s ease;
}
.bgw-gender .gq-opt:hover { background: rgba(143,179,159,.13); border-color: var(--mint); }
.bgw-gender .gq-opt:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.bgw-gender .gq-opt.chosen { background: var(--mint); border-color: var(--mint); color: #fff; font-weight: 600; }

.bgw-gender .gq-back {
	appearance: none; background: none; border: 0; cursor: pointer;
	font: inherit; font-size: .84rem; color: var(--muted);
	text-decoration: underline; text-underline-offset: 3px; padding: 0;
}
.bgw-gender .gq-back:hover { color: var(--ink); }

/* ── reveal ─────────────────────────────────────────────────────────────── */
.bgw-gender .gq-reveal { text-align: center; padding: 10px 0 4px; }
.bgw-gender .gq-reveal .lead {
	margin: 0 0 6px; font-size: .68rem; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.bgw-gender .gq-reveal .verdict {
	margin: 0 0 14px;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 3rem; font-weight: 600; line-height: 1.05; color: #fff;
}
.bgw-gender .gq-reveal .tally {
	margin: 0 auto 18px; max-width: 46ch;
	font-size: .95rem; line-height: 1.65; color: var(--ink);
}
.bgw-gender .gq-reveal .tally b { color: #fff; }

.bgw-gender .gq-credit {
	display: inline-flex; gap: 10px; margin: 0 0 20px; flex-wrap: wrap; justify-content: center;
}
.bgw-gender .gq-credit span {
	font-size: .74rem; font-weight: 700; letter-spacing: .05em;
	padding: 5px 12px; border-radius: 999px;
	background: rgba(255,255,255,.08); color: var(--ink);
}

/* the honest note — no invented confidence figure anywhere */
.bgw-gender .gq-ymyl {
	max-width: 60ch; margin: 0 auto 22px; padding: 14px 18px;
	border-left: 3px solid var(--rose);
	background: rgba(217,143,154,.10);
	text-align: left; border-radius: 0 6px 6px 0;
}
.bgw-gender .gq-ymyl p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--ink); }
.bgw-gender .gq-ymyl strong { color: #fff; }

.bgw-gender .gq-again {
	appearance: none; background: none; border: 1px solid var(--line);
	border-radius: 6px; cursor: pointer; font: inherit; font-size: .86rem;
	color: var(--ink); padding: 10px 18px;
}
.bgw-gender .gq-again:hover { border-color: var(--mint); background: rgba(143,179,159,.10); }

/* ── the tales, explained in full (indexable) ───────────────────────────── */
.bgw-gender .gq-tales { margin-top: 20px; }
.bgw-gender .gq-tales h3 {
	margin: 0 0 4px; font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.4rem; font-weight: 600; color: var(--ink);
}
.bgw-gender .gq-taleitem {
	padding: 15px 0; border-top: 1px solid var(--line-s);
}
.bgw-gender .gq-taleitem:first-of-type { border-top: 0; }
.bgw-gender .gq-taleitem .n {
	margin: 0 0 5px; font-size: .96rem; font-weight: 700; color: #fff;
}
.bgw-gender .gq-taleitem .d { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--ink); }
.bgw-gender .gq-taleitem .v {
	margin: 7px 0 0; font-size: .84rem; line-height: 1.55; color: var(--muted);
}
.bgw-gender .gq-taleitem .v b { color: var(--amber, #E3D3A2); font-weight: 700; }

.bgw-gender .fit-buy {
	display: inline-block; font-size: .84rem; font-weight: 700;
	padding: 9px 16px; border-radius: 5px; text-decoration: none;
	background: var(--mint); color: #fff; border: 1px solid var(--mint);
	transition: background .15s ease, border-color .15s ease;
}
.bgw-gender .fit-buy:hover, .bgw-gender .fit-buy:focus-visible {
	background: var(--mint-d); border-color: var(--mint-d); color: #fff; outline: none;
}
.bgw-gender .gq-cta { margin: 18px auto 0; max-width: 52ch; }
.bgw-gender .gq-cta p { margin: 0 0 10px; font-size: .9rem; line-height: 1.6; color: var(--muted); }

@media (max-width: 560px) {
	.bgw-gender .gq-title { font-size: 1.6rem; }
	.bgw-gender .gq-qt { font-size: 1.45rem; }
	.bgw-gender .gq-reveal .verdict { font-size: 2.2rem; }
}
@media print {
	.bgw-gender .gq-dots, .bgw-gender .fit-buy, .bgw-gender .gq-again { display: none !important; }
	.bgw-gender .gq-card { background: #fff !important; border-color: #ccc !important; }
	.bgw-gender .gq-title, .bgw-gender .gq-qt, .bgw-gender .gq-reveal .verdict,
	.bgw-gender .gq-sub, .bgw-gender .gq-taleitem .n, .bgw-gender .gq-taleitem .d { color: #000 !important; }
}

/* ── tales as a card grid ─────────────────────────────────────────────────── */
.bgw-gender .gq-tales-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
	gap: 14px;
	margin: 0;
}
.bgw-gender .gq-tcard {
	position: relative;
	background: rgba(255,255,255,.035);
	border: 1px solid rgba(255,255,255,.06);
	border-radius: 10px;
	padding: 18px 18px 16px;
	transition: border-color .16s ease, background .16s ease;
}
.bgw-gender .gq-tcard:hover { border-color: var(--mint); background: rgba(143,179,159,.07); }
.bgw-gender .gq-tcard .gq-tnum {
	position: absolute; right: 15px; top: 12px;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.6rem; font-weight: 600; line-height: 1;
	color: rgba(255,255,255,.10);
}
.bgw-gender .gq-tcard h4 {
	margin: 0 0 8px; padding-right: 34px;
	font-size: 1.02rem; font-weight: 700; line-height: 1.35; color: #fff;
}
.bgw-gender .gq-tcard .gq-td {
	margin: 0 0 12px; font-size: .88rem; line-height: 1.62; color: #F7F2EA;
}
.bgw-gender .gq-tcard .gq-tv {
	margin: 0; padding-top: 11px;
	border-top: 1px solid rgba(255,255,255,.07);
	font-size: .78rem; font-weight: 700; letter-spacing: .03em;
	color: rgb(143,179,159);
}

/* ── "boy or girl, the same list" ─────────────────────────────────────────── */
#eitherway .gq-shop { padding: 6px 0; }
#eitherway .gq-shoplist { margin: 0; padding: 0; list-style: none; }
#eitherway .gq-shoplist li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px;
	align-items: baseline;
	padding: 13px 20px;
	border-top: 1px solid rgba(255,255,255,.06);
}
#eitherway .gq-shoplist li:first-child { border-top: 0; }
#eitherway .gq-shoplbl { font-size: .93rem; line-height: 1.55; color: #F7F2EA; }
#eitherway .gq-shoplbl strong { color: #fff; }
@media (max-width: 560px) {
	#eitherway .gq-shoplist li { grid-template-columns: 1fr; gap: 8px; }
}

/* ══ SHOP LIST FIX ══════════════════════════════════════════════════════════
   The product names were invisible: white text on a card that never received
   the dark background (the page CSS only darkened #skip and #where).
   Now: dark card, product name leads, link becomes a proper button.
   ═════════════════════════════════════════════════════════════════════════ */
#eitherway .table-card {
	background: rgb(43,42,40) !important;
	border-color: rgba(255,255,255,.10) !important;
	padding: 0;
	overflow: hidden;
}
#eitherway .gq-shoplist { margin: 0; padding: 0; list-style: none; }
#eitherway .gq-shoplist li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 22px;
	padding: 17px 22px;
	border-top: 1px solid rgba(255,255,255,.07);
}
#eitherway .gq-shoplist li:first-child { border-top: 0; }
#eitherway .gq-shopinfo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#eitherway .gq-shopinfo strong {
	font-size: 1.04rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.3;
}
#eitherway .gq-shopinfo span {
	font-size: .875rem;
	line-height: 1.5;
	color: rgba(247,242,234,.72);
}
#eitherway .fit-buy { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 620px) {
	#eitherway .gq-shoplist li { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* BGW-CONTRAST-FILL */
/* Brand mint rgb(143,179,159) with white text measures 2.30:1 — fails WCAG AA.
   Anything carrying WHITE text uses this darker green instead: 4.80:1.
   The light mint remains for accents, borders and dark-text fills. */
.bgw-gender .fit-buy,
.bgw-hospital .fit-buy,
.bgw-gender .gq-start,
.bgw-gender .gq-opt.chosen,
.bgw-gender .gq-badge,
.bgw-hospital .hbc-badge.essential,
.bgw-registry .fit-buy,
.bgw-sizechart .fit-buy,
.bgw-duedate .fit-buy,
.bgw-duedate .dd-chip.on,
a.fit-buy,
button.gq-start {
	background: rgb(86, 122, 102) !important;
	border-color: rgb(86, 122, 102) !important;
	color: #fff !important;
}
.bgw-gender .fit-buy:hover,
.bgw-hospital .fit-buy:hover,
.bgw-gender .gq-start:hover,
a.fit-buy:hover,
button.gq-start:hover {
	background: rgb(74, 106, 89) !important;
	border-color: rgb(74, 106, 89) !important;
}