/*
 * SG Cookies 1.1: banner, preferences dialog, reopen button.
 *
 * Look: the sorkx-glass / section-library language. A frosted glass surface
 * (backdrop-filter, with an opaque fallback), soft radius, Heebo/Rubik.
 *
 * Colour: follows the site's design tokens (--sg-primary, --sg-secondary,
 * --sg-text ... from the panel's sg_design_vars) when they exist, with quiet
 * defaults when they do not. Raw brand colours are NOT used as-is: a brand
 * like #33cccc carries white text at about 2:1. Each one is re-derived in
 * OKLCH with its lightness capped (relative colour syntax), which keeps the
 * hue and guarantees WCAG AA for white text on it and for it on the glass.
 * Browsers without relative colour syntax get the fixed safe palette.
 *
 * Layout (1.3): card = a card in a corner on desktop (bottom or top, start
 * or end), a sheet on phones; sheet = attached to the bottom edge at every
 * width; bar = a floating full-width bar (bottom or top). --sgc-offset is the
 * distance from the screen edges on desktop. Refusing is exactly as easy as
 * accepting: both buttons are the same size and both are filled; only their
 * order is a setting.
 *
 * Every rule is scoped under #sg-cookies / #sg-cookies-reopen (ids): theme
 * rules such as Woodmart's [type="button"] would otherwise TIE with
 * single-class rules and win on load order (the sg-dedications v1.7.2 bug).
 * Logical properties only: RTL and LTR from the page's dir.
 */

/* ─── Tokens ──────────────────────────────────────────────────────────── */

