/* VS Kolačići — banner + preferences. Lightweight, accessible, responsive. */

/* The `hidden` attribute must always win, even over our display:flex rules. */
.vscc[hidden], .vscc-modal[hidden], .vscc-fab[hidden], #vscc-fab[hidden] { display: none !important; }

.vscc, .vscc * { box-sizing: border-box; }
.vscc {
	--vscc-accent: #8B35D6;
	--vscc-bg: #ffffff;
	--vscc-fg: #1e1230;
	--vscc-muted: #5b5570;
	--vscc-border: rgba(20,10,40,.12);
	--vscc-radius: 16px;
	--vscc-shadow: 0 18px 50px rgba(20,10,40,.22);
	position: fixed;
	z-index: 2147483000;
	font-family: inherit;
	color: var(--vscc-fg);
	line-height: 1.5;
}

/* dark */
.vscc--dark, .vscc--auto:is([data-x]) { }
@media (prefers-color-scheme: dark) {
	.vscc--auto {
		--vscc-bg: #1a1226;
		--vscc-fg: #f3eefb;
		--vscc-muted: #b9adcf;
		--vscc-border: rgba(255,255,255,.14);
		--vscc-shadow: 0 18px 50px rgba(0,0,0,.5);
	}
}
.vscc--dark {
	--vscc-bg: #1a1226;
	--vscc-fg: #f3eefb;
	--vscc-muted: #b9adcf;
	--vscc-border: rgba(255,255,255,.14);
	--vscc-shadow: 0 18px 50px rgba(0,0,0,.5);
}

/* ---------- first-layer banner ---------- */
.vscc-banner {
	background: var(--vscc-bg);
	border: 1px solid var(--vscc-border);
	border-radius: var(--vscc-radius);
	box-shadow: var(--vscc-shadow);
	padding: 20px 22px;
	width: min(440px, calc(100vw - 32px));
}
.vscc--box { inset: auto auto 20px 20px; }
.vscc--box.vscc--right { inset: auto 20px 20px auto; }
.vscc--box.vscc--center { inset: auto 0 20px 0; margin: 0 auto; }
.vscc--bar .vscc-banner {
	width: 100%;
	max-width: 1200px;
	display: flex; align-items: center; gap: 24px;
	border-radius: var(--vscc-radius);
}
.vscc--bar { inset: auto 0 16px 0; margin: 0 auto; width: min(1200px, calc(100vw - 24px)); }
.vscc--bar .vscc-actions { margin: 0; flex: 0 0 auto; }

.vscc-h { font-size: 18px; font-weight: 800; margin: 0 0 8px; color: var(--vscc-fg); }
.vscc-p { font-size: 14px; color: var(--vscc-muted); margin: 0; }
.vscc-links { display: block; margin-top: 8px; }
.vscc-links a { color: var(--vscc-accent); text-decoration: underline; margin-right: 12px; }

.vscc-actions {
	display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px;
}

/* Buttons — Accept and Reject are EQUAL prominence (legal requirement). */
.vscc-btn {
	appearance: none; border: 0; cursor: pointer;
	font: inherit; font-weight: 700; font-size: 14px;
	padding: 11px 18px; border-radius: 12px;
	transition: transform .15s ease, filter .15s ease, background .15s ease;
	flex: 1 1 auto; text-align: center; min-width: 120px;
}
.vscc-btn:hover { transform: translateY(-1px); }
.vscc-btn:focus-visible { outline: 3px solid var(--vscc-accent); outline-offset: 2px; }

.vscc-btn--accept { background: var(--vscc-accent); color: #fff; }
.vscc-btn--accept:hover { filter: brightness(1.06); }
.vscc-btn--reject {
	background: color-mix(in srgb, var(--vscc-fg) 12%, transparent);
	color: var(--vscc-fg);
}
.vscc-btn--reject:hover { background: color-mix(in srgb, var(--vscc-fg) 20%, transparent); }
.vscc-btn--ghost {
	background: transparent; color: var(--vscc-muted);
	text-decoration: underline; flex: 0 0 auto; min-width: 0; padding: 11px 12px;
}

/* ---------- second-layer modal ---------- */
.vscc-modal { position: fixed; inset: 0; z-index: 2147483001; display: flex; align-items: center; justify-content: center; }
.vscc-modal-scrim { position: absolute; inset: 0; background: rgba(15,8,28,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.vscc-modal-card {
	position: relative; z-index: 1;
	background: var(--vscc-bg); color: var(--vscc-fg);
	width: min(560px, calc(100vw - 24px)); max-height: min(86vh, 720px);
	display: flex; flex-direction: column;
	border-radius: var(--vscc-radius); box-shadow: var(--vscc-shadow);
	overflow: hidden;
}
.vscc-modal-head, .vscc-modal-foot { padding: 18px 22px; }
.vscc-modal-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--vscc-border); }
.vscc-x { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--vscc-muted); }
.vscc-modal-body { padding: 6px 22px; overflow-y: auto; }
.vscc-modal-foot { display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--vscc-border); }

.vscc-cat { padding: 16px 0; border-bottom: 1px solid var(--vscc-border); }
.vscc-cat:last-child { border-bottom: 0; }
.vscc-cat-top { display: flex; align-items: center; gap: 12px; }
.vscc-cat-name { font-weight: 700; font-size: 15px; }
.vscc-always { font-style: normal; font-weight: 600; font-size: 11px; color: var(--vscc-accent); background: color-mix(in srgb, var(--vscc-accent) 14%, transparent); padding: 3px 8px; border-radius: 20px; margin-left: 8px; }
.vscc-cat-desc { margin: 8px 0 0 62px; font-size: 13px; color: var(--vscc-muted); }

/* toggle switch */
.vscc-switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.vscc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.vscc-slider { position: absolute; inset: 0; background: color-mix(in srgb, var(--vscc-fg) 20%, transparent); border-radius: 20px; transition: background .2s; }
.vscc-slider::before { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.vscc-switch input:checked + .vscc-slider { background: var(--vscc-accent); }
.vscc-switch input:checked + .vscc-slider::before { transform: translateX(20px); }
.vscc-switch input:disabled { cursor: not-allowed; }
.vscc-switch input:disabled + .vscc-slider { opacity: .7; }
.vscc-switch input:focus-visible + .vscc-slider { outline: 3px solid var(--vscc-accent); outline-offset: 2px; }

/* ---------- floating manage button ---------- */
.vscc-fab {
	position: fixed; left: 18px; bottom: 18px; z-index: 2147482999;
	width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
	background: var(--vscc-accent); color: #fff; font-size: 22px; line-height: 1;
	box-shadow: 0 8px 24px rgba(20,10,40,.28);
	display: flex; align-items: center; justify-content: center;
	transition: transform .15s ease;
}
.vscc-fab:hover { transform: scale(1.08); }
.vscc-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
	.vscc--box, .vscc--bar { inset: auto 0 0 0; width: 100%; margin: 0; }
	.vscc-banner { width: 100%; border-radius: 16px 16px 0 0; }
	.vscc--bar .vscc-banner { flex-direction: column; align-items: stretch; gap: 14px; }
	.vscc-actions { margin-top: 14px; }
	.vscc-btn { flex: 1 1 100%; }
	.vscc-btn--ghost { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.vscc-btn, .vscc-fab, .vscc-slider, .vscc-slider::before { transition: none; }
}