/* =========================================================
   E-stavivo FAQ — frontend štýly
   Závislé iba na CSS premenných témy (--bg, --card, --border,
   --text, --accent, --brand, --button).
   Žiadne externé závislosti, CLS = 0 (<details> natívny).
   ========================================================= */

/* ---- Sekcia ---- */
.estv-faq-section {
	margin-top: 60px;
	padding-top: 40px;
	border-top: 1px solid var(--border);
	scroll-margin-top: 80px; /* priestor pre sticky header */
}

.estv-faq-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.4rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--accent);
	margin-bottom: 24px;
}

.estv-faq-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	border-radius: 13px;
	background: var(--brand);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0;
}

/* ---- Zoznam ---- */
.estv-faq-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* ---- Jednotlivá položka ---- */
.estv-faq-item {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 6px;
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.estv-faq-item[open] {
	border-color: var(--brand);
}

/* ---- Summary (klikateľná otázka) ---- */
.estv-faq-question {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--accent);
	cursor: pointer;
	list-style: none; /* skryje natívny trojuholník vo Webkit */
	user-select: none;
}

/* Skryje natívny marker v rôznych prehliadačoch */
.estv-faq-question::-webkit-details-marker { display: none; }
.estv-faq-question::marker               { display: none; }

.estv-faq-question:hover {
	color: var(--brand);
}

/* Custom +/− ikona */
.estv-faq-icon {
	flex-shrink: 0;
	position: relative;
	width: 20px;
	height: 20px;
	border: 2px solid var(--brand);
	border-radius: 50%;
	transition: transform 0.2s ease;
}

/* vodorovná čiara (vždy viditeľná) */
.estv-faq-icon::before {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 8px;
	height: 2px;
	background: var(--brand);
}

/* zvislá čiara (skrytá keď open) */
.estv-faq-icon::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 2px;
	height: 8px;
	background: var(--brand);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.estv-faq-item[open] .estv-faq-icon::after {
	opacity: 0;
	transform: rotate(90deg);
}

/* ---- Odpoveď ---- */
.estv-faq-answer {
	padding: 0 16px 16px 48px; /* zarovnané pod textom otázky (20px ikona + 12px gap + 16px padding) */
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--text);
}

/* ---- Teaser — pod košíkom v sticky paneli ---- */
.estv-faq-teaser {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
	text-decoration: none;
	color: var(--accent);
	transition: color 0.15s ease;
}

.estv-faq-teaser:hover {
	color: var(--brand);
	text-decoration: none;
}

.estv-faq-teaser__label {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---- Responzívnosť ---- */
@media (max-width: 600px) {
	.estv-faq-answer {
		padding-left: 16px;
	}

	.estv-faq-heading {
		font-size: 1.15rem;
	}
}