/* sections/cookie-banner.php */
/*
	Low bottom-left card, never over the floating call button (bottom right, sections/call-button.php):
	on a phone it stops before the 3.5rem round badge, from 768px it leaves room for the call pill.
	Same layer as the call button, under the header (100). Text and buttons side by side on a wide
	screen, so the card stays about 4.5rem high.
*/
.ck-banner {
	position: fixed; z-index: 90;
	left: var(--space-4);
	right: calc(var(--space-4) + 3.5rem + var(--space-3));
	bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
	box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2) var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--c-border); border-radius: var(--radius-lg);
	background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow-lg);
	font-family: var(--f-body); font-size: var(--fs-xs); line-height: 1.4;
	opacity: 0; transform: translateY(1rem);
	transition: opacity 0.25s, transform 0.25s;
}
.ck-banner[hidden] { display: none; }
.ck-banner.is-in { opacity: 1; transform: none; }
/* A form field has the focus: out of the way until the visitor leaves the form. */
.ck-banner.is-in.is-paused { opacity: 0; transform: translateY(1rem); pointer-events: none; }
.ck-banner *, .ck-banner *::before, .ck-banner *::after { box-sizing: border-box; }
.ck-icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--c-accent); }
.ck-text { margin: 0; color: var(--c-text-muted); }
.ck-title { color: var(--c-heading); font-weight: 800; }
.ck-banner .ck-link { color: var(--c-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.ck-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
/* Refuse and accept: same size and weight. */
.ck-banner .ck-btn {
	min-height: 2.5rem; margin: 0; padding: var(--space-1) var(--space-3);
	border: 1px solid var(--c-primary); border-radius: var(--radius-sm); background: var(--c-primary); color: var(--c-on-primary);
	font: 700 var(--fs-xs)/1.2 var(--f-body); white-space: normal; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.ck-banner .ck-btn:hover, .ck-banner .ck-btn:focus { border-color: var(--c-primary-hover); background: var(--c-primary-hover); color: var(--c-on-primary); }
.ck-banner .ck-btn--ghost { background: var(--c-surface); color: var(--c-primary); }
.ck-banner .ck-btn--ghost:hover, .ck-banner .ck-btn--ghost:focus { background: var(--c-primary-soft); color: var(--c-primary); }
.ck-banner .ck-btn:focus-visible, .ck-banner .ck-link:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

@media (min-width: 768px) {
	/* One row: icon, text, buttons. The call pill (about 15rem) keeps the bottom right corner. */
	.ck-banner { right: auto; width: min(34rem, calc(100% - 19rem)); grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--space-3) var(--space-4); }
	.ck-actions { grid-column: auto; grid-template-columns: auto auto; }
	.ck-banner .ck-btn { min-width: 6.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.ck-banner { transition: none; }
}
@media print {
	.ck-banner { display: none; }
}