/* Cookieval - frontend */
.cval-root[hidden]{display:none}
.cval-root{
	--cval-bg:#ffffff;
	--cval-text:#1a1a1a;
	--cval-primary:#1f6feb;
	--cval-primary-text:#ffffff;
	--cval-border:rgba(0,0,0,.12);
	--cval-radius:10px;
	--cval-font:inherit;
	position:fixed;
	z-index:2147483000;
	color:var(--cval-text);
	font-family:var(--cval-font);
	font-size:14px;
	line-height:1.5;
}
.cval-root.cval-auto{ font-family:var(--cval-font, inherit) }

/* ----- Positioner ----- */
.cval-pos-bottom-left{left:16px;right:auto;bottom:16px;top:auto;max-width:460px;width:calc(100% - 32px)}
.cval-pos-bottom-right{right:16px;left:auto;bottom:16px;top:auto;max-width:460px;width:calc(100% - 32px)}
.cval-pos-bottom-center{left:0;right:0;margin-left:auto;margin-right:auto;bottom:16px;top:auto;max-width:560px;width:calc(100% - 32px)}
.cval-pos-top{left:0;right:0;top:0;bottom:auto;max-width:100%;width:100%}

/* ----- Banner basgrund ----- */
.cval-banner{
	background:var(--cval-bg);
	border:1px solid var(--cval-border);
	border-radius:var(--cval-radius);
	box-shadow:0 10px 30px rgba(0,0,0,.12);
	padding:18px;
	box-sizing:border-box;
	max-height:85vh;
	overflow:auto;
}
.cval-pos-top .cval-banner{border-radius:0;border-left:none;border-right:none;border-top:none;padding:14px 18px;max-width:900px;margin:0 auto;box-shadow:0 4px 12px rgba(0,0,0,.08)}

/* ----- STILTEMAN ----- */
/* Modern: liten radius, mjuk skugga, glas-känsla */
.cval-style-modern .cval-banner{
	--cval-radius:14px;
	backdrop-filter:saturate(120%);
	box-shadow:0 12px 36px rgba(0,0,0,.15),0 1px 0 rgba(255,255,255,.05) inset;
}

/* Klassisk: fyrkantig, tydlig kant */
.cval-style-klassisk .cval-banner{
	--cval-radius:2px;
	border-width:2px;
	box-shadow:0 4px 16px rgba(0,0,0,.1);
}
.cval-style-klassisk .cval-title{font-weight:800 !important;letter-spacing:.01em !important}

/* Mjuk: stora avrundade hörn, varm skugga */
.cval-style-mjuk .cval-banner{
	--cval-radius:20px;
	box-shadow:0 16px 40px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);
	padding:22px;
}

/* Minimal: knappt någon skugga, tunnaste kant */
.cval-style-minimal .cval-banner{
	--cval-radius:6px;
	border-width:1px;
	box-shadow:0 2px 8px rgba(0,0,0,.06);
	padding:16px;
}
.cval-style-minimal .cval-cats{background:transparent !important;border:1px solid var(--cval-border);padding:10px}

/* ----- Text ----- */
.cval-title{
	margin:0 0 6px !important;
	font-size:16px !important;
	font-weight:700 !important;
	color:inherit !important;
	font-family:inherit !important;
	line-height:1.3 !important;
	text-transform:none !important;
	letter-spacing:normal !important;
}
.cval-desc{
	margin:0 0 14px !important;
	color:inherit !important;
	opacity:.92 !important;
	font-family:inherit !important;
	font-size:14px !important;
	line-height:1.5 !important;
}
.cval-link{color:var(--cval-primary);text-decoration:underline;margin-left:4px}
.cval-link:hover{opacity:.85}
.cval-text-link{color:var(--cval-primary);text-decoration:underline;font-size:13px;align-self:center}

