/**
 * CookieYes (cookie-law-info) — house styling.
 *
 * The banner and preference modal are rendered by the plugin's own script, so
 * none of this markup passes through the theme. It arrives carrying the
 * plugin's defaults plus INLINE colours (`style="color:#212121"`) written by
 * CookieYes onto the title, body, category headings and audit tables. An inline
 * style outranks any selector. Worse, the plugin also injects a runtime
 * <style> block whose selectors match ours exactly (`.cky-consent-container
 * .cky-consent-bar`, `.cky-btn`) — equal specificity, but appended to the
 * document after this file, so load order hands it the win. Between the two
 * there is no selector that can take precedence honestly, which is why
 * `!important` is load-bearing throughout this file rather than lazy. It is
 * scoped to `.cky-*`, so it cannot leak into theme CSS.
 *
 * Values come from assets/css/tokens.css. Nothing new is introduced: the modal
 * uses --kw-shadow-raised, the same elevation the product cards sit on, and
 * --kw-radius, so the consent UI reads as part of the site rather than a
 * third-party overlay.
 *
 * Text content is NOT set here. It lives in the CookieYes dashboard for each
 * connected site, so it cannot be themed or translated from the codebase.
 */

/* ---------- Shared chrome ---------- */

.cky-consent-container,
.cky-modal {
	font-family: inherit;
}

