/**
 * CookieYes consent banner - centred modal restyle.
 *
 * Rebuilds the CookieYes notice as a centred popup with a dimmed backdrop,
 * hairline-separated header/body/footer bands and three equal-weight actions,
 * matching the Cookiebot dialog the site used previously. Colours, type and
 * radii follow the site design (Oswald headings, Inter body, #0061AE accent,
 * 4px cards / 5px controls).
 *
 * All three actions are given identical visual weight on purpose: reject must
 * be as prominent as accept for the banner to stay compliant.
 *
 * @package NordiskRormarkning
 */

:root {
	--nr-cky-surface: #ffffff;
	--nr-cky-line: #eeeeee;
	--nr-cky-ink: #1a1a1a;
	--nr-cky-ink-strong: #252a32;
	--nr-cky-accent: #0061ae;
	--nr-cky-accent-bright: #1565c0;
	--nr-cky-header: 84px;
	--nr-cky-pad: 32px;
}

/* ---------------------------------------------------------------------------
 * 1. Centre the notice and give it its own backdrop.
 * ------------------------------------------------------------------------ */

.cky-consent-container,
.cky-consent-container.cky-box-bottom-left,
.cky-consent-container.cky-box-bottom-right,
.cky-consent-container.cky-box-top-left,
.cky-consent-container.cky-box-top-right {
	/* Centred with auto margins rather than a transform: a transformed element
	 * becomes the containing block for its fixed-position children, which would
	 * shrink the backdrop below to the card itself. */
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: min(880px, calc(100vw - 48px)) !important;
	max-width: none !important;
	height: fit-content !important;
	max-height: calc(100vh - 48px) !important;
	margin: auto !important;
	transform: none !important;
	border-radius: 4px;
}

/* Dimmed backdrop. Sits inside the notice's own stacking context, so it
 * covers the page without needing the plugin's modal overlay markup. */
.cky-consent-container::before {
	position: fixed;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(26, 26, 26, 0.55);
	content: "";
}

/* Opacity only. A transform here would re-establish the containing block and
 * break the full-viewport backdrop. */
@keyframes nr-cky-enter {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.cky-consent-container:not(.cky-hide) {
	animation: nr-cky-enter 0.18s ease-out both;
}

/* ---------------------------------------------------------------------------
 * 2. The card itself.
 * ------------------------------------------------------------------------ */

.cky-consent-container .cky-consent-bar {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 48px);
	padding: 0 !important;
	overflow: hidden;
	border: 1px solid var(--nr-cky-line) !important;
	border-radius: 4px !important;
	background: var(--nr-cky-surface) !important;
	box-shadow:
		0 24px 60px rgba(37, 42, 50, 0.26),
		0 2px 8px rgba(37, 42, 50, 0.1) !important;
}

/* Brand band, mirroring the logo header on the Cookiebot dialog. */
.cky-consent-container .cky-consent-bar::before {
	flex: 0 0 auto;
	height: var(--nr-cky-header);
	border-bottom: 1px solid var(--nr-cky-line);
	background-image: url("/wp-content/uploads/2026/06/NR_Logo_big.svg");
	background-repeat: no-repeat;
	background-position: right var(--nr-cky-pad) center;
	background-size: auto 34px;
	content: "";
}

.cky-consent-container .cky-notice {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	padding: 0;
}

