/**
 * SlimConsent — Stylesheet
 *
 * Centered dialog with tab navigation (Cookiebot-style).
 * Uses CSS custom properties for theming (accent set dynamically from PHP/JS).
 * Supports dark mode via prefers-color-scheme.
 */

/* ── Custom properties ───────────────────────────────────────────────── */

:root {
	--sc-accent:       #2563eb;
	--sc-bg:           #ffffff;
	--sc-text:         #1f2937;
	--sc-text-muted:   #6b7280;
	--sc-border:       #e5e7eb;
	--sc-shadow:       0 24px 64px rgba(0, 0, 0, 0.18);
	--sc-radius:       8px;
	--sc-z:            99999;
	--sc-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	                   Helvetica, Arial, sans-serif;
	--sc-transition:   0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
	:root {
		--sc-bg:         #1e293b;
		--sc-text:       #f1f5f9;
		--sc-text-muted: #94a3b8;
		--sc-border:     #334155;
		--sc-shadow:     0 24px 64px rgba(0, 0, 0, 0.55);
	}
}

/* ── Reset (scoped) ──────────────────────────────────────────────────── */

#slim-consent-dialog * {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

/* ── Overlay ─────────────────────────────────────────────────────────── */

#slim-consent-dialog {
	position:        fixed;
	inset:           0;
	z-index:         var(--sc-z);
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-family:     var(--sc-font);
	font-size:       14px;
	color:           var(--sc-text);
	opacity:         0;
	transition:      opacity var(--sc-transition);
	will-change:     opacity;
}

#slim-consent-dialog.is-visible {
	opacity: 1;
}

#slim-consent-dialog[hidden] {
	display: none;
}

/* Semi-transparent backdrop */
.slim-consent-dialog__backdrop {
	position:               absolute;
	inset:                  0;
	background:             rgba(0, 0, 0, 0.48);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter:        blur(3px);
}

/* ── Card ────────────────────────────────────────────────────────────── */

.slim-consent-dialog__card {
	position:       relative;
	background:     var(--sc-bg);
	border-radius:  var(--sc-radius);
	box-shadow:     var(--sc-shadow);
	width:          90%;
	max-width:      780px;
	max-height:     90vh;
	display:        flex;
	flex-direction: column;
	overflow:       hidden;
	transform:      scale(0.96) translateY(12px);
	transition:     transform var(--sc-transition);
	outline:        none;
	will-change:    transform;
}

#slim-consent-dialog.is-visible .slim-consent-dialog__card {
	transform: scale(1) translateY(0);
}

/* ── Logo header ─────────────────────────────────────────────────────── */

.slim-consent-dialog__header {
	display:         flex;
	justify-content: flex-end;
	align-items:     center;
	padding:         14px 20px 12px;
	border-bottom:   1px solid var(--sc-border);
	flex-shrink:     0;
}

/* WP custom logo: constrain height, remove border */
.slim-consent-dialog__logo a {
	display:         inline-flex;
	align-items:     center;
	pointer-events:  none; /* logo is decorative inside dialog */
}

.slim-consent-dialog__logo img {
	max-height: 60px;
	width:      auto;
	display:    block;
}

.slim-consent-dialog__site-name {
	font-size:   13px;
	font-weight: 700;
	color:       var(--sc-text-muted);
	letter-spacing: 0.01em;
}

/* ── Tab navigation ──────────────────────────────────────────────────── */

.slim-consent-tabs {
	display:      flex;
	border-bottom: 1px solid var(--sc-border);
	padding:      0 20px;
	flex-shrink:  0;
}

#slim-consent-dialog .slim-consent-tab {
	background:    none;
	border:        none;
	border-bottom: 2px solid transparent;
	padding:       11px 14px;
	font-size:     13px;
	font-weight:   500;
	font-family:   var(--sc-font);
	color:         var(--sc-text-muted);
	cursor:        pointer;
	margin-bottom: -1px;
	transition:    color 0.15s, border-color 0.15s;
	white-space:   nowrap;
	text-decoration: none;
	outline:       none;
}

#slim-consent-dialog .slim-consent-tab.is-active {
	color:               var(--sc-accent);
	border-bottom-color: var(--sc-accent);
	font-weight:         600;
}

#slim-consent-dialog .slim-consent-tab:hover:not(.is-active) {
	color:      var(--sc-text);
	background: none;
}

#slim-consent-dialog .slim-consent-tab:focus-visible {
	outline:        2px solid var(--sc-accent);
	outline-offset: -2px;
	border-radius:  2px;
}

/* ── Panels ──────────────────────────────────────────────────────────── */

.slim-consent-panel {
	flex:       1;
	overflow-y: auto;
	padding:    22px 24px 0;
	min-height: 0;
}

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

/* Scrollbar (WebKit) */
.slim-consent-panel::-webkit-scrollbar       { width: 5px; }
.slim-consent-panel::-webkit-scrollbar-track { background: transparent; }
.slim-consent-panel::-webkit-scrollbar-thumb { background: var(--sc-border); border-radius: 10px; }

.slim-consent-panel__title {
	font-size:   17px;
	font-weight: 700;
	margin:      0 0 10px;
	color:       var(--sc-text);
}

.slim-consent-panel__body {
	font-size:   13px;
	line-height: 1.65;
	color:       var(--sc-text-muted);
	margin:      0;
}

.slim-consent-panel__body a {
	color:           var(--sc-accent);
	text-decoration: underline;
}

.slim-consent-panel__intro {
	font-size:   13px;
	line-height: 1.6;
	color:       var(--sc-text-muted);
	margin:      0 0 14px;
}