/* ----- Kategorier ----- */
.cval-cats{display:grid;gap:10px;margin:0 0 14px;padding:12px;background:rgba(0,0,0,.04);border-radius:calc(var(--cval-radius) - 4px)}
.cval-cat{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;cursor:pointer;padding:4px 0}
.cval-cat input{margin-top:4px;accent-color:var(--cval-primary);width:16px;height:16px;flex-shrink:0}
.cval-cat-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;grid-column:2}
.cval-cat-name{font-weight:600}
.cval-cat-required{font-size:11px;background:rgba(0,0,0,.1);padding:2px 8px;border-radius:999px;opacity:.75}
.cval-cat-desc{grid-column:2;font-size:13px;opacity:.8;margin-top:2px}

/* ----- KNAPPLAYOUTER ----- */
.cval-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}

/* Vertikal: knappar staplade */
.cval-layout-vertical .cval-actions{flex-direction:column;align-items:stretch}
.cval-layout-vertical .cval-actions .cval-btn{width:100%;justify-content:center}
.cval-layout-vertical .cval-actions .cval-btn-primary{order:-1}

/* Två-kolumn: text vänster, knappar höger */
.cval-layout-two-col .cval-main{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start}
.cval-layout-two-col .cval-text{grid-column:1}
.cval-layout-two-col .cval-cats{grid-column:1 / -1}
.cval-layout-two-col .cval-actions{grid-column:2;flex-direction:column;align-items:stretch;min-width:140px;justify-content:flex-start}
.cval-layout-two-col .cval-actions .cval-btn{width:100%;justify-content:center}

/* Kompakt: bara godkänn + textlänk */
.cval-layout-compact .cval-actions{gap:14px;justify-content:flex-end}

/* ----- KNAPPAR ----- */
.cval-root .cval-btn{
	appearance:none !important;
	-webkit-appearance:none !important;
	border:1px solid var(--cval-border) !important;
	background:transparent !important;
	color:var(--cval-text) !important;
	font-family:inherit !important;
	padding:9px 16px !important;
	font-size:14px !important;
	font-weight:600 !important;
	cursor:pointer !important;
	transition:transform .08s ease,background .15s ease,border-color .15s ease,opacity .15s ease !important;
	min-height:38px !important;
	line-height:1.2 !important;
	text-transform:none !important;
	text-decoration:none !important;
	letter-spacing:normal !important;
	box-shadow:none !important;
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
}
.cval-root .cval-btn:hover{border-color:currentColor !important}
.cval-root .cval-btn:active{transform:translateY(1px) !important}
.cval-root .cval-btn-primary{
	background:var(--cval-primary) !important;
	border-color:var(--cval-primary) !important;
	color:var(--cval-primary-text) !important;
}
.cval-root .cval-btn-primary:hover{filter:brightness(.94) !important;border-color:var(--cval-primary) !important}
.cval-root .cval-btn-ghost{background:transparent !important;color:var(--cval-text) !important}

/* Knappform */
.cval-shape-pill .cval-btn{border-radius:999px !important}
.cval-shape-rounded .cval-btn{border-radius:calc(var(--cval-radius) - 4px) !important}
.cval-shape-square .cval-btn{border-radius:2px !important}

/* ----- ÅTERÖPPNA-KNAPP ----- */
.cval-root .cval-reopen{
	position:fixed !important;
	bottom:16px !important;
	left:16px !important;
	right:auto !important;
	display:inline-flex !important;
	align-items:center !important;
	gap:6px !important;
	background:var(--cval-bg) !important;
	color:var(--cval-text) !important;
	border:1px solid var(--cval-border) !important;
	font-family:inherit !important;
	padding:8px 14px !important;
	font-size:13px !important;
	font-weight:600 !important;
	line-height:1.2 !important;
	cursor:pointer !important;
	box-shadow:0 4px 14px rgba(0,0,0,.12) !important;
	text-transform:none !important;
	letter-spacing:normal !important;
	z-index:2147482999 !important;
	appearance:none !important;
	-webkit-appearance:none !important;
}
.cval-pos-bottom-left .cval-reopen{left:auto !important;right:16px !important}
.cval-root .cval-reopen:hover{border-color:currentColor !important}
.cval-root .cval-reopen[hidden]{display:none !important}

