/**
 * Cookie GDPR Consent — banner stylesheet
 *
 * BEM naming convention: .cookie-gdpr is the block; __element and --modifier follow.
 * All plugin styles are scoped to .cookie-gdpr or .cookie-gdpr-reopen to avoid leaking
 * into the host theme.
 *
 * Custom properties (CSS variables) are set on :root by PHP (via inline style) and
 * by banner.js so they can be updated at runtime without a full CSS reparse:
 *   --cookie-gdpr-accent       Admin-configured primary colour (default #2563eb)
 *   --cookie-gdpr-accent-dark  Darkened variant used for hover states (computed in JS)
 *
 * The remaining custom properties below are internal to this stylesheet and not
 * overridden by PHP/JS:
 *   --cookie-gdpr-bg       Banner background colour
 *   --cookie-gdpr-text     Primary text colour
 *   --cookie-gdpr-muted    Secondary/description text colour
 *   --cookie-gdpr-border   Border and divider colour
 *   --cookie-gdpr-radius   Corner radius for modal and category cards
 *   --cookie-gdpr-z        z-index for the fixed banner overlay
 *
 * Table of contents:
 *   1. Custom properties
 *   2. Reset (scoped to .cookie-gdpr)
 *   3. Wrapper position  (.cookie-gdpr--bottom / --top / --modal)
 *   4. Overlay           (.cookie-gdpr__overlay)
 *   5. Box               (.cookie-gdpr__box)
 *   6. Desktop bar layout (flex row at ≥768px)
 *   7. Title             (.cookie-gdpr__title)
 *   8. Description       (.cookie-gdpr__description, .cookie-gdpr__policy-link)
 *   9. Categories list   (.cookie-gdpr__categories, .cookie-gdpr__category)
 *  10. Toggle switch      (.cookie-gdpr__toggle, .cookie-gdpr__toggle-input, etc.)
 *  11. Expand button      (.cookie-gdpr__expand-btn)
 *  12. Category panel    (.cookie-gdpr__category-panel, .cookie-gdpr__category-desc)
 *  13. Cookies table     (.cookie-gdpr__cookies-table)
 *  14. Footer / actions  (.cookie-gdpr__footer, .cookie-gdpr__actions)
 *  15. Buttons           (.cookie-gdpr__btn, --primary, --outline, --ghost)
 *  16. Re-open button    (.cookie-gdpr-reopen)
 *  17. Responsive        (@media max-width: 480px)
 */

/* ── 1. Custom properties ───────────────────────────────────────────────────── */
:root {
	--cookie-gdpr-accent:      #2563eb;   /* Overridden at runtime by banner.js */
	--cookie-gdpr-accent-dark: #1d4ed8;   /* Overridden at runtime by banner.js */
	--cookie-gdpr-bg:          #ffffff;
	--cookie-gdpr-text:        #111827;
	--cookie-gdpr-muted:       #6b7280;
	--cookie-gdpr-border:      #e5e7eb;
	--cookie-gdpr-radius:      14px;
	--cookie-gdpr-z:           99999;     /* Must sit above most theme elements */
}

/* ── 2. Reset (scoped) ──────────────────────────────────────────────────────── */

/* Apply border-box only inside the banner to avoid affecting the host theme. */
.cookie-gdpr *,
.cookie-gdpr *::before,
.cookie-gdpr *::after { box-sizing: border-box; }

.cookie-gdpr {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: var( --cookie-gdpr-text );
}

/*
 * Guarantee that [hidden] always hides our elements.
 *
 * Problem: the UA stylesheet's [hidden]{display:none} has specificity (0,1,0) — the
 * same as our position-modifier classes such as .cookie-gdpr--modal{display:flex}.
 * Author CSS beats UA CSS at equal specificity, so setAttribute('hidden','') had no
 * visual effect when the modal position was active, and the banner stayed on screen
 * after any button was clicked.
 *
 * The descendant selector (.cookie-gdpr [hidden]) also covers inner elements:
 * the detail panel, the "Save preferences" button, and per-category panels — all of
 * which are toggled with the hidden attribute by banner.js.
 *
 * !important is used intentionally: it is the only way to guarantee this rule beats
 * both conflicting author rules in our own stylesheet AND any theme CSS that may
 * reset or override [hidden] display behaviour (common in older CSS resets).
 */
.cookie-gdpr[hidden],
.cookie-gdpr-reopen[hidden],
.cookie-gdpr [hidden] { display: none !important; }