.cky-consent-container .cky-notice-group {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

/* ---------------------------------------------------------------------------
 * 3. Type.
 * ------------------------------------------------------------------------ */

.cky-consent-container .cky-notice .cky-title {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 24px var(--nr-cky-pad) 10px;
	color: var(--nr-cky-ink-strong) !important;
	font-weight: 700;
	font-size: 22px;
	font-family: "Oswald", "Arial Narrow", sans-serif;
	line-height: 1.15;
}

.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-group {
	color: var(--nr-cky-ink) !important;
	font-weight: 400;
	font-size: 15px;
	font-family: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
	line-height: 1.6;
}

.cky-consent-container .cky-notice-des {
	flex: 1 1 auto;
	max-width: none;
	min-height: 0;
	padding: 0 var(--nr-cky-pad) 24px;
	overflow-y: auto;
}

.cky-consent-container .cky-notice-des * {
	font-size: 15px;
}

.cky-consent-container .cky-notice-des a.cky-policy,
.cky-consent-container .cky-notice-des button.cky-policy {
	color: var(--nr-cky-accent);
	font-size: 15px;
}

/* ---------------------------------------------------------------------------
 * 4. Actions. Equal weight, Cookiebot order: reject, customise, accept.
 * ------------------------------------------------------------------------ */

.cky-consent-container .cky-notice-btn-wrapper {
	flex: 0 0 auto;
	flex-wrap: nowrap;
	gap: 12px;
	margin-top: 0 !important;
	padding: 20px var(--nr-cky-pad);
	border-top: 1px solid var(--nr-cky-line);
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn {
	flex: 1 1 0;
	min-height: 52px;
	margin: 0 !important;
	padding: 12px 16px;
	border: 1px solid var(--nr-cky-accent) !important;
	border-radius: 5px;
	background: var(--nr-cky-accent) !important;
	color: var(--nr-cky-surface) !important;
	font-weight: 700;
	font-size: 15px;
	font-family: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
	line-height: 1.25;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn:hover {
	border-color: var(--nr-cky-accent-bright) !important;
	background: var(--nr-cky-accent-bright) !important;
	opacity: 1;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-reject {
	order: 1;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize {
	order: 2;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept {
	order: 3;
}

/* ---------------------------------------------------------------------------
 * 5. Preference centre and shared chrome, kept in the same language.
 * ------------------------------------------------------------------------ */

.cky-overlay {
	background: var(--nr-cky-ink) !important;
	opacity: 0.55 !important;
}

.cky-modal {
	border-radius: 4px;
	box-shadow:
		0 24px 60px rgba(37, 42, 50, 0.26),
		0 2px 8px rgba(37, 42, 50, 0.1);
}

.cky-modal .cky-preference-center {
	border-color: var(--nr-cky-line) !important;
	border-radius: 4px;
	font-family: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
}

.cky-modal .cky-preference-header .cky-preference-title {
	color: var(--nr-cky-ink-strong) !important;
	font-weight: 700;
	font-size: 22px;
	font-family: "Oswald", "Arial Narrow", sans-serif;
	line-height: 1.15;
}

.cky-modal .cky-accordion-header .cky-accordion-btn {
	color: var(--nr-cky-ink-strong) !important;
	font-family: "Oswald", "Arial Narrow", sans-serif;
}

.cky-modal .cky-preference-content-wrapper .cky-show-desc-btn,
.cky-modal button.cky-show-desc-btn:not(:hover):not(:active) {
	color: var(--nr-cky-accent);
}

.cky-modal .cky-switch input[type="checkbox"]:checked {
	background: var(--nr-cky-accent);
}

.cky-modal .cky-audit-table {
	border-radius: 4px;
}

.cky-modal .cky-prefrence-btn-wrapper {
	gap: 12px;
	border-top-color: var(--nr-cky-line) !important;
}

.cky-modal .cky-prefrence-btn-wrapper .cky-btn {
	min-height: 52px;
	margin: 0 !important;
	border: 1px solid var(--nr-cky-accent) !important;
	border-radius: 5px;
	background: var(--nr-cky-accent) !important;
	color: var(--nr-cky-surface) !important;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.25;
}

.cky-modal .cky-prefrence-btn-wrapper .cky-btn:hover {
	border-color: var(--nr-cky-accent-bright) !important;
	background: var(--nr-cky-accent-bright) !important;
	opacity: 1;
}

.cky-btn-revisit-wrapper {
	background: var(--nr-cky-accent) !important;
}

/* Focus states follow the site accent rather than the plugin blue. */
.cky-consent-container .cky-btn:focus-visible,
.cky-modal .cky-btn:focus-visible,
.cky-consent-container .cky-notice-des a.cky-policy:focus-visible,
.cky-consent-container .cky-notice-des button.cky-policy:focus-visible,
.cky-modal .cky-accordion-header .cky-accordion-btn:focus-visible,
.cky-modal .cky-preference-header .cky-btn-close:focus-visible,
.cky-modal .cky-switch input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--nr-cky-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 6. Small screens. Full-bleed card, stacked actions, order preserved.
 * ------------------------------------------------------------------------ */

@media (max-width: 700px) {
	:root {
		--nr-cky-header: 64px;
		--nr-cky-pad: 20px;
	}

	.cky-consent-container,
	.cky-consent-container.cky-box-bottom-left,
	.cky-consent-container.cky-box-bottom-right,
	.cky-consent-container.cky-box-top-left,
	.cky-consent-container.cky-box-top-right {
		width: calc(100vw - 24px) !important;
		max-height: calc(100vh - 24px) !important;
	}

	.cky-consent-container .cky-consent-bar {
		max-height: calc(100vh - 24px);
	}

	.cky-consent-container .cky-consent-bar::before {
		background-size: auto 26px;
	}

	.cky-consent-container .cky-notice .cky-title {
		padding-top: 20px;
		font-size: 19px;
	}

	.cky-consent-container .cky-notice-des {
		max-width: none;
		max-height: none;
		padding-bottom: 20px;
		overflow-y: auto;
	}

	.cky-consent-container .cky-notice-btn-wrapper {
		flex-direction: column;
		gap: 10px;
		padding: 16px var(--nr-cky-pad);
	}

	.cky-consent-container .cky-notice-btn-wrapper .cky-btn,
	.cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept {
		width: 100%;
		margin: 0 !important;
	}
}

@media (max-width: 352px) {
	.cky-consent-container .cky-notice-des,
	.cky-consent-container .cky-notice-des *,
	.cky-consent-container .cky-notice-btn-wrapper .cky-btn {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cky-consent-container:not(.cky-hide) {
		animation: none;
	}

	.cky-consent-container .cky-notice-btn-wrapper .cky-btn,
	.cky-modal .cky-prefrence-btn-wrapper .cky-btn {
		transition: none;
	}
}