/* TaxGuru Push — the opt-in panel.
 *
 * Self-contained on purpose: this plugin renders on a site whose theme may
 * change, so nothing here inherits from theme classes and every property that
 * matters is stated rather than assumed. Colours match the theme's navy/blue
 * but are literal, not variables, for the same reason.
 */

.tgp-panel {
	position: fixed;
	z-index: 100000;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	width: min(600px, calc(100vw - 32px));
	box-sizing: border-box;
	padding: 22px 24px 18px;
	background: #fff;
	color: #0f172a;
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(15, 23, 42, .22), 0 2px 8px rgba(15, 23, 42, .08);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.45;
	/* Slides up rather than appearing: the panel arrives seconds after the
	   reader started reading, and something that simply materialises next to
	   the text reads as an error. */
	animation: tgp-in .22s ease-out both;
}

@keyframes tgp-in {
	from { opacity: 0; transform: translateX(-50%) translateY(10px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.tgp-panel { animation: none; }
}

.tgp-panel__x {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: #64748b;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	border-radius: 8px;
}
.tgp-panel__x:hover { background: #f1f5f9; color: #0f172a; }

.tgp-panel__title {
	margin: 0 28px 4px 0;
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
}

.tgp-panel__sub {
	margin: 0 0 14px;
	font-size: 14px;
	color: #475569;
}

.tgp-panel__topics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}

.tgp-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid #cbd5e1;
	border-radius: 999px;
	font-size: 14px;
	cursor: pointer;
	user-select: none;
	background: #fff;
	transition: border-color .15s, background .15s;
}
.tgp-pill:hover { border-color: #94a3b8; }
.tgp-pill:focus-within { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.tgp-pill input { margin: 0; width: 16px; height: 16px; accent-color: #1d4ed8; cursor: pointer; }
.tgp-pill:has(input:checked) { border-color: #1d4ed8; background: #eff6ff; }

.tgp-panel__actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 14px;
}

.tgp-btn {
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	border-radius: 10px;
	border: 0;
}
.tgp-btn:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }

.tgp-btn--ghost {
	background: none;
	color: #475569;
	padding: 10px 6px;
}
.tgp-btn--ghost:hover { color: #0f172a; text-decoration: underline; }

.tgp-btn--go {
	background: #14274e;
	color: #fff;
	padding: 12px 22px;
}
.tgp-btn--go:hover { background: #1d3a6b; }

/* Phones: full width along the bottom, buttons side by side but roomy. The
   panel must never cover the whole screen — a reader who cannot see any of
   the article behind it has no reason to say yes. */
@media (max-width: 560px) {
	.tgp-panel {
		left: 8px;
		right: 8px;
		bottom: 8px;
		width: auto;
		transform: none;
		padding: 18px 16px 14px;
		border-radius: 12px;
		animation-name: tgp-in-m;
	}
	@keyframes tgp-in-m {
		from { opacity: 0; transform: translateY(10px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	.tgp-panel__title { font-size: 16px; }
	.tgp-panel__actions { justify-content: space-between; }
	.tgp-btn--go { flex: 0 1 auto; padding: 12px 18px; }
}