/* ==========================================================================
   SureCookie Shared Styles - Consolidated CSS for both Frontend and Admin Areas
========================================================================== */

/* Global Font CSS */
@font-face {
	font-family: Figtree;
	font-style: normal;
	font-weight: 100;
	font-display: fallback;
	src: url( "../font/Figtree/Figtree-Light.ttf" ) format( "truetype" );
}

@font-face {
	font-family: Figtree;
	font-style: normal;
	font-weight: 200;
	font-display: fallback;
	src: url( "../font/Figtree/Figtree-Light.ttf" ) format( "truetype" );
}

@font-face {
	font-family: Figtree;
	font-style: normal;
	font-weight: 300;
	font-display: fallback;
	src: url( "../font/Figtree/Figtree-Light.ttf" ) format( "truetype" );
}

@font-face {
	font-family: Figtree;
	font-style: normal;
	font-weight: 400;
	font-display: fallback;
	src: url( "../font/Figtree/Figtree-Regular.ttf" ) format( "truetype" );
}

@font-face {
	font-family: Figtree;
	font-style: normal;
	font-weight: 500;
	font-display: fallback;
	src: url( "../font/Figtree/Figtree-Medium.ttf" ) format( "truetype" );
}

@font-face {
	font-family: Figtree;
	font-style: normal;
	font-weight: 600;
	font-display: fallback;
	src: url( "../font/Figtree/Figtree-SemiBold.ttf" ) format( "truetype" );
}

@font-face {
	font-family: Figtree;
	font-style: normal;
	font-weight: 700;
	font-display: fallback;
	src: url( "../font/Figtree/Figtree-Bold.ttf" ) format( "truetype" );
}

@font-face {
	font-family: Figtree;
	font-style: normal;
	font-weight: 800;
	font-display: fallback;
	src: url( "../font/Figtree/Figtree-ExtraBold.ttf" ) format( "truetype" );
}

@font-face {
	font-family: Figtree;
	font-style: normal;
	font-weight: 900;
	font-display: fallback;
	src: url( "../font/Figtree/Figtree-Black.ttf" ) format( "truetype" );
}

.surecookie-styles,
.surecookie-styles *,
#surecookie-admin-root,
#surecookie-admin-root *,
#surecookie-public-root,
#surecookie-public-root * {
	font-family: Figtree, sans-serif !important;
	box-sizing: border-box;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
}

/* Global Focus Styling for Accessibility */
#surecookie-public-root .surecookie-preferences-modal button.surecookie-category-trigger:focus-visible,
#surecookie-public-root .surecookie-preferences-modal button.surecookie-cookie-table-toggle:focus-visible,
#surecookie-public-root .surecookie-preferences-modal .surecookie-btn-outline:focus-visible,
#surecookie-public-root .surecookie-preferences-modal .surecookie-btn-primary:focus-visible,
#surecookie-public-root .surecookie-preferences-modal .surecookie-modal-close-btn:focus-visible,
#surecookie-public-root .surecookie-preferences-modal .surecookie-toggle-btn:focus-visible,
#surecookie-public-root button:focus-visible,
#surecookie-public-root a:focus-visible,
#surecookie-public-root input:focus-visible {
	outline: 2px solid var( --surecookie-banner-primary-color, #2563eb ) !important;
	box-shadow: none !important;
}
.surecookie-styles button:focus-visible,
#surecookie-admin-root button:focus-visible,
.surecookie-styles a:focus-visible,
#surecookie-admin-root a:focus-visible,
.surecookie-styles input:focus-visible,
#surecookie-admin-root input:focus-visible {
	outline: 2px solid #377a00 !important;
	box-shadow: none !important;
}
.surecookie-styles .flex input:focus-visible,
#surecookie-admin-root .flex input:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}
.surecookie-styles a:focus-visible {
	color: #377a00;
}
.surecookie-styles button:focus,
#surecookie-admin-root button:focus,
#surecookie-public-root button:focus,
.surecookie-styles button:focus:not( :focus-visible ),
#surecookie-admin-root button:focus:not( :focus-visible ),
#surecookie-public-root button:focus:not( :focus-visible ) {
	outline: none;
}

