/* OVP Dentissimo Widgets — Secțiune Formular Contact
   Structura e definită aici; culorile/tipografia (responsive) vin din
   controalele de Stil din Elementor (vezi class-contact-form-widget.php)
   și au !important — aceeași hibă de temă întâlnită la celelalte
   widgeturi din acest plugin.

   Formularul propriu-zis e generat de Contact Form 7 (shortcode), nu de
   acest plugin — deci nu-i putem adăuga clase proprii pe câmpuri. De
   aceea stilul de mai jos țintește direct clasele pe care CF7 le adaugă
   automat (`.wpcf7-form-control`, `.wpcf7-submit`, `.wpcf7-list-item-label`)
   — funcționează pentru ORICE formular CF7, indiferent de marcaj. În plus,
   dacă formularul ales folosește marcajul `dts-card` / `dts-two-col`
   (ca formularul implicit, exact ca pe pagina Contact), câmpurile
   perechi (Nume/Prenume etc.) stau grupate în carduri, unul lângă altul. */

.dvf-cf {
	width: 100%;
	box-sizing: border-box;
}

.dvf-cf * {
	box-sizing: border-box;
}

.dvf-cf-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 48px;
}

.dvf-cf-row.dvf-cf-reverse {
	flex-direction: row-reverse;
}

.dvf-cf-left {
	flex: 0 0 42%;
	max-width: 42%;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dvf-cf-form-wrap {
	flex: 1 1 0%;
	min-width: 0;
}

.dvf-cf-eyebrow {
	margin: 0 !important;
	/* Fără !important pe proprietățile de tipografie (font-*, line-height,
	   letter-spacing, text-transform) — controlul Typography din Elementor
	   țintește aceeași clasă, iar !important aici ar bloca modificările
	   din panoul de Stil (nici live în editor, nici după Publish). */
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #043150 !important;
}

.dvf-cf-heading {
	margin: 0 !important;
	font-family: 'Inter', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: #043150 !important;
}

.dvf-cf-desc {
	margin: 0 !important;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #666666 !important;
}

.dvf-cf-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.dvf-cf-btn {
	display: inline-block;
	text-align: center;
	text-decoration: none !important;
	font-family: 'Inter', sans-serif;
	padding: 12px 24px;
	font-size: 16px;
	font-weight: 600;
	border-width: 2px;
	border-style: solid;
	white-space: nowrap;
}

.dvf-cf-btn:hover,
.dvf-cf-btn:focus {
	text-decoration: none !important;
	opacity: 0.9;
}

.dvf-cf-btn-1 {
	background: #043150;
	color: #ffffff;
	border-color: #043150;
	border-radius: 30px;
}

.dvf-cf-btn-2 {
	background: #ffffff;
	color: #043150;
	border-color: #043150;
	border-radius: 25px;
}

.dvf-cf-divider {
	width: 100%;
	height: 0;
	border-top: 1px solid #DCDDE8;
}

/* Ca pe pagina Contact: înălțime FIXĂ + object-fit:cover, nu height:auto
   — altfel, pe mobil, o poză portret ar deveni foarte înaltă și ar
   împinge formularul mult mai jos. Elementor controlează valoarea
   exactă (responsive) prin controlul „Înălțime imagine"; valorile de
   mai jos sunt doar un fallback rezonabil dacă CSS-ul generat de
   Elementor lipsește dintr-un motiv oarecare.

   Trei straturi, nu unul: „Umbră" (box-shadow) și decuparea zoom-ului
   (overflow:hidden) nu pot coexista corect pe același element — o umbră
   pe un element cu overflow:hidden ar fi tăiată de propriul overflow.
   De-asta înălțimea/rotunjirea/umbra sunt pe .dvf-cf-image-shadow (cutia
   „vizibilă" din exterior, fără overflow:hidden), decuparea zoom-ului e
   pe .dvf-cf-image-clip (border-radius:inherit — se potrivește automat
   cu rotunjirea de pe wrap, fără control CSS dublat), iar imaginea
   propriu-zisă (cu zoom-ul din „Zoom") stă în interior. */
.dvf-cf-image-shadow {
	display: block;
	width: 100%;
	height: 600px;
	border-radius: 15px;
	box-shadow: none;
}

.dvf-cf-image-clip {
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
}

.dvf-cf-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	transform-origin: center;
}

