/**
 * LimaWeb Cookie Consent — banner styles.
 * Colours come from CSS variables set inline (see Frontend::dynamic_css).
 */

:root {
	--lwcc-bg: #ffffff;
	--lwcc-text: #1f2933;
	--lwcc-primary: #2563eb;
	--lwcc-accept-text: #ffffff;
	--lwcc-radius: 12px;
}

.lwcc-hidden { display: none !important; }

/* Root is fixed so it never shifts page layout (no CLS). */
.lwcc-root {
	position: fixed;
	z-index: 999999;
	inset: 0;
	pointer-events: none;
}
.lwcc-root[hidden] { display: none; }

.lwcc-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	pointer-events: auto;
}

.lwcc-banner {
	position: fixed;
	pointer-events: auto;
	background: var(--lwcc-bg);
	color: var(--lwcc-text);
	border-radius: var(--lwcc-radius);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
	padding: 22px 24px;
	max-width: 440px;
	width: calc(100% - 40px);
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.55;
	max-height: 85vh;
	overflow-y: auto;
}

/* Positions for box layout */
.lwcc-pos-bottom-left .lwcc-banner { bottom: 20px; left: 20px; }
.lwcc-pos-bottom-right .lwcc-banner { bottom: 20px; right: 20px; }

/* Bar layout spans the width */
.lwcc-layout-bar .lwcc-banner {
	max-width: none;
	width: 100%;
	left: 0;
	border-radius: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}
.lwcc-layout-bar.lwcc-pos-top .lwcc-banner { top: 0; }
.lwcc-layout-bar.lwcc-pos-bottom .lwcc-banner { bottom: 0; }
.lwcc-layout-bar .lwcc-banner__main { flex: 1 1 320px; }
.lwcc-layout-bar .lwcc-actions { flex: 0 0 auto; }

/* Modal layout centres */
.lwcc-layout-modal .lwcc-banner {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.lwcc-banner__title {
	margin: 0 0 8px;
	font-size: 17px;
	line-height: 1.3;
	color: var(--lwcc-text);
}
.lwcc-banner__message p { margin: 0 0 8px; }
.lwcc-policy-link { color: var(--lwcc-primary); }

/* --- Preferences --- */
.lwcc-prefs { margin: 14px 0 4px; }
.lwcc-prefs__list { border: 0; margin: 0; padding: 0; }
.lwcc-cat {
	padding: 10px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.lwcc-cat__head { display: flex; align-items: center; }
.lwcc-cat__desc { margin: 6px 0 0; opacity: 0.85; font-size: 13px; }
.lwcc-cat__label em { font-style: normal; opacity: 0.65; font-size: 12px; }

/* Toggle switch */
.lwcc-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.lwcc-switch__input,
.lwcc-cat__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lwcc-switch__slider {
	position: relative;
	width: 40px;
	height: 22px;
	background: #c4cdd5;
	border-radius: 999px;
	transition: background 0.2s;
	flex: 0 0 auto;
}
.lwcc-switch__slider::after {
	content: "";
	position: absolute;
	top: 2px; left: 2px;
	width: 18px; height: 18px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s;
}
.lwcc-cat__input:checked + .lwcc-switch__slider { background: var(--lwcc-primary); }
.lwcc-cat__input:checked + .lwcc-switch__slider::after { transform: translateX(18px); }
.lwcc-cat__input:disabled + .lwcc-switch__slider { opacity: 0.6; }
.lwcc-cat__input:focus-visible + .lwcc-switch__slider {
	outline: 2px solid var(--lwcc-primary);
	outline-offset: 2px;
}

/* Per-category cookie list inside the preferences panel */
.lwcc-cat__cookies { margin-top: 8px; font-size: 13px; }
.lwcc-cat__cookies summary {
	cursor: pointer;
	color: var(--lwcc-primary);
	font-weight: 600;
	list-style: revert;
}
.lwcc-cat__nocookies { margin: 8px 0 0; opacity: 0.7; }
.lwcc-cookietable {
	width: 100%;
	border-collapse: collapse;
	margin: 8px 0 2px;
	font-size: 12px;
}
.lwcc-cookietable th,
.lwcc-cookietable td {
	text-align: left;
	padding: 6px 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	vertical-align: top;
}
.lwcc-cookietable th { font-weight: 600; background: rgba(0, 0, 0, 0.03); }
.lwcc-cookietable code { font-size: 11px; word-break: break-all; }

/* --- Actions: accept + reject MUST look equal (EDPB) --- */
.lwcc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}
.lwcc-btn {
	flex: 1 1 auto;
	min-width: 120px;
	padding: 11px 16px;
	font-size: 14px;
	font-weight: 600;
	border-radius: calc(var(--lwcc-radius) - 4px);
	cursor: pointer;
	border: 2px solid var(--lwcc-primary);
	background: transparent;
	color: var(--lwcc-primary);
	transition: opacity 0.15s;
}
.lwcc-btn:hover { opacity: 0.85; }
.lwcc-btn:focus-visible { outline: 2px solid var(--lwcc-text); outline-offset: 2px; }

/* Accept and Reject share the SAME visual weight (filled), satisfying
   equal-prominence. Preferences is the secondary (outlined) action. */
.lwcc-btn--accept,
.lwcc-btn--reject,
.lwcc-btn--save {
	background: var(--lwcc-primary);
	color: var(--lwcc-accept-text);
}
.lwcc-btn--prefs {
	background: transparent;
	color: var(--lwcc-primary);
}

/* --- Revoke badge --- */
.lwcc-revoke {
	position: fixed;
	bottom: 16px;
	left: 16px;
	z-index: 999998;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: var(--lwcc-primary);
	color: var(--lwcc-accept-text);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.lwcc-revoke[hidden] { display: none; }
.lwcc-revoke__icon { font-size: 16px; line-height: 1; }

/* --- Embed placeholders --- */
.lwcc-embed-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 200px;
	padding: 24px;
	text-align: center;
	background: #f1f3f5;
	border: 1px dashed #adb5bd;
	border-radius: 8px;
	color: #495057;
}
.lwcc-embed-load {
	padding: 10px 18px;
	border: 0;
	border-radius: 6px;
	background: var(--lwcc-primary);
	color: var(--lwcc-accept-text);
	font-weight: 600;
	cursor: pointer;
}

/* Screen-reader helper if theme lacks it */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.lwcc-switch__slider,
	.lwcc-switch__slider::after,
	.lwcc-btn { transition: none; }
}

/* Small screens */
@media (max-width: 480px) {
	.lwcc-banner { width: calc(100% - 24px); left: 12px !important; right: 12px !important; bottom: 12px; }
	.lwcc-actions .lwcc-btn { flex: 1 1 100%; }
}