/* ============================================================
	Let's Code Cookie Banner – Frontend styles
	============================================================ */

/* --- CSS custom properties (overridden inline by PHP) ---------- */
:root {
	--lccb-bg:             #ffffff;
	--lccb-text:           #333333;
	--lccb-btn-bg:         #1a73e8;
	--lccb-btn-text:       #ffffff;
	--lccb-btn-border:     #1a73e8;
	--lccb-overlay-bg:     #f8f8f8;
	--lccb-shadow:         0 4px 24px rgba(0,0,0,.18);
	--lccb-radius:         8px;
	--lccb-z:              999999;
	--lccb-btn-radius:     8px;
	--lccb-btn-pad-v:      10px;
	--lccb-btn-pad-h:      18px;
	--lccb-fab-icon:       22px;
	--lccb-banner-left:    20px;
	--lccb-banner-right:   20px;
	--lccb-banner-bottom:  20px;
	--lccb-banner-radius:  8px;
	--lccb-font-size:      14px;
	--lccb-table-header-bg:   #f5f5f5;
	--lccb-table-header-text: #333333;
	--lccb-table-odd-bg:      #ffffff;
	--lccb-table-odd-text:    #000000;
	--lccb-table-even-bg:     #ffffff;
	--lccb-table-even-text:   #000000;
	--lccb-fab-bottom:        20px;
	--lccb-fab-left:          20px;
	--lccb-fab-right:         auto;
	--lccb-fab-border-width:  0px;
	--lccb-btn-border-width:  2px;
	--lccb-fab-shadow:        0 2px 10px rgba(0,0,0,.25);
}

/* --- Accessibility helper -------------------------------------- */
.lccb-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* --- Full isolation: prevent any theme CSS from bleeding in ---- */
#lccb-banner,
#lccb-panel,
#lccb-overlay,
#lccb-fab {
	all: initial !important;
	box-sizing: border-box !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	line-height: 1.5 !important;
}

/* all: unset !important ensures theme !important rules cannot bleed into children.
	SVG elements are excluded because all: unset breaks their rendering. */
#lccb-banner *:not(svg):not(path):not(circle):not(rect):not(polygon):not(polyline):not(line):not(ellipse):not(g),
#lccb-panel *:not(svg):not(path):not(circle):not(rect):not(polygon):not(polyline):not(line):not(ellipse):not(g),
#lccb-fab *:not(svg):not(path):not(circle):not(rect):not(polygon):not(polyline):not(line):not(ellipse):not(g) {
	all: unset !important;
	box-sizing: border-box !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	line-height: 1.5 !important;
}

/* ============================================================
	BANNER
	============================================================ */
#lccb-banner {
	position: fixed !important;
	bottom: var(--lccb-banner-bottom) !important;
	left: var(--lccb-banner-left) !important;
	right: var(--lccb-banner-right) !important;
	border-radius: var(--lccb-banner-radius) !important;
	z-index: var(--lccb-z) !important;
	background-color: var(--lccb-bg) !important;
	color: var(--lccb-text) !important;
	box-shadow: 0 4px 24px rgba(0,0,0,.18) !important;
	padding: 20px 24px !important;
	display: block !important;
	font-size: var(--lccb-font-size) !important;
}

#lccb-banner[hidden] { display: none !important; }

#lccb-banner .lccb-banner-inner {
	max-width: 960px !important;
	margin: 0 auto !important;
	position: relative !important;
	display: block !important;
}

/* Close (X) button */
#lccb-banner .lccb-x-btn,
#lccb-panel .lccb-x-btn {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	background-color: transparent !important;
	border: none !important;
	cursor: pointer !important;
	font-size: 24px !important;
	line-height: 1 !important;
	padding: 4px 8px !important;
	color: var(--lccb-text) !important;
	transition: outline .1s !important;
	display: block !important;
}
#lccb-banner .lccb-x-btn:hover,
#lccb-banner .lccb-x-btn:focus,
#lccb-panel .lccb-x-btn:hover,
#lccb-panel .lccb-x-btn:focus {
	outline: 2px solid var(--lccb-btn-bg) !important;
	outline-offset: 2px !important;
}

/* Title */
#lccb-banner .lccb-title {
	font-size: calc(var(--lccb-font-size) * 1.17) !important;
	font-weight: 700 !important;
	margin: 0 32px 10px 0 !important;
	color: var(--lccb-text) !important;
	display: block !important;
}

