/* wp-content/plugins/notts-osteo-cookies/assets/cookies.css
 *
 * Cookie consent in the practice's colours: slate panel head and primary button, orange accent
 * on the toggles and hovers, pill buttons, and the site's own typeface.
 *
 * NO RAW BRAND COLOUR IN HERE. Every value below reads the same custom property the rest of the
 * site uses, so the banner follows tokens.css instead of drifting from it — this file is in a
 * different plugin, which is exactly how a second, slightly-wrong copy of a palette gets born.
 * Each falls back to the brand value so the banner is still right on a page where the elements
 * plugin has not enqueued its tokens.
 *
 * Bottom-LEFT, which matters on this site: the assistant button sits bottom-right, and two
 * floating circles in the same corner would overlap.
 *
 * Author: Sean Burn
 */

.nosteo-cookies {
	--nosteo-ck-ink: var(--nosteo-ink, #323e48);
	--nosteo-ck-accent: var(--nosteo-accent, #fc7e00);
	--nosteo-ck-text: var(--nosteo-ink, #323e48);
	--nosteo-ck-muted: var(--nosteo-muted, #69737d);
	--nosteo-ck-line: var(--nosteo-hair, rgba(50, 62, 72, 0.16));
	--nosteo-ck-surface: var(--nosteo-grey-light, #f3f4f6);
	--nosteo-ck-switch-off: var(--nosteo-grey, #939aa6);

	/* The minimised disc, as ONE number — its glyph is derived from it below. The flying icon and
	   the open/close animation measure the button at runtime rather than assuming a size, so this
	   is genuinely the only value that needs to change. Overridden for phones from the settings
	   screen. */
	--nosteo-ck-icon: 56px;

	font-family: var(--nosteo-font, inherit);

	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 99999;
	font-size: 16px;
	line-height: 24px;
	color: var(--nosteo-ck-text);
}

/* Both children anchor to the container's bottom-left corner, so the button's
   position never depends on whether the panel is on screen. */
.nosteo-cookies .nosteo-cookies__reopen,
.nosteo-cookies__panel {
	position: absolute;
	left: 0;
	bottom: 0;
}

/* Both states are in the DOM for cache-safety, so [hidden] must genuinely
   hide them. These need the .nosteo-cookies prefix: the display rules below are
   0,2,0 and would otherwise outrank a bare `.class[hidden]` at 0,1,1 —
   leaving the icon on screen while the panel is open. */
.nosteo-cookies[hidden],
.nosteo-cookies .nosteo-cookies__panel[hidden],
.nosteo-cookies .nosteo-cookies__reopen[hidden] {
	display: none;
}

/* --- Minimised icon ------------------------------------------------------ */

.nosteo-cookies .nosteo-cookies__reopen {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--nosteo-ck-icon);
	height: var(--nosteo-ck-icon);
	padding: 0;
	background: var(--nosteo-ck-ink);
	border: 0;
	border-radius: 50%;
	color: var(--nosteo-white, #ffffff);
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(50, 62, 72, 0.22);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.nosteo-cookies .nosteo-cookies__reopen:hover,
.nosteo-cookies .nosteo-cookies__reopen:focus-visible {
	background: var(--nosteo-ck-accent);
	transform: translateY(-2px);
}

/* A proportion of the disc (30/56), so a smaller button keeps the same weight of glyph inside it. */
.nosteo-cookies__reopen svg {
	width: calc(var(--nosteo-ck-icon) * 0.54);
	height: calc(var(--nosteo-ck-icon) * 0.54);
}

/* --- Panel --------------------------------------------------------------- */

/* A column with a fixed head, a scrolling middle and fixed actions — NOT one scrolling box.
   When the whole panel scrolled, a screen too short to hold it pushed the heading off the top and
   the buttons off the bottom, so the one thing a consent dialog must offer was the one thing you
   could not reach.

   The height is svh, not vh. On a phone `100vh` is the height with the browser's address bar
   RETRACTED, which is taller than what you can actually see while the bar is showing — so a panel
   capped at 100vh legitimately overflows the screen. `100svh` is the small viewport: the height
   that is always visible. vh first as the fallback for anything that does not know svh. */
.nosteo-cookies__panel {
	display: flex;
	flex-direction: column;
	width: min(400px, calc(100vw - 40px));
	max-height: calc(100vh - 40px);
	max-height: calc(100svh - 40px);
	overflow: hidden;
	background: var(--nosteo-white, #ffffff);
	border-radius: 10px;
	box-shadow: 0 18px 44px rgba(50, 62, 72, 0.20);
	transform-origin: bottom left;
}

/* min-height:0 is load-bearing: a flex item defaults to min-height:auto, which refuses to shrink
   below its content, so without it this box never scrolls and pushes the actions out instead. */
.nosteo-cookies__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	/* Stops the page behind from taking over the scroll once this reaches its end. */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.nosteo-cookies__head,
.nosteo-cookies__actions {
	flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
	.nosteo-cookies .nosteo-cookies__reopen {
		transition: none;
	}
}

.nosteo-cookies__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 22px;
	background: var(--nosteo-ck-ink);
	border-radius: 10px 10px 0 0;
	color: var(--nosteo-white, #ffffff);
}

.nosteo-cookies__mark svg {
	display: block;
	width: 26px;
	height: 26px;
	color: var(--nosteo-white, #ffffff);
}

/* The icon that flies between the minimised button and the panel header. It
   keeps the button's plum disc, which reads against the white panel on the
   way and then melts into the plum header on arrival — no cross-fade needed. */
.nosteo-cookies__flyer {
	position: fixed;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nosteo-ck-ink);
	border-radius: 50%;
	color: var(--nosteo-white, #ffffff);
	pointer-events: none;
	will-change: transform;
}

/* A percentage of the flyer, NOT var(--nosteo-ck-icon): the flyer is appended to document.body, so
   it sits outside .nosteo-cookies and would never inherit that variable — the calc would be invalid
   and the glyph would fall back to its intrinsic size. The flyer's box is set in JS from the real
   button's measured rect, so a percentage of it tracks the button at any size, which is what keeps
   the glyph from popping as the flight begins. */
.nosteo-cookies__flyer svg {
	display: block;
	width: 54%;
	height: 54%;
}

.nosteo-cookies .nosteo-cookies__title {
	margin: 0;
	font-size: 20px;
	line-height: 26px;
	font-weight: 700;
	color: var(--nosteo-white, #ffffff);
}

.nosteo-cookies .nosteo-cookies__message {
	margin: 0;
	padding: 18px 22px 0;
	font-size: 15px;
	line-height: 23px;
	color: var(--nosteo-ck-text);
}

.nosteo-cookies__links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 10px 0 0;
	padding: 0 22px;
}

.nosteo-cookies .nosteo-cookies__links a {
	font-size: 15px;
	color: var(--nosteo-ck-ink);
	text-decoration: underline;
	text-underline-position: from-font;
}

.nosteo-cookies .nosteo-cookies__links a:hover,
.nosteo-cookies .nosteo-cookies__links a:focus {
	color: var(--nosteo-ck-accent);
}

/* --- Categories ---------------------------------------------------------- */

.nosteo-cookies__categories {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--nosteo-ck-line);
}

.nosteo-cookies__category {
	border-bottom: 1px solid var(--nosteo-ck-line);
}

.nosteo-cookies__toggle {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 22px;
	cursor: pointer;
}

.nosteo-cookies__toggle input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.nosteo-cookies__switch {
	position: relative;
	flex: none;
	width: 40px;
	height: 22px;
	margin-top: 2px;
	background: var(--nosteo-ck-switch-off);
	border-radius: 300px;
	transition: background-color 0.2s ease;
}

.nosteo-cookies__switch::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	background: var(--nosteo-white, #ffffff);
	border-radius: 50%;
	transition: transform 0.2s ease;
}

.nosteo-cookies__toggle input:checked + .nosteo-cookies__switch {
	background: var(--nosteo-ck-accent);
}

.nosteo-cookies__toggle input:checked + .nosteo-cookies__switch::after {
	transform: translateX(18px);
}

/* Essential is locked on — show it as settled, not interactive. */
.nosteo-cookies__toggle input:disabled + .nosteo-cookies__switch {
	background: var(--nosteo-ck-ink);
	opacity: 0.55;
}

.nosteo-cookies__toggle input:disabled ~ .nosteo-cookies__category-text {
	cursor: default;
}

.nosteo-cookies__toggle input:focus-visible + .nosteo-cookies__switch {
	outline: 2px solid var(--nosteo-ck-accent);
	outline-offset: 3px;
}

.nosteo-cookies__category-name {
	display: block;
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
	color: var(--nosteo-ck-text);
}

.nosteo-cookies__always {
	margin-left: 6px;
	font-size: 12px;
	font-weight: 400;
	color: var(--nosteo-ck-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.nosteo-cookies__category-desc {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	line-height: 20px;
	color: var(--nosteo-ck-muted);
}

/* --- Actions ------------------------------------------------------------- */

.nosteo-cookies__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 18px 22px 22px;
}

/* Double specificity + explicit states so Elementor kit button globals cannot
   repaint these (a recurring problem across this project). */
.nosteo-cookies .nosteo-cookies__btn {
	flex: 1 1 auto;
	min-height: 42px;
	padding: 6px 20px;
	border: 1px solid var(--nosteo-ck-ink);
	border-radius: 300px;
	font-size: 15px;
	line-height: 22px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.nosteo-cookies .nosteo-cookies__btn--accept {
	background: var(--nosteo-ck-ink);
	color: var(--nosteo-white, #ffffff);
}

.nosteo-cookies .nosteo-cookies__btn--accept:hover,
.nosteo-cookies .nosteo-cookies__btn--accept:focus {
	background: var(--nosteo-ck-accent);
	border-color: var(--nosteo-ck-accent);
	color: var(--nosteo-white, #ffffff);
}

/* Rejecting must be exactly as easy as accepting, so it gets equal weight. */
.nosteo-cookies .nosteo-cookies__btn--reject {
	background: var(--nosteo-white, #ffffff);
	color: var(--nosteo-ck-ink);
}

.nosteo-cookies .nosteo-cookies__btn--reject:hover,
.nosteo-cookies .nosteo-cookies__btn--reject:focus {
	background: var(--nosteo-ck-ink);
	color: var(--nosteo-white, #ffffff);
}

.nosteo-cookies .nosteo-cookies__btn--save {
	flex-basis: 100%;
	background: var(--nosteo-white, #ffffff);
	border-color: var(--nosteo-ck-line);
	color: var(--nosteo-ck-text);
}

.nosteo-cookies .nosteo-cookies__btn--save:hover,
.nosteo-cookies .nosteo-cookies__btn--save:focus {
	background: var(--nosteo-ck-surface);
	border-color: var(--nosteo-ck-muted);
	color: var(--nosteo-ck-text);
}

@media (max-width: 600px) {
	.nosteo-cookies {
		left: 12px;
		right: 12px;
		bottom: 12px;

		/* Smaller disc on phones. Two 56px circles — this one and the assistant in the opposite
		   corner — cover a lot of a phone screen and sit over the content being read.

		   44px is the minimum comfortable touch target in the WCAG target-size guidance and in
		   Apple's, so it is as small as the default goes; the settings screen allows less for
		   anyone who wants it. Same breakpoint as the assistant button, so the pair change size
		   together rather than one at a time. */
		--nosteo-ck-icon: 44px;
	}

	.nosteo-cookies__panel {
		width: auto;
		right: 0;
		/* The container sits 12px off the bottom, so 12px there and 12px at the top. */
		max-height: calc(100vh - 24px);
		max-height: calc(100svh - 24px);
	}

	/* One button per row. Three pill buttons wrapping across a 360px screen leaves a stranded
	   third on its own line at a different width, which reads as an afterthought — and these are
	   the controls the whole dialog exists for. Full width also gives the largest tap target. */
	.nosteo-cookies__actions {
		flex-direction: column;
		padding: 14px 18px 18px;
	}

	.nosteo-cookies .nosteo-cookies__btn {
		width: 100%;
	}

	/* Tighter than the desktop 18px/22px: on a short screen every row of padding is a row of the
	   message the visitor cannot see. */
	.nosteo-cookies .nosteo-cookies__message {
		padding: 14px 18px 0;
	}

	.nosteo-cookies__links {
		padding: 0 18px;
	}

	.nosteo-cookies__head {
		padding: 14px 18px;
	}
}