/*
 * !important is used deliberately and throughout this file on the
 * properties a host theme most commonly sets generically (button
 * background/color/border/padding/font, box-sizing) — this banner has to
 * render correctly on whatever theme a given client site happens to run,
 * and a theme's own `button { ... }` or `.btn` rule can otherwise win via
 * load order or a slightly higher-specificity selector we can't predict
 * in advance. This is the same approach most commercial cookie-consent
 * tools take for the same reason.
 */

.alchemy-cookie-consent-banner {
	position: fixed !important;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--alchemy-cookie-consent-container-bg, #fff) !important;
	border-top: 1px solid var(--alchemy-cookie-consent-container-border, #e2e2e2);
	box-shadow: var(--alchemy-cookie-consent-shadow, 0 -2px 12px rgba(0, 0, 0, 0.08)) !important;
	z-index: 999999;
	font-family: var(--alchemy-cookie-consent-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
	font-weight: var(--alchemy-cookie-consent-font-weight, 400);
	/* Extra right padding reserves room for the dismiss "x" so it never
	   sits on top of the message text. */
	padding: var(--alchemy-cookie-consent-container-padding, 16px) calc(var(--alchemy-cookie-consent-container-padding, 16px) + 28px) var(--alchemy-cookie-consent-container-padding, 16px) var(--alchemy-cookie-consent-container-padding, 16px) !important;
	box-sizing: border-box;
}

.alchemy-cookie-consent-banner * {
	box-sizing: border-box;
}

.alchemy-cookie-consent-dismiss {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: absolute !important;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	line-height: 22px;
	text-align: center;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--alchemy-cookie-consent-text-color, #333) !important;
	font-size: 18px;
	cursor: pointer !important;
	box-shadow: none !important;
	opacity: 0.5;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.alchemy-cookie-consent-dismiss:hover,
.alchemy-cookie-consent-dismiss:focus-visible {
	opacity: 1;
	background: rgba(0, 0, 0, 0.06) !important;
}

.alchemy-cookie-consent-hidden {
	display: none !important;
}

.alchemy-cookie-consent-inner {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.alchemy-cookie-consent-heading-row {
	display: flex;
	align-items: center;
	gap: 8px;
	/* Only ever rendered in the Card layout, whose .alchemy-cookie-consent-inner
	   is flex-direction: column — so this needs auto (natural) sizing on
	   the main axis, not a row-oriented percentage basis (a "1 1 100%"
	   here would mean 100% of the container's *height*, not its width). */
	flex: 0 1 auto;
}

.alchemy-cookie-consent-icon {
	font-size: 22px;
	line-height: 1;
}

.alchemy-cookie-consent-heading {
	margin: 0;
	font-family: var(--alchemy-cookie-consent-heading-font, inherit) !important;
	font-weight: var(--alchemy-cookie-consent-heading-weight, 600);
	font-size: var(--alchemy-cookie-consent-heading-font-size, 18px) !important;
	color: var(--alchemy-cookie-consent-heading-color, #1a1a1a) !important;
}

.alchemy-cookie-consent-message {
	flex: 1 1 320px;
	margin: 0;
	font-size: var(--alchemy-cookie-consent-font-size, 14px) !important;
	line-height: 1.5;
	color: var(--alchemy-cookie-consent-text-color, #333) !important;
}

.alchemy-cookie-consent-policy-link {
	color: var(--alchemy-cookie-consent-accent, #1a73e8) !important;
	text-decoration: underline;
	white-space: nowrap;
	margin-left: 4px;
}

.alchemy-cookie-consent-categories {
	display: flex;
	gap: 16px;
	flex: 1 1 100%;
	font-size: var(--alchemy-cookie-consent-font-size, 14px) !important;
	color: var(--alchemy-cookie-consent-text-color, #333) !important;
}

/* An author rule's `display` always wins over the browser's own
   `[hidden] { display: none }` regardless of specificity — origin is
   decided before specificity is even compared — so the unconditional
   `display: flex` above was silently defeating the `hidden` attribute
   banner.js toggles: the category checkboxes were visible on every
   pageview, not just after clicking Customize. This restores it. */
.alchemy-cookie-consent-categories[hidden] {
	display: none !important;
}

.alchemy-cookie-consent-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.alchemy-cookie-consent-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	border-radius: var(--alchemy-cookie-consent-button-radius, 4px) !important;
	padding: var(--alchemy-cookie-consent-button-padding, 8px) calc(var(--alchemy-cookie-consent-button-padding, 8px) * 2) !important;
	font-family: var(--alchemy-cookie-consent-button-font, inherit) !important;
	font-weight: var(--alchemy-cookie-consent-button-weight, 600) !important;
	font-size: var(--alchemy-cookie-consent-button-font-size, 14px) !important;
	cursor: pointer !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-color: transparent !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
	box-shadow: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.alchemy-cookie-consent-btn-solid {
	background: var(--alchemy-cookie-consent-accent, #1a73e8) !important;
	color: var(--alchemy-cookie-consent-button-text, #fff) !important;
}

.alchemy-cookie-consent-btn-solid:hover,
.alchemy-cookie-consent-btn-solid:focus-visible {
	background: var(--alchemy-cookie-consent-button-hover, #155cba) !important;
}

.alchemy-cookie-consent-btn-outline {
	background: transparent !important;
	border-color: var(--alchemy-cookie-consent-button-outline-color, #ccc) !important;
	color: var(--alchemy-cookie-consent-text-color, #333) !important;
}

.alchemy-cookie-consent-btn-outline:hover,
.alchemy-cookie-consent-btn-outline:focus-visible {
	background: var(--alchemy-cookie-consent-button-outline-hover-bg, #f5f5f5) !important;
}

/* A "ghost" button — no fill, but a visible border and hover state so it
   reads as a third, lower-emphasis action alongside solid Accept and
   outlined Reject, rather than a stray underlined hyperlink sitting in a
   button-shaped row (the underline was the main thing making it read as
   a link rather than a button; a bare-transparent style with no border
   and no underline would look like nothing at all, not a button). */
.alchemy-cookie-consent-btn-text {
	background: transparent !important;
	border-color: var(--alchemy-cookie-consent-button-outline-color, #ccc) !important;
	color: #555 !important;
	text-decoration: none !important;
}

.alchemy-cookie-consent-btn-text:hover,
.alchemy-cookie-consent-btn-text:focus-visible {
	background: var(--alchemy-cookie-consent-button-outline-hover-bg, #f5f5f5) !important;
	color: var(--alchemy-cookie-consent-accent, #1a73e8) !important;
}

/* ---- Card layout: a floating rounded card anchored to a bottom corner,
   instead of the full-width edge-to-edge bar above. Structural choices
   here (radius, max-width, gap from the edge) are part of the preset, not
   individually configurable — colors/fonts/buttons still come from the
   same variables as the Bar layout. ---- */
.alchemy-cookie-consent-banner[data-alchemy-layout="card"] {
	left: auto;
	right: auto;
	bottom: 24px;
	width: min(400px, calc(100vw - 32px));
	border-top: none;
	border-radius: 16px;
	padding: 20px !important;
}

.alchemy-cookie-consent-banner[data-alchemy-layout="card"][data-alchemy-position="left"] {
	left: 24px;
}

.alchemy-cookie-consent-banner[data-alchemy-layout="card"][data-alchemy-position="right"] {
	right: 24px;
}

.alchemy-cookie-consent-banner[data-alchemy-layout="card"] .alchemy-cookie-consent-inner {
	max-width: none;
	margin: 0;
	flex-direction: column;
	align-items: stretch;
}

/* .alchemy-cookie-consent-message's 320px flex-basis (and categories'
   100%) are written for the Bar layout's row-direction container, where
   flex-basis sets a starting *width*. Inside Card's column-direction
   container, an inherited flex-basis applies to *height* instead — the
   actual cause of the Card layout rendering taller than its content
   needed. Reset both to auto (natural content height) here. */
.alchemy-cookie-consent-banner[data-alchemy-layout="card"] .alchemy-cookie-consent-message,
.alchemy-cookie-consent-banner[data-alchemy-layout="card"] .alchemy-cookie-consent-categories {
	flex: 0 1 auto;
}

.alchemy-cookie-consent-banner[data-alchemy-layout="card"] .alchemy-cookie-consent-actions {
	/* row-reverse: Accept is last in the DOM (so it's still the last thing
	   a keyboard/screen-reader user reaches) but appears first/leftmost,
	   as the prominent choice — matching the reference layout's Accept +
	   Manage side by side rather than a stack of three full-width buttons. */
	flex-direction: row-reverse;
	flex-wrap: wrap;
}

.alchemy-cookie-consent-banner[data-alchemy-layout="card"] .alchemy-cookie-consent-btn-solid,
.alchemy-cookie-consent-banner[data-alchemy-layout="card"] .alchemy-cookie-consent-btn-outline {
	flex: 1 1 0;
	text-align: center;
}

.alchemy-cookie-consent-banner[data-alchemy-layout="card"] .alchemy-cookie-consent-btn-text {
	flex: 1 1 100%;
	text-align: center;
}

.alchemy-cookie-consent-revisit {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: fixed !important;
	bottom: 16px;
	z-index: 999998;
	width: 40px;
	height: 40px;
	border-radius: 50% !important;
	background: var(--alchemy-cookie-consent-revisit-bg, rgba(255, 255, 255, 0.55)) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	cursor: pointer !important;
	font-size: 18px;
	box-shadow: none !important;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	transition: background-color 0.15s ease;
}

.alchemy-cookie-consent-revisit[data-alchemy-position="left"] {
	left: 16px;
}

.alchemy-cookie-consent-revisit[data-alchemy-position="right"] {
	right: 16px;
}

.alchemy-cookie-consent-revisit:hover,
.alchemy-cookie-consent-revisit:focus-visible {
	background: var(--alchemy-cookie-consent-revisit-bg-hover, rgba(255, 255, 255, 1)) !important;
}

.alchemy-cookie-consent-policy-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 24px;
}

.alchemy-cookie-consent-policy-table th,
.alchemy-cookie-consent-policy-table td {
	border: 1px solid #e2e2e2;
	padding: 8px;
	text-align: left;
	font-size: 14px;
}

.alchemy-cookie-consent-reopen-link {
	background: none;
	border: none;
	padding: 0;
	color: var(--alchemy-cookie-consent-accent, #1a73e8);
	text-decoration: underline;
	cursor: pointer;
	font-size: inherit;
}

.alchemy-cookie-consent-privacy-choices {
	background: none;
	border: none;
	padding: 0;
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
	font-size: inherit;
}