/**
 * Bulgaro GDPR — banner styles.
 * Theme system: every visual value comes from CSS custom properties,
 * set by .bgdpr-theme-*. Shape system: .bgdpr-shape-* (sharp|soft|round|cut|leaf).
 */

/* ---------- base ---------- */
#bgdpr-banner[hidden],
#bgdpr-revisit[hidden] {
	display: none !important;
}

#bgdpr-banner {
	position: fixed;
	z-index: 999999;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

/* v0.10.3 fix: class-level specificity (was #bgdpr-banner *) so our authored
   paddings/margins below actually apply — the ID-level reset was zeroing them. */
.bgdpr-banner *,
.bgdpr-banner *::before,
.bgdpr-banner *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Frame/inner layers: for "cut" shape the frame draws the border edge. */
.bgdpr-frame {
	padding: 0;
	background: transparent;
}

.bgdpr-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: var(--bgdpr-bg);
	border: 1px solid var(--bgdpr-border);
	box-shadow: var(--bgdpr-shadow);
}

/* v0.10.3: banner icon removed for a cleaner, text-first layout (all devices). */
.bgdpr-icon {
	display: none;
}

.bgdpr-view {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1;
	min-width: 0;
}

.bgdpr-view[hidden] {
	display: none !important;
}

.bgdpr-text {
	flex: 1;
	min-width: 0;
}

.bgdpr-title {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--bgdpr-title);
	margin-bottom: 2px;
}

