/**
 * Symbion Consent styles. Scoped under .sc-* to avoid theme collisions.
 * Colours come from CSS vars injected by the plugin (--sc-primary etc.).
 */

.sc-root,
.sc-reopen,
.sc-yt,
.sc-declaration {
	--sc-primary: #234923;
	--sc-accent: #8cbe3f;
	--sc-text: #132a46;
	--sc-bg: #ffffff;
	--sc-muted: #5a6b7b;
	--sc-border: #e3e7eb;
	--sc-radius: 12px;
	--sc-shadow: 0 10px 40px rgba( 19, 42, 70, 0.18 );
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var( --sc-text );
	box-sizing: border-box;
	line-height: 1.5;
}

.sc-root *,
.sc-reopen *,
.sc-yt *,
.sc-declaration * {
	box-sizing: border-box;
}

/* The [hidden] attribute must win over the explicit display values below
   (.sc-modal/.sc-banner use display:flex, which would otherwise override it). */
.sc-root[hidden],
.sc-root [hidden],
#sc-reopen[hidden] {
	display: none !important;
}

/* ---------- Backdrop (only for the modal layer) ---------- */
.sc-backdrop {
	position: fixed;
	inset: 0;
	background: rgba( 19, 42, 70, 0.45 );
	z-index: 2147483000;
	animation: sc-fade 0.2s ease;
}

/* ---------- First layer: compact banner ---------- */
.sc-banner {
	position: fixed;
	z-index: 2147483001;
	left: 50%;
	bottom: 20px;
	transform: translateX( -50% );
	width: min( 720px, calc( 100% - 32px ) );
	background: var( --sc-bg );
	border: 1px solid var( --sc-border );
	border-radius: var( --sc-radius );
	box-shadow: var( --sc-shadow );
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	animation: sc-slide-up 0.28s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.sc-banner__title {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	color: var( --sc-primary );
}

.sc-banner__intro {
	margin: 0;
	font-size: 14px;
	color: var( --sc-text );
}

.sc-links {
	display: inline;
	color: var( --sc-muted );
}

.sc-links a,
.sc-banner__intro a {
	color: var( --sc-primary );
	text-decoration: underline;
}

.sc-banner__actions,
.sc-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}

/* ---------- Buttons ---------- */
.sc-btn {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding: 12px 18px;
	border-radius: 8px;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sc-btn:active { transform: translateY( 1px ); }

.sc-btn--primary {
	background: var( --sc-primary );
	color: #fff;
}
.sc-btn--primary:hover { background: #1b3a1b; }

/* Reject has equal visual weight to accept (legal requirement). */
.sc-btn--secondary {
	background: #fff;
	color: var( --sc-primary );
	border-color: var( --sc-primary );
}
.sc-btn--secondary:hover { background: #f3f6f1; }

.sc-btn--ghost {
	background: transparent;
	color: var( --sc-muted );
	border-color: var( --sc-border );
}
.sc-btn--ghost:hover { color: var( --sc-text ); border-color: var( --sc-muted ); }

.sc-btn:focus-visible,
.sc-switch input:focus-visible + .sc-switch__slider,
.sc-cat__details-toggle:focus-visible {
	outline: 3px solid var( --sc-accent );
	outline-offset: 2px;
}

/* ---------- Second layer: preferences modal ---------- */
.sc-modal {
	position: fixed;
	z-index: 2147483002;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	width: min( 640px, calc( 100% - 32px ) );
	max-height: calc( 100vh - 48px );
	background: var( --sc-bg );
	border-radius: var( --sc-radius );
	box-shadow: var( --sc-shadow );
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: sc-pop 0.22s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.sc-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	border-bottom: 1px solid var( --sc-border );
}
.sc-modal__head h2 {
	margin: 0;
	font-size: 18px;
	color: var( --sc-primary );
}
.sc-modal__close {
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: var( --sc-muted );
	padding: 0 4px;
}
.sc-modal__close:hover { color: var( --sc-text ); }

.sc-modal__body {
	padding: 8px 22px 16px;
	overflow-y: auto;
}
.sc-modal__intro {
	font-size: 14px;
	color: var( --sc-muted );
	margin: 12px 0 18px;
}

.sc-modal__actions {
	padding: 16px 22px;
	border-top: 1px solid var( --sc-border );
	gap: 10px;
}

/* ---------- Category rows ---------- */
.sc-cat {
	padding: 16px 0;
	border-top: 1px solid var( --sc-border );
}
.sc-cat:first-of-type { border-top: none; }

.sc-cat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.sc-cat__name {
	font-weight: 700;
	font-size: 15px;
}
.sc-cat__desc {
	margin: 6px 0 0;
	font-size: 13.5px;
	color: var( --sc-muted );
}
.sc-always {
	font-size: 13px;
	font-weight: 600;
	color: var( --sc-primary );
	white-space: nowrap;
}

/* Toggle switch */
.sc-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}
.sc-switch input {
	position: absolute;
	opacity: 0;
	width: 44px;
	height: 24px;
	margin: 0;
	cursor: pointer;
}
.sc-switch__slider {
	width: 44px;
	height: 24px;
	background: #c9d2cb;
	border-radius: 999px;
	position: relative;
	transition: background-color 0.18s ease;
	flex: 0 0 auto;
}
.sc-switch__slider::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.18s ease;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 );
}
.sc-switch input:checked + .sc-switch__slider { background: var( --sc-primary ); }
.sc-switch input:checked + .sc-switch__slider::after { transform: translateX( 20px ); }