#sg-cookies,
#sg-cookies-reopen {
	/* Seeds: a custom colour from the settings, else the site's tokens. */
	--sgc-seed-brand: var(--sgc-custom, var(--sg-primary, #1f5f7a));
	--sgc-seed-ink: var(--sg-secondary, #1b2433);
	--sgc-seed-text: var(--sg-text, #1b2433);
	--sgc-seed-muted: var(--sg-text-muted, #4b5565);

	/* Safe palette (also the result for browsers without relative colours). */
	--sgc-brand: var(--sgc-custom, #1f5f7a);
	--sgc-brand-text: var(--sgc-custom, #1f5f7a);
	--sgc-ink: #1b2433;
	--sgc-text: #1b2433;
	--sgc-muted: #4b5565;

	--sgc-on-fill: #fff;
	--sgc-glass: color-mix(in srgb, var(--sgc-surface, #fff) 88%, transparent);
	--sgc-glass-solid: var(--sgc-surface, #fff);
	--sgc-edge: rgb(255 255 255 / 0.75);
	--sgc-hairline: rgb(27 36 51 / 0.1);
	--sgc-shadow: 0 24px 60px -18px rgb(16 24 40 / 0.35), 0 2px 8px rgb(16 24 40 / 0.06);
	--sgc-radius: 22px;
	--sgc-font: var(--sg-font-body, "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
	--sgc-font-heading: var(--sg-font-heading, "Rubik", var(--sgc-font));
	--sgc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@supports (color: oklch(from red l c h)) {
	#sg-cookies,
	#sg-cookies-reopen {
		/* L <= 0.52 keeps white text >= 4.5:1 on fills; L <= 0.34 / 0.46 keep
		   text and muted text AA on the glass even over a black page. */
		--sgc-brand: oklch(from var(--sgc-seed-brand) min(l, 0.52) c h);
		/* Brand as TEXT on the translucent, brand-tinted glass needs more. */
		--sgc-brand-text: oklch(from var(--sgc-seed-brand) min(l, 0.42) c h);
		--sgc-ink: oklch(from var(--sgc-seed-ink) min(l, 0.34) c h);
		--sgc-text: oklch(from var(--sgc-seed-text) min(l, 0.32) c h);
		--sgc-muted: oklch(from var(--sgc-seed-muted) min(l, 0.46) c h);
	}
}

/* Custom colours (1.2): the surface may be dark, so every colour that sits on
   it comes from the picked surface text and accept colours, not from the
   light-surface brand derivation above. The admin guard checks these pairs. */
#sg-cookies.sg-cookies--custom,
#sg-cookies-reopen.sg-cookies--custom {
	--sgc-text: var(--sgc-surface-text);
	--sgc-muted: var(--sgc-surface-text);
	--sgc-ink: var(--sgc-surface-text);
	--sgc-brand: var(--sgc-accept-bg);
	--sgc-brand-text: var(--sgc-surface-text);
	--sgc-hairline: color-mix(in srgb, var(--sgc-surface-text) 14%, transparent);
}

/* ─── Root ────────────────────────────────────────────────────────────── */

#sg-cookies {
	position: fixed;
	z-index: 2147483000;
	inset: auto 0 0;
	font-family: var(--sgc-font);
	font-size: 15px;
	line-height: 1.6;
	color: var(--sgc-text);
	text-align: start;
	-webkit-font-smoothing: antialiased;
}

/* Preferences dialog open (class set by banner.js): the root rises above
   other floating widgets (the sg-a11y button sits at 2147483001) so the scrim
   covers and dims them and swallows their clicks, as an aria-modal dialog
   should. It stays below 2147483647 (skip links). On close the root drops
   back, so the banner card keeps today's stacking. */
#sg-cookies.sg-cookies--modal-open { z-index: 2147483002; }

#sg-cookies[hidden],
#sg-cookies [hidden] { display: none !important; }

#sg-cookies *,
#sg-cookies *::before,
#sg-cookies *::after { box-sizing: border-box; }

/* Typography reset: themes often uppercase / track every button and heading. */
#sg-cookies button,
#sg-cookies a,
#sg-cookies h2,
#sg-cookies p,
#sg-cookies label,
#sg-cookies-reopen {
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
}

#sg-cookies .sg-cookies__icon {
	flex: none;
	inline-size: 20px;
	block-size: 20px;
}

/* ─── Glass surface (card + dialog) ───────────────────────────────────── */

#sg-cookies .sg-cookies__card,
#sg-cookies .sg-cookies__dialog {
	border: 1px solid var(--sgc-edge);
	background: var(--sgc-glass-solid);
	box-shadow: var(--sgc-shadow), inset 0 0 0 1px var(--sgc-hairline);
	color: var(--sgc-text);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	#sg-cookies .sg-cookies__card,
	#sg-cookies .sg-cookies__dialog {
		background:
			linear-gradient(160deg, color-mix(in srgb, var(--sgc-brand) 7%, transparent), transparent 55%),
			var(--sgc-glass);
		-webkit-backdrop-filter: blur(22px) saturate(160%);
		backdrop-filter: blur(22px) saturate(160%);
	}
}

@media (prefers-reduced-transparency: reduce) {
	#sg-cookies .sg-cookies__card,
	#sg-cookies .sg-cookies__dialog {
		background: var(--sgc-glass-solid);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* ─── Banner card ─────────────────────────────────────────────────────── */

/* Phones: a bottom sheet, full width, attached to the bottom edge. */
#sg-cookies .sg-cookies__card {
	position: relative;
	max-block-size: calc(100dvh - 24px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 26px 20px max(18px, env(safe-area-inset-bottom));
	border-block-end: 0;
	border-radius: 24px 24px 0 0;
	animation: sgc-rise 0.42s var(--sgc-ease) both;
}

/* Grab handle: decorative, says "sheet" at a glance. */
#sg-cookies .sg-cookies__card::before {
	content: "";
	position: absolute;
	inset-block-start: 9px;
	inset-inline-start: 50%;
	inline-size: 38px;
	block-size: 4px;
	border-radius: 4px;
	background: var(--sgc-hairline);
	translate: -50% 0;
}

#sg-cookies[dir="rtl"] .sg-cookies__card::before { translate: 50% 0; }

#sg-cookies .sg-cookies__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-block-end: 8px;
}

#sg-cookies .sg-cookies__badge {
	display: inline-grid;
	flex: none;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--sgc-brand) 12%, var(--sgc-glass-solid));
	color: var(--sgc-brand);
}

#sg-cookies .sg-cookies__badge .sg-cookies__icon { inline-size: 22px; block-size: 22px; }