@media (max-width: 767px) {
	.dvf-cf-image-shadow {
		height: 350px;
	}
}

/* Bloc social (ca pe pagina Echipa) — alternativă la imagine. */
.dvf-cf-social-heading {
	margin: 0 !important;
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	color: #043150 !important;
}

.dvf-cf-social-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.dvf-cf-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 53px;
	height: 53px;
	border-radius: 50%;
	background: #043150;
	color: #ffffff;
	text-decoration: none !important;
	flex-shrink: 0;
	transition: opacity 0.2s ease;
}

.dvf-cf-social-icon:hover,
.dvf-cf-social-icon:focus {
	opacity: 0.85;
	text-decoration: none !important;
}

.dvf-cf-social-icon i {
	font-size: 18px;
	line-height: 1;
	color: inherit;
}

.dvf-cf-social-icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.dvf-cf-editor-notice {
	background: #FFF6E5;
	border: 1px dashed #E0B23C;
	border-radius: 8px;
	padding: 16px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: #7A5B00;
}

/* ===================== Formular Contact Form 7 ===================== */

/* Câmpuri generice: text, email, telefon, dată, select, mesaj — pentru
   ORICE formular CF7, cu sau fără marcaj special. Tema aplică un stil
   implicit agresiv pe <input>/<select>/<textarea>/<button> (aceeași hibă
   întâlnită la butonul din widgetul FAQ), deci proprietățile au
   !important, iar selectorul repetă clasa CF7 de 3 ori pentru
   specificitate mai mare decât regula temei. */
.dvf-cf-form-wrap .wpcf7-form-control.wpcf7-form-control.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
	display: block !important;
	width: 100% !important;
	/* background-color, NU shorthand `background` — shorthand ar reseta și
	   background-image, ceea ce ar anula săgeata custom de mai jos de la
	   <select> (regula asta are specificitate mai mare, din cauza celor
	   două :not(), deci ar câștiga oricum în fața regulii pentru select). */
	background-color: #FFFFFF !important;
	border: 1px solid #E6E6E6 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	color: #333333 !important;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	padding: 9px 12px !important;
	margin: 0 !important;
}

.dvf-cf-form-wrap input.wpcf7-form-control.wpcf7-form-control.wpcf7-form-control:not(.wpcf7-submit) {
	height: 50px !important;
}

.dvf-cf-form-wrap select.wpcf7-form-control.wpcf7-form-control.wpcf7-form-control {
	height: 50px !important;
	padding-right: 32px !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	cursor: pointer;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 12px 8px !important;
}

.dvf-cf-form-wrap textarea.wpcf7-form-control.wpcf7-form-control.wpcf7-form-control {
	height: 70px !important;
	resize: vertical;
}

/* CF7 pune câmpurile ascunse (anti-spam etc.) într-un <fieldset>, care
   are implicit un contur vizibil în browser — fără reset, apărea o
   cutie goală deasupra primului câmp. */
