/* Ръчни добавки към лендъра „Почистване на входове".
 * Вендорнатият lander.css е свален от Elementor и не се редактира — всичко,
 * което е дописано на ръка, живее тук (както header-extra.css при хедъра).
 * Цветовете и шрифтовете идват от глобалните променливи на .elementor-kit-5. */

.vh-section {
	--vh-primary: var( --e-global-color-primary, #DA291C );
	--vh-secondary: var( --e-global-color-secondary, #2A1768 );
	--vh-light: var( --e-global-color-text, #ECEEF6 );
	--vh-muted: var( --e-global-color-accent, #464646 );
	--vh-card: #F6F7FA;

	box-sizing: border-box;
	padding: 80px 24px;
	font-family: "Roboto", sans-serif;
	scroll-margin-top: 165px;
}

.vh-section *,
.vh-section *::before,
.vh-section *::after {
	box-sizing: border-box;
}

.vh-container {
	max-width: 1140px;
	margin: 0 auto;
}

.vh-eyebrow {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var( --vh-primary );
}

.vh-section-title {
	margin: 0 0 14px;
	font-size: 50px;
	font-weight: 600;
	line-height: 1.15;
	color: var( --vh-secondary );
}

.vh-section-lead {
	margin: 0 auto 44px;
	max-width: 760px;
	font-size: 18px;
	line-height: 1.6;
	color: var( --vh-muted );
}

.vh-section--center {
	text-align: center;
}

.vh-icon {
	width: 34px;
	height: 34px;
	display: block;
	fill: currentColor;
}

/* Elementor стилизира бутоните през ID-тата на елементите от копираната
 * страница; новите секции нямат такива, затова цветът се задава тук. */
.vh-section .elementor-button {
	display: inline-block;
	padding: 15px 30px;
	background-color: var( --vh-primary );
	border: none;
	border-radius: 0;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s ease;
}

.vh-section .elementor-button:hover,
.vh-section .elementor-button:focus {
	background-color: #B31F15;
	color: #fff;
}

.vh-price-card--secondary .elementor-button {
	background-color: var( --vh-secondary );
}

.vh-price-card--secondary .elementor-button:hover,
.vh-price-card--secondary .elementor-button:focus {
	background-color: #1D0F4C;
}

.vh-actions {
	margin-top: 36px;
	display: flex;
	justify-content: center;
}

/* ------------------------------------------------------------------ цени */

.vh-ceni {
	background-color: var( --vh-light );
	text-align: center;
}

.vh-price-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 28px;
	align-items: stretch;
	text-align: left;
}

.vh-price-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 36px 32px;
	background: #fff;
	border: 1px solid #dfe3ee;
	border-radius: 6px;
	box-shadow: 0 12px 30px rgba( 42, 23, 104, .07 );
}

.vh-price-card--featured {
	border: 2px solid var( --vh-primary );
	box-shadow: 0 18px 40px rgba( 218, 41, 28, .14 );
}

.vh-price-badge {
	position: absolute;
	top: -15px;
	left: 32px;
	padding: 6px 16px;
	background: var( --vh-primary );
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
}

.vh-price-card__title {
	margin: 0 0 18px;
	font-size: 24px;
	font-weight: 600;
	color: var( --vh-secondary );
}

.vh-price-card__sum {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid #e6e9f2;
}

.vh-price-card__num {
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
	color: var( --vh-primary );
}

.vh-price-card__num--text {
	font-size: 30px;
	color: var( --vh-secondary );
}

.vh-price-card__unit {
	font-size: 16px;
	color: var( --vh-muted );
}

.vh-check {
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.vh-check li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 16px;
	line-height: 1.5;
	color: #2f3038;
}

.vh-check svg,
.vh-price-note svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 4px;
	fill: var( --vh-primary );
}

/* калкулатор */
.vh-calc {
	margin-top: auto;
	padding: 22px;
	background: var( --vh-card );
	border-radius: 4px;
}

.vh-calc__label {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 500;
	color: var( --vh-secondary );
}

.vh-calc__input {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	font-family: inherit;
	font-size: 18px;
	color: var( --vh-secondary );
	background: #fff;
	border: 1px solid #cfd5e6;
	border-radius: 3px;
}

.vh-calc__input:focus {
	outline: 2px solid var( --vh-primary );
	outline-offset: 1px;
}

.vh-calc__out {
	margin: 16px 0 0;
	font-size: 18px;
	color: var( --vh-secondary );
}

.vh-calc__out strong {
	font-size: 28px;
	font-weight: 700;
	color: var( --vh-primary );
}

.vh-calc__hint {
	margin: 6px 0 0;
	font-size: 14px;
	color: var( --vh-muted );
}

.vh-calc__hint--accent {
	font-size: 15px;
	font-weight: 600;
	color: var( --vh-primary );
}

.vh-price-card .elementor-button-wrapper {
	margin-top: auto;
	padding-top: 24px;
}

.vh-price-card .elementor-button {
	width: 100%;
	text-align: center;
}

.vh-price-note {
	display: flex;
	list-style: none;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 40px;
	margin: 34px 0 0;
	padding: 22px 26px;
	background: #fff;
	border-left: 4px solid var( --vh-primary );
	text-align: left;
}

.vh-price-note li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 16px;
	line-height: 1.5;
	color: #2f3038;
}