#sg-cookies .sg-cookies__title {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sgc-text);
	font-family: var(--sgc-font-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

#sg-cookies .sg-cookies__message {
	margin: 0;
	color: var(--sgc-muted);
	font-size: 14.5px;
}

#sg-cookies .sg-cookies__policy {
	color: var(--sgc-brand-text);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	white-space: nowrap;
}

#sg-cookies .sg-cookies__policy:hover { text-decoration-thickness: 2px; }

/* ─── Buttons ─────────────────────────────────────────────────────────── */

#sg-cookies .sg-cookies__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-block-start: 18px;
}

#sg-cookies .sg-cookies__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	margin: 0;
	padding: 10px 18px;
	border: 1.5px solid transparent;
	border-radius: 14px;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transition: transform 0.18s var(--sgc-ease), box-shadow 0.18s var(--sgc-ease);
}

/* Colour never changes on hover: only lift + shadow, so contrast is the
   same in every state. */
#sg-cookies .sg-cookies__btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgb(16 24 40 / 0.45); }
#sg-cookies .sg-cookies__btn:active { transform: translateY(0) scale(0.985); box-shadow: none; }

#sg-cookies .sg-cookies__btn--brand {
	border-color: var(--sgc-accept-bg, var(--sgc-brand));
	background: var(--sgc-accept-bg, var(--sgc-brand));
	color: var(--sgc-accept-text, var(--sgc-on-fill));
}

#sg-cookies .sg-cookies__btn--ink {
	border-color: var(--sgc-reject-bg, var(--sgc-ink));
	background: var(--sgc-reject-bg, var(--sgc-ink));
	color: var(--sgc-reject-text, var(--sgc-on-fill));
}

#sg-cookies .sg-cookies__btn--tonal {
	border-color: color-mix(in srgb, var(--sgc-ink) 22%, transparent);
	background: color-mix(in srgb, var(--sgc-glass-solid) 60%, transparent);
	color: var(--sgc-ink);
}

#sg-cookies .sg-cookies__btn--wide { inline-size: 100%; }

/* The quiet "settings" link under the two equal buttons. */
#sg-cookies .sg-cookies__settings {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	inline-size: 100%;
	min-block-size: 44px;
	margin: 6px 0 0;
	padding: 6px 10px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--sgc-text);
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: none;
}

#sg-cookies .sg-cookies__settings span {
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

#sg-cookies .sg-cookies__settings:hover span { text-decoration-color: currentColor; }

/* ─── Focus (keyboard) ────────────────────────────────────────────────── */

#sg-cookies :is(button, a, input):focus-visible,
#sg-cookies-reopen:focus-visible {
	outline: 3px solid var(--sgc-ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px #fff;
}

#sg-cookies :is(button, a, input):focus:not(:focus-visible) { outline: none; }

/* ─── Preferences dialog ──────────────────────────────────────────────── */

#sg-cookies .sg-cookies__modal {
	position: fixed;
	z-index: 1;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

#sg-cookies .sg-cookies__scrim {
	position: absolute;
	inset: 0;
	background: rgb(12 17 28 / 0.42);
	animation: sgc-fade 0.24s ease both;
}

#sg-cookies .sg-cookies__dialog {
	position: relative;
	inline-size: 100%;
	max-block-size: min(88dvh, 720px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 22px 20px max(18px, env(safe-area-inset-bottom));
	border-block-end: 0;
	border-radius: 24px 24px 0 0;
	animation: sgc-rise 0.42s var(--sgc-ease) both;
}

#sg-cookies .sg-cookies__dialog-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

#sg-cookies .sg-cookies__dialog-title {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sgc-text);
	font-family: var(--sgc-font-heading);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

#sg-cookies .sg-cookies__close {
	display: inline-grid;
	flex: none;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--sgc-hairline);
	border-radius: 50%;
	background: color-mix(in srgb, var(--sgc-glass-solid) 70%, transparent);
	color: var(--sgc-text);
	cursor: pointer;
	box-shadow: none;
}