/* Keyframe Animations */
@keyframes surecookie-slide-up-preview {
	from {
		transform: translateY( 100px );
		opacity: 0;
	}
	to {
		transform: translateY( 0 );
		opacity: 1;
	}
}

@keyframes surecookie-slide-up {
	from {
		transform: translateY( 20px );
		opacity: 0;
	}
	to {
		transform: translateY( 0 );
		opacity: 1;
	}
}

/* Keyframe Animations */
@keyframes surecookieFadeIn {
	from {
		opacity: 0;
		backdrop-filter: blur( 0 );
	}
	to {
		opacity: 1;
		backdrop-filter: blur( 2px );
	}
}

@keyframes surecookieSlideIn {
	from {
		transform: translateY( 30px ) scale( 0.95 );
		opacity: 0;
	}
	to {
		transform: translateY( 0 ) scale( 1 );
		opacity: 1;
	}
}

/* Banner Animation Classes */
.surecookie-banner-animation-fade,
.surecookie-banner-animation-slide {
	will-change: opacity, transform;
}

.surecookie-banner-animation-fade {
	animation: surecookieBannerFadeIn 0.5s ease-out;
}

.surecookie-banner-animation-slide {
	animation: surecookieBannerSlideIn 0.5s ease-out;
}

@keyframes surecookieBannerFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes surecookieBannerSlideIn {
	from {
		transform: translateY( 20px );
		opacity: 0;
	}
	to {
		transform: translateY( 0 );
		opacity: 1;
	}
}

/* ==========================================================================
   Cookie Banner Styles
========================================================================== */
#surecookie-public-root {
	all: initial;
	display: block;
	position: relative;
	pointer-events: none;
	/* Z-index layering — consent UI must sit above all third-party widgets.
	   2147483647 = max signed 32-bit int, industry standard for consent tools.
	   Modal must be above banner so it overlays correctly regardless of DOM order. */
	--surecookie-z-banner: 2147483646;
	--surecookie-z-modal: 2147483647;
}

/* Banner Position Styles */
#surecookie-public-root .surecookie-banner-position-top,
#surecookie-public-root .surecookie-banner-position-bottom {
	position: fixed;
	left: 0;
	right: 0;
	margin: 0;
	pointer-events: auto;
	z-index: var( --surecookie-z-banner );
}
#surecookie-public-root .surecookie-banner-position-top {
	top: 0;
}
#surecookie-public-root .surecookie-banner-position-bottom {
	bottom: 0;
}

#surecookie-public-root .surecookie-banner-position-box-base {
	position: fixed;
	max-width: 90vw;
	pointer-events: auto;
	z-index: var( --surecookie-z-banner );
	outline-color: var( --surecookie-banner-primary-color, #2563eb );
}
#surecookie-public-root .surecookie-banner-position-top-left {
	top: 20px;
	left: 20px;
}
#surecookie-public-root .surecookie-banner-position-top-right {
	top: 20px;
	right: 20px;
}
#surecookie-public-root .surecookie-banner-position-bottom-left {
	bottom: 20px;
	left: 20px;
}
#surecookie-public-root .surecookie-banner-position-bottom-right {
	bottom: 20px;
	right: 20px;
}

#surecookie-public-root .surecookie-banner-position-bottom-center,
#surecookie-public-root .surecookie-banner-position-middle,
#surecookie-public-root .surecookie-banner-position-popup {
	position: fixed;
	max-width: 90vw;
	pointer-events: auto;
	z-index: var( --surecookie-z-banner );
}
/* Centering uses margin:auto instead of transform so slide animations
   (which set transform) don't override the centering and cause a jerk. */
