/* Tunerzine Core: cookie banner and blocked embeds (includes/21-consent.php).
   Same look as the Complianz banner this replaced: Complianz's layout
   ("Banner A", bottom right) with the theme's black sticker panel and pill
   buttons. Colours come from the theme's tokens, with the theme's values as
   fallbacks. */

.tzc-banner {
	--tzc-ink: var(--tz-ink, #121214);
	--tzc-text: var(--tz-text, #F5F5F0);
	--tzc-accent: var(--tz-accent, #F89731);
	box-sizing: border-box;
	display: none;
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 99999;
	max-height: calc(100vh - 20px);
	overflow-y: auto;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	grid-gap: 10px;
	padding: 15px 20px;
	background: var(--tzc-ink);
	border: 6px solid var(--tzc-text);
	border-radius: 14px;
	box-shadow: 0 10px 0 rgba(0, 0, 0, .45);
	color: var(--tzc-text);
	font-family: var(--tz-font-body, 'Archivo', 'Helvetica Neue', Arial, sans-serif);
	font-size: 16px;
	line-height: 1.5;
	text-align: start;
}
.tzc-ask .tzc-banner, .tzc-banner.tzc-open { display: grid; }
.tzc-banner a { transition: initial; }

/* Header: title centred, close at the right */
.tzc-header { display: grid; grid-template-columns: 100px 1fr 100px; align-items: center; }
.tzc-title {
	grid-column-start: 2;
	justify-self: center;
	color: var(--tzc-text);
	font-size: 15px;
	font-weight: 500;
	font-stretch: 125%;
	letter-spacing: 0;
	text-transform: uppercase;
}
.tzc-close {
	grid-column-start: 3;
	justify-self: end;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--tzc-text);
	font-size: 20px;
	line-height: 20px;
	cursor: pointer;
}
.tzc-close svg { display: block; width: 20px; height: 20px; }
.tzc-close:hover { color: var(--tzc-accent); }
.tzc-divider { margin-left: -20px; margin-right: -20px; }

/* Message and categories */
.tzc-body { width: 100%; max-height: 55vh; overflow-x: hidden; overflow-y: auto; }
.tzc-body::-webkit-scrollbar { width: 5px; background-color: transparent; }
.tzc-body::-webkit-scrollbar-track { border-radius: 10px; background-color: transparent; }
.tzc-body::-webkit-scrollbar-thumb { border-radius: 10px; background-color: var(--tzc-accent); }
.tzc-message {
	margin-bottom: 5px;
	color: var(--tzc-text);
	font-size: 12px;
	line-height: 18px;
	word-wrap: break-word;
}
.tzc-message a { color: var(--tzc-accent); }
.tzc-categories { display: none; }
.tzc-banner.tzc-prefs .tzc-categories { display: block; animation: tzc-fadein 1s; }
.tzc-category { background-color: rgba(239, 239, 239, .5); border-radius: 10px; }
.tzc-category:not(:last-child) { margin-bottom: 10px; }
.tzc-category-header {
	display: grid;
	grid-template-columns: 1fr auto 15px;
	grid-template-rows: minmax(0, 1fr);
	grid-gap: 10px;
	align-items: center;
	padding: 10px;
}
.tzc-category-title {
	grid-column-start: 1;
	justify-self: start;
	margin: 0;
	color: var(--tzc-text);
	font-size: 14px;
	font-weight: 500;
}
.tzc-always-active { color: var(--tzc-accent); font-size: 12px; font-weight: 500; }
.tzc-category-toggle {
	grid-column-start: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
}
.tzc-icon { display: block; width: 18px; height: 18px; transform: rotate(0deg); transition: all .5s ease; }
.tzc-category-toggle[aria-expanded="true"] .tzc-icon { transform: rotate(180deg); }
.tzc-description {
	max-width: 100%;
	margin: 0;
	padding: 10px;
	color: var(--tzc-text);
	font-size: 12px;
	line-height: 18px;
}
.tzc-description[hidden] { display: none; }

/* On/off switches */
.tzc-switch { position: relative; display: flex; align-items: center; margin: 0; }
.tzc-switch input {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 40px;
	height: 20px;
	margin: 0;
	margin-top: -10px;
	opacity: 0;
	cursor: pointer;
}
.tzc-switch label { position: relative; margin: 0; padding-left: 30px; }
.tzc-switch label::before, .tzc-switch label::after {
	content: "";
	display: block;
	position: absolute;
	box-sizing: border-box;
	border-radius: 10px;
	transition: background-color .3s, left .3s;
}
.tzc-switch label::before { top: -7px; left: 0; width: 28px; height: 15px; background-color: #44444C; }
.tzc-switch label::after { top: -5px; left: 4px; width: 11px; height: 11px; background: var(--tzc-text); }
.tzc-switch input:checked + label::before { background-color: var(--tzc-accent); }
.tzc-switch input:checked + label::after { left: 14px; }
.tzc-switch input:focus-visible + label::before { box-shadow: 0 0 0 2px #245fcc; }

/* Buttons: pill stickers; hover turns orange with the text inverted */
.tzc-buttons { display: flex; gap: 10px; }
.tzc-btn {
	flex: initial;
	width: 100%;
	min-height: 45px;
	margin: 0;
	padding: 10px;
	background-color: var(--tzc-ink);
	border: 4px solid var(--tzc-text);
	border-radius: 999px;
	box-shadow: 0 6px 0 rgba(0, 0, 0, .45);
	color: var(--tzc-text);
	cursor: pointer;
	font-family: var(--tz-font-body, 'Archivo', 'Helvetica Neue', Arial, sans-serif);
	font-size: 15px;
	font-weight: 500;
	font-stretch: 125%;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}
.tzc-btn.tzc-accept { background-color: var(--tzc-accent); color: var(--tzc-ink); }
.tzc-btn:hover { background-color: var(--tzc-accent); color: var(--tzc-ink); text-decoration: none; }
.tzc-btn.tzc-accept:hover { color: var(--tzc-text); }
.tzc-btn.tzc-save, .tzc-banner.tzc-prefs .tzc-btn.tzc-view { display: none; }
.tzc-banner.tzc-prefs .tzc-btn.tzc-save { display: block; }
.tzc-documents { display: flex; }

@media (min-width: 350px) {
	.tzc-body { min-width: 300px; }
}
@media (min-width: 768px) {
	.tzc-banner { min-width: 526px; max-width: 100%; }
	.tzc-message, .tzc-categories { width: 484px; }
}
@media (max-width: 768px) {
	.tzc-banner { left: 0; right: 0; bottom: 0; width: 100%; }
	.tzc-buttons { flex-direction: column; }
}
@media (max-width: 425px) {
	.tzc-title { display: none; }
	.tzc-message { margin-right: 5px; }
	.tzc-category-header { grid-template-columns: 1fr !important; }
}
@media (max-width: 399px) {
	.tzc-header { grid-template-columns: auto 1fr auto; }
}
/* Landscape phones: everything shrinks to fit the height */
@media (max-height: 400px) {
	.tzc-ask .tzc-banner, .tzc-banner.tzc-open {
		display: flex;
		flex-direction: column;
		gap: 1px;
		height: calc(100vh - 20px);
		overflow: hidden;
		padding: 7px 12px;
		zoom: .6;
	}
	.tzc-body { flex: 1; min-height: 0; max-height: none; margin-top: 15px; overflow-y: auto; }
	.tzc-header, .tzc-divider, .tzc-buttons, .tzc-documents { flex-shrink: 0; }
	.tzc-header { max-height: 10px; margin-bottom: 15px; }
	.tzc-close { zoom: .6; }
	.tzc-buttons { gap: 1px; }
	.tzc-btn { height: 15vh; min-height: unset; padding: 0; font-size: 1.1rem; line-height: 14px; zoom: .5; }
	.tzc-documents { zoom: .5; }
}

/* Blocked embeds: the thumbnail with the notice on it */
.tzc-blocked {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: inherit;
	background-color: #FFF;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: cover;
	border: 0;
	border-radius: 3px;
	box-shadow: 0 0 1px 0 rgba(0, 0, 0, .5), 0 1px 10px 0 rgba(0, 0, 0, .15);
	animation: tzc-fadein .6s;
}
.tzc-blocked iframe { visibility: hidden; max-height: 100%; border: 0 !important; }
.tzc-frame { display: block; max-width: 100%; }
.tzc-notice {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 98;
	width: 100%;
	max-width: 300px;
	margin: 0;
	padding: 10px;
	transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, .5);
	border: 2px outset #000;
	color: #FFF;
	cursor: pointer;
	font-size: 14px;
	line-height: 23px;
	text-align: center;
	text-transform: initial;
	white-space: normal;
}
/* Embeds that are a post plus a script (Instagram, X, TikTok): the notice sits above the post */
.tzc-notice.tzc-notice--inline { position: static; display: block; margin: 0 auto 10px; transform: none; }

@keyframes tzc-fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}