.slim-consent-panel__about p {
	font-size:   13px;
	line-height: 1.65;
	color:       var(--sc-text-muted);
	margin:      0 0 12px;
}

/* ── Category list ───────────────────────────────────────────────────── */

.slim-consent-categories {
	display:        flex;
	flex-direction: column;
	gap:            8px;
	margin-bottom:  6px;
}

.slim-consent-category {
	display:       flex;
	align-items:   flex-start;
	gap:           14px;
	padding:       12px 14px;
	border:        1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	transition:    border-color 0.15s;
}

.slim-consent-category:hover {
	border-color: var(--sc-accent);
}

.slim-consent-category__info {
	flex: 1;
}

.slim-consent-category__label {
	font-size:   13px;
	font-weight: 600;
	margin:      0 0 3px;
	color:       var(--sc-text);
}

.slim-consent-category__desc {
	font-size:   12px;
	color:       var(--sc-text-muted);
	margin:      0 0 5px;
	line-height: 1.5;
}

.slim-consent-category__badge {
	display:        inline-block;
	font-size:      10px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var(--sc-text-muted);
	background:     var(--sc-border);
	padding:        2px 6px;
	border-radius:  3px;
}

/* ── Toggle switch ───────────────────────────────────────────────────── */

.slim-consent-toggle {
	position:    relative;
	flex-shrink: 0;
	width:       44px;
	height:      24px;
	margin-top:  2px;
}

.slim-consent-toggle input {
	position: absolute;
	opacity:  0;
	width:    0;
	height:   0;
}

.slim-consent-toggle__track {
	position:      absolute;
	inset:         0;
	background:    var(--sc-border);
	border-radius: 12px;
	cursor:        pointer;
	transition:    background 0.2s ease;
}

.slim-consent-toggle__track::after {
	content:       '';
	position:      absolute;
	top:           3px;
	left:          3px;
	width:         18px;
	height:        18px;
	border-radius: 50%;
	background:    #ffffff;
	box-shadow:    0 1px 3px rgba(0, 0, 0, 0.25);
	transition:    transform 0.2s ease;
}

.slim-consent-toggle input:checked + .slim-consent-toggle__track {
	background: var(--sc-accent);
}

.slim-consent-toggle input:checked + .slim-consent-toggle__track::after {
	transform: translateX(20px);
}

.slim-consent-toggle input:disabled + .slim-consent-toggle__track {
	opacity: 0.55;
	cursor:  not-allowed;
}

.slim-consent-toggle input:focus-visible + .slim-consent-toggle__track {
	outline:        2px solid var(--sc-accent);
	outline-offset: 2px;
}

/* ── Dialog footer (always visible) ─────────────────────────────────── */

.slim-consent-dialog__footer {
	display:      flex;
	gap:          10px;
	padding:      16px 24px;
	border-top:   1px solid var(--sc-border);
	flex-shrink:  0;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

#slim-consent-dialog .slim-consent-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	flex:            1;
	padding:         10px 16px;
	border-radius:   6px;
	font-size:       13px;
	font-weight:     600;
	font-family:     var(--sc-font);
	line-height:     1;
	white-space:     nowrap;
	cursor:          pointer;
	border:          1.5px solid transparent;
	outline:         none;
	text-decoration: none;
	transition:      background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#slim-consent-dialog .slim-consent-btn:focus-visible {
	outline:        2px solid var(--sc-accent);
	outline-offset: 2px;
}

/* Accept — accent fill */
#slim-consent-dialog .slim-consent-btn--accept {
	background:   var(--sc-accent);
	color:        #ffffff;
	border-color: var(--sc-accent);
}

#slim-consent-dialog .slim-consent-btn--accept:hover {
	background:   color-mix(in srgb, var(--sc-accent) 85%, #000);
	border-color: color-mix(in srgb, var(--sc-accent) 85%, #000);
	color:        #ffffff;
}

#slim-consent-dialog .slim-consent-btn--accept:active {
	background:   color-mix(in srgb, var(--sc-accent) 75%, #000);
	border-color: color-mix(in srgb, var(--sc-accent) 75%, #000);
	color:        #ffffff;
}

/* Secondary — accent outline, transparent fill */
#slim-consent-dialog .slim-consent-btn--secondary {
	background:   transparent;
	color:        var(--sc-accent);
	border-color: var(--sc-accent);
}

#slim-consent-dialog .slim-consent-btn--secondary:hover {
	background: color-mix(in srgb, var(--sc-accent) 10%, transparent);
	color:      var(--sc-accent);
}

#slim-consent-dialog .slim-consent-btn--secondary:active {
	background: color-mix(in srgb, var(--sc-accent) 20%, transparent);
	color:      var(--sc-accent);
}

/* Middle button: show arrow when in settings mode */
#slim-consent-middle[data-sc-mode="settings"]::after {
	content: ' ›';
}

/* ── Mobile (≤ 540 px) ───────────────────────────────────────────────── */

@media (max-width: 540px) {
	.slim-consent-dialog__card {
		width:         100%;
		max-width:     100%;
		max-height:    100%;
		border-radius: 0;
		border-top-left-radius:  var(--sc-radius);
		border-top-right-radius: var(--sc-radius);
		align-self:    flex-end;
	}

	#slim-consent-dialog {
		align-items: flex-end;
	}

	.slim-consent-dialog__footer {
		flex-wrap: wrap;
	}

	.slim-consent-btn {
		flex: 1 1 calc(50% - 5px);
		padding: 11px 10px;
	}

	.slim-consent-btn--accept {
		flex: 1 1 100%;
		order: -1;
	}
}

/* ── Reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	#slim-consent-dialog,
	.slim-consent-dialog__card {
		transition: none;
	}
}