.cky-consent-container .cky-consent-bar,
.cky-modal.cky-modal-open .cky-preference {
	background: var(--kw-surface, #fff) !important;
	border: 1px solid var(--kw-line, #dce2e5) !important;
	border-radius: var(--kw-radius, 12px) !important;
	box-shadow: var(--kw-shadow-raised, 0 8px 24px rgba(0, 0, 0, .08)) !important;
}

/* ---------- Notice bar ---------- */

.cky-title {
	color: var(--kw-ink, #111827) !important;
	font-size: var(--kw-fs-heading, 18px);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.cky-notice-des,
.cky-notice-des * {
	color: var(--kw-ink-muted, #6b7280) !important;
	font-size: var(--kw-fs-meta, 13px);
	line-height: 1.5;
}

/* ---------- Buttons ---------- */

.cky-btn {
	border-radius: var(--kw-radius-pill, 999px) !important;
	font-size: var(--kw-fs-body, 14px);
	font-weight: 600;
	/* 44px minimum touch target, and the same on the close button below. */
	min-height: 44px !important;
	padding: 10px 20px !important;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.cky-btn-accept {
	background: var(--kw-accent, #34aeeb) !important;
	border-color: var(--kw-accent, #34aeeb) !important;
	color: #fff !important;
}

.cky-btn-accept:hover {
	background: var(--kw-accent-dark, #2a8bbc) !important;
	border-color: var(--kw-accent-dark, #2a8bbc) !important;
}

.cky-btn-reject,
.cky-btn-customize,
.cky-btn-preferences {
	background: transparent !important;
	border: 1px solid var(--kw-accent, #34aeeb) !important;
	color: var(--kw-accent-dark, #2a8bbc) !important;
}

.cky-btn-reject:hover,
.cky-btn-customize:hover,
.cky-btn-preferences:hover {
	background: var(--kw-accent-soft, #e6f5fd) !important;
}

/* Colour alone must not carry meaning, and a keyboard user needs to see focus. */
.cky-btn:focus-visible,
.cky-btn-close:focus-visible,
.cky-accordion-btn:focus-visible,
.cky-show-desc-btn:focus-visible {
	outline: 2px solid var(--kw-accent-dark, #2a8bbc);
	outline-offset: 2px;
}

/* ---------- Preference modal ---------- */

.cky-preference-title {
	color: var(--kw-ink, #111827) !important;
	font-size: var(--kw-fs-heading, 18px);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.cky-preference-content-wrapper,
.cky-preference-content-wrapper * {
	color: var(--kw-ink-muted, #6b7280) !important;
	font-size: var(--kw-fs-meta, 13px);
	line-height: 1.55;
}

.cky-btn-close {
	min-width: 44px !important;
	min-height: 44px !important;
	border-radius: var(--kw-radius-pill, 999px) !important;
	transition: background-color 150ms ease-out;
}

.cky-btn-close:hover {
	background: var(--kw-surface-alt, #f1f4f6) !important;
}

.cky-horizontal-separator {
	background: var(--kw-line, #dce2e5) !important;
}

/* ---------- Category accordion ---------- */

.cky-accordion {
	border-bottom: 1px solid var(--kw-line, #dce2e5);
}

.cky-accordion:last-child {
	border-bottom: 0;
}

.cky-accordion-btn {
	color: var(--kw-ink, #111827) !important;
	font-size: var(--kw-fs-body, 14px);
	font-weight: 600;
	min-height: 44px !important;
}

.cky-accordion-header-des,
.cky-accordion-header-des * {
	color: var(--kw-ink-muted, #6b7280) !important;
	font-size: var(--kw-fs-meta, 13px);
	line-height: 1.55;
}

.cky-always-active {
	color: var(--kw-success, #00b87a) !important;
	font-size: var(--kw-fs-caption, 12px);
	font-weight: 600;
}

/* ---------- Cookie audit tables ---------- */

.cky-audit-table {
	background: var(--kw-surface-alt, #f1f4f6) !important;
	border: 1px solid var(--kw-line, #dce2e5) !important;
	border-radius: var(--kw-radius-sm, 8px) !important;
	color: var(--kw-ink-muted, #6b7280) !important;
	font-size: var(--kw-fs-caption, 12px);
}

.cky-audit-table .cky-cookie-des-table {
	border-bottom: 1px solid var(--kw-line, #dce2e5);
}

.cky-audit-table .cky-cookie-des-table:last-child {
	border-bottom: 0;
}

.cky-empty-cookies-text {
	color: var(--kw-ink-faint, #9ca3af) !important;
	font-size: var(--kw-fs-caption, 12px);
}

/* ---------- Toggle ---------- */

.cky-switch input[type="checkbox"] {
	cursor: pointer;
}

.cky-switch input[type="checkbox"]:checked {
	background-color: var(--kw-accent, #34aeeb) !important;
}

/* ---------- Floating revisit badge ---------- */

/*
 * The badge that reopens this dialog, fixed bottom-left on every page except
 * single product (style.css hides it there so it cannot sit over the sticky
 * add-to-cart).
 *
 * CookieYes writes its colour inline as #0056A7 — a blue that is not ours — and
 * style.css used to carry a one-off `0 5px 15px rgba(0,0,0,.3)` shadow for it,
 * the only place in the theme using that value. Both are replaced here with the
 * accent and the shared elevation scale.
 */
.cky-btn-revisit-wrapper {
	background-color: var(--kw-accent, #34aeeb) !important;
	border-radius: var(--kw-radius-pill, 999px) !important;
	box-shadow: var(--kw-shadow-raised, 0 8px 24px rgba(0, 0, 0, .08)) !important;
	transition: background-color 150ms ease-out;
}

.cky-btn-revisit-wrapper:hover {
	background-color: var(--kw-accent-dark, #2a8bbc) !important;
}

/*
 * The button fills its wrapper rather than carrying its own 44px minimum: the
 * wrapper is the 45px circle a finger actually lands on, and sizing the child
 * larger would push it out of round.
 */
.cky-btn-revisit-wrapper .cky-btn-revisit {
	width: 100% !important;
	height: 100% !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cky-btn-revisit:focus-visible {
	outline: 2px solid var(--kw-accent-dark, #2a8bbc);
	outline-offset: 3px;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.cky-btn,
	.cky-btn-close,
	.cky-btn-revisit-wrapper {
		transition: none;
	}
}