/* Text */
#lccb-banner .lccb-text {
	font-size: var(--lccb-font-size) !important;
	margin: 0 0 16px !important;
	color: var(--lccb-text) !important;
	display: block !important;
}

#lccb-banner .lccb-policy-link {
	color: var(--lccb-btn-bg) !important;
	text-decoration: underline !important;
	cursor: pointer !important;
	display: inline !important;
}
#lccb-banner .lccb-policy-link:focus {
	outline: 2px solid var(--lccb-btn-bg) !important;
	outline-offset: 2px !important;
}

/* Action buttons */
#lccb-banner .lccb-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	align-items: center !important;
	margin-bottom: 18px !important;
}

#lccb-banner .lccb-powered-by {
	margin: 0 !important;
	font-size: 11px !important;
	text-align: center !important;
	color: var(--lccb-text) !important;
	opacity: 0.55;
}

#lccb-banner .lccb-powered-by a {
	color: var(--lccb-btn-bg) !important;
	text-decoration: underline !important;
	cursor: pointer !important;
	display: inline !important;
}

#lccb-banner .lccb-powered-by a:focus {
	outline: 2px solid var(--lccb-btn-bg) !important;
	outline-offset: 2px !important;
}

/* All three banner buttons share identical visual weight (GDPR neutrality) */
#lccb-banner .lccb-btn,
#lccb-panel .lccb-btn {
	flex: 1 1 auto !important;
	min-width: 140px !important;
	padding: var(--lccb-btn-pad-v) var(--lccb-btn-pad-h) !important;
	font-size: var(--lccb-font-size) !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	border-radius: var(--lccb-btn-radius) !important;
	background-color: var(--lccb-btn-bg) !important;
	color: var(--lccb-btn-text) !important;
	border: var(--lccb-btn-border-width) solid var(--lccb-btn-border) !important;
	transition: filter .2s, outline-offset .1s !important;
	text-align: center !important;
	display: inline-block !important;
	line-height: 1.5 !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
}
#lccb-banner .lccb-btn:hover,
#lccb-panel .lccb-btn:hover {
	filter: brightness(1.1) !important;
}
#lccb-banner .lccb-btn:focus,
#lccb-panel .lccb-btn:focus {
	outline: 3px solid var(--lccb-btn-border) !important;
	outline-offset: 3px !important;
}
#lccb-banner .lccb-btn:active,
#lccb-panel .lccb-btn:active {
	filter: brightness(.9) !important;
}

/* ============================================================
	OVERLAY (behind the panel)
	============================================================ */
#lccb-overlay {
	position: fixed !important;
	inset: 0 !important;
	background-color: rgba(0,0,0,.45) !important;
	z-index: calc(var(--lccb-z) + 1) !important;
	display: block !important;
}
#lccb-overlay[hidden] { display: none !important; }

/* ============================================================
	PREFERENCES PANEL
	============================================================ */
#lccb-panel {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: calc(var(--lccb-z) + 2) !important;
	background-color: var(--lccb-overlay-bg) !important;
	color: var(--lccb-text) !important;
	border-radius: var(--lccb-radius) !important;
	box-shadow: var(--lccb-shadow) !important;
	width: min(560px, calc(100% - 40px)) !important;
	max-height: 90svh !important;
	overflow-y: auto !important;
	display: flex !important;
	flex-direction: column !important;
	font-size: var(--lccb-font-size) !important;
}
#lccb-panel[hidden] { display: none !important; }

#lccb-panel .lccb-panel-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 18px 20px 14px !important;
	border-bottom: 1px solid rgba(0,0,0,.1) !important;
	position: sticky !important;
	top: 0 !important;
	background-color: var(--lccb-overlay-bg) !important;
	z-index: 1 !important;
	flex-shrink: 0 !important;
}
#lccb-panel .lccb-panel-header h2 {
	font-size: calc(var(--lccb-font-size) * 1.17) !important;
	font-weight: 700 !important;
	margin: 0 !important;
	color: var(--lccb-text) !important;
	display: block !important;
}

/* Reuse .lccb-x-btn inside the panel */
#lccb-panel .lccb-x-btn {
	position: static !important;
}

