/*
* Civic Cookie Control - start
*
* The branding set in the Cookie Control config (GTM) is injected with !important
* on "#ccc ..." selectors, so these overrides use "html body #ccc" to win on specificity.
*/

/* panel */
html body #ccc,
html body #ccc button {
	font-family: var(--brand-font), Arial, sans-serif !important;
}

html body #ccc #ccc-content,
html body #ccc #ccc-notify,
html body #ccc .ccc-alert {
	background-color: var(--nikwax-blue) !important;
}

html body #ccc #ccc-content {
	padding: 2rem 1.75rem !important;
}

html body #ccc,
html body #ccc #ccc-content,
html body #ccc #ccc-notify,
html body #ccc h2,
html body #ccc h3,
html body #ccc p,
html body #ccc span,
html body #ccc a {
	color: var(--brand-white) !important;
	fill: var(--brand-white) !important;
}

html body #ccc #ccc-title {
	font-size: 1.5em !important;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 2.5rem 1rem 0;
}

html body #ccc h3 {
	font-size: 1.15em !important;
	font-weight: 700;
}

html body #ccc p {
	line-height: 1.6;
	opacity: 0.9;
}

html body #ccc hr {
	background-color: rgba(var(--brand-white-rgb), 0.2) !important;
	border: 0;
	height: 1px;
	margin: 1.5rem 0;
}

/* links */
html body #ccc #ccc-content a {
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

html body #ccc #ccc-content a:hover,
html body #ccc #ccc-content a:hover svg {
	color: var(--golden-yellow) !important;
	fill: var(--golden-yellow) !important;
}

/* close button */
html body #ccc #ccc-close {
	background-color: transparent !important;
	top: 1.5rem;
	right: 1.25rem;
}

html body #ccc #ccc-close svg {
	fill: var(--brand-white) !important;
	transition: fill 0.2s ease;
}

html body #ccc #ccc-close:hover svg {
	fill: var(--golden-yellow) !important;
}

/* primary cta - matches .hero-block__cta */
html body #ccc .ccc-notify-button.ccc-button-solid {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background-color: var(--nikwax-green) !important;
	border: 2px solid var(--nikwax-green) !important;
	border-radius: 2px;
	color: var(--brand-white) !important;
	font-size: 1rem !important;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.5;
	padding: 14px 28px !important;
	margin: 0.5rem 0 0;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

html body #ccc .ccc-notify-button.ccc-button-solid::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 10px solid var(--golden-yellow);
}

html body #ccc .ccc-notify-button.ccc-button-solid:hover {
	background-color: #005c2f !important;
	border-color: #005c2f !important;
	transform: translateY(-1px);
}

/* the end-of-panel dismiss button renders empty until consent changes */
html body #ccc #ccc-dismiss-button:empty {
	display: none;
}

/* slider toggles - off is a translucent track, on is nikwax green */
html body #ccc .checkbox-toggle {
	background-color: rgba(var(--brand-white-rgb), 0.2) !important;
	border-color: transparent !important;
	transition: background-color 0.3s ease;
}

html body #ccc .checkbox-toggle:has(.checkbox-toggle-input:checked) {
	background-color: var(--nikwax-green) !important;
}

html body #ccc .checkbox-toggle-toggle {
	background-color: var(--brand-white) !important;
}

html body #ccc .checkbox-toggle-on,
html body #ccc .checkbox-toggle-off {
	color: var(--brand-white) !important;
}

/* focus states (replaces the plugin's colour invert) */
html body #ccc[highlight-focus] .ccc-tabbable:focus-visible,
html body #ccc[highlight-focus] .checkbox-toggle-input:focus-visible ~ .checkbox-toggle-toggle,
html body #ccc #ccc-icon:focus-visible {
	filter: none !important;
	-webkit-filter: none !important;
	outline: 2px solid var(--golden-yellow) !important;
	outline-offset: 3px;
}

/* floating re-open icon */
html body #ccc #ccc-icon {
	fill: var(--nikwax-blue) !important;
}

/*
* Civic Cookie Control - end
*/