#surecookie-public-root .surecookie-banner-position-bottom-center {
	bottom: 20px;
	left: 0;
	right: 0;
	margin-inline: auto;
	width: fit-content;
}
#surecookie-public-root .surecookie-banner-position-middle {
	inset: 0;
	margin: auto;
	width: fit-content;
	height: fit-content;
}
#surecookie-public-root .surecookie-banner-position-popup {
	inset: 0;
	margin: auto;
	width: fit-content;
	height: fit-content;
}

/* Banner Container Styles */
.surecookie-banner-container {
	box-shadow: 0 0 50px -12px rgba( 0, 0, 0, 0.4 );
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
	display: block;
	visibility: visible;
	opacity: 1;
}
.surecookie-banner-container-banner {
	padding: 24px;
	border-radius: 0;
}
.surecookie-banner-container-box-with-logo {
	padding: 20px 16px;
	border-radius: 12px;
}
.surecookie-banner-container-box {
	padding: 16px;
	border-radius: 12px;
}

/* Banner Inner Container */
.surecookie-banner-inner {
	display: flex;
	flex-direction: column;
}
.surecookie-banner-inner-banner {
	margin: 0 auto;
}
.surecookie-banner-inner-box {
	margin: 0;
}

/* Banner Logo */
.surecookie-banner-logo-wrapper {
	width: 100%;
	display: block;
	flex-shrink: 0;
}
.surecookie-banner-logo {
	height: 24px;
	width: auto;
	margin-bottom: 20px;
	display: block;
	max-width: 100%;
}

/* Banner Content */
.surecookie-banner-content {
	display: flex;
	width: 100%;
	justify-content: space-between;
}
.surecookie-banner-content-banner {
	flex-direction: row;
	align-items: center;
	gap: 16px;
}
.surecookie-banner-content-box {
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

/* Banner Text */
.surecookie-banner-text-wrapper {
	flex: 1;
}

/* Override base reset for banner headings */
.surecookie-banner-heading {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 6px 0;
	line-height: 1.5;
}
.surecookie-banner-heading-white {
	color: #fff;
}
.surecookie-banner-description {
	font-size: 14px;
	margin: 0;
	line-height: 1.6;
	color: var( --surecookie-banner-text-color );
}

/* Banner Buttons */
.surecookie-banner-buttons {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
.surecookie-banner-buttons-banner {
	width: auto;
}
.surecookie-banner-buttons-box {
	width: 100%;
}

/* Button Base Styles */
#surecookie-public-root .surecookie-btn-base {
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 500;
	font-size: 14px;
	border: none;
	min-width: fit-content;
	white-space: nowrap;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	background-image: none;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.5;
}

/* Accessible focus indicator for banner buttons */
#surecookie-public-root .surecookie-btn-base:focus-visible {
	outline: 2px solid var( --surecookie-banner-text-color, #1a1a1a );
	outline-offset: 2px;
}

#surecookie-public-root .surecookie-btn-transparent {
	background-color: transparent;
}
#surecookie-public-root .surecookie-btn-with-border {
	border: 1px solid;
}
.surecookie-btn-font-semibold {
	font-weight: 600;
}

/* Button background colors */
#surecookie-public-root .surecookie-accept-btn,
#surecookie-public-root .surecookie-accept-all-btn {
	background-color: var( --surecookie-banner-primary-color, #2563eb );
	color: #fff;
}

/* Decline button uses the secondary palette role. Falls back to primary so
   existing palettes that did not define a separate decline color keep
   their previous appearance. */
#surecookie-public-root .surecookie-decline-btn {
	background-color: var( --surecookie-banner-secondary-color, var( --surecookie-banner-primary-color, #2563eb ) );
	color: #fff;
}

/* Button hover styles — accept/accept-all darken via primary-hover. */
#surecookie-public-root .surecookie-accept-btn:hover,
#surecookie-public-root .surecookie-accept-all-btn:hover,
#surecookie-public-root .surecookie-btn-primary:hover {
	background-color: var( --surecookie-banner-primary-hover-color, #1d4ed8 );
	border-color: var( --surecookie-banner-primary-hover-color, #1d4ed8 );
}

/* Decline hover: subtle darken via filter so we don't need a separate
   secondary-hover variable. */
#surecookie-public-root .surecookie-decline-btn:hover {
	filter: brightness( 0.92 );
}

#surecookie-public-root .surecookie-preferences-btn {
	background-color: transparent;
}
#surecookie-public-root .surecookie-preferences-btn:hover {
	opacity: 0.8;
}