/* ── 3. Wrapper position ────────────────────────────────────────────────────── */

.cookie-gdpr {
	position: fixed;
	z-index: var( --cookie-gdpr-z );
	left: 0; right: 0;
}

/* Bar positions: stretch full-width at the edge of the viewport. */
.cookie-gdpr--bottom { bottom: 0; }
.cookie-gdpr--top    { top: 0; }

/* Modal position: fill the entire viewport with a centred box.
 * :not([hidden]) is required because author CSS display:flex beats the UA stylesheet's
 * [hidden]{display:none} at the same specificity — omitting it means setAttribute('hidden')
 * has no visual effect and the banner never disappears when buttons are clicked. */
.cookie-gdpr--modal:not([hidden]) {
	top: 0; bottom: 0;
	display: flex; align-items: center; justify-content: center;
}

/* ── 4. Overlay (modal only) ────────────────────────────────────────────────── */

/* The overlay sits behind .cookie-gdpr__box (z-index: 1) and in front of the page. */
.cookie-gdpr__overlay {
	position: fixed; inset: 0;
	background: rgba( 0, 0, 0, .55 );
	backdrop-filter: blur( 3px );
}

/* ── 5. Box ─────────────────────────────────────────────────────────────────── */

.cookie-gdpr__box {
	background: var( --cookie-gdpr-bg );
	position: relative;
	z-index: 1;  /* Sit above .cookie-gdpr__overlay */
}

/* Bar variants: full width, moderate padding. */
.cookie-gdpr--bottom .cookie-gdpr__box,
.cookie-gdpr--top    .cookie-gdpr__box {
	max-width: 100%;
	padding: 20px 24px;
}

/* Drop shadow faces the correct direction for each bar position. */
.cookie-gdpr--bottom .cookie-gdpr__box { box-shadow: 0 -4px 32px rgba( 0,0,0,.13 ); }
.cookie-gdpr--top    .cookie-gdpr__box { box-shadow:  0 4px 32px rgba( 0,0,0,.13 ); }

/* Modal variant: constrained width, rounded corners, scrollable if content overflows. */
.cookie-gdpr--modal .cookie-gdpr__box {
	width: calc( 100% - 32px );
	max-width: 720px;
	max-height: 90vh;
	overflow-y: auto;
	border-radius: var( --cookie-gdpr-radius );
	padding: 28px 32px;
	box-shadow: 0 24px 64px rgba( 0,0,0,.25 );
}

/* ── 6. Desktop bar layout ──────────────────────────────────────────────────── */

/*
 * On wide screens the bar variants switch from stacked to side-by-side:
 * description on the left (flex: 1) and buttons on the right (flex-shrink: 0).
 * This keeps the bar compact so it does not obscure too much of the page.
 */
@media ( min-width: 768px ) {
	.cookie-gdpr--bottom .cookie-gdpr__box,
	.cookie-gdpr--top    .cookie-gdpr__box {
		display: flex; align-items: flex-start; gap: 24px;
		padding: 18px 32px;
	}
	.cookie-gdpr--bottom .cookie-gdpr__body,
	.cookie-gdpr--top    .cookie-gdpr__body { flex: 1; }
	.cookie-gdpr--bottom .cookie-gdpr__footer,
	.cookie-gdpr--top    .cookie-gdpr__footer { flex-shrink: 0; }
}

/* ── 7. Title ───────────────────────────────────────────────────────────────── */

.cookie-gdpr__title {
	margin: 0 0 6px;
	font-size: 17px; font-weight: 700; line-height: 1.25;
	color: var( --cookie-gdpr-text );
}

/* ── 8. Description ─────────────────────────────────────────────────────────── */

.cookie-gdpr__description {
	margin: 0 0 4px;
	color: var( --cookie-gdpr-muted );
}

.cookie-gdpr__policy-link {
	color: var( --cookie-gdpr-accent );
	text-decoration: underline;
}
.cookie-gdpr__policy-link:hover { text-decoration: none; }

/* ── 9. Categories list ─────────────────────────────────────────────────────── */

.cookie-gdpr__categories { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }

/* Each category is a rounded card with a header row and an expandable detail panel. */
.cookie-gdpr__category {
	border: 1px solid var( --cookie-gdpr-border );
	border-radius: 10px;
	overflow: hidden;  /* Clips the panel border-top to the card's rounded corners */
}