/* Cookie category rows */
#lccb-panel .lccb-panel-body {
	padding: 12px 20px !important;
	flex: 1 !important;
	overflow-y: auto !important;
	display: block !important;
}

#lccb-panel .lccb-category {
	display: flex !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	gap: 16px !important;
	padding: 14px 0 !important;
	border-bottom: 1px solid rgba(0,0,0,.07) !important;
}
#lccb-panel .lccb-category:last-child { border-bottom: none !important; }

#lccb-panel .lccb-category-info {
	flex: 1 !important;
	display: block !important;
}
#lccb-panel .lccb-category-info strong {
	display: block !important;
	font-size: var(--lccb-font-size) !important;
	font-weight: 600 !important;
	margin-bottom: 4px !important;
	color: var(--lccb-text) !important;
}
#lccb-panel .lccb-category-info p {
	font-size: calc(var(--lccb-font-size) * 0.87) !important;
	margin: 0 !important;
	color: var(--lccb-text) !important;
	opacity: .75 !important;
	display: block !important;
}

#lccb-panel .lccb-always-on {
	font-size: calc(var(--lccb-font-size) * 0.86) !important;
	font-weight: 600 !important;
	color: var(--lccb-always-on-color) !important;
	white-space: nowrap !important;
	padding-top: 2px !important;
	display: inline-block !important;
	flex-shrink: 0 !important;
}

/* Toggle switch */
#lccb-panel .lccb-toggle {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
}

#lccb-panel .lccb-toggle input[type="checkbox"] {
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	position: absolute !important;
}

#lccb-panel .lccb-slider {
	display: block !important;
	width: 46px !important;
	height: 26px !important;
	background-color: #ccc !important;
	border-radius: 26px !important;
	transition: background-color .25s !important;
	position: relative !important;
	flex-shrink: 0 !important;
}
#lccb-panel .lccb-slider::before {
	content: '' !important;
	position: absolute !important;
	top: 3px !important;
	left: 3px !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	background-color: #fff !important;
	transition: transform .25s !important;
	box-shadow: 0 1px 4px rgba(0,0,0,.3) !important;
}

#lccb-panel .lccb-toggle input:checked + .lccb-slider,
#lccb-panel .lccb-toggle.lccb-on .lccb-slider {
	background-color: var(--lccb-btn-bg) !important;
}
#lccb-panel .lccb-toggle input:checked + .lccb-slider::before,
#lccb-panel .lccb-toggle.lccb-on .lccb-slider::before {
	transform: translateX(20px) !important;
}

#lccb-panel .lccb-toggle input:focus + .lccb-slider {
	outline: 3px solid var(--lccb-btn-border) !important;
	outline-offset: 2px !important;
}

/* Panel footer */
#lccb-panel .lccb-panel-footer {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	padding: 14px 20px 18px !important;
	border-top: 1px solid rgba(0,0,0,.1) !important;
	background-color: var(--lccb-overlay-bg) !important;
	position: sticky !important;
	bottom: 0 !important;
	flex-shrink: 0 !important;
}

#lccb-panel .lccb-panel-btns {
	display: flex !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
}

/* Panel buttons: slightly more compact */
#lccb-panel .lccb-panel-btns .lccb-btn {
	flex: 1 1 auto !important;
	min-width: 110px !important;
	padding: 8px 14px !important;
	font-size: calc(var(--lccb-font-size) * 0.93) !important;
}

#lccb-panel .lccb-policy-link-sm {
	font-size: calc(var(--lccb-font-size) * 0.86) !important;
	color: var(--lccb-btn-bg) !important;
	text-decoration: underline !important;
	cursor: pointer !important;
	display: inline-block !important;
}
#lccb-panel .lccb-policy-link-sm:focus {
	outline: 2px solid var(--lccb-btn-bg) !important;
	outline-offset: 2px !important;
}

/* ============================================================
	FLOATING ACTION BUTTON (Gestisci cookie)
	============================================================ */
#lccb-fab {
	position: fixed !important;
	bottom: var(--lccb-fab-bottom) !important;
	left: var(--lccb-fab-left) !important;
	right: var(--lccb-fab-right) !important;
	z-index: var(--lccb-z) !important;
	display: block !important;
}
#lccb-fab[hidden] { display: none !important; }

