/**
 * TFM Tracking Consent — banner and preferences panel styles.
 * Colors and radius are driven by CSS custom properties set from the
 * plugin settings; override anything via the Custom CSS setting or theme.
 */

#tfm-tc-root {
	--tfm-tc-bg: #ffffff;
	--tfm-tc-text: #1f2937;
	--tfm-tc-btn-bg: #1f2937;
	--tfm-tc-btn-text: #ffffff;
	--tfm-tc-link: #1d4ed8;
	--tfm-tc-radius: 12px;
	position: relative;
	z-index: 99999;
	font-size: 15px;
	line-height: 1.5;
}

#tfm-tc-root[hidden],
#tfm-tc-root [hidden] {
	display: none !important;
}

#tfm-tc-root .tfm-tc-banner {
	position: fixed;
	background: var(--tfm-tc-bg);
	color: var(--tfm-tc-text);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
	padding: 20px;
	box-sizing: border-box;
}

/* Layouts */
.tfm-tc-layout-bar .tfm-tc-banner {
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 0;
}
.tfm-tc-layout-bar.tfm-tc-pos-top .tfm-tc-banner {
	top: 0;
	bottom: auto;
}
/* 420px left ~380px of usable width after padding, against roughly 456px needed
   for three buttons once a theme uppercases them in a condensed face — so the
   third button wrapped. Widened to fit the default labels ("Cookie Settings",
   "Reject All", "Accept All") on one row with headroom, while staying narrow
   enough to still read as a card rather than a bar. */
.tfm-tc-layout-card .tfm-tc-banner {
	max-width: 520px;
	bottom: 20px;
	left: 20px;
	border-radius: var(--tfm-tc-radius);
}
.tfm-tc-layout-card.tfm-tc-pos-bottom-right .tfm-tc-banner {
	left: auto;
	right: 20px;
}
.tfm-tc-layout-card.tfm-tc-pos-top .tfm-tc-banner {
	top: 20px;
	bottom: auto;
}
.tfm-tc-layout-modal .tfm-tc-banner,
.tfm-tc-pos-center .tfm-tc-banner {
	max-width: 520px;
	left: 50%;
	top: 50%;
	bottom: auto;
	transform: translate(-50%, -50%);
	border-radius: var(--tfm-tc-radius);
}

#tfm-tc-root .tfm-tc-heading {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--tfm-tc-text);
}

#tfm-tc-root .tfm-tc-message {
	margin: 0 0 16px;
}

#tfm-tc-root a,
#tfm-tc-root .tfm-tc-privacy-link {
	color: var(--tfm-tc-link);
	text-decoration: underline;
}

#tfm-tc-root .tfm-tc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

/* When the labels genuinely cannot fit on one row, wrapping should read as a
   deliberate stack rather than an orphaned last button. Growing each button to
   fill its row turns a ragged "two then one" into full-width rows. */
#tfm-tc-root .tfm-tc-actions .tfm-tc-btn {
	flex: 1 1 auto;
	/* Themes commonly uppercase button text, which widens it well beyond what the
	   configured label suggests; never let a label break mid-word as a result. */
	white-space: nowrap;
}

/* Specificity is load-bearing here, not stylistic.
   This rule was `.tfm-tc-btn` — a single class, which theme rules like
   `.elementor button` outrank. The ghost variant below has always been
   ID-scoped, so on themes that style buttons globally the ghost buttons kept
   their styling while the primary button silently inherited the theme's, which
   is how silbarsecurityfranchise ended up with an outlined pink "Accept All"
   instead of a filled one. Matching the ghost rule's specificity fixes it. */