/* Preferences button always carries a primary-colored border so the button
   is discoverable on both light and dark banners. Both the public root and
   the preview root are listed because the rule needs to fire in both. */
#surecookie-public-root .surecookie-preferences-btn,
.surecookie-preview-root-container .surecookie-preferences-btn {
	border: 1px solid var( --surecookie-banner-primary-color, #2563eb );
}

/* Public Banner Specific Styles */
.surecookie-public-banner {
	position: fixed;
	display: block;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	box-sizing: border-box;
	z-index: var( --surecookie-z-banner );
}
.surecookie-public-banner[data-banner="true"] {
	box-sizing: border-box;
}
#surecookie-public-root .surecookie-public-banner-wrapper {
	position: absolute;
	width: 0;
	height: 0;
	overflow: visible;
	pointer-events: auto;
}

/* Branding */
.surecookie-branding {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var( --surecookie-banner-text-color, #374151 );
	font-size: 12px;
	font-weight: 400;
	margin-left: auto;
	opacity: 0.8;
}
.surecookie-branding span:last-child {
	font-weight: 600;
}

/* Branding in banner notice type needs top margin */
.surecookie-banner-content-banner .surecookie-branding-mobile {
	margin-top: 10px;
}

/* ==========================================================================
   Preferences Modal Styles
========================================================================== */
#surecookie-public-root .surecookie-modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba( 0, 0, 0, 0.6 );
	z-index: var( --surecookie-z-modal );
	overflow-x: hidden;
	overflow-y: auto;
	animation: surecookieFadeIn 0.2s ease-out;
	pointer-events: auto;
}
#surecookie-public-root .surecookie-modal-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	padding: 16px 5px;
}
.surecookie-preferences-modal {
	width: 90vw;
	max-width: 640px;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 25px 50px -12px #00000040;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	animation: surecookieSlideIn 0.3s ease-out;
	position: relative;
	outline-color: var( --surecookie-banner-primary-color );
}
.surecookie-preferences-modal .surecookie-modal-header {
	padding: 24px 24px 20px 24px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}