#lccb-fab .lccb-fab-btn,
.lccb-manage-link .lccb-fab-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: var(--lccb-fab-bg) !important;
	color: var(--lccb-fab-color) !important;
	border: var(--lccb-fab-border-width) solid var(--lccb-fab-border) !important;
	border-radius: var(--lccb-btn-radius) !important;
	padding: 11px !important;
	cursor: pointer !important;
	box-shadow: var(--lccb-fab-shadow) !important;
	transition: filter .2s, box-shadow .2s !important;
}
#lccb-fab .lccb-fab-btn svg,
.lccb-manage-link .lccb-fab-btn svg {
	width: var(--lccb-fab-icon) !important;
	height: var(--lccb-fab-icon) !important;
	flex-shrink: 0 !important;
	fill: currentColor !important;
	color: inherit !important;
	display: block !important;
	overflow: visible !important;
}
#lccb-fab .lccb-fab-btn svg path,
#lccb-fab .lccb-fab-btn svg circle,
#lccb-fab .lccb-fab-btn svg rect,
.lccb-manage-link .lccb-fab-btn svg path,
.lccb-manage-link .lccb-fab-btn svg circle,
.lccb-manage-link .lccb-fab-btn svg rect {
	fill: currentColor !important;
}
#lccb-fab .lccb-fab-btn:hover,
.lccb-manage-link .lccb-fab-btn:hover {
	filter: brightness(1.1) !important;
	box-shadow: 0 4px 14px rgba(0,0,0,.3) !important;
}
#lccb-fab .lccb-fab-btn:focus,
.lccb-manage-link .lccb-fab-btn:focus {
	outline: 3px solid var(--lccb-fab-border) !important;
	outline-offset: 3px !important;
}

/* ============================================================
	Shortcode button (lccb_manage_cookies)
	============================================================ */
.lccb-manage-link {
	display: inline-flex !important;
	vertical-align: middle !important;
}
.lccb-manage-link *:not(svg):not(path):not(circle):not(rect):not(polygon):not(polyline):not(line):not(ellipse):not(g) {
	all: unset !important;
	box-sizing: border-box !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	line-height: 1.5 !important;
}

/* ============================================================
	RESPONSIVE
	============================================================ */
@media (max-width: 600px) {
	#lccb-banner {
		left: 8px !important;
		right: 8px !important;
		bottom: 8px !important;
		padding: 16px !important;
	}
	#lccb-banner .lccb-actions {
		flex-direction: column !important;
		align-items: center !important;
	}
	#lccb-banner .lccb-btn,
	#lccb-panel .lccb-btn {
		width: auto !important;
		min-width: 200px !important;
		flex: 0 0 auto !important;
	}
	#lccb-panel {
		top: auto !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		transform: none !important;
		max-height: 85svh !important;
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}
	#lccb-panel .lccb-panel-btns {
		flex-direction: column !important;
		align-items: center !important;
	}
	#lccb-panel .lccb-panel-btns .lccb-btn {
		width: auto !important;
		min-width: 200px !important;
		flex: 0 0 auto !important;
	}
	#lccb-fab {
		bottom: 12px !important;
	}
}

/* High-contrast / forced-colors support */
@media (forced-colors: active) {
	#lccb-banner .lccb-btn,
	#lccb-panel .lccb-btn {
		border: 2px solid ButtonText !important;
	}
	#lccb-panel .lccb-slider {
		border: 2px solid ButtonText !important;
	}
}

/* Reduced-motion support */
@media (prefers-reduced-motion: reduce) {
	#lccb-banner .lccb-btn,
	#lccb-panel .lccb-btn,
	#lccb-panel .lccb-slider,
	#lccb-panel .lccb-slider::before,
	#lccb-fab .lccb-fab-btn,
	.lccb-manage-link .lccb-fab-btn {
		transition: none !important;
	}
}

/* ============================================================
	COOKIE DETAIL LIST (inside the preferences panel)
	============================================================ */

#lccb-panel .lccb-cookie-toggle {
	display: inline-block !important;
	margin-top: 8px !important;
	padding: 3px 0 !important;
	font-size: calc(var(--lccb-font-size) * 0.82) !important;
	color: var(--lccb-btn-bg) !important;
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}
#lccb-panel .lccb-cookie-toggle:focus {
	outline: 2px solid var(--lccb-btn-bg) !important;
	outline-offset: 2px !important;
}