.cookie-gdpr__category-header {
	display: flex; align-items: center;
	padding: 12px 14px; gap: 8px;
	background: #fafafa;
}

/* Toggle label stretches to fill the row so the whole left side is a click target. */
.cookie-gdpr__toggle-label {
	display: flex; align-items: center; justify-content: space-between;
	flex: 1; gap: 10px; cursor: pointer; user-select: none;
}

.cookie-gdpr__category-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cookie-gdpr__category-name { font-weight: 600; }

/* "Zawsze aktywne" pill badge for required categories. */
.cookie-gdpr__badge {
	display: inline-block; padding: 1px 8px;
	border-radius: 99px;
	background: #dcfce7; color: #15803d;
	font-size: 11px; font-weight: 600; line-height: 1.6;
}

/* ── 10. Toggle switch ──────────────────────────────────────────────────────── */

/*
 * Accessible CSS toggle switch pattern:
 *   - The <input type="checkbox"> is visually hidden (opacity: 0, 0×0) but
 *     remains in the tab order so it receives keyboard focus and is announced by
 *     screen readers as a checkbox.
 *   - The adjacent .cookie-gdpr__toggle-track renders the visible pill.
 *   - The :checked state of the hidden input drives the pill colour and thumb
 *     position via the adjacent-sibling combinator (+).
 *   - :focus-visible on the input outlines the track, providing a visible focus
 *     indicator without relying on the browser's default outline on the hidden input.
 */

.cookie-gdpr__toggle { flex-shrink: 0; }

.cookie-gdpr__toggle-input {
	position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}

.cookie-gdpr__toggle-track {
	display: flex; align-items: center;
	width: 46px; height: 26px;
	border-radius: 99px; background: #d1d5db;
	padding: 3px; transition: background .2s;
	cursor: pointer;
}

/* Checked state: track turns accent colour. */
.cookie-gdpr__toggle-input:checked + .cookie-gdpr__toggle-track {
	background: var( --cookie-gdpr-accent );
}

.cookie-gdpr__toggle-thumb {
	width: 20px; height: 20px; border-radius: 50%;
	background: #fff; transition: transform .2s;
	box-shadow: 0 1px 3px rgba( 0,0,0,.22 );
}

/* Checked state: thumb slides to the right. translateX = track width − thumb width − 2×padding = 20px. */
.cookie-gdpr__toggle-input:checked + .cookie-gdpr__toggle-track .cookie-gdpr__toggle-thumb {
	transform: translateX( 20px );
}

/* Visible focus ring on the track when the hidden input receives keyboard focus. */
.cookie-gdpr__toggle-input:focus-visible + .cookie-gdpr__toggle-track {
	outline: 3px solid var( --cookie-gdpr-accent );
	outline-offset: 2px;
}

/* Locked state for required categories: cursor changes to indicate non-interactivity. */
.cookie-gdpr__toggle--locked .cookie-gdpr__toggle-track {
	cursor: not-allowed; opacity: .65;
}

/* ── 11. Expand button ──────────────────────────────────────────────────────── */