.surecookie-preferences-modal .surecookie-modal-header-text {
	flex: 1;
	min-width: 0;
}
.surecookie-preferences-modal .surecookie-modal-title {
	margin: 0 0 8px 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var( --surecookie-banner-text-color );
}
.surecookie-preferences-modal .surecookie-modal-description {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	opacity: 0.85;
	color: var( --surecookie-banner-text-color );
}
.surecookie-preferences-modal .surecookie-modal-close-btn {
	flex-shrink: 0;
	align-self: flex-start;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	margin: 0;
	margin-top: -4px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.6;
	transition: opacity 0.2s;
	color: var( --surecookie-banner-text-color );
}
.surecookie-preferences-modal .surecookie-modal-close-btn:hover {
	opacity: 1;
}
.surecookie-preferences-modal .surecookie-categories-wrapper {
	position: relative;
	margin: 0 24px;
	overflow: visible;
}
.surecookie-preferences-modal .surecookie-categories-scroll {
	-ms-overflow-style: none;
	scrollbar-width: none;
	overflow-y: auto;
	max-height: 280px;
	padding: 0 8px;
	margin: 0 -8px;
}
.surecookie-preferences-modal .surecookie-categories-scroll::-webkit-scrollbar {
	display: none;
}
.surecookie-preferences-modal .surecookie-categories-list {
	padding: 0;
	display: flex;
	flex-direction: column;
}
.surecookie-preferences-modal .surecookie-category-item {
	padding: 16px 0;
	border-bottom: 1px solid #37415126;
}
.surecookie-preferences-modal .surecookie-category-item:last-child {
	border-bottom: none;
}
.surecookie-preferences-modal .surecookie-category-header,
.surecookie-preferences-modal .surecookie-category-trigger,
.surecookie-preferences-modal .surecookie-expand-icon {
	display: flex;
	align-items: center;
}
.surecookie-preferences-modal .surecookie-category-header {
	justify-content: space-between;
	gap: 12px;
}
.surecookie-preferences-modal .surecookie-category-trigger {
	flex: 1;
	cursor: pointer;
	gap: 12px;
	background: transparent;
	border: none;
	padding: 4px;
	margin: -4px;
	border-radius: 4px;
	text-align: inherit;
}
.surecookie-preferences-modal .surecookie-expand-icon {
	justify-content: center;
	transition: transform 0.2s;
	opacity: 0.5;
	color: var( --surecookie-banner-text-color );
	width: 20px;
}
.surecookie-preferences-modal .surecookie-expand-icon.expanded {
	transform: rotate( 90deg );
}
.surecookie-preferences-modal .surecookie-category-name {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var( --surecookie-banner-text-color );
}
.surecookie-preferences-modal .surecookie-category-controls {
	display: flex;
	align-items: center;
	gap: 12px;
}
.surecookie-preferences-modal .surecookie-always-active {
	font-size: 12px;
	color: var( --surecookie-banner-text-color, #6b7280 );
	opacity: 0.65;
	font-weight: 500;
}
.surecookie-preferences-modal .surecookie-toggle-btn {
	width: 40px;
	height: 20px;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	position: relative;
	transition: background-color 0.3s ease;
	flex-shrink: 0;
	padding: 0;
}
.surecookie-preferences-modal .surecookie-toggle-btn:disabled {
	cursor: not-allowed;
}
.surecookie-preferences-modal .surecookie-toggle-knob {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #fff;
	transition: left 0.3s ease;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 );
}
.surecookie-preferences-modal .surecookie-toggle-knob.checked {
	left: 24px;
}
.surecookie-preferences-modal .surecookie-category-details {
	margin-top: 12px;
	padding-left: 32px;
}
.surecookie-preferences-modal .surecookie-category-desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var( --surecookie-banner-text-color );
}
.surecookie-preferences-modal .surecookie-cookie-table-wrapper {
	overflow-x: auto;
	margin-bottom: 10px;
}
.surecookie-preferences-modal .surecookie-cookie-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	margin-bottom: 0;
	text-align: left;
	border: none;
	color: var( --surecookie-banner-text-color );
}
.surecookie-preferences-modal .surecookie-cookie-table td,
.surecookie-preferences-modal .surecookie-cookie-table th {
	padding: 8px 4px;
	border: none;
	background: none;
}
#surecookie-public-root .surecookie-cookie-table th,
.surecookie-modal-branding-content span:last-child {
	font-weight: 600;
}
.surecookie-preferences-modal .surecookie-cookie-table tr {
	border: none;
	border-bottom: 1px solid rgba( 156, 163, 175, 0.15 );
}
.surecookie-preferences-modal .surecookie-modal-footer {
	padding: 20px 24px;
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: flex-start;
}
.surecookie-preferences-modal .surecookie-footer-actions {
	display: flex;
	gap: 12px;
	flex: 1;
}
/* Outline buttons share base sizing/typography. Border color comes from the
   relevant palette role; the label uses the banner's text color so it stays
   readable on any palette and doesn't compete with the brand color. */
