/* ==========================================================================
   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 .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 button:focus-visible,
#surecookie-public-root a:focus-visible,
#surecookie-public-root input:focus-visible {
	outline: 2px solid var(--surecookie-banner-primary-color, #2563eb);
	box-shadow: none;
}
/* Category trigger + cookie table toggle — use box-shadow so the ring follows border-radius */
#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 {
	outline: none;
	box-shadow: 0 0 0 2px var(--surecookie-banner-primary-color, #2563eb);
}
/* Toggle switch pill — ring must follow the pill shape, not form a box */
#surecookie-public-root .surecookie-preferences-modal .surecookie-toggle-btn:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 4px var(--surecookie-banner-primary-color, #2563eb);
}
.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 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-overlay: 2147483645;
	--surecookie-z-banner: 2147483646;
	--surecookie-z-modal: 2147483647;
}

/* Full-screen dim behind the banner (opt-in). Sits just below the banner so
   the banner stays interactive while the rest of the page is blocked. */
#surecookie-public-root .surecookie-banner-overlay {
	position: fixed;
	inset: 0;
	background-color: var(--surecookie-banner-overlay-color, rgba(0, 0, 0, 0.6));
	z-index: var(--surecookie-z-overlay);
	pointer-events: auto;
	animation: surecookieFadeIn 0.2s ease-out;
}

/* Banner Position Styles */
#surecookie-public-root .surecookie-banner-position-top,
#surecookie-public-root .surecookie-banner-position-bottom {
	position: fixed;
	right: 0;
	left: 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;
	right: 20px;
}
#surecookie-public-root .surecookie-banner-position-top-right {
	top: 20px;
	left: 20px;
}
#surecookie-public-root .surecookie-banner-position-bottom-left {
	bottom: 20px;
	right: 20px;
}
#surecookie-public-root .surecookie-banner-position-bottom-right {
	bottom: 20px;
	left: 20px;
}

#surecookie-public-root .surecookie-banner-position-bottom-center,
#surecookie-public-root .surecookie-banner-position-middle {
	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;
	right: 0;
	left: 0;
	margin-inline: auto;
	width: fit-content;
}
#surecookie-public-root .surecookie-banner-position-middle {
	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);
}
.surecookie-banner-description p,
.surecookie-modal-description p {
	margin-bottom: 0;
}

/*
 * Restore the browser-default heading scale inside the Jodit editor and the
 * banner description (the admin preflight resets h1–h6 to inherit). Plain CSS
 * file: selectors stay flat — native CSS nesting breaks parsing in browsers
 * without CSS Nesting support.
 */