/* ----------------------------------------------------------- комплименти */

.vh-gifts {
	background: var( --vh-secondary );
	color: #fff;
	text-align: center;
}

.vh-gifts .vh-section-title {
	color: #fff;
}

.vh-gifts .vh-eyebrow {
	color: #ff8f86;
}

.vh-gifts .vh-section-lead {
	color: rgba( 255, 255, 255, .82 );
}

.vh-gift-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 26px;
	text-align: left;
}

.vh-gift {
	display: flex;
	gap: 20px;
	padding: 30px;
	background: rgba( 255, 255, 255, .07 );
	border: 1px solid rgba( 255, 255, 255, .16 );
	border-radius: 6px;
}

.vh-gift__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	background: var( --vh-primary );
	border-radius: 50%;
	color: #fff;
}

.vh-gift__title {
	margin: 0 0 8px;
	font-size: 21px;
	font-weight: 600;
	color: #fff;
}

.vh-gift__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: rgba( 255, 255, 255, .82 );
}

.vh-gifts__note {
	margin: 30px auto 0;
	max-width: 640px;
	padding: 14px 20px;
	background: rgba( 255, 255, 255, .1 );
	border-radius: 4px;
	font-size: 16px;
	color: #fff;
}

/* ------------------------------------------------ обхват на абонамента */

.vh-scope {
	background: var( --vh-card );
}

.vh-scope-list {
	margin: 0 auto;
	max-width: 1000px;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 12px 32px;
	text-align: left;
}

.vh-scope__gift {
	margin-left: 8px;
	padding: 2px 7px;
	border-radius: 3px;
	background: var( --vh-primary );
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: 1px;
}

.vh-scope__gift:hover,
.vh-scope__gift:focus {
	background: #B31F15;
}

/* ------------------------------------------------- график и прозрачност */

.vh-grafik {
	background: #fff;
	text-align: center;
}

.vh-grafik-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 26px;
	text-align: left;
}

.vh-step {
	padding: 32px 28px;
	background: var( --vh-card );
	border-top: 3px solid var( --vh-primary );
	border-radius: 0 0 6px 6px;
}

.vh-step__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 18px;
	background: #fff;
	border-radius: 50%;
	color: var( --vh-primary );
	box-shadow: 0 6px 16px rgba( 42, 23, 104, .1 );
}

.vh-step__title {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 600;
	color: var( --vh-secondary );
}

.vh-step__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var( --vh-muted );
}

.vh-trust {
	margin: 34px 0 0;
	font-size: 20px;
	font-weight: 600;
	color: var( --vh-secondary );
}

.vh-trust span {
	color: var( --vh-primary );
}

/* ------------------------------------------------------------- таблет */

@media ( max-width: 1024px ) {
	.vh-section {
		padding: 64px 22px;
		scroll-margin-top: 115px;
	}

	.vh-section-title {
		font-size: 40px;
	}

	.vh-grafik-grid {
		grid-template-columns: 1fr;
	}

	.vh-scope-list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 12px 26px;
	}
}

/* ------------------------------------------------------------ мобилно */

@media ( max-width: 767px ) {
	.vh-section {
		padding: 52px 20px;
	}

	.vh-section-title {
		font-size: 32px;
	}

	.vh-section-lead {
		margin-bottom: 34px;
		font-size: 17px;
	}

	.vh-price-grid,
	.vh-gift-grid,
	.vh-scope-list {
		grid-template-columns: 1fr;
	}

	.vh-scope-list {
		gap: 10px;
	}

	.vh-price-card {
		padding: 30px 22px;
	}

	.vh-price-card__num {
		font-size: 40px;
	}

	.vh-price-note {
		gap: 12px;
		padding: 20px;
	}

	.vh-gift {
		flex-direction: column;
		gap: 14px;
		padding: 24px 22px;
	}

	.vh-trust {
		font-size: 18px;
	}
}

/* ----------------------------------------------------------------- снимки */
/* Реалните снимки пазят кутията на донора: inline `aspect-ratio` задава
   пропорцията, а снимката се вписва в нея с кроп — без изместване на лейаута.
   Селекторът минава през `.elementor`, защото `.elementor img` нулира ръба и
   сянката. */
.elementor img.vh-photo {
	height: auto;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(42, 23, 104, .12);
}

