/* ============================================================
   TigerBlood Cookie Consent
   ============================================================ */

/* ── Shared button styles ──────────────────────────────────── */

:root {
	--color-surface: rgba(255, 255, 255, 0.95);
	--inner-background: #fff;
}

.tb-cookie-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55em 1.25em;
	border: 2px solid transparent;
	border-radius: 4px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
	white-space: nowrap;
}

.tb-cookie-btn--accept {
	background-color: var(--primary-color, #0d6efd);
	color: #fff;
	border-color: var(--primary-color, #0d6efd);

	&:hover {
		background-color: color-mix(in srgb, var(--primary-color, #0d6efd) 85%, #000);
		border-color: color-mix(in srgb, var(--primary-color, #0d6efd) 85%, #000);
		color: #fff;
	}
}

.tb-cookie-btn--reject {
	background-color: transparent;
	color: var(--color-text, #1a1a1a);
	border-color: currentColor;

	&:hover {
		background-color: rgba(0 0 0 / 0.06);
	}
}

.tb-cookie-btn--manage {
	background-color: transparent;
	color: var(--color-text, #1a1a1a);
	border-color: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
	padding-inline: 0.5em;

	&:hover {
		background-color: rgba(0 0 0 / 0.04);
		text-decoration: none;
	}
}

.tb-cookie-btn--save {
	background-color: var(--primary-color, #0d6efd);
	color: #fff;
	border-color: var(--primary-color, #0d6efd);

	&:hover {
		background-color: color-mix(in srgb, var(--primary-color, #0d6efd) 85%, #000);
		border-color: color-mix(in srgb, var(--primary-color, #0d6efd) 85%, #000);
		color: #fff;
	}
}

/* ── Banner base ───────────────────────────────────────────── */

.tb-cookie-banner {
	position: fixed;
	z-index: 9999 !important;
	box-sizing: border-box;
	opacity: 1;
	visibility: visible;
	max-width: 600px !important;
	translate: 0 0;
	transition: opacity var(--dialog-in) var(--dialog-in-ease), translate var(--dialog-in) var(--dialog-in-ease), visibility 0s;
}

/* Hidden state: fade + drop (quicker) instead of display:none, so it can animate.
   Toggled by the .open class from cookie-consent.js. */
.tb-cookie-banner:not(.open) {
	opacity: 0;
	visibility: hidden;
	translate: 0 var(--dialog-rise);
	pointer-events: none;
	transition: opacity var(--dialog-out) var(--dialog-out-ease), translate var(--dialog-out) var(--dialog-out-ease), visibility 0s var(--dialog-out);
}

.tb-cookie-banner__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.tb-cookie-banner__content {
	flex: 1 1 auto;
	font-size: 0.875rem;
	line-height: 1.5;

	& p { margin: 0; }
	& a { color: inherit; text-underline-offset: 3px; }
}

.tb-cookie-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	flex-shrink: 0;
}

/* ── Alert variant (full-width bottom bar) ─────────────────── */

.tb-cookie-banner--alert {
	inset-block-end: 0;
	inset-inline: 0;
	background-color: var(--color-surface, #fff);
	color: var(--color-text, #1a1a1a);
	border-top: 1px solid rgba(0 0 0 / 0.1);
	box-shadow: 0 -4px 24px rgba(0 0 0 / 0.08);
	padding: 1rem 1.5rem;

	& .tb-cookie-banner__inner {
		max-width: var(--content-max-width, 1200px);
		margin-inline: auto;
	}
}

/* ── Corner variant (bottom-right card) ────────────────────── */

.tb-cookie-banner--corner {
	inset-block-end: 1.5rem;
	inset-inline-end: 1.5rem;
	max-width: 380px;
	background-color: var(--color-surface, #fff);
	color: var(--color-text, #1a1a1a);
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0 0 0 / 0.14);
	padding: 1.25rem;

	& .tb-cookie-banner__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	& .tb-cookie-banner__actions {
		width: 100%;
		justify-content: flex-start;
	}
}

/* ── Modal variant (centered overlay) ─────────────────────── */

.tb-cookie-banner--modal {
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0 0 0 / 0.5);
	backdrop-filter: blur(2px);
	padding: 1rem;

	& .tb-cookie-banner__inner {
		flex-direction: column;
		align-items: flex-start;
		max-width: 520px;
		width: 100%;
		background-color: var(--color-surface, #fff);
		color: var(--color-text, #1a1a1a);
		border-radius: 8px;
		padding: 2rem;
		box-shadow: 0 16px 48px rgba(0 0 0 / 0.2);
	}

	& .tb-cookie-banner__actions {
		width: 100%;
	}
}

/* ── Preferences modal ─────────────────────────────────────── */

/* reset.css lives in @layer reset and forces [hidden]{display:none !important}. For
   !important declarations a LAYERED rule beats an UNLAYERED one, so an unlayered override
   here can't win. Placing our display override in the SAME layer (with higher specificity)
   keeps the modal rendered so it can transition. Layer order mirrors style.css. */
@layer base, reset, layout, print;
@layer reset {
	.tb-cookie-prefs[hidden] { display: flex !important; }
}

.tb-cookie-prefs {
	position: fixed;
	inset: 0;
	z-index: 2147483647 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 1;
	visibility: visible;
	transition: opacity var(--dialog-in) var(--dialog-in-ease), visibility 0s;

	&[hidden] {
		/* display handled by the @layer reset rule above (beats reset.css's layered !important) */
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity var(--dialog-out) var(--dialog-out-ease), visibility 0s var(--dialog-out);
	}
}

.tb-cookie-prefs__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0 0 0 / 0.5);
	backdrop-filter: blur(2px);
	cursor: pointer;
}

.tb-cookie-prefs__panel {
	position: relative;
	z-index: 1;
	background-color: var(--color-surface, #fff);
	color: var(--color-text, #1a1a1a);
	border-radius: var(--Corner-Radius-L, 18px);;
	box-shadow: 0 16px 48px rgba(0 0 0 / 0.2);
	padding: 2rem;
	max-width: 560px;
	width: 100%;
	max-height: 90dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	translate: 0 0;
	transition: translate var(--dialog-in) var(--dialog-in-ease);

	@media (max-width: 1024px) {
		& {
			border-radius: var(--Corner-Radius-M, 12px);
		}
	}
}

.tb-cookie-prefs[hidden] .tb-cookie-prefs__panel {
	translate: 0 var(--dialog-rise);
	transition: translate var(--dialog-out) var(--dialog-out-ease);
}

.tb-cookie-prefs__title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

.tb-cookie-prefs__intro {
	margin: 0 0 1.5rem;
	font-size: 0.875rem;
	opacity: 0.75;
}

.tb-cookie-prefs__categories {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid rgba(0 0 0 / 0.1);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 1.5rem;
	background: var(--inner-background, #fff);
}

.tb-cookie-prefs__category {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid rgba(0 0 0 / 0.08);

	&:last-child { border-bottom: none; }
}

.tb-cookie-prefs__category-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.5rem;
}

.tb-cookie-prefs__category-text {
	flex: 1;
}

.tb-cookie-prefs__category-label {
	display: block;
	font-size: 0.9375rem;
	margin-bottom: 0.25rem;
}

.tb-cookie-prefs__always-on {
	font-size: 0.75rem;
	font-weight: 400;
	opacity: 0.6;
	margin-left: 0.25rem;
}

.tb-cookie-prefs__category-desc {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	opacity: 0.7;
}

.tb-cookie-prefs__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: flex-end !important;
}

/* ── Toggle switch ─────────────────────────────────────────── */

.tb-cookie-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	flex-shrink: 0;
	gap: 8px;
}

.tb-cookie-toggle--required {
	cursor: default;
	opacity: 0.55;
}

.tb-cookie-toggle__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.tb-cookie-toggle__track {
	display: block;
	width: 44px;
	height: 26px;
	border-radius: 13px;
	background-color: rgba(0 0 0 / 0.18);
	transition: background-color 200ms ease;
	position: relative;
}

.tb-cookie-toggle__thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(0 0 0 / 0.25);
	transition: transform 200ms ease;
}

.tb-cookie-toggle__input:checked + .tb-cookie-toggle__track {
	background-color: var(--primary-color, #0d6efd);
}

.tb-cookie-toggle__input:checked + .tb-cookie-toggle__track .tb-cookie-toggle__thumb {
	transform: translateX(18px);
}

.tb-cookie-toggle__input:focus-visible + .tb-cookie-toggle__track {
	outline: 2px solid var(--primary-color, #0d6efd);
	outline-offset: 2px;
}

/* ── Reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.tb-cookie-btn,
	.tb-cookie-toggle__track,
	.tb-cookie-toggle__thumb {
		transition: none;
	}
}

/* ── Mobile adjustments ────────────────────────────────────── */

@media (max-width: 600px) {
	.tb-cookie-banner--alert {
		padding: 1rem;

		& .tb-cookie-banner__actions {
			width: 100%;

			& .tb-cookie-btn {
				flex: 1 1 auto;
				text-align: center;
			}
		}
	}

	.tb-cookie-banner--corner {
		inset-inline-end: 0;
		inset-block-end: 0;
		max-width: 100%;
		border-radius: 8px 8px 0 0;
	}

	.tb-cookie-prefs__panel {
		padding: 1.25rem;
	}
}