/* =============================================================
   ONEGENT Shopkit – Checkbox Designs
   Wird nur geladen wenn ein Design ausgewählt ist.
   Alle Designs nutzen <span class="onegent-cb-visual"> (per JS
   direkt nach jedem input[type=checkbox] eingefügt).
   ============================================================= */

/* ---- Gemeinsame Basis: nativen Checkbox verstecken ---------- */
body.onegent-checkbox-1 input[type=checkbox],
body.onegent-checkbox-2 input[type=checkbox],
body.onegent-checkbox-3 input[type=checkbox] {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
}


/* =============================================================
   Design 1 – Klassisch (macOS-Stil, blauer Haken)
   ============================================================= */
body.onegent-checkbox-1 .onegent-cb-visual {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	width: 1.1em;
	height: 1.1em;
	margin-right: 0.55em;
	color: rgba(0,0,0,.275);
	border: .06em solid currentColor;
	box-shadow: 0 0 .04em, 0 .06em .16em -.03em inset, 0 0 0 .07em transparent inset;
	border-radius: .2em;
	background:
		url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" fill="white" xml:space="preserve"><rect x="0" y="4.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 0.5891 10.4702)" width="4.3" height="1.6"/><rect x="2.2" y="2.9" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 12.1877 2.9833)" width="6.1" height="1.7"/></svg>')
		no-repeat center,
		white;
	background-size: 0;
	cursor: pointer;
	transition: color .1s, border .1s, background .15s, box-shadow .1s;
	will-change: color, border, background, background-size, box-shadow;
}

body.onegent-checkbox-1 .onegent-cb-visual:active {
	box-shadow: 0 0 .04em, 0 .06em .16em -.03em transparent inset, 0 0 0 .07em rgba(0,0,0,.1) inset;
	background-color: #f0f0f0;
}

body.onegent-checkbox-1 input[type=checkbox]:checked + .onegent-cb-visual {
	background-color: #3B99FC;
	background-size: 75%;
	border-color: #3B99FC;
	color: rgba(0,0,0,.075);
}

body.onegent-checkbox-1 input[type=checkbox]:focus + .onegent-cb-visual {
	box-shadow:
		0 0 .04em,
		0 .06em .16em -.03em transparent inset,
		0 0 0 .07em rgba(0,0,0,.1) inset,
		0 0 0 3.3px rgba(65,159,255,.55),
		0 0 0 5px rgba(65,159,255,.3);
}

body.onegent-checkbox-1 input[type=checkbox]:disabled + .onegent-cb-visual {
	opacity: .5;
	cursor: not-allowed;
}


/* =============================================================
   Design 2 – Animierter grüner Haken
   ============================================================= */
@keyframes onegent-cb2-bottom {
	0%   { height: 0; }
	100% { height: calc(var(--onegent-cbh, 20px) / 2); }
}
@keyframes onegent-cb2-top {
	0%   { height: 0; }
	50%  { height: 0; }
	100% { height: calc(var(--onegent-cbh, 20px) * 1.2); }
}

body.onegent-checkbox-2 {
	--onegent-cbh: 20px;
}

body.onegent-checkbox-2 .onegent-cb-visual {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	width:  var(--onegent-cbh, 20px);
	height: var(--onegent-cbh, 20px);
	border: calc(var(--onegent-cbh, 20px) * .1) solid #000;
	border-radius: 5px;
	position: relative;
	box-sizing: border-box;
	background: transparent;
	cursor: pointer;
	margin-right: 0.55em;
	transition: border-color ease .2s;
}

body.onegent-checkbox-2 .onegent-cb-visual::before,
body.onegent-checkbox-2 .onegent-cb-visual::after {
	content: "";
	box-sizing: border-box;
	position: absolute;
	height: 0;
	width: calc(var(--onegent-cbh, 20px) * .2);
	background-color: #34b93d;
	display: inline-block;
	transform-origin: left top;
	border-radius: 5px;
}

body.onegent-checkbox-2 .onegent-cb-visual::before {
	top:  calc(var(--onegent-cbh, 20px) * .72);
	left: calc(var(--onegent-cbh, 20px) * .41);
	transform: rotate(-135deg);
}

body.onegent-checkbox-2 .onegent-cb-visual::after {
	top:  calc(var(--onegent-cbh, 20px) * .37);
	left: calc(var(--onegent-cbh, 20px) * .05);
	transform: rotate(-45deg);
}

body.onegent-checkbox-2 input[type=checkbox]:checked + .onegent-cb-visual {
	border-color: #34b93d;
}

body.onegent-checkbox-2 input[type=checkbox]:checked + .onegent-cb-visual::after {
	animation: onegent-cb2-bottom .2s ease 0s forwards;
}

body.onegent-checkbox-2 input[type=checkbox]:checked + .onegent-cb-visual::before {
	animation: onegent-cb2-top .4s ease 0s forwards;
}

body.onegent-checkbox-2 input[type=checkbox]:disabled + .onegent-cb-visual {
	opacity: .5;
	cursor: not-allowed;
}


/* =============================================================
   Design 3 – Border-Morphing-Haken
   ============================================================= */
body.onegent-checkbox-3 .onegent-cb-visual {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border: 2px solid #434343;
	border-radius: 6px;
	box-sizing: border-box;
	cursor: pointer;
	margin-right: 0.55em;
	transition: all .375s;
}

body.onegent-checkbox-3 input[type=checkbox]:checked + .onegent-cb-visual {
	transform: rotate(45deg);
	width: 14px;
	margin-left: 4px;
	border-color: #24c78e;
	border-top-color: transparent;
	border-left-color: transparent;
	border-radius: 0;
}

body.onegent-checkbox-3 input[type=checkbox]:disabled + .onegent-cb-visual {
	opacity: .5;
	cursor: not-allowed;
}


/* =============================================================
   Design 4 – SVG-Strich-Animation (Akzentfarbe aus Einstellungen)
   ============================================================= */
body.onegent-checkbox-4 input[type=checkbox] {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
}

body.onegent-checkbox-4 .onegent-cb-visual {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-right: 0.55em;
	cursor: pointer;
	overflow: visible;
}

body.onegent-checkbox-4 .onegent-cb4-border {
	fill: #fff;
	stroke: #ccc;
}

body.onegent-checkbox-4 .onegent-cb4-box {
	fill: transparent;
	stroke: var(--onegent-cb-accent, #ff7a00);
	stroke-dasharray: 800;
	stroke-dashoffset: 800;
	transition: stroke-dashoffset 0.6s ease-in;
}

body.onegent-checkbox-4 .onegent-cb4-tick {
	stroke: var(--onegent-cb-accent, #ff7a00);
	stroke-dasharray: 172;
	stroke-dashoffset: 172;
	transition: stroke-dashoffset 0.6s ease-in;
}

body.onegent-checkbox-4 input[type=checkbox]:checked + .onegent-cb-visual .onegent-cb4-box,
body.onegent-checkbox-4 input[type=checkbox]:checked + .onegent-cb-visual .onegent-cb4-tick {
	stroke-dashoffset: 0;
}

body.onegent-checkbox-4 input[type=checkbox]:disabled + .onegent-cb-visual {
	opacity: .5;
	cursor: not-allowed;
}