/* =========================================================================
 * Cookie consent — banner + preferences dialog
 * Brand: #e96300 (orange) · text #222 · greys. Accessible, responsive, and
 * built to avoid layout shift (everything is position:fixed and overlays the
 * page, so it never moves content / hurts CLS).
 * ========================================================================= */

.fl-consent *,
.fl-consent *::before,
.fl-consent *::after { box-sizing: border-box; }

.fl-consent[hidden] { display: none; }

/* ---- Banner ------------------------------------------------------------- */
.fl-consent__banner {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 99999;
	max-width: 1180px;
	margin: 0 auto;
	background: #ffffff;
	border: 1px solid #ececec;
	border-top: 4px solid #e96300;
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
	padding: 22px 26px;
	color: #444;
	font-size: 14.5px;
	line-height: 1.7;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .35s ease, transform .35s ease;
}
.fl-consent.is-visible .fl-consent__banner { opacity: 1; transform: translateY(0); }

.fl-consent__banner-inner {
	display: flex;
	align-items: center;
	gap: 26px;
}
.fl-consent__text { flex: 1 1 auto; min-width: 0; }
.fl-consent__title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: bold;
	color: #222;
	letter-spacing: .2px;
}
.fl-consent__desc { margin: 0; color: #666; }
.fl-consent__desc a { color: #e96300; text-decoration: underline; }
.fl-consent__desc a:hover { color: #222; }

.fl-consent__actions {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* ---- Buttons (Accept / Reject given equal prominence — no dark patterns) - */
.fl-consent__btn {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
	letter-spacing: .2px;
	padding: 13px 22px;
	border-radius: 6px;
	border: 2px solid #e96300;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
	white-space: nowrap;
}
.fl-consent__btn--primary { background: #e96300; color: #ffffff; }
.fl-consent__btn--primary:hover { background: #cf5800; border-color: #cf5800; }
.fl-consent__btn--secondary { background: #ffffff; color: #e96300; }
.fl-consent__btn--secondary:hover { background: #fbe9dc; }

/* Visible, high-contrast focus state for keyboard users */
.fl-consent__btn:focus-visible,
.fl-consent__close:focus-visible,
.fl-consent__switch-input:focus-visible + .fl-consent__switch-track {
	outline: 3px solid #1a4f8b;
	outline-offset: 2px;
}
/* Fallback for browsers without :focus-visible */
.fl-consent__btn:focus,
.fl-consent__close:focus { outline: 3px solid #1a4f8b; outline-offset: 2px; }
.fl-consent__btn:focus:not(:focus-visible) { outline: none; }

/* ---- Overlay + modal ---------------------------------------------------- */
.fl-consent__overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(20, 20, 20, .55);
	opacity: 0;
	transition: opacity .3s ease;
}
.fl-consent.is-modal-open .fl-consent__overlay { opacity: 1; }
.fl-consent__overlay[hidden] { display: none; }

.fl-consent__modal {
	position: fixed;
	z-index: 100001;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -48%);
	width: calc(100% - 32px);
	max-width: 620px;
	max-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 18px 60px rgba(0, 0, 0, .3);
	opacity: 0;
	transition: opacity .3s ease, transform .3s ease;
}
.fl-consent.is-modal-open .fl-consent__modal { opacity: 1; transform: translate(-50%, -50%); }
.fl-consent__modal[hidden] { display: none; }

.fl-consent__modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 26px;
	border-bottom: 1px solid #eee;
}
.fl-consent__modal-title { margin: 0; font-size: 19px; font-weight: bold; color: #222; }
.fl-consent__close {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
	color: #888;
	width: 40px;
	height: 40px;
	border-radius: 6px;
	flex: 0 0 auto;
}
.fl-consent__close:hover { color: #222; background: #f4f4f4; }

.fl-consent__modal-body {
	padding: 22px 26px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.fl-consent__modal-intro { margin: 0 0 20px; color: #666; font-size: 14.5px; line-height: 1.75; }
.fl-consent__modal-intro a { color: #e96300; text-decoration: underline; }

/* ---- Category rows ------------------------------------------------------ */
.fl-consent__cat {
	padding: 18px 0;
	border-top: 1px solid #f0f0f0;
}
.fl-consent__cat:first-of-type { border-top: 0; padding-top: 0; }
.fl-consent__cat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}
.fl-consent__cat-title { margin: 0; font-size: 16px; font-weight: bold; color: #222; }
.fl-consent__cat-desc { margin: 0 0 8px; color: #666; font-size: 14px; line-height: 1.7; }
.fl-consent__cat-cookies { margin: 0; color: #999; font-size: 12.5px; }
.fl-consent__cat-cookies span { font-weight: bold; color: #777; }

.fl-consent__always {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: #2e7d32;
	background: #e7f5e9;
	padding: 5px 12px;
	border-radius: 20px;
}

/* ---- Accessible toggle switch ------------------------------------------- */
.fl-consent__switch {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}
.fl-consent__switch-input {
	position: absolute;
	opacity: 0;
	width: 46px;
	height: 26px;
	margin: 0;
	cursor: pointer;
}
.fl-consent__switch-track {
	display: inline-block;
	width: 46px;
	height: 26px;
	border-radius: 26px;
	background: #c9c9c9;
	transition: background-color .2s ease;
	position: relative;
}
.fl-consent__switch-thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	transition: transform .2s ease;
}
.fl-consent__switch-input:checked + .fl-consent__switch-track { background: #e96300; }
.fl-consent__switch-input:checked + .fl-consent__switch-track .fl-consent__switch-thumb { transform: translateX(20px); }

.fl-consent__modal-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	padding: 18px 26px;
	border-top: 1px solid #eee;
}

/* Screen-reader-only helper (theme may already define this; safe to repeat) */
.fl-consent .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 880px) {
	.fl-consent__banner-inner { flex-direction: column; align-items: stretch; gap: 18px; }
	.fl-consent__actions { justify-content: stretch; }
	.fl-consent__actions .fl-consent__btn { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 520px) {
	.fl-consent__banner { left: 10px; right: 10px; bottom: 10px; padding: 18px 18px 20px; }
	.fl-consent__actions { flex-direction: column; }
	.fl-consent__actions .fl-consent__btn { width: 100%; }
	.fl-consent__modal-foot { justify-content: stretch; }
	.fl-consent__modal-foot .fl-consent__btn { flex: 1 1 auto; }
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.fl-consent__banner,
	.fl-consent__overlay,
	.fl-consent__modal,
	.fl-consent__switch-track,
	.fl-consent__switch-thumb,
	.fl-consent__btn { transition: none !important; }
}

/* ---- Windows High Contrast / forced colours ----------------------------- */
@media (forced-colors: active) {
	.fl-consent__btn { border: 2px solid ButtonText; }
	.fl-consent__switch-track { border: 1px solid ButtonText; }
}