.bgdpr-desc {
	font-size: 12px;
	line-height: 1.45;
	color: var(--bgdpr-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bgdpr-privacy {
	color: var(--bgdpr-link);
	text-decoration: none;
}

.bgdpr-privacy:hover {
	text-decoration: underline;
}

.bgdpr-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
}

.bgdpr-btn {
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	padding: 8px 16px;
	min-height: 38px;
	cursor: pointer;
	border: none;
	background: none;
	white-space: nowrap;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

/* v0.10.3: visible keyboard focus on all banner buttons. */
.bgdpr-btn:focus-visible {
	outline: 2px solid var(--bgdpr-link);
	outline-offset: 2px;
	border-radius: 4px;
}

.bgdpr-btn-primary {
	background: var(--bgdpr-btn-bg);
	color: var(--bgdpr-btn-text);
}

.bgdpr-btn-primary:hover {
	background: var(--bgdpr-btn-bg-hover);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px var(--bgdpr-btn-hover-shadow, rgba(0,0,0,.25));
}

.bgdpr-btn-ghost {
	background: var(--bgdpr-ghost-bg);
	color: var(--bgdpr-ghost-text);
	border: 1px solid var(--bgdpr-ghost-border);
}

.bgdpr-btn-ghost:hover {
	border-color: var(--bgdpr-ghost-border-hover);
	transform: translateY(-1px);
}

.bgdpr-btn-link {
	background: none;
	border: none;
	color: var(--bgdpr-link);
	font-size: 12px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 8px 2px;
}

.bgdpr-btn-link:hover {
	color: var(--bgdpr-link-hover);
}

/* ---------- preferences view ---------- */
.bgdpr-view-prefs {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.bgdpr-cats {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
	margin: 0;
	padding: 0;
}

.bgdpr-cat {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4.5px 0;
	border-bottom: 1px solid var(--bgdpr-cat-border);
}

/* v0.10.3: the whole row (switch + name) is one clickable label.
   text-transform/letter-spacing reset: themes (e.g. Divi) style <label> globally. */
.bgdpr-cat-label {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	cursor: pointer;
	border-radius: 4px;
	text-transform: none;
	letter-spacing: normal;
	font-weight: inherit;
}

.bgdpr-cat-label:has(input:disabled) {
	cursor: default;
}

/* subtle switch feedback on row hover */
.bgdpr-cat-label:hover .bgdpr-switch input:not(:disabled) + .bgdpr-slider {
	filter: brightness(1.08);
}

.bgdpr-cat-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--bgdpr-title);
}

.bgdpr-always {
	margin-left: auto;
	font-size: 11px;
	font-style: italic;
	color: var(--bgdpr-text);
}

.bgdpr-switch {
	position: relative;
	width: 40px;
	height: 22px;
	flex: none;
}

.bgdpr-switch input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.bgdpr-switch input:disabled {
	cursor: not-allowed;
}

.bgdpr-slider {
	position: absolute;
	inset: 0;
	background: var(--bgdpr-toggle-bg);
	border-radius: 22px;
	transition: background .2s ease;
	pointer-events: none;
}

.bgdpr-slider::before {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform .2s ease;
	box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

.bgdpr-switch input:checked + .bgdpr-slider {
	background: var(--bgdpr-toggle-on);
}

.bgdpr-switch input:checked + .bgdpr-slider::before {
	transform: translateX(18px);
}

.bgdpr-switch input:disabled + .bgdpr-slider {
	background: var(--bgdpr-toggle-locked);
	opacity: .75;
}

/* v0.10.3: visible keyboard focus on the toggle. */
.bgdpr-switch input:focus-visible + .bgdpr-slider {
	outline: 2px solid var(--bgdpr-link);
	outline-offset: 2px;
}

/* ---------- positions ---------- */
/* v0.10.3 fix: 620px → 720px so padded buttons + longer translations fit one row. */
.bgdpr-pos-bottom {
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	width: min(720px, calc(100vw - 32px));
}

.bgdpr-pos-top {
	left: 50%;
	top: 20px;
	transform: translateX(-50%);
	width: min(720px, calc(100vw - 32px));
}

.bgdpr-pos-modal {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(560px, calc(100vw - 32px));
}

.bgdpr-pos-modal .bgdpr-inner,
.bgdpr-pos-modal .bgdpr-view {
	flex-direction: column;
	align-items: stretch;
}

.bgdpr-pos-modal .bgdpr-actions {
	justify-content: flex-start;
	flex-wrap: wrap;
}

.bgdpr-pos-float-left,
.bgdpr-pos-float-right {
	bottom: 20px;
	width: min(400px, calc(100vw - 32px));
}

.bgdpr-pos-float-left { left: 20px; }
.bgdpr-pos-float-right { right: 20px; }

.bgdpr-pos-float-left .bgdpr-inner,
.bgdpr-pos-float-right .bgdpr-inner,
.bgdpr-pos-float-left .bgdpr-view,
.bgdpr-pos-float-right .bgdpr-view {
	flex-direction: column;
	align-items: stretch;
}

.bgdpr-pos-float-left .bgdpr-actions,
.bgdpr-pos-float-right .bgdpr-actions {
	flex-wrap: wrap;
}

/* Main view of the float cards stays compact: 1-column category list. */
.bgdpr-pos-float-left .bgdpr-cats,
.bgdpr-pos-float-right .bgdpr-cats {
	grid-template-columns: 1fr;
}

/* v0.10.8: the Preferences view is identical in every position — on
   desktop/tablet the float cards widen to the bottom-bar width and use the
   same 2-column category grid. Mobile (<=720px) stays 1-column everywhere. */
@media (min-width: 721px) {
	.bgdpr-pos-float-left.is-prefs,
	.bgdpr-pos-float-right.is-prefs {
		width: min(720px, calc(100vw - 32px));
	}

	.bgdpr-pos-float-left.is-prefs .bgdpr-cats,
	.bgdpr-pos-float-right.is-prefs .bgdpr-cats {
		grid-template-columns: 1fr 1fr;
	}
}

/* v0.10.3: ~10px rhythm between text and the primary action in stacked layouts. */
.bgdpr-pos-modal .bgdpr-view,
.bgdpr-pos-float-left .bgdpr-view,
.bgdpr-pos-float-right .bgdpr-view {
	gap: 10px;
}

/* subtle entrance */
@keyframes bgdpr-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

#bgdpr-banner:not([hidden]) {
	animation: bgdpr-in .25s ease;
}

/* ---------- revisit button (base; pill variant below is the only style since v0.10.3) ---------- */
#bgdpr-revisit {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 999998;
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
	opacity: .78;
	filter: drop-shadow(0 3px 8px rgba(6, 15, 45, .28));
	transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}