/* Reopen-form */
.cval-reopen-shape-pill .cval-reopen{border-radius:999px !important}
.cval-reopen-shape-round .cval-reopen{
	border-radius:50% !important;
	width:44px !important;
	height:44px !important;
	padding:0 !important;
	justify-content:center !important;
}
.cval-reopen-shape-round .cval-reopen .cval-reopen-label{display:none !important}
.cval-reopen-shape-square .cval-reopen{border-radius:4px !important}

/* Ikon-specifika justeringar */
.cval-reopen-icon-pill .cval-reopen svg{display:none}

/* Subtila accent-skillnader för olika ikoner (så även samma form blir igenkännlig) */
.cval-reopen-icon-cookie .cval-reopen{box-shadow:0 4px 14px rgba(0,0,0,.12) !important}
.cval-reopen-icon-shield .cval-reopen{box-shadow:0 4px 14px rgba(0,0,0,.15) !important}
.cval-reopen-icon-lock .cval-reopen{box-shadow:0 3px 10px rgba(0,0,0,.18) !important}
.cval-reopen-icon-settings .cval-reopen svg{transition:transform .3s ease}
.cval-reopen-icon-settings .cval-reopen:hover svg{transform:rotate(45deg)}
.cval-reopen-icon-bubble .cval-reopen{box-shadow:0 6px 18px rgba(0,0,0,.12) !important}

/* Manuella positioner */
.cval-root.cval-reopen-pos-left .cval-reopen{left:16px !important;right:auto !important;transform:none !important}
.cval-root.cval-reopen-pos-right .cval-reopen{right:16px !important;left:auto !important;transform:none !important}
.cval-root.cval-reopen-pos-center .cval-reopen{left:50% !important;right:auto !important;transform:translateX(-50%) !important}

/* Auto-hide */
.cval-reopen-auto .cval-reopen{
	opacity:0;
	pointer-events:none;
	transform:translateY(8px);
	transition:opacity .25s ease,transform .25s ease;
}
.cval-reopen-auto .cval-reopen.cval-visible{
	opacity:1;
	pointer-events:auto;
	transform:translateY(0);
}
.cval-root.cval-reopen-pos-center.cval-reopen-auto .cval-reopen{transform:translateX(-50%) translateY(8px) !important}
.cval-root.cval-reopen-pos-center.cval-reopen-auto .cval-reopen.cval-visible{transform:translateX(-50%) translateY(0) !important}
@media (prefers-reduced-motion:reduce){
	.cval-reopen-auto .cval-reopen{transition:opacity .15s ease}
	.cval-btn{transition:none !important}
	.cval-reopen-icon-settings .cval-reopen:hover svg{transform:none}
}

/* ----- Mobil ----- */
@media (max-width:520px){
	.cval-root.cval-pos-bottom-left,
	.cval-root.cval-pos-bottom-right,
	.cval-root.cval-pos-bottom-center{
		left:8px !important;
		right:8px !important;
		bottom:8px !important;
		top:auto !important;
		margin:0 !important;
		max-width:none !important;
		width:auto !important;
		transform:none !important;
	}
	.cval-root .cval-banner{
		padding:14px !important;
		box-sizing:border-box !important;
	}
	.cval-title{font-size:15px !important}
	.cval-desc{font-size:13px !important}

	/* På mobil: alla layouter blir vertikala för bättre tryckyta */
	.cval-root .cval-actions{
		flex-direction:column !important;
		align-items:stretch !important;
		gap:8px !important;
	}
	.cval-root .cval-actions .cval-btn{
		width:100% !important;
		min-height:44px !important;
		display:flex !important;
		text-align:center !important;
	}
	.cval-layout-two-col .cval-main{
		grid-template-columns:1fr !important;
		gap:14px !important;
	}
	.cval-layout-two-col .cval-actions{
		min-width:0 !important;
		grid-column:1 !important;
	}
}