#lccb-panel .lccb-cookie-list {
	display: block !important;
	width: 100% !important;
	overflow-x: auto !important;
	margin-top: 8px !important;
}
#lccb-panel .lccb-cookie-list[hidden] {
	display: none !important;
}

#lccb-panel .lccb-cookie-tbl {
	display: table !important;
	width: 100% !important;
	border-collapse: collapse !important;
	font-size: calc(var(--lccb-font-size) * 0.78) !important;
	color: var(--lccb-text) !important;
}
#lccb-panel .lccb-cookie-tbl thead {
	display: table-header-group !important;
}
#lccb-panel .lccb-cookie-tbl tbody {
	display: table-row-group !important;
}
#lccb-panel .lccb-cookie-tbl tr {
	display: table-row !important;
	border-bottom: 1px solid rgba(0,0,0,.06) !important;
}
#lccb-panel .lccb-cookie-tbl th {
	display: table-cell !important;
	text-align: left !important;
	font-weight: 600 !important;
	padding: 5px 8px !important;
	background: rgba(0,0,0,.04) !important;
	white-space: nowrap !important;
}
#lccb-panel .lccb-cookie-tbl td {
	display: table-cell !important;
	padding: 5px 8px !important;
	vertical-align: top !important;
}
#lccb-panel .lccb-cookie-tbl code {
	display: inline !important;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
	font-size: calc(var(--lccb-font-size) * 0.78) !important;
	background: rgba(0,0,0,.06) !important;
	padding: 1px 4px !important;
	border-radius: 3px !important;
}

/* ============================================================
	COOKIE POLICY SHORTCODE ([lccb_cookie_policy])
	These styles apply to page content, NOT inside the panel.
	============================================================ */

.lccb-policy-wrap {
	margin: 1.5em 0;
}

.lccb-policy-section {
	margin-bottom: 2em;
}

.lccb-policy-cat-title {
	font-size: 1.1em;
	font-weight: 700;
	margin: 0 0 0.6em;
	padding-bottom: 0.3em;
	border-bottom: 2px solid #e0e0e0;
}

.lccb-policy-empty {
	color: #777;
	margin: 0;
}

.lccb-policy-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
	background: #ffffff;
}

.lccb-policy-table th,
.lccb-policy-table td {
	padding: 8px 12px;
	text-align: left;
	border: 1px solid #e0e0e0;
	vertical-align: top;
}