#bgdpr-revisit:hover {
	opacity: 1;
	transform: translateY(-2px) scale(1.06);
	filter: drop-shadow(0 7px 16px rgba(6, 15, 45, .38));
}

#bgdpr-revisit:focus-visible {
	opacity: 1;
	outline: 2px solid rgba(47, 107, 255, .65);
	outline-offset: 3px;
	border-radius: 6px;
}

/* revisit variant: pill with label — v0.10.3: the only style (icon variant removed) */
#bgdpr-revisit.bgdpr-revisit-pill {
	align-items: center;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--bgdpr-border);
	background: var(--bgdpr-bg);
	color: var(--bgdpr-title);
	box-shadow: var(--bgdpr-shadow);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	opacity: 1;
	filter: none;
}

#bgdpr-revisit.bgdpr-revisit-pill:hover {
	transform: translateY(-1px);
	filter: none;
}

/* ---------- mobile ---------- */
@media (max-width: 720px) {
	#bgdpr-banner {
		font-size: 13px;
	}

	.bgdpr-pos-bottom,
	.bgdpr-pos-top,
	.bgdpr-pos-modal,
	.bgdpr-pos-float-left,
	.bgdpr-pos-float-right {
		width: calc(100vw - 24px);
	}

	/* v0.10.3: respect device safe-area (notch / home indicator). */
	.bgdpr-pos-bottom,
	.bgdpr-pos-float-left,
	.bgdpr-pos-float-right {
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}

	.bgdpr-pos-top {
		top: calc(12px + env(safe-area-inset-top, 0px));
	}

	.bgdpr-pos-float-left { left: calc(12px + env(safe-area-inset-left, 0px)); }
	.bgdpr-pos-float-right { right: calc(12px + env(safe-area-inset-right, 0px)); }

	.bgdpr-inner,
	.bgdpr-view {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.bgdpr-inner {
		padding: 14px 16px;
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
		overflow-y: auto;
	}

	.bgdpr-title {
		font-size: 14px;
	}

	.bgdpr-desc {
		-webkit-line-clamp: 3;
	}

	/* Buttons: primary full-width on its own row, the other two share one. */
	.bgdpr-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}

	.bgdpr-actions .bgdpr-btn-primary {
		flex: 1 1 100%;
	}

	.bgdpr-actions .bgdpr-btn-ghost,
	.bgdpr-actions .bgdpr-btn-link {
		flex: 1 1 0;
		text-align: center;
	}

	.bgdpr-cats {
		grid-template-columns: 1fr;
	}

	.bgdpr-cat {
		padding: 3.5px 0;
	}

	#bgdpr-revisit {
		left: calc(12px + env(safe-area-inset-left, 0px));
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}

	#bgdpr-revisit.bgdpr-revisit-pill {
		padding: 7px 12px;
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#bgdpr-banner:not([hidden]) {
		animation: none;
	}
	.bgdpr-btn,
	#bgdpr-revisit,
	.bgdpr-slider,
	.bgdpr-slider::before {
		transition: none;
	}
}

/* ============================================================
 * THEME SYSTEM — 15 selectable themes (v0.7.0)
 * Each theme only sets CSS custom properties; layout is shared.
 * ============================================================ */

