/* Konfigurátor – sekce „Další vlastnosti" (frontend styly).
   Navazuje na design e-shopu (zelená #6dab3c, zaoblené pilulky). */

:root {
	--vl-green: #6dab3c;
	--vl-green-d: #5a9a30;
	--vl-ink: #363636;
	--vl-ink2: #8e8e8e;
	--vl-border: #d1d1d1;
}

/* ---- accordion ---- */
.vlastnosti-row { display: block; }
.vlastnosti-acc {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 8px;
	overflow: hidden;
}
.vlastnosti-acc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 18px;
	cursor: pointer;
	user-select: none;
}
.vlastnosti-acc-titles { display: flex; flex-direction: column; }
.vlastnosti-acc-title { font-weight: 700; font-size: 16px; color: var(--vl-ink); }
.vlastnosti-acc-sub { margin-top: 2px; font-size: 13px; color: var(--vl-ink2); }
.vlastnosti-acc-arrow {
	color: var(--vl-ink2);
	display: inline-flex;
	transition: transform .18s ease;
	flex: 0 0 auto;
}
.vlastnosti-acc.open .vlastnosti-acc-arrow { transform: rotate(180deg); }

.vlastnosti-acc-body { padding: 4px 18px 18px; border-top: 1px solid #f0f0f0; }

/* ---- sub-rows (zarovnané jako ostatní pole) ---- */
.vlastnosti-subrow { padding: 14px 0; margin: 0; border-bottom: 1px dashed #ededed; display: flex; flex-wrap: wrap; }
.vlastnosti-subrow:last-child { border-bottom: 0; }
.vlastnosti-subrow .label-wrap label { font-weight: 700; font-size: 15px; color: var(--vl-ink); display: block; }
.vlastnosti-context { display: inline-block; margin-top: 3px; font-size: 13px; color: var(--vl-ink2); text-decoration: none; }
a.vlastnosti-context:hover { color: var(--vl-green); text-decoration: underline; }
.vlastnosti-hmoz-count { font-weight: 700; color: var(--vl-ink2); }

/* Dropdowny necháváme nativní – dědí vzhled z .multiple-option-wrap select
   (stejně jako ostatní pole konfigurátoru, např. „schéma sestavy"). */
.vlastnosti-subrow .multiple-option-wrap { width: 100%; }

/* Ovládací sloupec necháme blokový (ne flex), aby se prvky (textarea +
   checkbox) skládaly pod sebe, ne vedle sebe. */
.vlastnosti-subrow .configurator-row-twothird { display: block; }

/* ---- poznámka ---- */
textarea.vlastnosti-poznamka {
	width: 100%;
	border: 1px solid var(--vl-border);
	border-radius: 12px;
	padding: 10px 14px;
	font-size: 14px;
	color: var(--vl-ink);
	box-sizing: border-box;
	resize: vertical;
}
textarea.vlastnosti-poznamka:focus { outline: none; border-color: var(--vl-green); }

.vlastnosti-review-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 14px;
	color: var(--vl-ink);
	cursor: pointer;
}
.vlastnosti-review-wrap input { width: 16px; height: 16px; }
.vlastnosti-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px; height: 22px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--vl-ink2);
	cursor: pointer;
}
.vlastnosti-info:hover { color: var(--vl-green); }

/* ---- nápověda modal ---- */
.vlastnosti-overlay {
	position: fixed; inset: 0; z-index: 100000;
	background: rgba(20, 20, 30, .5);
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.vlastnosti-modal {
	position: relative; background: #fff; border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
	width: 480px; max-width: 100%; padding: 28px 28px 24px; color: #555;
	font-size: 14px; line-height: 1.55;
}
.vlastnosti-close {
	position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
	border: 1px solid var(--vl-border); background: #fff; border-radius: 50%;
	font-size: 18px; line-height: 1; color: var(--vl-ink2); cursor: pointer;
}
.vlastnosti-close:hover { color: var(--vl-ink); }

/* ---- responzivita ---- */
@media (max-width: 700px) {
	.vlastnosti-subrow .configurator-row-third,
	.vlastnosti-subrow .configurator-row-twothird { width: 100%; flex-basis: 100%; }
	.vlastnosti-subrow .configurator-row-twothird { margin-top: 8px; }
}