#tfm-tc-root .tfm-tc-btn {
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	padding: 10px 14px;
	border-radius: calc(var(--tfm-tc-radius, 12px) / 2);
	border: 1px solid var(--tfm-tc-btn-bg, #1f2937);
	background: var(--tfm-tc-btn-bg, #1f2937);
	color: var(--tfm-tc-btn-text, #ffffff);
	text-decoration: none;
}

/* Stated explicitly rather than relying on the base rule, so the primary action
   is unambiguous even if a theme wins on some property we haven't anticipated. */
#tfm-tc-root .tfm-tc-btn-primary {
	background: var(--tfm-tc-btn-bg, #1f2937);
	color: var(--tfm-tc-btn-text, #ffffff);
	border-color: var(--tfm-tc-btn-bg, #1f2937);
}

#tfm-tc-root .tfm-tc-btn-ghost {
	background: transparent;
	color: var(--tfm-tc-text);
	border-color: currentColor;
}

.tfm-tc-btn:focus-visible {
	outline: 2px solid var(--tfm-tc-link, #1d4ed8);
	outline-offset: 2px;
}

/* Preferences modal */
#tfm-tc-root .tfm-tc-overlay {
	position: fixed;
	inset: 0;
	background: rgba(17, 24, 39, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

#tfm-tc-root .tfm-tc-modal {
	position: relative;
	background: var(--tfm-tc-bg);
	color: var(--tfm-tc-text);
	max-width: 560px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	border-radius: var(--tfm-tc-radius);
	padding: 24px;
	box-sizing: border-box;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

#tfm-tc-root .tfm-tc-close {
	position: absolute;
	top: 10px;
	right: 14px;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

#tfm-tc-root .tfm-tc-category {
	border-top: 1px solid rgba(128, 128, 128, 0.25);
	padding: 12px 0;
}

#tfm-tc-root .tfm-tc-category-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

#tfm-tc-root .tfm-tc-category-label {
	font-weight: 700;
}

#tfm-tc-root .tfm-tc-category-desc {
	margin: 6px 0 0;
	font-size: 13px;
	opacity: 0.85;
}

#tfm-tc-root .tfm-tc-always-on {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
}

#tfm-tc-root .tfm-tc-gpc-note {
	font-size: 13px;
	font-style: italic;
	opacity: 0.85;
}

/* Toggle switch */
.tfm-tc-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	flex: none;
}
.tfm-tc-switch input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}
.tfm-tc-slider {
	position: absolute;
	inset: 0;
	background: rgba(128, 128, 128, 0.45);
	border-radius: 24px;
	transition: background 0.15s ease;
	pointer-events: none;
}
.tfm-tc-slider::before {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.15s ease;
}
.tfm-tc-switch input:checked + .tfm-tc-slider {
	background: var(--tfm-tc-btn-bg, #1f2937);
}
.tfm-tc-switch input:checked + .tfm-tc-slider::before {
	transform: translateX(20px);
}
.tfm-tc-switch input:focus-visible + .tfm-tc-slider {
	outline: 2px solid var(--tfm-tc-link, #1d4ed8);
	outline-offset: 2px;
}

/* Blocked embed placeholder */
.tfm-tc-placeholder {
	background: #f3f4f6;
	color: #1f2937;
	border: 1px dashed #9ca3af;
	border-radius: 8px;
	padding: 24px;
	text-align: center;
	margin: 8px 0;
}

/* Cookie declaration table */
.tfm-tc-declaration {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
}
.tfm-tc-declaration th,
.tfm-tc-declaration td {
	border: 1px solid rgba(128, 128, 128, 0.35);
	padding: 8px 12px;
	text-align: left;
	vertical-align: top;
}

@media (max-width: 600px) {
	.tfm-tc-layout-card .tfm-tc-banner {
		left: 10px;
		right: 10px;
		bottom: 10px;
		max-width: none;
	}
	#tfm-tc-root .tfm-tc-actions {
		justify-content: stretch;
	}
	#tfm-tc-root .tfm-tc-actions .tfm-tc-btn {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tfm-tc-slider,
	.tfm-tc-slider::before {
		transition: none;
	}
}

/* Confirmation toast for the one-click "Do Not Sell or Share" opt-out.
   The link can appear anywhere (usually a footer) with no panel open, so the
   opt-out needs visible and announced confirmation of its own. */
.tfm-tc-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 12px);
	z-index: 2147483646;
	max-width: min(30rem, calc(100vw - 2rem));
	padding: .75rem 1rem;
	border-radius: var(--tfm-tc-radius, 8px);
	background: var(--tfm-tc-btn-bg, #1f2937);
	color: var(--tfm-tc-btn-text, #fff);
	font-size: .9rem;
	line-height: 1.45;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.tfm-tc-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.tfm-tc-toast { transition: none; }
}

/* Cookie declaration table (privacy policy pages). Kept deliberately plain so
   it inherits the host theme's typography rather than fighting it. */
.tfm-tc-declaration-heading { margin: 1.5em 0 .5em; }
.tfm-tc-declaration-intro { margin: 0 0 1em; }
.tfm-tc-declaration-caption {
	caption-side: top;
	text-align: left;
	font-weight: 600;
	padding-bottom: .5em;
}
.tfm-tc-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}