.jodit-wysiwyg h1,
.surecookie-banner-description h1 {
	font-size: 2em;
	font-weight: 700;
}
.jodit-wysiwyg h2,
.surecookie-banner-description h2 {
	font-size: 1.5em;
	font-weight: 700;
}
.jodit-wysiwyg h3,
.surecookie-banner-description h3 {
	font-size: 1.17em;
	font-weight: 700;
}
.jodit-wysiwyg h4,
.surecookie-banner-description h4 {
	font-size: 1em;
	font-weight: 700;
}
.jodit-wysiwyg h5,
.surecookie-banner-description h5 {
	font-size: 0.83em;
	font-weight: 700;
}
.jodit-wysiwyg h6,
.surecookie-banner-description h6 {
	font-size: 0.67em;
	font-weight: 700;
}
.jodit-wysiwyg a,
.surecookie-banner-description a {
	color: var(--surecookie-banner-primary-color, #2563eb);
	text-decoration: none;
}

/* 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;
	border: 1px solid currentcolor;
}
#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);
}

/* On dark banners use the accent colour instead of the white text colour */
#surecookie-public-root .surecookie-banner[data-dark-mode="true"] .surecookie-preferences-btn {
	border-color: 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-right: 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;
	right: 0;
	left: 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-modal-tabs {
	display: flex;
	border-bottom: 1px solid #37415126;
	margin: 0 24px;
	gap: 0;
}
.surecookie-preferences-modal .surecookie-modal-tab {
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--surecookie-banner-text-color);
	opacity: 0.6;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition:
		opacity 0.15s,
		border-color 0.15s;
}
.surecookie-preferences-modal .surecookie-modal-tab:hover {
	opacity: 0.85;
}
.surecookie-preferences-modal .surecookie-modal-tab.active {
	opacity: 1;
	border-bottom-color: var(--surecookie-banner-primary-color, #2563eb);
}
.surecookie-preferences-modal .surecookie-forwarding-panel {
	padding: 16px 24px;
	overflow-y: auto;
	max-height: 280px;
}
.surecookie-preferences-modal .surecookie-forwarding-description {
	margin: 0 0 12px 0;
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.85;
	color: var(--surecookie-banner-text-color);
}
.surecookie-preferences-modal .surecookie-forwarding-note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.7;
	color: var(--surecookie-banner-text-color);
}
.surecookie-preferences-modal .surecookie-forwarding-accordion {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.surecookie-preferences-modal .surecookie-forwarding-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px 0 8px;
	width: 100%;
	text-align: right;
}
.surecookie-preferences-modal .surecookie-forwarding-count {
	font-size: 13px;
	font-weight: 500;
	color: var(--surecookie-banner-text-color);
}
.surecookie-preferences-modal .surecookie-forwarding-chevron {
	display: flex;
	align-items: center;
	color: var(--surecookie-banner-text-color);
	opacity: 0.6;
	transition: transform 0.2s;
	flex-shrink: 0;
}
.surecookie-preferences-modal .surecookie-forwarding-chevron.expanded {
	transform: rotate(-90deg);
}
.surecookie-preferences-modal .surecookie-forwarding-sites {
	list-style: none;
	margin: 10px 0 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid;
	border-color: rgba(55, 65, 81, 0.15);
	border-radius: 8px;
	overflow: hidden;
}
.surecookie-preferences-modal .surecookie-forwarding-site {
	display: flex;
	align-items: center;
	border-bottom: 1px solid rgba(55, 65, 81, 0.1);
}
.surecookie-preferences-modal .surecookie-forwarding-site:last-child {
	border-bottom: none;
}
.surecookie-preferences-modal .surecookie-forwarding-site-link {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 12px;
	font-size: 13px;
	color: var(--surecookie-banner-text-color);
	text-decoration: none;
	opacity: 0.85;
	transition:
		opacity 0.15s ease,
		background-color 0.15s ease;
}
.surecookie-preferences-modal .surecookie-forwarding-site-link:hover {
	opacity: 1;
	background-color: rgba(55, 65, 81, 0.06);
	text-decoration: none;
}
.surecookie-preferences-modal .surecookie-forwarding-site-globe {
	flex-shrink: 0;
	opacity: 0.6;
}
.surecookie-preferences-modal .surecookie-forwarding-site-url {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
	line-height: 1.4;
}
.surecookie-preferences-modal .surecookie-forwarding-site-ext {
	flex-shrink: 0;
	opacity: 0.4;
	margin-right: auto;
}
.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;
	right: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #fff;
	transition: right 0.3s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.surecookie-preferences-modal .surecookie-toggle-knob.checked {
	right: 24px;
}
.surecookie-preferences-modal .surecookie-category-details {
	margin-top: 12px;
	padding-right: 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: right;
	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;
}

/* Modal Reject All shares Accept All's border so the paired action group reads as one. */
.surecookie-preferences-modal .surecookie-btn-outline,
.surecookie-preferences-modal .surecookie-btn-outline-secondary {
	border: 1px solid 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-right: -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: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
	font-family: Figtree, sans-serif;
}
.surecookie-placeholder.surecookie-placeholder .surecookie-placeholder-content {
	position: absolute;
	inset: 0;
	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;
}
/* When there is no Accept & Load button (e.g. quarantined trackers held by the
   Compliance Guard), the text is the last child — drop its bottom margin so the
   overlay content stays vertically centered. */
.surecookie-placeholder.surecookie-placeholder .surecookie-placeholder-text:last-child {
	margin-bottom: 0;
}
.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;
}

/* 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-right: 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: right;
	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-public-root .surecookie-banner-overlay,
	.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;
	}
}