/* Details */
.sc-cat__details-toggle {
	margin-top: 10px;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var( --sc-primary );
	cursor: pointer;
	text-decoration: underline;
}
.sc-cat__details { margin-top: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sc-cat__empty { font-size: 13px; color: var( --sc-muted ); margin: 8px 0 0; }

/* ---------- Cookie tables ---------- */
.sc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
	margin-top: 4px;
	table-layout: fixed; /* respect container width on narrow screens; wrap instead of overflow */
}
.sc-table th,
.sc-table td {
	text-align: left;
	padding: 8px 10px;
	border: 1px solid var( --sc-border );
	vertical-align: top;
	overflow-wrap: anywhere;
	word-break: break-word;
}
/* Give the cookie-name column a bit less room than the purpose column. */
.sc-table th:first-child,
.sc-table td:first-child { width: 28%; }
.sc-table th:nth-child(3),
.sc-table td:nth-child(3) { width: 36%; }
.sc-table th {
	background: #f6f8f6;
	font-weight: 700;
	color: var( --sc-primary );
}
.sc-table code {
	font-size: 11.5px;
	word-break: break-word;
	background: #f3f6f1;
	padding: 1px 4px;
	border-radius: 4px;
}

/* ---------- Reopen floating button ---------- */
.sc-reopen {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 2147482000;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: var( --sc-primary );
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba( 19, 42, 70, 0.28 );
	opacity: 0.65;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.sc-reopen:hover { opacity: 1; transform: scale( 1.06 ); }
.sc-reopen:focus-visible { outline: 3px solid var( --sc-accent ); outline-offset: 2px; opacity: 1; }

.sc-settings-link { cursor: pointer; }

/* ---------- YouTube placeholder ---------- */
.sc-yt {
	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	background: #0f1f12;
	border-radius: 10px;
	overflow: hidden;
}
@supports not ( aspect-ratio: 16 / 9 ) {
	.sc-yt { height: 0; padding-bottom: var( --sc-yt-ratio, 56.25% ); }
}
.sc-yt__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness( 0.55 );
}
.sc-yt__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
	padding: 20px;
	color: #fff;
}
.sc-yt__notice {
	margin: 0;
	font-size: 14px;
	max-width: 420px;
	color: #fff;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.6 );
}
.sc-yt__always {
	background: none;
	border: none;
	color: #fff;
	font: inherit;
	font-size: 12.5px;
	text-decoration: underline;
	cursor: pointer;
	opacity: 0.9;
}
.sc-yt__always:hover { opacity: 1; }
.sc-yt__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Cookie declaration shortcode ---------- */
.sc-declaration__cat {
	margin: 28px 0 4px;
	color: var( --sc-primary );
}
.sc-declaration__desc {
	margin: 0 0 10px;
	color: var( --sc-muted );
	font-size: 14px;
}

/* ---------- Mobile ---------- */
@media ( max-width: 560px ) {
	.sc-banner {
		left: 0;
		right: 0;
		bottom: 0;
		transform: none;
		width: 100%;
		border-radius: var( --sc-radius ) var( --sc-radius ) 0 0;
		border-bottom: none;
	}
	.sc-banner__actions,
	.sc-modal__actions { justify-content: stretch; }
	.sc-banner__actions .sc-btn,
	.sc-modal__actions .sc-btn { flex: 1 1 auto; justify-content: center; }
	.sc-table { font-size: 11.5px; }
	.sc-table th, .sc-table td { padding: 6px 7px; }
}

/* ---------- Motion / contrast ---------- */
@media ( prefers-reduced-motion: reduce ) {
	.sc-banner, .sc-modal, .sc-backdrop, .sc-reopen, .sc-btn, .sc-switch__slider::after { animation: none !important; transition: none !important; }
}

@keyframes sc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-slide-up { from { opacity: 0; transform: translate( -50%, 16px ); } to { opacity: 1; transform: translate( -50%, 0 ); } }
@keyframes sc-pop { from { opacity: 0; transform: translate( -50%, -50% ) scale( 0.96 ); } to { opacity: 1; transform: translate( -50%, -50% ) scale( 1 ); } }