/**
 * Kicked Consent — banner, settings dialog, cookie table.
 *
 * Complete, neutral styling inside `@layer kicked-consent`, so any unlayered
 * theme rule wins regardless of load order. Themes skin it through these
 * custom properties (set them on :root), never by overriding selectors:
 *
 *   --kc-font, --kc-title-font, --kc-font-size, --kc-z
 *   --kc-bg, --kc-text, --kc-muted, --kc-border, --kc-radius, --kc-shadow
 *   --kc-link, --kc-focus, --kc-backdrop
 *   --kc-button-bg, --kc-button-color, --kc-button-border,
 *   --kc-button-bg-hover, --kc-button-color-hover, --kc-button-radius
 *
 * Accept and Refuse deliberately share one button style: refusing must be as
 * easy to find as accepting.
 */

@layer kicked-consent {
	:root {
		--kc-font: inherit;
		--kc-title-font: inherit;
		--kc-font-size: 15px;
		--kc-z: 9990;
		--kc-bg: #fff;
		--kc-text: #1d2327;
		--kc-muted: #646970;
		--kc-border: #dcdcde;
		--kc-radius: 6px;
		--kc-shadow: 0 12px 40px rgb(0 0 0 / 18%);
		--kc-link: #2271b1;
		--kc-focus: #2271b1;
		--kc-backdrop: rgb(0 0 0 / 45%);
		--kc-button-bg: #1d2327;
		--kc-button-color: #fff;
		--kc-button-border: #1d2327;
		--kc-button-bg-hover: #3c434a;
		--kc-button-color-hover: #fff;
		--kc-button-radius: 4px;
	}

	.kicked-consent {
		position: fixed;
		right: 16px;
		bottom: 16px;
		left: 16px;
		z-index: var(--kc-z);
		display: flex;
		justify-content: center;
		pointer-events: none;
	}

	.kicked-consent[hidden] {
		display: none;
	}

	.kicked-consent__banner {
		box-sizing: border-box;
		width: 100%;
		max-width: 46rem;
		padding: 20px 22px;
		pointer-events: auto;
		font-family: var(--kc-font);
		font-size: var(--kc-font-size);
		line-height: 1.5;
		color: var(--kc-text);
		background: var(--kc-bg);
		border: 1px solid var(--kc-border);
		border-radius: var(--kc-radius);
		box-shadow: var(--kc-shadow);
	}

	.kicked-consent__title {
		margin: 0 0 6px;
		font-family: var(--kc-title-font);
		font-size: 1.1em;
		font-weight: 700;
		line-height: 1.3;
	}

	.kicked-consent__text,
	.kicked-consent__intro,
	.kicked-consent__description,
	.kicked-consent__services,
	.kicked-consent__policy {
		margin: 0;
	}

	.kicked-consent a {
		color: var(--kc-link);
	}

	.kicked-consent__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
		margin-top: 16px;
	}

	.kicked-consent__button {
		box-sizing: border-box;
		min-height: 44px;
		padding: 10px 18px;
		font: inherit;
		font-weight: 600;
		line-height: 1.2;
		color: var(--kc-button-color);
		cursor: pointer;
		background: var(--kc-button-bg);
		border: 1px solid var(--kc-button-border);
		border-radius: var(--kc-button-radius);
	}

	.kicked-consent__button:hover {
		color: var(--kc-button-color-hover);
		background: var(--kc-button-bg-hover);
	}

	.kicked-consent__choose,
	.kicked-consent-open,
	.kicked-consent__close {
		padding: 0;
		font: inherit;
		color: inherit;
		cursor: pointer;
		background: none;
		border: 0;
	}

	.kicked-consent__choose {
		min-height: 44px;
		padding: 0 6px;
		font-weight: 600;
		color: var(--kc-link);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.kicked-consent__button:focus-visible,
	.kicked-consent__choose:focus-visible,
	.kicked-consent__close:focus-visible,
	.kicked-consent__dialog input:focus-visible,
	.kicked-consent-open:focus-visible {
		outline: 2px solid var(--kc-focus);
		outline-offset: 2px;
	}

	/* Settings dialog */

	.kicked-consent__dialog {
		box-sizing: border-box;
		width: min(40rem, calc(100vw - 24px));
		max-height: calc(100dvh - 24px);
		padding: 0;
		font-family: var(--kc-font);
		font-size: var(--kc-font-size);
		line-height: 1.5;
		color: var(--kc-text);
		background: var(--kc-bg);
		border: 1px solid var(--kc-border);
		border-radius: var(--kc-radius);
		box-shadow: var(--kc-shadow);
	}

	.kicked-consent__dialog::backdrop {
		background: var(--kc-backdrop);
	}

	.kicked-consent__dialog-body {
		position: relative;
		padding: 26px 26px 24px;
	}

	.kicked-consent__dialog-title {
		margin: 0 40px 8px 0;
		font-family: var(--kc-title-font);
		font-size: 1.35em;
		line-height: 1.25;
	}

	.kicked-consent__categories {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin: 18px 0;
		padding: 0;
		list-style: none;
	}

	.kicked-consent__category {
		margin: 0;
		padding: 14px 16px;
		border: 1px solid var(--kc-border);
		border-radius: var(--kc-radius);
	}

	.kicked-consent__category-head {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 10px;
		margin-bottom: 4px;
		font-weight: 700;
	}

	.kicked-consent__category-head input {
		width: 20px;
		height: 20px;
		margin: 0;
		accent-color: var(--kc-button-bg);
	}

	.kicked-consent__category-head label {
		cursor: pointer;
	}

	.kicked-consent__state {
		font-size: 0.85em;
		font-weight: 600;
		color: var(--kc-muted);
	}

	.kicked-consent__description,
	.kicked-consent__services {
		font-size: 0.93em;
	}

	.kicked-consent__services {
		margin-top: 4px;
		color: var(--kc-muted);
	}

	.kicked-consent__close {
		position: absolute;
		top: 14px;
		right: 14px;
		width: 40px;
		height: 40px;
		font-size: 26px;
		line-height: 1;
		color: var(--kc-muted);
	}

	/* Cookie table (privacy policy) */

	.kicked-cookie-table__title {
		margin: 1.6em 0 0.5em;
		font-size: 1.1em;
		line-height: 1.3;
	}

	.kicked-cookie-table__table {
		margin: 0 0 1em;
	}

	.kicked-cookie-table table {
		width: 100%;
		border-collapse: collapse;
	}

	.kicked-cookie-table th,
	.kicked-cookie-table td {
		padding: 10px 12px 10px 0;
		text-align: left;
		vertical-align: top;
		border-bottom: 1px solid var(--kc-border);
	}

	.kicked-cookie-table th:first-child {
		width: 28%;
	}

	.kicked-cookie-table th:last-child {
		width: 30%;
	}

	.kicked-cookie-table__state,
	.kicked-cookie-table__provider {
		font-weight: 400;
		color: var(--kc-muted);
	}

	.kicked-cookie-table code {
		font-size: 0.9em;
		overflow-wrap: anywhere;
	}

	.kicked-cookie-table__table {
		overflow-x: auto;
	}

	.kicked-cookie-table__settings {
		font-weight: 600;
		color: var(--kc-link);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	@media (max-width: 560px) {
		.kicked-consent {
			right: 8px;
			bottom: 8px;
			left: 8px;
		}

		.kicked-consent__banner {
			padding: 16px;
		}

		.kicked-consent__button {
			flex: 1 1 100%;
		}

		.kicked-consent__dialog-body {
			padding: 22px 18px 18px;
		}

		/* The table stacks: one block per service, each cell labelled. */
		.kicked-cookie-table thead {
			display: none;
		}

		.kicked-cookie-table tr,
		.kicked-cookie-table td {
			display: block;
		}

		.kicked-cookie-table tr {
			padding: 12px 0;
			border-bottom: 1px solid var(--kc-border);
		}

		.kicked-cookie-table td {
			padding: 4px 0;
			border: 0;
		}

		.kicked-cookie-table td::before {
			content: attr(data-label);
			display: block;
			font-size: 0.8em;
			font-weight: 700;
			letter-spacing: 0.04em;
			text-transform: uppercase;
			color: var(--kc-muted);
		}
	}
}