.surecookie-preferences-modal .surecookie-btn-outline,
.surecookie-preferences-modal .surecookie-btn-outline-secondary {
	min-width: 82px;
	height: 40px;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
	background-color: transparent;
	cursor: pointer;
	white-space: nowrap;
	color: var( --surecookie-banner-text-color, #374151 );
	text-transform: none;
	letter-spacing: 0;
}

.surecookie-preferences-modal .surecookie-btn-outline {
	border: 1px solid var( --surecookie-banner-primary-color );
}

/* Secondary variant — Reject All button in the preferences modal so the
   border mirrors the banner's Decline button. Falls back to primary when
   no separate secondary is defined so pre-existing palettes look unchanged. */
.surecookie-preferences-modal .surecookie-btn-outline-secondary {
	border: 1px solid var( --surecookie-banner-secondary-color, var( --surecookie-banner-primary-color ) );
}
.surecookie-preferences-modal .surecookie-btn-primary {
	min-width: 136px;
	height: 40px;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 500;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s;
	white-space: nowrap;
	background-color: var( --surecookie-banner-primary-color );
	color: #fff;
	text-transform: none;
	letter-spacing: 0;
}
.surecookie-preferences-modal .surecookie-btn-primary:hover {
	background-color: var( --surecookie-banner-primary-hover-color );
}
.surecookie-preferences-modal .surecookie-btn-sm {
	height: 32px;
	padding: 0 12px;
	font-size: 13px;
}
.surecookie-modal-footer-branding {
	/* Border + container text derive from the banner text color so the
	   footer aligns with whatever palette (preset or custom) is active. */
	border-top: 1px solid color-mix( in srgb, var( --surecookie-banner-text-color, #1f2937 ) 15%, transparent );
	display: flex;
	align-items: center;
	gap: 4px;
	justify-content: flex-end;
	padding: 12px 20px;
	color: var( --surecookie-banner-text-color, #9ca3af );
	font-size: 12px;
	font-weight: 400;
}

/* Fallback for browsers without color-mix() support — keeps the original
   binary light/dark border colors so old browsers still render correctly. */
@supports not ( border-top-color: color-mix( in srgb, red 50%, blue ) ) {
	.surecookie-modal-footer-branding {
		border-top: 1px solid #1f2937;
	}
	.surecookie-preferences-modal[style*="backgroundColor: #fff"] .surecookie-modal-footer-branding,
	.surecookie-preferences-modal[style*="backgroundColor: rgb(255"] .surecookie-modal-footer-branding {
		border-top-color: #37415115;
	}
}

/* Branding content wrapper — keeps the three branding elements together on
   the right. Uses the banner text color (muted) so the "Powered by SureCookie"
   line reads as branding, not as a CTA, regardless of the active palette. */
.surecookie-modal-branding-content {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var( --surecookie-banner-text-color, #6b7280 );
	opacity: 0.75;
}
.surecookie-modal-branding-content:hover {
	opacity: 1;
}

/* Cookie policy page link in preferences modal footer */
.surecookie-modal-policy-link {
	color: var( --surecookie-banner-primary-color );
	text-decoration: none;
	font-size: inherit;
}
.surecookie-modal-policy-link:hover {
	text-decoration: underline;
}

/* Skeleton loading placeholders for category cards */
@keyframes surecookie-pulse {
	0%,
	100% {
		opacity: 0.4;
	}
	50% {
		opacity: 0.15;
	}
}
.surecookie-preferences-modal .surecookie-skeleton {
	display: block;
	border-radius: 4px;
	background-color: currentcolor;
	opacity: 0.15;
	animation: surecookie-pulse 1.5s ease-in-out infinite;
}
.surecookie-preferences-modal .surecookie-skeleton-icon {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	flex-shrink: 0;
}
.surecookie-preferences-modal .surecookie-skeleton-title {
	width: 120px;
	height: 16px;
	border-radius: 4px;
}
.surecookie-preferences-modal .surecookie-skeleton-toggle {
	width: 40px;
	height: 20px;
	border-radius: 10px;
	flex-shrink: 0;
}
.surecookie-preferences-modal .surecookie-skeleton-badge {
	width: 80px;
	height: 16px;
	border-radius: 4px;
	flex-shrink: 0;
}

/* Cookie Table Toggle Styles */
#surecookie-public-root .surecookie-preferences-modal .surecookie-cookie-table-toggle {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-top: 12px;
	cursor: pointer;
	user-select: none;
	width: fit-content;
	transition: opacity 0.2s ease;
	background: transparent;
	border: none;
	padding: 4px;
	margin-left: -4px;
	border-radius: 4px;
	box-shadow: none;
}
#surecookie-public-root .surecookie-preferences-modal .surecookie-cookie-table-toggle:hover {
	opacity: 0.7;
}
#surecookie-public-root .surecookie-preferences-modal .surecookie-cookie-table-label {
	font-size: 13px;
	font-weight: 600;
	color: var( --surecookie-banner-text-color );
	opacity: 0.9;
}
#surecookie-public-root .surecookie-preferences-modal .surecookie-table-chevron {
	display: flex;
	align-items: center;
	transition: transform 0.2s ease;
	opacity: 0.6;
	color: var( --surecookie-banner-text-color );
}
#surecookie-public-root .surecookie-preferences-modal .surecookie-table-chevron.expanded {
	transform: rotate( 90deg );
}
#surecookie-public-root .surecookie-preferences-modal .surecookie-cookie-table-wrapper {
	margin-top: 8px;
}