#sg-cookies .sg-cookies__intro {
	margin: 6px 0 16px;
	color: var(--sgc-muted);
	font-size: 14.5px;
}

#sg-cookies .sg-cookies__cats {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#sg-cookies .sg-cookies__cat {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--sgc-hairline);
	border-radius: 16px;
	background: color-mix(in srgb, var(--sgc-glass-solid) 62%, transparent);
}

#sg-cookies .sg-cookies__cat::before { content: none; }

#sg-cookies .sg-cookies__cat-text { flex: 1; min-inline-size: 0; }

#sg-cookies .sg-cookies__cat-title {
	display: block;
	margin: 0;
	color: var(--sgc-text);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

#sg-cookies .sg-cookies__cat-desc {
	margin: 2px 0 0;
	color: var(--sgc-muted);
	font-size: 13.5px;
	line-height: 1.5;
}

#sg-cookies .sg-cookies__always {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 4px;
	padding: 4px 10px 4px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--sgc-brand) 12%, var(--sgc-glass-solid));
	color: var(--sgc-brand-text);
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
}

#sg-cookies .sg-cookies__always .sg-cookies__icon { inline-size: 15px; block-size: 15px; stroke-width: 2.4; }

#sg-cookies .sg-cookies__switch--locked {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* Switch on a real checkbox: keyboard, label and state for free. The off
   track is >= 3:1 against the glass (WCAG 1.4.11); on adds a check mark,
   so the state never depends on colour alone. */
#sg-cookies .sg-cookies__switch:not(.sg-cookies__switch--locked) {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: none;
	inline-size: 50px;
	block-size: 30px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: #6b7484;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

#sg-cookies .sg-cookies__switch:not(.sg-cookies__switch--locked)::after {
	content: "";
	position: absolute;
	inset-block-start: 3px;
	inset-inline-start: 3px;
	inline-size: 24px;
	block-size: 24px;
	border-radius: 50%;
	background: #fff center / 14px no-repeat;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
	transition: translate 0.22s var(--sgc-ease);
}

#sg-cookies .sg-cookies__switch:checked { background: var(--sgc-brand); }

#sg-cookies .sg-cookies__switch:checked::after {
	translate: 20px 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2433' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
}

#sg-cookies[dir="rtl"] .sg-cookies__switch:checked::after { translate: -20px 0; }

#sg-cookies .sg-cookies__dialog-foot {
	display: grid;
	gap: 10px;
	margin-block-start: 18px;
}

#sg-cookies .sg-cookies__actions--quiet { margin: 0; }

/* ─── Phones: top position ────────────────────────────────────────────── */

@media (max-width: 639.98px) {
	/* Card or bar set to the top: the same sheet, attached to the top edge. */
	#sg-cookies.sg-cookies--top { inset: 0 0 auto; }

	#sg-cookies.sg-cookies--top .sg-cookies__card {
		padding: max(18px, env(safe-area-inset-top)) 20px 26px;
		border-block-start: 0;
		border-block-end: 1px solid var(--sgc-edge);
		border-radius: 0 0 24px 24px;
		animation-name: sgc-drop;
	}

	#sg-cookies.sg-cookies--top .sg-cookies__card::before { inset-block: auto 9px; }
}