/* Изрязана фигура с прозрачен фон (hero) — не е карта: без ъгли, сянка и кроп.
   Мащабира се по височина, за да не расте hero-то заради портретната пропорция;
   ширината идва от `aspect-ratio`, затова лейаутът пак не мърда. */
.elementor img.vh-photo--cutout {
	width: auto;
	max-width: 100%;
	max-height: 460px;
	object-fit: contain;
	border-radius: 0;
	box-shadow: none;
	margin-inline: auto;
}

@media ( max-width: 767px ) {
	.elementor img.vh-photo--cutout {
		max-height: 360px;
	}
}

/* Колонните контейнери със снимка не бива да са `wrap` под 767px: Elementor
   слага `--flex-wrap-mobile: wrap` на всеки `.e-con`, а в wrapping flex
   контейнер Chromium не решава процентната ширина на `<img>` и свива кутията ѝ
   до един ред — снимката излиза върху текста отдолу. Wrap на колона и без това
   не върши работа. Обхватът е само лендърът, за да не се пипат хедърът и
   футърът, където има и редови контейнер със снимка. */
@media ( max-width: 767px ) {
	.elementor-103 .e-con.e-flex:has( > .elementor-widget-image ) {
		--flex-wrap-mobile: nowrap;
	}

	/* Иначе снимката се долепя за заглавието „За нас" — същите 24px както в
	   сестринската лента „всичко за нас" (89d8841). */
	.elementor-103 .elementor-element.elementor-element-cde7c87 {
		--row-gap: 24px;
	}
}

/* ----------------------------------------------------------- hero ↔ форма */
/* Формата е залепена за hero-то: цялото разстояние идва от долния падинг на
   hero контейнера (20/10/50px по чупка), а `#zaqvka` вече е с нулев горен
   падинг. Селекторът повтаря дословно този от page-post-103.css (еднаква
   специфичност), затова печели по ред на зареждане — и на трите чупки. */
.elementor-103 .elementor-element.elementor-element-ba10b97 {
	--padding-bottom: 0px;
}

/* --------------------------------------- секция „всичко за нас" (89d8841) */
/* Вертикалният въздух се мести от текстовата колона върху самата лента, за да
   го получи и колоната със снимката — иначе снимката опира в ръбовете ѝ.
   Селекторите повтарят дословно тези от page-post-103.css, затова печелят по
   ред на зареждане — и на трите чупки. */
.elementor-103 .elementor-element.elementor-element-89d8841 {
	--padding-top: 50px;
	--padding-bottom: 50px;
}

.elementor-103 .elementor-element.elementor-element-8c09651 {
	--padding-top: 0px;
	--padding-bottom: 0px;
}

@media ( max-width: 767px ) {
	.elementor-103 .elementor-element.elementor-element-89d8841 {
		--padding-top: 40px;
		--padding-bottom: 40px;
		--row-gap: 24px;
	}
}

/* ------------------------------------- „Защо да изберете нас" (0dbc1bb) */
/* Под 767px колоната е с `--align-items: center`, а всяко от петте заглавия е
   с фиксирана ширина (135–206px) — затова стоят центрирани и се чупят на 2–3
   реда, а червената черта (долният борд на widget-контейнера) е колкото
   кутията, не колкото текста. Тук ги вадим отляво и им връщаме ширина по
   съдържанието. Описанията под тях остават центрирани. Селекторите повтарят
   дословно тези от page-post-103.css, затова печелят по ред на зареждане. */
@media ( max-width: 767px ) {
	.elementor-103 .elementor-element.elementor-element-218d0cd,
	.elementor-103 .elementor-element.elementor-element-0950b0e,
	.elementor-103 .elementor-element.elementor-element-481f364,
	.elementor-103 .elementor-element.elementor-element-819ead4,
	.elementor-103 .elementor-element.elementor-element-6ade530 {
		align-self: flex-start;
		width: auto;
		max-width: 100%;
		--container-widget-width: auto;
	}

	.elementor-103 .elementor-element.elementor-element-218d0cd .elementor-heading-title,
	.elementor-103 .elementor-element.elementor-element-0950b0e .elementor-heading-title,
	.elementor-103 .elementor-element.elementor-element-481f364 .elementor-heading-title,
	.elementor-103 .elementor-element.elementor-element-819ead4 .elementor-heading-title,
	.elementor-103 .elementor-element.elementor-element-6ade530 .elementor-heading-title {
		text-align: left;
	}
}

/* Описанията под тях са с `text-align: center` под 767px в донора — връщаме ги
   отляво, за да четат в една линия със заглавията. */
@media ( max-width: 767px ) {
	.elementor-103 .elementor-element.elementor-element-c721d12,
	.elementor-103 .elementor-element.elementor-element-edf17c0,
	.elementor-103 .elementor-element.elementor-element-f0a7558,
	.elementor-103 .elementor-element.elementor-element-19fb0db,
	.elementor-103 .elementor-element.elementor-element-f1b51b4 {
		text-align: left;
	}
}