/**
 * com_bylkviz - frontend styles
 *
 * Estetika sladěná s redesignem "Botanická elegance" - earth tones,
 * Playfair Display pro nadpisy, Source Sans 3 pro text.
 * Fonty jsou přebírány z globálního stylu šablony.
 */

.bylkviz-wrapper {
	--bylkviz-primary:     #5d7052;   /* tlumená zeleň bylin */
	--bylkviz-primary-dark:#3f4e37;
	--bylkviz-accent:      #b87333;   /* kotvičník oranž */
	--bylkviz-bg:          #faf7f2;   /* teplá krém */
	--bylkviz-bg-card:     #ffffff;
	--bylkviz-text:        #2f2a24;
	--bylkviz-text-muted:  #6b6358;
	--bylkviz-border:      #e5ddd0;
	--bylkviz-correct:     #4a7c59;
	--bylkviz-incorrect:   #b35558;
	--bylkviz-radius:      14px;
	--bylkviz-radius-lg:   24px;
	--bylkviz-shadow:      0 4px 20px rgba(0,0,0,.06);

	max-width: 780px;
	margin: 2rem auto;
	padding: 0 1rem;
	color: var(--bylkviz-text);
	line-height: 1.6;
}

.bylkviz-header {
	margin-bottom: 2rem;
}
.bylkviz-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(1.7rem, 4vw, 2.4rem);
	margin: 0 0 .5rem;
	color: var(--bylkviz-primary-dark);
}
.bylkviz-description {
	color: var(--bylkviz-text-muted);
	font-size: 1.05rem;
}

/* --- Intro --- */
.bylkviz-screen-intro {
	background: var(--bylkviz-bg-card);
	border-radius: var(--bylkviz-radius-lg);
	padding: 2.5rem 2rem;
	text-align: center;
	box-shadow: var(--bylkviz-shadow);
}
.bylkviz-intro {
	margin-bottom: 2rem;
	font-size: 1.05rem;
}
.bylkviz-stats-mini {
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin: 1.5rem 0 2rem;
	flex-wrap: wrap;
	color: var(--bylkviz-text-muted);
	font-size: .95rem;
}
.bylkviz-stat strong {
	color: var(--bylkviz-primary-dark);
	font-size: 1.2rem;
}

/* --- Buttons --- */
.bylkviz-btn {
	display: inline-block;
	padding: .9rem 2rem;
	border: none;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	font-family: inherit;
}
.bylkviz-btn-primary {
	background: var(--bylkviz-primary);
	color: #fff;
}
.bylkviz-btn-primary:hover {
	background: var(--bylkviz-primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(93,112,82,.3);
}
.bylkviz-btn-start {
	padding: 1.1rem 2.5rem;
	font-size: 1.1rem;
}

/* --- Question screen --- */
.bylkviz-screen-question {
	background: var(--bylkviz-bg-card);
	border-radius: var(--bylkviz-radius-lg);
	padding: 2rem;
	box-shadow: var(--bylkviz-shadow);
}

.bylkviz-progress {
	margin-bottom: 1.5rem;
}
.bylkviz-progress-text {
	display: block;
	font-size: .85rem;
	color: var(--bylkviz-text-muted);
	margin-bottom: .5rem;
	text-align: center;
}
.bylkviz-progress-bar {
	height: 6px;
	background: var(--bylkviz-border);
	border-radius: 3px;
	overflow: hidden;
}
.bylkviz-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--bylkviz-primary), var(--bylkviz-accent));
	transition: width .35s ease;
}

.bylkviz-question-body {
	font-size: 1.15rem;
	margin-bottom: 1.5rem;
	text-align: center;
}
.bylkviz-question-image {
	max-width: 100%;
	height: auto;
	max-height: 400px;
	border-radius: var(--bylkviz-radius);
	margin: 0 auto 1rem;
	box-shadow: 0 2px 16px rgba(0,0,0,.1);
	display: block;
	object-fit: contain;
}
.bylkviz-question-text {
	margin-top: .75rem;
	color: var(--bylkviz-text);
}
.bylkviz-question-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--bylkviz-radius);
	margin: 1rem 0;
	box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.bylkviz-question-body p { margin: .5rem 0; }