/* ─── Desktop ─────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
	/* Card: in a corner; start = right in Hebrew. */
	#sg-cookies.sg-cookies--card {
		inset-block: auto var(--sgc-offset, 20px);
		inset-inline: var(--sgc-offset, 20px) auto;
		inline-size: 400px;
	}

	#sg-cookies.sg-cookies--card.sg-cookies--corner-end { inset-inline: auto var(--sgc-offset, 20px); }
	#sg-cookies.sg-cookies--card.sg-cookies--top { inset-block: var(--sgc-offset, 20px) auto; }

	/* Bar: a floating glass bar, text beside the actions. */
	#sg-cookies.sg-cookies--bar { inset-inline: var(--sgc-offset, 20px); inset-block: auto var(--sgc-offset, 20px); }
	#sg-cookies.sg-cookies--bar.sg-cookies--top { inset-block: var(--sgc-offset, 20px) auto; }

	#sg-cookies .sg-cookies__card {
		padding: 22px 22px 16px;
		border-block-end: 1px solid var(--sgc-edge);
		border-radius: var(--sgc-radius);
	}

	#sg-cookies .sg-cookies__card::before { content: none; }

	/* Bar and sheet: text beside the actions. */
	#sg-cookies.sg-cookies--bar .sg-cookies__card,
	#sg-cookies.sg-cookies--sheet .sg-cookies__card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "head actions" "message actions" "message settings";
		align-items: center;
		column-gap: 28px;
		max-inline-size: 1120px;
		margin-inline: auto;
	}

	#sg-cookies.sg-cookies--bar .sg-cookies__head,
	#sg-cookies.sg-cookies--sheet .sg-cookies__head { grid-area: head; }
	#sg-cookies.sg-cookies--bar .sg-cookies__message,
	#sg-cookies.sg-cookies--sheet .sg-cookies__message { grid-area: message; align-self: start; }
	#sg-cookies.sg-cookies--bar .sg-cookies__actions,
	#sg-cookies.sg-cookies--sheet .sg-cookies__actions { grid-area: actions; grid-template-columns: repeat(2, minmax(150px, auto)); margin: 0; }
	#sg-cookies.sg-cookies--bar .sg-cookies__settings,
	#sg-cookies.sg-cookies--sheet .sg-cookies__settings { grid-area: settings; }

	/* Sheet: edge to edge on the bottom, the content in a centred column. */
	#sg-cookies.sg-cookies--sheet .sg-cookies__card {
		max-inline-size: none;
		padding: 28px max(28px, calc((100% - 1040px) / 2)) max(18px, env(safe-area-inset-bottom));
		border-block-end: 0;
		border-radius: 24px 24px 0 0;
	}

	#sg-cookies.sg-cookies--sheet .sg-cookies__card::before { content: ""; }

	/* The dialog: centred glass card over a soft scrim. */
	#sg-cookies .sg-cookies__modal { align-items: center; padding: 24px; }

	#sg-cookies .sg-cookies__dialog {
		inline-size: min(520px, 100%);
		padding: 24px;
		border-block-end: 1px solid var(--sgc-edge);
		border-radius: var(--sgc-radius);
		animation-name: sgc-pop;
	}
}

/* ─── Reopen button ───────────────────────────────────────────────────── */

#sg-cookies-reopen {
	position: fixed;
	z-index: 2147482999;
	inset-block-end: 16px;
	inset-inline-end: 16px;
	display: inline-grid;
	place-items: center;
	inline-size: 46px;
	block-size: 46px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--sgc-edge);
	border-radius: 50%;
	background: var(--sgc-glass-solid);
	color: var(--sgc-ink);
	box-shadow: 0 10px 26px -10px rgb(16 24 40 / 0.45), inset 0 0 0 1px var(--sgc-hairline);
	cursor: pointer;
	transition: transform 0.18s var(--sgc-ease);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	#sg-cookies-reopen {
		background: var(--sgc-glass);
		-webkit-backdrop-filter: blur(16px) saturate(160%);
		backdrop-filter: blur(16px) saturate(160%);
	}
}

#sg-cookies-reopen:hover { transform: translateY(-2px); }
#sg-cookies-reopen[hidden] { display: none; }
#sg-cookies-reopen .sg-cookies__icon { inline-size: 22px; block-size: 22px; }

/* ─── Motion ──────────────────────────────────────────────────────────── */

@keyframes sgc-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

@keyframes sgc-drop {
	from { opacity: 0; transform: translateY(-18px); }
	to { opacity: 1; transform: none; }
}

@keyframes sgc-pop {
	from { opacity: 0; transform: translateY(10px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

@keyframes sgc-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	#sg-cookies *,
	#sg-cookies *::after,
	#sg-cookies-reopen {
		animation: none !important;
		transition: none !important;
	}

	#sg-cookies .sg-cookies__btn:hover,
	#sg-cookies-reopen:hover { transform: none; }
}

@media print {
	#sg-cookies,
	#sg-cookies-reopen { display: none !important; }
}