.dvf-cf-form-wrap fieldset {
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.dvf-cf-form-wrap label {
	display: block !important;
	margin: 0 0 7px !important;
	color: #000000 !important;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 400;
}

.dvf-cf-form-wrap p {
	margin: 0 0 12px;
}

.dvf-cf-form-wrap p:last-child {
	margin-bottom: 0;
}

/* Butonul de trimitere — tot un <button>/<input type=submit>, deci
   aceeași hibă de temă + același fix cu tripla clasă + !important. */
.dvf-cf-form-wrap .wpcf7-submit.wpcf7-submit.wpcf7-submit {
	display: inline-block !important;
	cursor: pointer !important;
	background: #043150 !important;
	background-color: #043150 !important;
	color: #FFFFFF !important;
	border: 0 !important;
	border-style: none !important;
	border-radius: 25px !important;
	box-shadow: none !important;
	padding: 10px 36px !important;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 600;
	transition: opacity 0.2s ease;
}

.dvf-cf-form-wrap .wpcf7-submit.wpcf7-submit.wpcf7-submit:hover {
	opacity: 0.9;
}

.dvf-cf-form-wrap .dts-submit {
	text-align: center;
	padding-top: 6px;
}

/* Acord GDPR (checkbox + text). */
.dvf-cf-form-wrap .wpcf7-list-item-label {
	color: #777777;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	line-height: 1.4;
}

.dvf-cf-form-wrap .wpcf7-list-item-label a {
	color: #52A8FF;
	text-decoration: underline;
}

.dvf-cf-form-wrap .wpcf7-acceptance input[type="checkbox"] {
	accent-color: #043150;
	width: 17px;
	height: 17px;
	margin-top: 1px;
}

/* Erori de validare CF7 (afișate lângă câmp la trimitere). */
.dvf-cf-form-wrap .wpcf7-not-valid-tip {
	color: #D9534F;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	margin-top: 4px;
}

/* ================ Marcaj „îmbunătățit" (dts-card / dts-two-col) ================
   Prezent doar când formularul ales chiar folosește acest marcaj în
   propriul șablon salvat (ex: formularul implicit, ca pe pagina Contact).
   Dacă nu există, regulile de mai jos pur și simplu nu se aplică la
   nimic — formularul rămâne stilizat generic, mai sus. */
.dvf-cf-form-wrap .dts-card.dts-card.dts-card {
	background: #F4F5F7 !important;
	border-radius: 12px !important;
	padding: 12px 16px !important;
	margin-bottom: 12px !important;
}

.dvf-cf-form-wrap .dts-two-col.dts-two-col.dts-two-col {
	display: flex !important;
	gap: 12px !important;
}

.dvf-cf-form-wrap .dts-two-col .dts-field {
	flex: 1 1 0%;
	min-width: 0;
}

.dvf-cf-form-wrap .dts-gdpr.dts-gdpr.dts-gdpr {
	background: #F4F5F7 !important;
	border-radius: 12px !important;
	padding: 12px 16px !important;
	margin-bottom: 12px !important;
}

@media (max-width: 1024px) {
	.dvf-cf-row {
		flex-direction: column;
		gap: 32px;
	}

	.dvf-cf-row.dvf-cf-reverse {
		flex-direction: column;
	}

	/* !important obligatoriu aici: controlul „Lățime coloană text" din
	   Stil generează pentru acest widget o regulă foarte specifică
	   (.dvf-cf-left.dvf-cf-left.dvf-cf-left, cu ID-ul elementului), activă
	   și pe tabletă, și pe mobil (controlul e responsive doar pe
	   desktop/tabletă, dar regula ei de tip max-width ramane valabilă și
	   la lățimi mai mici) — fără !important, acea regulă câștiga mereu și
	   coloana text rămânea blocată la lățimea de pe desktop (ex. 42%),
	   oricât de îngust ar fi ecranul. La fel ca la „Servicii stomatologice
	   în [oraș]" (.dvf-shero-content), care are deja acest !important. */
	.dvf-cf-left {
		flex-basis: auto !important;
		max-width: 100% !important;
	}

	/* Pe desktop, „Inversează ordinea" pune formularul primul (stânga) —
	   dar flex-direction:column de mai sus ignoră row-reverse și
	   stivuiește mereu în ordinea din DOM (text, apoi formular), deci pe
	   mobil formularul ajungea mereu ultimul, oricare ar fi fost ordinea
	   aleasă pe desktop. Cu `order` de mai jos, ordinea de pe mobil
	   respectă exact ce s-a ales pe desktop: dacă formularul e primul
	   acolo, e primul și stivuit pe mobil. */
	.dvf-cf-row.dvf-cf-reverse .dvf-cf-left {
		order: 2;
	}

	.dvf-cf-row.dvf-cf-reverse .dvf-cf-form-wrap {
		order: 1;
	}
}

@media (max-width: 767px) {
	.dvf-cf-form-wrap .dts-two-col.dts-two-col.dts-two-col {
		flex-direction: column;
	}

	/* La fel ca la „Servicii stomatologice în [oraș]" (servicii-hero): pe
	   telefon, cele două butoane (Programează-te / Sună acum) stau unul
	   lângă altul, împărțind lățimea rândului, nu unul sub altul pe toată
	   lățimea — așa arată și acolo pe mobil. */
	.dvf-cf-btn {
		flex: 1 1 auto;
	}
}