/* --- Answers --- */
.bylkviz-answers {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.bylkviz-answer {
	border: 2px solid var(--bylkviz-border);
	border-radius: var(--bylkviz-radius);
	transition: border-color .15s ease, background .15s ease, transform .1s ease;
	overflow: hidden;
}
.bylkviz-answer:hover {
	border-color: var(--bylkviz-primary);
	transform: translateX(4px);
}
.bylkviz-answer-label {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1rem 1.25rem;
	cursor: pointer;
	margin: 0;
	width: 100%;
	font-size: 1rem;
}
.bylkviz-answer-label input {
	width: 1.2rem;
	height: 1.2rem;
	accent-color: var(--bylkviz-primary);
	flex-shrink: 0;
}
.bylkviz-answer-text {
	flex: 1;
}

/* Po odpovědi - zamčené stavy */
.bylkviz-answer-locked { pointer-events: none; }
.bylkviz-answer-locked:hover { transform: none; }

.bylkviz-answer-selected {
	border-color: var(--bylkviz-primary);
	background: rgba(93,112,82,.06);
}
.bylkviz-answer-correct {
	border-color: var(--bylkviz-correct);
	background: rgba(74,124,89,.1);
}
.bylkviz-answer-correct .bylkviz-answer-text::after {
	content: ' ✓';
	color: var(--bylkviz-correct);
	font-weight: 700;
}
.bylkviz-answer-incorrect {
	border-color: var(--bylkviz-incorrect);
	background: rgba(179,85,88,.08);
}
.bylkviz-answer-incorrect .bylkviz-answer-text::after {
	content: ' ✗';
	color: var(--bylkviz-incorrect);
	font-weight: 700;
}

/* --- Feedback --- */
.bylkviz-feedback {
	padding: 1rem 1.25rem;
	border-radius: var(--bylkviz-radius);
	margin: 1rem 0;
	text-align: center;
	font-size: 1.05rem;
}
.bylkviz-feedback.is-correct {
	background: rgba(74,124,89,.12);
	color: var(--bylkviz-correct);
	border-left: 4px solid var(--bylkviz-correct);
}
.bylkviz-feedback.is-incorrect {
	background: rgba(179,85,88,.1);
	color: var(--bylkviz-incorrect);
	border-left: 4px solid var(--bylkviz-incorrect);
}

.bylkviz-actions {
	text-align: center;
	margin-top: 1rem;
}

/* --- Result screen --- */
.bylkviz-screen-result {
	background: var(--bylkviz-bg-card);
	border-radius: var(--bylkviz-radius-lg);
	padding: 3rem 2rem;
	text-align: center;
	box-shadow: var(--bylkviz-shadow);
}
.bylkviz-result-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 2rem;
	margin: 0 0 1rem;
	color: var(--bylkviz-primary-dark);
}
.bylkviz-result-score {
	font-size: 1.5rem;
	margin: 1.5rem 0;
	color: var(--bylkviz-text);
}
.bylkviz-result-score strong {
	color: var(--bylkviz-accent);
	font-size: 2rem;
}
.bylkviz-outro {
	color: var(--bylkviz-text-muted);
	margin: 1.5rem 0 2rem;
}

/* --- Error --- */
.bylkviz-error {
	background: var(--bylkviz-incorrect);
	color: #fff;
	padding: .9rem 1.25rem;
	border-radius: var(--bylkviz-radius);
	margin: 1rem 0;
	text-align: center;
	animation: bylkviz-fade-in .2s ease;
}
@keyframes bylkviz-fade-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- Honeypot (skrytý) --- */
.bylkviz-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* --- Responsive --- */
@media (max-width: 600px) {
	.bylkviz-wrapper { padding: 0 .75rem; }
	.bylkviz-screen-intro,
	.bylkviz-screen-question,
	.bylkviz-screen-result {
		padding: 1.5rem 1rem;
		border-radius: var(--bylkviz-radius);
	}
	.bylkviz-answer-label { padding: .8rem 1rem; font-size: .95rem; }
	.bylkviz-btn-start { width: 100%; }
}

/* ============== Časovače ============== */
.bylkviz-timer-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
	min-height: 2rem;
}
.bylkviz-timer-total,
.bylkviz-timer-question {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem .85rem;
	border-radius: var(--bylkviz-radius);
	background: rgba(93, 112, 82, 0.08);
	color: var(--bylkviz-primary-dark);
	font-size: .95rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	border: 1px solid rgba(93, 112, 82, 0.15);
	transition: all .2s ease;
}
.bylkviz-timer-total::before { content: "⏱"; }
.bylkviz-timer-question::before { content: "⏲"; }

.bylkviz-timer-total.is-warning,
.bylkviz-timer-question.is-warning {
	background: #fff4d6;
	color: #b37400;
	border-color: #f5a623;
}
.bylkviz-timer-total.is-critical,
.bylkviz-timer-question.is-critical {
	background: #fdeaea;
	color: #922;
	border-color: #b35558;
	animation: bylkviz-pulse 1s ease-in-out infinite;
}
@keyframes bylkviz-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

.bylkviz-timeout-message {
	background: #b35558;
	color: #fff;
	padding: .75rem 1rem;
	border-radius: var(--bylkviz-radius);
	margin-bottom: 1rem;
	text-align: center;
	font-weight: 600;
}

@media (max-width: 480px) {
	.bylkviz-timer-bar { flex-direction: column; gap: .5rem; align-items: stretch; }
	.bylkviz-timer-total, .bylkviz-timer-question { justify-content: center; }
}