/* OVP Dentissimo Widgets — Pași Vizită
   Structura e definită aici; culorile principale (accent, text, buton)
   vin din controalele de Stil din Elementor (vezi class-vizita-widget.php)
   și au !important — aceeași hibă de temă întâlnită la Repere/Principii. */

.dvf-visit-block {
	--dvf-navy: #043150;
	--dvf-gray: #57697c;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 32px;
	background: linear-gradient(135deg, #f6f9fd 0%, #eef3fa 55%, #e9f1fb 100%);
	border-radius: 24px;
	/* Spațiu vertical standard plugin-wide (v3.0.0): 25px, cu breakpoint-uri
	   mai jos pentru tabletă/mobil; orizontala (60px) rămâne neschimbată. */
	padding: 25px 60px;
	font-family: inherit;
}

.dvf-visit-block *,
.dvf-visit-block *::before,
.dvf-visit-block *::after {
	box-sizing: border-box;
}

.dvf-visit-block::after {
	content: '';
	position: absolute;
	top: -80px;
	right: -80px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(4, 49, 80, 0.07) 0%, rgba(4, 49, 80, 0) 70%);
	pointer-events: none;
}

.dvf-eyebrow {
	/* Fără !important pe font-size/font-weight/letter-spacing/text-transform —
	   controlul Typography din Elementor țintește aceeași clasă (vezi nota de
	   la .dvf-heading mai jos); doar culoarea are deja propriul control cu
	   selector triplat, care câștigă oricum prin specificitate. */
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dvf-navy);
	margin: 0 0 10px !important;
	position: relative;
	z-index: 1;
}

.dvf-heading {
	/* Fără !important pe font-size/font-weight/line-height — controlul
	   Typography din Elementor țintește aceeași clasă; !important aici
	   ar bloca modificările din Stil (nici live, nici la Publish). */
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 700;
	color: var(--dvf-navy) !important;
	line-height: 1.3;
	margin: 0 0 32px !important;
	max-width: 640px;
	position: relative;
	z-index: 1;
}

.dvf-main {
	display: flex;
	align-items: stretch;
	gap: 28px;
	position: relative;
	z-index: 1;
}

.dvf-left {
	flex: 0 0 calc(70% - 14px);
	max-width: calc(70% - 14px);
	min-width: 0;
}

.dvf-steps {
	display: flex;
	position: relative;
	gap: 20px;
}

.dvf-step {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	z-index: 1;
}

.dvf-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 28.5px;
	left: calc(50% + 30px);
	width: calc(100% - 10px);
	height: 3px;
	background: var(--dvf-navy);
	z-index: 0;
}

.dvf-step-num {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #f6f9fd;
	border: 2.5px solid var(--dvf-navy);
	color: var(--dvf-navy) !important;
	font-weight: 700 !important;
	font-size: 22px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.dvf-step-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--dvf-navy) !important;
	margin: 0 0 6px !important;
	line-height: 1.3;
}

.dvf-step-desc {
	font-size: 15px;
	line-height: 1.5;
	color: var(--dvf-gray) !important;
	margin: 0 !important;
	max-width: 175px;
	text-wrap: balance;
}

.dvf-right {
	flex: 0 0 calc(30% - 14px);
	max-width: calc(30% - 14px);
	background: #ffffff;
	border-radius: 16px;
	border: 1px solid rgba(4, 49, 80, 0.08);
	box-shadow: 0 10px 30px rgba(4, 49, 80, 0.08);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 28px 22px;
	text-align: center;
}

.dvf-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: var(--dvf-navy);
	color: #ffffff !important;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none !important;
	white-space: nowrap;
	border-radius: 999px;
	padding: 13px 16px;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.dvf-cta-btn:hover,
.dvf-cta-btn:visited,
.dvf-cta-btn:focus {
	color: #ffffff !important;
	text-decoration: none !important;
}

.dvf-cta-btn:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

.dvf-cta-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.dvf-cta-note {
	font-size: 15px;
	line-height: 1.5;
	color: var(--dvf-gray) !important;
	margin: 0 !important;
}

.dvf-cta-note strong {
	color: var(--dvf-navy) !important;
	font-weight: 700;
}

@media (max-width: 899px) {
	.dvf-visit-block {
		padding: 28px 10px;
		border-radius: 20px;
		gap: 24px;
	}

	.dvf-eyebrow {
		/* Spațiu eyebrow → titlu pe mobil — redus din nou, la cererea
		   userului (10px pe desktop → 5px → acum 2px). */
		margin-bottom: 2px !important;
	}

	.dvf-heading {
		font-size: 24px;
		/* Spațiu titlu → primul pas pe mobil — redus din nou, la cererea
		   userului (era 24px pe desktop → 12px → acum 6px). */
		margin-bottom: 6px !important;
	}

	.dvf-main {
		flex-direction: column;
		gap: 24px;
	}

	.dvf-left {
		max-width: 100%;
	}

	.dvf-steps {
		flex-direction: column;
		gap: 20px;
	}

	.dvf-step:not(:last-child)::after {
		display: none;
	}

	.dvf-step {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
		gap: 14px;
		background: #ffffff;
		border: 1px solid rgba(4, 49, 80, 0.08);
		border-radius: 14px;
		padding: 16px;
	}

	.dvf-step-num {
		margin-bottom: 0;
	}

	/* Wrapper nou (vezi class-vizita-widget.php) — icon-ul rămâne în stânga
	   (neschimbat), iar titlul + descrierea stau unul SUB celălalt în
	   dreapta lui, nu în lateral. `min-width: 0` previne depășirea
	   cardului pe telefoane mai înguste (același hibă ca la butonul CTA
	   din "De ce CEREC?"). */
	.dvf-step-text {
		flex: 1 1 auto;
		min-width: 0;
	}

	.dvf-step-desc {
		max-width: none;
	}

	.dvf-right {
		flex: 0 0 auto;
		max-width: 100%;
		width: 100%;
	}

	.dvf-cta-btn {
		white-space: normal;
	}
}

@media (max-width: 1024px) {
	.dvf-visit-block {
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

@media (max-width: 767px) {
	.dvf-visit-block {
		padding-top: 16px;
		padding-bottom: 16px;
	}
}