/*
 * YOYOall – Overenie produktu. Farby z témy Jacked (--jk-*), s náhradou
 * pre iné témy. Zelená = originál, prvé overenie. Žltá = kód už bol overený
 * (na to treba upozorniť). Červená = neznámy kód.
 */
.yovf {
	--vf-accent: var(--jk-accent, #087bff);
	--vf-text: var(--jk-text, currentColor);
	--vf-muted: var(--jk-muted, #8a94a0);
	--vf-surface: var(--jk-surface, rgba(127, 127, 127, .08));
	--vf-line: var(--jk-line, rgba(127, 127, 127, .35));
	--vf-radius: var(--jk-radius, 6px);
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(32px, 6vw, 80px) 16px;
	box-sizing: border-box;
	text-align: center;
	color: var(--vf-text);
}
.yovf-head { margin-bottom: 32px; }
.yovf-eyebrow {
	margin: 0;
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--vf-accent);
}
.yovf-title {
	font-family: var(--jk-display, inherit);
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.05;
	margin: 10px 0 14px;
}
.yovf-lead { max-width: 54ch; margin: 0 auto; color: var(--vf-muted); line-height: 1.6; }
.yovf-form { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.yovf-label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--vf-muted); cursor: default; }

/* Tri skupiny po štyroch; políčka sa zmenšujú, takže 12 sa zmestí aj na 360 px mobil. */
.yovf-code { display: flex; justify-content: center; align-items: center; gap: clamp(4px, 1.4vw, 12px); width: 100%; max-width: 640px; }
.yovf-code[hidden] { display: none; }
.yovf-group { display: flex; align-items: center; gap: clamp(3px, .8vw, 8px); flex: 1; min-width: 0; }
.yovf-box,
.yovf-plain {
	box-sizing: border-box;
	padding: 0;
	text-align: center;
	/* 16 px a viac: menšie písmo by na iPhone priblížilo stránku. */
	font: 700 clamp(16px, 4.2vw, 26px)/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	text-transform: uppercase;
	color: var(--vf-text);
	background: var(--vf-surface);
	border: 1px solid var(--vf-line);
	border-radius: var(--vf-radius);
	caret-color: var(--vf-accent);
	transition: border-color .15s, box-shadow .15s;
}
.yovf-box { flex: 1; min-width: 0; width: 100%; height: clamp(46px, 11vw, 64px); }
.yovf-plain { width: min(100%, 420px); height: 56px; letter-spacing: .12em; }
.yovf-plain[hidden] { display: none; }
.yovf-box:focus,
.yovf-plain:focus { outline: none; border-color: var(--vf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vf-accent) 28%, transparent); }
.yovf-box:disabled { opacity: .6; }
.yovf-dash { flex: none; color: var(--vf-muted); font-size: clamp(14px, 3vw, 22px); margin-left: clamp(3px, 1vw, 10px); }
.yovf-hint { font-size: 13px; color: var(--vf-muted); margin: 0; }
.yovf-submit { min-width: 200px; margin-top: 6px; }
.yovf-submit:disabled { opacity: .5; cursor: not-allowed; }

.yovf-result { margin-top: 30px; }
.yovf-card {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	text-align: left;
	max-width: 560px;
	margin: 0 auto;
	padding: 20px 22px;
	border: 1px solid var(--vf-line);
	border-radius: calc(var(--vf-radius) + 2px);
	background: var(--vf-surface);
}
.yovf-card h2 { font-size: 19px; margin: 0 0 6px; }
.yovf-card h2:focus { outline: none; }
.yovf-card p { margin: 0; line-height: 1.55; color: var(--vf-muted); }
.yovf-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; font-weight: 700; font-size: 20px; }
.yovf-ok { border-color: rgb(34 197 94 / .55); background: rgb(34 197 94 / .07); }
.yovf-ok .yovf-icon { background: rgb(34 197 94 / .18); color: #22c55e; }
.yovf-ok h2 { color: #22c55e; }
.yovf-warn { border-color: rgb(245 158 11 / .65); background: rgb(245 158 11 / .09); }
.yovf-warn .yovf-icon { background: rgb(245 158 11 / .2); color: #f59e0b; }
.yovf-warn h2 { color: #f59e0b; }
.yovf-bad { border-color: rgb(239 68 68 / .55); background: rgb(239 68 68 / .07); }
.yovf-bad .yovf-icon { background: rgb(239 68 68 / .18); color: #ef4444; }
.yovf-bad h2 { color: #ef4444; }
.yovf-msg { color: var(--vf-muted); margin: 0; }
.yovf-again {
	margin-top: 16px;
	background: none;
	border: 0;
	color: var(--vf-accent);
	cursor: pointer;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.yovf-how { max-width: 560px; margin: 52px auto 0; padding-top: 26px; border-top: 1px solid var(--vf-line); text-align: left; }
.yovf-how h2 { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 8px; }
.yovf-how p { margin: 0; color: var(--vf-muted); line-height: 1.6; }