.lccb-policy-table th {
	background: var(--lccb-table-header-bg, #f5f5f5);
	color: var(--lccb-table-header-text, #333333);
	font-weight: 600;
	white-space: nowrap;
}

.lccb-policy-table tbody tr:nth-child(odd) td {
	background: var(--lccb-table-odd-bg, #ffffff);
	color: var(--lccb-table-odd-text, #000000);
}

.lccb-policy-table tbody tr:nth-child(even) td {
	background: var(--lccb-table-even-bg, #ffffff);
	color: var(--lccb-table-even-text, #000000);
}

.lccb-policy-code {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 0.9em;
	background: #f0f0f0;
	padding: 1px 5px;
	border-radius: 3px;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.lccb-policy-table {
		display: block;
		overflow-x: auto;
	}
}

/* ============================================================
	SCAN OVERLAY (admin-triggered scan mode: ?lccb_scan=1)
	============================================================ */
#lccb-scan-overlay {
	position: fixed !important;
	inset: 0 !important;
	background: rgba(0,0,0,.82) !important;
	z-index: calc(var(--lccb-z) + 100) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

#lccb-scan-box {
	background: #fff !important;
	border-radius: 14px !important;
	padding: 36px 44px !important;
	max-width: 500px !important;
	width: 90% !important;
	text-align: center !important;
	box-shadow: 0 8px 40px rgba(0,0,0,.35) !important;
}

.lccb-scan-title {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #1a1a1a !important;
	margin: 0 0 8px !important;
}

.lccb-scan-status {
	font-size: 14px !important;
	color: #444 !important;
	margin: 0 0 20px !important;
	min-height: 20px !important;
}

.lccb-scan-bar {
	height: 8px !important;
	background: #e0e0e0 !important;
	border-radius: 4px !important;
	overflow: hidden !important;
	margin: 0 0 12px !important;
}

.lccb-scan-fill {
	height: 100% !important;
	background: #1a73e8 !important;
	border-radius: 4px !important;
	width: 0% !important;
	transition: width 0.4s ease !important;
}

.lccb-scan-info {
	font-size: 12px !important;
	color: #888 !important;
	margin: 0 !important;
}

.lccb-scan-done {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #2e7d32 !important;
	margin: 16px 0 0 !important;
}

/* ============================================================
	YOUTUBE CONSENT PLACEHOLDER
	============================================================ */
.lccb-yt-placeholder {
	position: relative !important;
	display: block !important;
	overflow: hidden !important;
	background: #000 !important;
	aspect-ratio: 16 / 9 !important;
	width: 100% !important;
	max-width: 100% !important;
	cursor: pointer !important;
}

.lccb-yt-thumb {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	opacity: 0.75 !important;
	transition: opacity 0.2s ease !important;
}

.lccb-yt-placeholder:hover .lccb-yt-thumb,
.lccb-yt-placeholder:focus-within .lccb-yt-thumb {
	opacity: 0.9 !important;
}

.lccb-yt-play-btn {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -65%) !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	cursor: pointer !important;
	width: 68px !important;
	height: 48px !important;
	transition: transform 0.15s ease !important;
	display: block !important;
}

.lccb-yt-placeholder:hover .lccb-yt-play-btn,
.lccb-yt-play-btn:focus {
	transform: translate(-50%, -65%) scale(1.1) !important;
	outline: none !important;
}

.lccb-yt-play-btn:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 4px !important;
	border-radius: 4px !important;
}

.lccb-yt-play-btn svg {
	width: 68px !important;
	height: 48px !important;
	display: block !important;
}

.lccb-yt-play-bg {
	fill: #212121 !important;
	fill-opacity: 0.8 !important;
	transition: fill-opacity 0.2s ease !important;
}

.lccb-yt-play-arrow {
	fill: #fff !important;
}

.lccb-yt-placeholder:hover .lccb-yt-play-bg {
	fill: #ff0000 !important;
	fill-opacity: 1 !important;
}

.lccb-yt-warn {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	background: rgba(0, 0, 0, 0.72) !important;
	color: #fff !important;
	font-size: 12px !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	line-height: 1.45 !important;
	padding: 8px 14px !important;
	margin: 0 !important;
	text-align: center !important;
	display: block !important;
}

@media (prefers-reduced-motion: reduce) {
	.lccb-yt-thumb,
	.lccb-yt-play-btn,
	.lccb-yt-play-bg {
		transition: none !important;
	}
}

/* ============================================================
	VIMEO CONSENT PLACEHOLDER
	============================================================ */
.lccb-vm-placeholder {
	position: relative !important;
	display: block !important;
	overflow: hidden !important;
	background: #1a1a1a !important;
	aspect-ratio: 16 / 9 !important;
	width: 100% !important;
	max-width: 100% !important;
	cursor: pointer !important;
}

.lccb-vm-play-btn {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -65%) !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	cursor: pointer !important;
	width: 60px !important;
	height: 60px !important;
	transition: transform 0.15s ease !important;
	display: block !important;
}

.lccb-vm-placeholder:hover .lccb-vm-play-btn,
.lccb-vm-play-btn:focus {
	transform: translate(-50%, -65%) scale(1.1) !important;
	outline: none !important;
}

.lccb-vm-play-btn:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 4px !important;
	border-radius: 50% !important;
}

.lccb-vm-play-btn svg {
	width: 60px !important;
	height: 60px !important;
	display: block !important;
}

.lccb-vm-play-bg {
	fill: rgba(0, 0, 0, 0.65) !important;
	transition: fill 0.2s ease !important;
}

.lccb-vm-play-arrow {
	fill: #fff !important;
}

.lccb-vm-placeholder:hover .lccb-vm-play-bg {
	fill: #1ab7ea !important;
}

.lccb-vm-warn {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	background: rgba(0, 0, 0, 0.72) !important;
	color: #fff !important;
	font-size: 12px !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	line-height: 1.45 !important;
	padding: 8px 14px !important;
	margin: 0 !important;
	text-align: center !important;
	display: block !important;
}

@media (prefers-reduced-motion: reduce) {
	.lccb-vm-play-btn,
	.lccb-vm-play-bg {
		transition: none !important;
	}
}