/* Content Blocking Placeholder Styles */
/* Content blocker placeholder — doubled selectors (0,2,0 specificity) to beat theme styles without !important */
.surecookie-placeholder.surecookie-placeholder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	font-family: Figtree, sans-serif;
}
.surecookie-placeholder.surecookie-placeholder .surecookie-placeholder-content {
	position: relative;
	text-align: center;
	padding: 24px;
	z-index: 10;
	background-color: var( --surecookie-banner-background-color, #1f2937 );
	border-radius: 12px;
	box-shadow:
		0 4px 18px 0 rgb( 0 0 0 / 0.1 ),
		0 2px 4px -2px rgb( 0 0 0 / 0.1 );
	-webkit-backdrop-filter: blur( 10px );
	width: 100%;
	height: 100%;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
/* Show placeholder overlay only when consent is pending */
.surecookie-placeholder.surecookie-pending .surecookie-placeholder-content {
	display: flex;
}
.surecookie-placeholder.surecookie-placeholder .surecookie-placeholder-text {
	color: var( --surecookie-banner-text-color, #e5e7eb );
	font-size: 14px;
	margin: 0 0 16px 0;
	line-height: 1.5;
	padding: 0;
	text-transform: none;
	letter-spacing: normal;
}
.surecookie-placeholder.surecookie-placeholder button.surecookie-placeholder-button {
	background-color: var( --surecookie-banner-primary-color, #2563eb );
	color: #fff;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	font-family: Figtree, sans-serif;
	transition: background-color 0.2s ease;
	box-shadow: none;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.5;
	display: inline-block;
	margin: 0;
}
.surecookie-placeholder.surecookie-placeholder button.surecookie-placeholder-button:hover {
	background-color: var( --surecookie-banner-primary-hover-color, #1d4ed8 );
}
.surecookie-placeholder.surecookie-placeholder button.surecookie-placeholder-button:focus {
	outline: 2px solid var( --surecookie-banner-primary-color, #60a5fa );
	outline-offset: 2px;
}
/* Hide placeholder content when iframe is loaded */
.surecookie-placeholder.surecookie-loaded .surecookie-placeholder-content {
	display: none;
}
.surecookie-placeholder.surecookie-loaded iframe {
	display: block;
}

/* Responsive styles */
@media ( max-width: 768px ) {
	/* Small horizontal gutter so the rounded modal isn't flush with the screen edge. */
	#surecookie-public-root .surecookie-modal-wrapper {
		padding: 16px 8px;
	}
	.surecookie-preferences-modal {
		width: 100%;
		max-width: 100%;
		border-radius: 16px;
	}
	.surecookie-preferences-modal .surecookie-modal-footer {
		padding: 10px;
		justify-content: space-between;
	}

	/* Box / popup banners keep their rounded corners on mobile. */
	.surecookie-banner-container-box,
	.surecookie-banner-container-box-with-logo {
		border-radius: 12px;
	}
}

@media ( max-width: 767px ) {
	.surecookie-container-mobile {
		padding: 20px 18px;
	}
	.surecookie-content-mobile {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	.surecookie-buttons-mobile {
		width: 100%;
		justify-content: center;
	}
	.surecookie-button-mobile {
		width: 100%;
		text-align: center;
	}
	.surecookie-branding-mobile {
		width: 100%;
		justify-content: center;
		margin-left: 0;
		margin-top: 8px;
	}
}

/* Stack preference-modal footer buttons vertically on very small screens. */
@media ( max-width: 320px ) {
	.surecookie-preferences-modal .surecookie-modal-footer,
	.surecookie-preferences-modal .surecookie-footer-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.surecookie-preferences-modal .surecookie-btn-outline,
	.surecookie-preferences-modal .surecookie-btn-primary {
		width: 100%;
		min-width: 0;
	}
}

/* ==========================================================================
   Accessibility Styles
========================================================================== */

/* Screen-reader-only utility — visually hidden but announced by screen readers */
.surecookie-sr-only {
	clip-path: inset( 50% );
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Category accordion trigger — button reset so it inherits container layout */
#surecookie-public-root .surecookie-preferences-modal button.surecookie-category-trigger {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	width: 100%;
	box-shadow: none;
}

#surecookie-public-root .surecookie-preferences-modal .surecookie-modal-close-btn:focus-visible {
	opacity: 1;
}

/* ==========================================================================
   Reduced Motion Support
========================================================================== */
@media ( prefers-reduced-motion: reduce ) {
	/* Disable banner entrance animations */
	.surecookie-banner-animation-fade,
	.surecookie-banner-animation-slide {
		animation: none;
		will-change: auto;
	}

	/* Disable modal animations */
	#surecookie-public-root .surecookie-modal-backdrop,
	.surecookie-preferences-modal {
		animation: none;
	}

	/* Disable all UI transitions in preferences modal */
	.surecookie-preferences-modal .surecookie-toggle-knob,
	.surecookie-preferences-modal .surecookie-toggle-btn,
	.surecookie-preferences-modal .surecookie-expand-icon,
	#surecookie-public-root .surecookie-preferences-modal .surecookie-table-chevron,
	.surecookie-preferences-modal .surecookie-modal-close-btn {
		transition: none;
	}

	/* Disable skeleton pulse for users who prefer reduced motion */
	.surecookie-preferences-modal .surecookie-skeleton {
		animation: none;
		opacity: 0.2;
	}
}

/* ==========================================================================
   High Contrast / Forced Colors Support
========================================================================== */
@media ( forced-colors: active ) {
	/* Ensure banner and modal buttons have visible borders */
	#surecookie-public-root .surecookie-btn-base,
	.surecookie-preferences-modal .surecookie-btn-outline,
	.surecookie-preferences-modal .surecookie-btn-primary {
		border: 1px solid buttontext;
	}

	/* Ensure focus indicators use system colors */
	#surecookie-public-root .surecookie-btn-base:focus-visible,
	.surecookie-preferences-modal .surecookie-btn-outline:focus-visible,
	.surecookie-preferences-modal .surecookie-btn-primary:focus-visible,
	.surecookie-preferences-modal .surecookie-modal-close-btn:focus-visible {
		outline: 2px solid highlight;
		outline-offset: 2px;
	}

	/* Ensure toggle switches have visible borders */
	.surecookie-preferences-modal .surecookie-toggle-btn {
		border: 1px solid buttontext;
	}

	/* Ensure modal and banner have visible boundaries */
	.surecookie-preferences-modal,
	#surecookie-public-root .surecookie-banner {
		border: 1px solid canvastext;
	}
}