/* Trusted Astrology — Cookie Consent banner styling.
 * Brand palette via CSS variables (with safe fallbacks if the theme isn't loaded).
 */

.ta-cc-banner {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 9999;
	background: var(--cream, #FBF6EC);
	color: var(--ink, #2E1A47);
	border: 1px solid var(--gold, #C9A24B);
	border-radius: 14px;
	box-shadow: 0 12px 36px rgba(46, 26, 71, 0.18);
	padding: 18px 22px;
	font-family: var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
	animation: ta-cc-up 0.28s ease;
	max-width: 1100px;
	margin: 0 auto;
}
@keyframes ta-cc-up {
	from { transform: translateY(20px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

.ta-cc-banner__inner {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}
.ta-cc-banner__text {
	flex: 1 1 380px;
	line-height: 1.5;
	font-size: 14px;
}
.ta-cc-banner__text strong {
	display: block;
	font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 4px;
	color: var(--ink, #2E1A47);
}
.ta-cc-banner__text p {
	margin: 0;
	color: var(--ink-soft, #5B4783);
}
.ta-cc-banner__text a {
	color: var(--ink, #2E1A47);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.ta-cc-banner__text a:hover { color: var(--gold, #C9A24B); }

.ta-cc-banner__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.ta-cc-btn {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
	line-height: 1.2;
}
.ta-cc-btn--primary {
	background: var(--gold, #C9A24B);
	color: var(--night, #1B1130);
	border: 1px solid var(--gold, #C9A24B);
}
.ta-cc-btn--primary:hover {
	background: var(--gold-2, #E5C77A);
	border-color: var(--gold-2, #E5C77A);
}
.ta-cc-btn--secondary {
	background: transparent;
	color: var(--ink, #2E1A47);
	border: 1px solid rgba(46, 26, 71, 0.2);
}
.ta-cc-btn--secondary:hover {
	background: rgba(201, 162, 75, 0.12);
	border-color: var(--gold, #C9A24B);
	color: var(--ink, #2E1A47);
}

.ta-cc-manage {
	color: var(--ink-soft, #5B4783);
	text-decoration: underline;
}
.ta-cc-manage:hover { color: var(--gold, #C9A24B); }

@media (max-width: 640px) {
	.ta-cc-banner {
		left: 8px;
		right: 8px;
		bottom: 8px;
		padding: 16px 18px;
		border-radius: 12px;
	}
	.ta-cc-banner__inner { gap: 14px; }
	.ta-cc-banner__actions { width: 100%; }
	.ta-cc-btn { flex: 1; text-align: center; }
}