.cookie-gdpr__expand-btn {
	background: none; border: none; padding: 5px;
	cursor: pointer; color: var( --cookie-gdpr-muted );
	border-radius: 6px; display: flex; align-items: center;
	transition: color .15s, background .15s;
	flex-shrink: 0;
}
.cookie-gdpr__expand-btn:hover { color: var( --cookie-gdpr-text ); background: #f3f4f6; }

/* Rotate the SVG chevron when the panel is expanded. */
.cookie-gdpr__expand-btn svg { transition: transform .2s; }
.cookie-gdpr__expand-btn.is-expanded svg { transform: rotate( 180deg ); }

/* ── 12. Category panel ─────────────────────────────────────────────────────── */

.cookie-gdpr__category-panel {
	padding: 4px 14px 14px;
	border-top: 1px solid var( --cookie-gdpr-border );
	background: #fff;
}

.cookie-gdpr__category-desc {
	margin: 8px 0 12px;
	color: var( --cookie-gdpr-muted );
	font-size: 13px;
}

/* ── 13. Cookies table ──────────────────────────────────────────────────────── */

.cookie-gdpr__cookies-table { width: 100%; border-collapse: collapse; font-size: 12px; }

.cookie-gdpr__cookies-table th,
.cookie-gdpr__cookies-table td {
	text-align: left; padding: 5px 8px;
	border-bottom: 1px solid var( --cookie-gdpr-border );
}

.cookie-gdpr__cookies-table th { font-weight: 600; color: var( --cookie-gdpr-muted ); background: #f9fafb; }
.cookie-gdpr__cookies-table tr:last-child td { border-bottom: none; }
.cookie-gdpr__cookies-table code { font-size: 11px; }

/* ── 14. Footer / actions ───────────────────────────────────────────────────── */

.cookie-gdpr__footer { margin-top: 16px; }
.cookie-gdpr__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }

/* In bar layout on desktop the footer has no top margin (already beside the body). */
@media ( min-width: 768px ) {
	.cookie-gdpr--bottom .cookie-gdpr__footer,
	.cookie-gdpr--top    .cookie-gdpr__footer { margin-top: 0; }

	/* Stack buttons vertically in the sidebar so they have consistent width. */
	.cookie-gdpr--bottom .cookie-gdpr__actions,
	.cookie-gdpr--top    .cookie-gdpr__actions { flex-direction: column; align-items: stretch; justify-content: center; }
}

/* ── 15. Buttons ────────────────────────────────────────────────────────────── */

/* Base style shared by all three variants. */
.cookie-gdpr__btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 9px 18px; border-radius: 8px;
	font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.25;
	cursor: pointer; border: 2px solid transparent;
	transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
	white-space: nowrap; text-decoration: none;
}

/* High-contrast focus ring for keyboard navigation. */
.cookie-gdpr__btn:focus-visible { outline: 3px solid var( --cookie-gdpr-accent ); outline-offset: 2px; }

/* Primary: solid fill – used for "Zezwól na wszystkie" (highest visual weight). */
.cookie-gdpr__btn--primary {
	background: var( --cookie-gdpr-accent );
	color: #fff;
	border-color: var( --cookie-gdpr-accent );
}
.cookie-gdpr__btn--primary:hover {
	background: var( --cookie-gdpr-accent-dark );
	border-color: var( --cookie-gdpr-accent-dark );
}

/* Outline: transparent fill, accent border – used for "Dostosuj" / "Zapisz preferencje". */
.cookie-gdpr__btn--outline {
	background: transparent;
	color: var( --cookie-gdpr-accent );
	border-color: var( --cookie-gdpr-accent );
}
.cookie-gdpr__btn--outline:hover {
	background: rgba( 37, 99, 235, .08 ); /* fallback: default accent at 8% opacity */
	background: color-mix( in srgb, var( --cookie-gdpr-accent ) 8%, transparent ); /* Chrome 111+, FF 113+, Safari 16.2+ */
}

/* Ghost: minimal style with a light border – used for "Odrzuć wszystkie". */
.cookie-gdpr__btn--ghost {
	background: transparent;
	color: var( --cookie-gdpr-muted );
	border-color: var( --cookie-gdpr-border );
}
.cookie-gdpr__btn--ghost:hover { background: #f3f4f6; color: var( --cookie-gdpr-text ); }

/* ── 16. Re-open button ─────────────────────────────────────────────────────── */

/*
 * Circular floating button in the bottom-left corner. Positioned one z-index level
 * below the banner itself so the banner can overlap it during transitions.
 */
.cookie-gdpr-reopen {
	position: fixed; bottom: 20px; left: 20px;
	z-index: calc( var( --cookie-gdpr-z ) - 1 );
	width: 46px; height: 46px; border-radius: 50%;
	background: var( --cookie-gdpr-accent ); color: #fff;
	border: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 16px rgba( 0,0,0,.22 );
	transition: background .15s, transform .15s, box-shadow .15s;
}
.cookie-gdpr-reopen:hover {
	background: var( --cookie-gdpr-accent-dark );
	transform: scale( 1.06 );
	box-shadow: 0 6px 20px rgba( 0,0,0,.28 );
}
.cookie-gdpr-reopen:focus-visible { outline: 3px solid var( --cookie-gdpr-accent ); outline-offset: 3px; }

/* ── 17. Responsive ─────────────────────────────────────────────────────────── */

/* On very narrow screens the modal box gets reduced padding and buttons go full-width. */
@media ( max-width: 480px ) {
	.cookie-gdpr--modal .cookie-gdpr__box { padding: 20px 16px; }
	.cookie-gdpr__actions { flex-direction: column; }
	.cookie-gdpr__btn { width: 100%; }
}