/* 3. Bulgarian Flag (default) — diagonal 40° white → green → red */
.bgdpr-theme-bulgarian-flag {
	--bgdpr-bg: linear-gradient(40deg, #f7f8f6 0%, #eef2ee 30%, #0e8f68 46%, #0a7d5c 58%, #d8341f 72%, #c02a16 100%);
	--bgdpr-border: rgba(255, 255, 255, 0.55);
	--bgdpr-shadow: 0 18px 45px rgba(10, 40, 30, 0.35);
	--bgdpr-title: #0b1e46;
	--bgdpr-text: rgba(11, 30, 70, 0.85);
	--bgdpr-link: #0b1e46;
	--bgdpr-link-hover: #123063;
	--bgdpr-btn-bg: linear-gradient(180deg, #123063, #0b1e46);
	--bgdpr-btn-bg-hover: linear-gradient(180deg, #1a3c78, #123063);
	--bgdpr-btn-text: #ffffff;
	--bgdpr-btn-hover-shadow: 0 6px 18px rgba(11, 30, 70, 0.4);
	--bgdpr-ghost-bg: rgba(255, 255, 255, 0.55);
	--bgdpr-ghost-text: #0b1e46;
	--bgdpr-ghost-border: rgba(11, 30, 70, 0.28);
	--bgdpr-ghost-border-hover: rgba(11, 30, 70, 0.45);
	--bgdpr-toggle-bg: rgba(255, 255, 255, 0.45);
	--bgdpr-toggle-on: #0a7d5c;
	--bgdpr-toggle-locked: rgba(11, 30, 70, 0.3);
	--bgdpr-cat-border: rgba(255, 255, 255, 0.45);
}
.bgdpr-theme-bulgarian-flag .bgdpr-title {
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* Readability over the green/red zones: white halo on texts,
   solid white ghost button, white link with shadow. */
.bgdpr-theme-bulgarian-flag .bgdpr-desc,
.bgdpr-theme-bulgarian-flag .bgdpr-cat-name,
.bgdpr-theme-bulgarian-flag .bgdpr-always {
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.bgdpr-theme-bulgarian-flag .bgdpr-btn-ghost {
	background: rgba(255, 255, 255, 0.92);
	color: #0b1e46;
	border-color: transparent;
}
.bgdpr-theme-bulgarian-flag .bgdpr-btn-ghost:hover {
	background: #ffffff;
}
.bgdpr-theme-bulgarian-flag .bgdpr-btn-link {
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(11, 30, 70, 0.5);
}
.bgdpr-theme-bulgarian-flag .bgdpr-btn-link:hover {
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(11, 30, 70, 0.7);
}

/* 9. Pure White — classic light */
.bgdpr-theme-pure-white {
	--bgdpr-bg: #ffffff;
	--bgdpr-border: #e2e5ec;
	--bgdpr-shadow: 0 18px 45px rgba(20, 30, 60, 0.16);
	--bgdpr-title: #16213c;
	--bgdpr-text: #55617a;
	--bgdpr-link: #1d4fd7;
	--bgdpr-link-hover: #173fac;
	--bgdpr-btn-bg: linear-gradient(180deg, #1d4fd7, #173fac);
	--bgdpr-btn-bg-hover: linear-gradient(180deg, #2b5de4, #1d4fd7);
	--bgdpr-btn-text: #ffffff;
	--bgdpr-btn-hover-shadow: 0 6px 18px rgba(29, 79, 215, 0.3);
	--bgdpr-ghost-bg: #f4f6fb;
	--bgdpr-ghost-text: #16213c;
	--bgdpr-ghost-border: #dde2ee;
	--bgdpr-ghost-border-hover: #c3cbde;
	--bgdpr-toggle-bg: #d8dde9;
	--bgdpr-toggle-on: #1d4fd7;
	--bgdpr-toggle-locked: #c6cddd;
	--bgdpr-cat-border: #e6e9f2;
}

/* 10. Slate Gray — classic dark */
.bgdpr-theme-slate-gray {
	--bgdpr-bg: #3c4250;
	--bgdpr-border: rgba(255, 255, 255, 0.14);
	--bgdpr-shadow: 0 18px 45px rgba(10, 12, 18, 0.5);
	--bgdpr-title: #f5f6f8;
	--bgdpr-text: #c2c7d1;
	--bgdpr-link: #9db4e8;
	--bgdpr-link-hover: #bcccf2;
	--bgdpr-btn-bg: linear-gradient(180deg, #eef0f4, #d6dae2);
	--bgdpr-btn-bg-hover: linear-gradient(180deg, #ffffff, #e2e6ee);
	--bgdpr-btn-text: #2c3140;
	--bgdpr-btn-hover-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
	--bgdpr-ghost-bg: transparent;
	--bgdpr-ghost-text: #f5f6f8;
	--bgdpr-ghost-border: rgba(245, 246, 248, 0.25);
	--bgdpr-ghost-border-hover: rgba(245, 246, 248, 0.45);
	--bgdpr-toggle-bg: rgba(255, 255, 255, 0.2);
	--bgdpr-toggle-on: #eef0f4;
	--bgdpr-toggle-locked: rgba(245, 246, 248, 0.35);
	--bgdpr-cat-border: rgba(245, 246, 248, 0.14);
}

/* 14. Sky Light — light blue on white */
.bgdpr-theme-sky-light {
	--bgdpr-bg: #ffffff;
	--bgdpr-border: rgba(2, 132, 199, 0.25);
	--bgdpr-shadow: 0 18px 45px rgba(12, 74, 110, 0.18);
	--bgdpr-title: #0c4a6e;
	--bgdpr-text: #476381;
	--bgdpr-link: #0284c7;
	--bgdpr-link-hover: #0369a1;
	--bgdpr-btn-bg: linear-gradient(180deg, #0ea5e9, #0284c7);
	--bgdpr-btn-bg-hover: linear-gradient(180deg, #1fb0f0, #0a92d3);
	--bgdpr-btn-text: #ffffff;
	--bgdpr-btn-hover-shadow: 0 6px 18px rgba(14, 165, 233, 0.35);
	--bgdpr-ghost-bg: transparent;
	--bgdpr-ghost-text: #0c4a6e;
	--bgdpr-ghost-border: rgba(12, 74, 110, 0.25);
	--bgdpr-ghost-border-hover: rgba(12, 74, 110, 0.45);
	--bgdpr-toggle-bg: rgba(12, 74, 110, 0.15);
	--bgdpr-toggle-on: #0ea5e9;
	--bgdpr-toggle-locked: rgba(12, 74, 110, 0.3);
	--bgdpr-cat-border: rgba(12, 74, 110, 0.12);
}

/* 15. Mint Cream — fresh mint on cream white */
.bgdpr-theme-mint-cream {
	--bgdpr-bg: linear-gradient(180deg, #fbfdf7, #f2f9f1);
	--bgdpr-border: rgba(13, 148, 136, 0.25);
	--bgdpr-shadow: 0 18px 45px rgba(28, 58, 45, 0.15);
	--bgdpr-title: #1c3a2d;
	--bgdpr-text: #5a7268;
	--bgdpr-link: #0d9488;
	--bgdpr-link-hover: #0f766e;
	--bgdpr-btn-bg: linear-gradient(180deg, #34d399, #10b981);
	--bgdpr-btn-bg-hover: linear-gradient(180deg, #45ddaa, #1fc78e);
	--bgdpr-btn-text: #052e22;
	--bgdpr-btn-hover-shadow: 0 6px 18px rgba(52, 211, 153, 0.4);
	--bgdpr-ghost-bg: transparent;
	--bgdpr-ghost-text: #1c3a2d;
	--bgdpr-ghost-border: rgba(28, 58, 45, 0.25);
	--bgdpr-ghost-border-hover: rgba(28, 58, 45, 0.45);
	--bgdpr-toggle-bg: rgba(28, 58, 45, 0.15);
	--bgdpr-toggle-on: #10b981;
	--bgdpr-toggle-locked: rgba(28, 58, 45, 0.3);
	--bgdpr-cat-border: rgba(28, 58, 45, 0.12);
}

/* ============================================================
 * SHAPE SYSTEM — 5 selectable shapes (v0.7.0)
 * ============================================================ */

/* 2. Slightly rounded (10px) */
.bgdpr-shape-soft .bgdpr-inner {
	border-radius: 10px;
}
.bgdpr-shape-soft .bgdpr-btn {
	border-radius: 8px;
}

/* 3. Rounded (20px) */
.bgdpr-shape-round .bgdpr-inner {
	border-radius: 20px;
}
.bgdpr-shape-round .bgdpr-btn {
	border-radius: 14px;
}

/* Default (no shape class): soft rounding */
.bgdpr-inner {
	border-radius: 10px;
}
.bgdpr-btn {
	border-radius: 8px;
}
