/* UB Kit's cookie banner (consent-banner.php): a small card at the bottom, a sheet on phones. Everything comes from the
   theme: its colour and size presets, its radii, and its own Button block (filled for Accept and Reject, alike, so
   refusing is as easy as accepting; Outline for Save; Text link for Details), so no site styles the banner on its own.
   This file only lays it out. */
.ub-consent {
	position: fixed;
	/* Above chat bubbles and call bars (WP Chat App's is 999999999): the choice comes first. */
	z-index: 2147483000;
	inset-inline-start: 1rem;
	bottom: 1rem;
	box-sizing: border-box;
	width: min(36rem, calc(100vw - 2rem));
	max-height: calc(100svh - 2rem);
	overflow: auto;
	overscroll-behavior: contain;
	padding: 1rem 1.125rem;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--ink, var(--wp--preset--color--contrast, #111827));
	border: 1px solid var(--wp--preset--color--line, rgb(0 0 0 / 0.15));
	border-radius: var(--wp--custom--radius--card, var(--wp--custom--form--radius, 10px));
	box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.45);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	line-height: 1.5;
}
.ub-consent[hidden] { display: none; }
/* With the details open: the text, then the table scrolling on its own, and the ticks and buttons always in view at
   the bottom (no scrolling back up to choose). */
.ub-consent.is-details:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; }
.ub-consent.is-details .ub-consent__details { order: 1; flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0 0 0.875rem; padding: 0.875rem 0.25rem 0.875rem 0; border-block: 1px solid var(--wp--preset--color--line, rgb(0 0 0 / 0.15)); }
.ub-consent.is-details .ub-consent__ticks { order: 2; }
.ub-consent.is-details .ub-consent__actions { order: 3; }
.ub-consent *, .ub-consent *::before, .ub-consent *::after { box-sizing: border-box; }
.ub-consent p { margin: 0; }
.ub-consent__title { margin-bottom: 0.25rem !important; font-weight: 700; font-size: 1.0625em; }
.ub-consent__text { margin-bottom: 0.75rem !important; }

/* The quick choice: one tick per category, right on the card, shaped like the theme's form fields. */
.ub-consent__ticks { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.875rem; padding: 0; border: 0; }
.ub-consent__tick {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.375rem 0.875rem 0.375rem 0.625rem;
	border: 1px solid var(--wp--preset--color--line, rgb(0 0 0 / 0.2));
	border-radius: var(--wp--custom--radius--chip, var(--wp--custom--form--radius, 999px));
	cursor: pointer;
	font-weight: 600;
	user-select: none;
}
.ub-consent__tick:has(input:checked) { border-color: currentColor; }
.ub-consent__tick:has(input:disabled) { cursor: default; opacity: 0.75; }
.ub-consent__tick:has(input:focus-visible) { outline: 2px solid var(--wp--preset--color--primary, currentColor); outline-offset: 2px; }
.ub-consent__tick input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--wp--preset--color--primary, #1d4ed8); cursor: inherit; }

/* The actions: the theme's buttons as they are; only a tap target where a theme has none (zero specificity). "Save my
   choice" once a tick has changed (consent.js). */
.ub-consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
:where(.ub-consent__actions) .wp-block-button__link { min-height: 44px; }
.ub-consent:not(.is-changed) .ub-consent__actions .is-style-outline { display: none; }
.ub-consent__links { white-space: nowrap; }

/* Details: every category with what it's for, and its cookies in a table. */
.ub-consent__details { margin-top: 0.875rem; }
.ub-consent__cat + .ub-consent__cat { margin-top: 1rem; }
.ub-consent__name { font-weight: 700; }
.ub-consent__always { font-weight: 400; color: var(--wp--preset--color--muted, inherit); }
.ub-consent__what { margin-bottom: 0.375rem !important; }
.ub-consent__table { width: 100%; border-collapse: collapse; font-size: 0.875em; }
.ub-consent__table th:first-child { width: 36%; }
.ub-consent__table th, .ub-consent__table td { padding: 0.375rem 0.5rem 0.375rem 0; border-bottom: 1px solid var(--wp--preset--color--line, rgb(0 0 0 / 0.12)); text-align: start; vertical-align: top; }
.ub-consent__table th { font-weight: 600; white-space: nowrap; }
.ub-consent__table code { font-size: 0.9em; overflow-wrap: anywhere; }
.ub-consent__policy { margin-top: 0.75rem !important; }

/* Phones: a sheet along the bottom, as low as it can be (ub check: under 30% of the screen): the title only for screen
   readers (the card is still named by it), the ticks in one row, Accept and Reject side by side. */
@media (max-width: 600px) {
	.ub-consent {
		inset-inline: 0.5rem;
		bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
		width: auto;
		padding: 0.75rem;
	}
	.ub-consent:not(.is-details) .ub-consent__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.ub-consent__text { margin-bottom: 0.625rem !important; }
	.ub-consent__ticks { gap: 0.375rem; margin-bottom: 0.625rem; }
	.ub-consent__tick { min-height: 40px; padding: 0.25rem 0.625rem 0.25rem 0.5rem; gap: 0.375rem; }
	.ub-consent__tick input { width: 1.125rem; height: 1.125rem; }
	.ub-consent__actions .is-primary { flex: 1 1 calc(50% - 0.25rem); }
	.ub-consent__actions .is-primary > .wp-block-button__link { width: 100%; }
	.ub-consent__table thead { display: none; }
	.ub-consent__table tr { display: block; padding: 0.375rem 0; border-bottom: 1px solid var(--wp--preset--color--line, rgb(0 0 0 / 0.12)); }
	.ub-consent__table td { display: block; padding: 0; border: 0; }
}