/*!
 * mefi Formulare — mf-form.css (0.4.0: aspectul unic, direcția A „Albastru sobru”)
 *
 * Sursa valorilor: schița aprobată (pânza „Formular unic mefi – design”: Prestări / Contact / erori /
 * se trimite / succes / dialogul calculatorului pe telefon, Prestări și Contact pe desktop, planșa de
 * componente) și docs/faza3/design-formular-analiza.md §4 (deciziile 1A–12A, 12.10.2026).
 *
 * Unde se aplică (prefix mf- unic):
 *  - #mf-form.mf-form = formularul T1 (<form id="mf-form" class="wpcf7-form mf-form mf-skin-…">); el ESTE
 *    cardul alb (decizia 9A: raza, spațiul interior și umbra le impune pluginul pe toate paginile);
 *  - .mf-tel-dd = lista de țări (portal în <body>; în dialogul T1 / fereastra de pe /testimoniale/, în dialog);
 *  - .mf-dialog = dialogul randat de server în wp_footer (calc_pret pe /preturi/) și html.mf-dialog-open;
 *  - fereastra gazdă de pe /testimoniale/ (#mefi-demo-modal, pluginul mefi-testimoniale-widgets) și
 *    cardurile paginilor (.lp-ps-form-card, .lp-mg-form-card, .form_contact_pg, .afiliati-form-wrap),
 *    DOAR cât conțin T1 (:has(#mf-form)): când contextul e pe „test” sau „revenire”, formularul vechi
 *    din aceeași pagină rămâne exact ca azi.
 *
 * Izolarea de temă și de pagini: regulile din formular pornesc de la #mf-form.mf-form (1,1,0) și au
 * !important pe proprietățile pe care tema (style.css: input/select/textarea, button[type=submit] cu
 * min-width 260 px și umbră la hover, .wpcf7-acceptance centrat, .wpcf7-spinner mutat absolut,
 * .title_form_mefi centrat) sau paginile (body.page-id-43 …, .lp-ps-form-card …, .lp-mg-form-card …
 * cu înălțimea butonului impusă și ridicarea la hover, .lp-fv-cta-final … !important) le impun, inclusiv
 * cu !important: un ID bate orice selector fără ID, iar !important bate regulile normale ale paginii.
 *
 * Clase din șablonul T1 v3 (modulul Cf7): .mf-title, .mf-subtitle, .mf-attach, .mf-fields > .mf-field,
 * .mf-label, .mf-tel (.mf-tel-flag randat de server), .mf-checks (.mf-consent, .mf-newsletter),
 * .mf-row-turnstile, .mf-status, .mf-actions (button.mf-submit cu .mf-submit__spin / .mf-submit__t).
 * mf-form.js adaugă: .mf-js, .mf-err, .mf-invalid, .mf-is-busy, .mf-is-waiting, .mf-is-sent, .mf-hl;
 * mf-calc-bridge.js: conținutul lui .mf-attach.
 *
 * Interzis (schița, brandbook-ul): gradiente decorative, emoji (iconițele sunt SVG), umbre colorate,
 * ridicare la hover, majuscule automate, text centrat pe mai multe rânduri, halou pulsant.
 * Mișcare: 120 ms pe stări, intrarea dialogului ~200 ms; nimic pentru prefers-reduced-motion.
 */

/* ======================================================================================
 * 1. Tokenii (direcția A)
 * ==================================================================================== */
.mf-form,
.mf-tel-dd,
.mf-dialog,
#mefi-demo-modal {
  /* culori */
  --mf-ink: #060613;            /* text principal: etichete, valori, titlu (Shadow Grid, 20,13) */
  --mf-muted: #4b4b5c;          /* text secundar: acord, newsletter, note (8,54) */
  --mf-placeholder: #6b6b80;    /* exemplul din câmp (5,20) */
  --mf-line: #8c8ca3;           /* conturul câmpului și al bifei (3,28) */
  --mf-line-hover: #77778c;
  --mf-card-line: #e9e9f0;      /* conturul cardului și al listei de țări */
  --mf-tint: #f7f7fa;           /* Grey 25: prefixul de telefon, rândul ales din listă, hover pe X */
  --mf-white: #ffffff;
  --mf-blue: #252299;           /* buton, linkuri, bifă, inelul de focus (11,88) */
  --mf-blue-hover: #191768;     /* (15,40) */
  --mf-blue-press: #0f0e3f;     /* (18,18) */
  --mf-sand: #f7f2e8;           /* blocul informativ (rezumatul calculatorului, „așteaptă verificarea”) */
  --mf-err: #d92d20;            /* conturul câmpului greșit și mesajul de sub el (4,83) */
  --mf-err-bg: #fef5f4;
  --mf-err-line: #fecdca;
  --mf-ok: #079455;             /* doar iconița de succes */
  --mf-ok-bg: #edfcf2;
  --mf-ok-line: #abefc6;
  --mf-overlay: rgba(6, 6, 19, 0.62);

  /* umbre și inelul de focus */
  --mf-ring: 0 0 0 2px #ffffff, 0 0 0 6px #252299;
  --mf-shadow-card: 0 24px 48px -12px rgba(10, 13, 18, 0.18);
  --mf-shadow-sheet: 0 -12px 32px -8px rgba(10, 13, 18, 0.2);
  --mf-shadow-pop: 0 16px 32px -12px rgba(10, 13, 18, 0.18);
  --mf-shadow-xs: 0 1px 2px rgba(10, 13, 18, 0.05);

  /* forme și spații */
  --mf-radius: 8px;             /* câmp, buton, mesaje */
  --mf-radius-card: 16px;
  --mf-radius-sheet: 18px;
  --mf-h: 44px;                 /* înălțimea câmpului și a butonului */
  --mf-pad: 28px;               /* spațiul interior al cardului (20 px sub 480 px) */
  --mf-card-max: 100%;          /* lățimea maximă a cardului; o schimbă doar skin-ul */
  --mf-dur: 120ms;
  --mf-font: 'Mona Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* iconițele (SVG, contur 1,5–2 px, capete rotunjite, ca setul mefi) */
  --mf-i-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='6.25' stroke='%23d92d20' stroke-width='1.5'/%3E%3Cpath d='M8 4.75v3.75' stroke='%23d92d20' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11' r='.9' fill='%23d92d20'/%3E%3C/svg%3E");
  --mf-i-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='8.25' stroke='%23079455' stroke-width='1.5'/%3E%3Cpath d='M6.5 10.2l2.4 2.4 4.6-4.9' stroke='%23079455' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mf-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 7.2l2.6 2.6L11 4.4' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mf-i-picked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.2l3 3 6-6.4' stroke='%23252299' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mf-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%234b4b5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mf-i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 4.5l9 9M13.5 4.5l-9 9' stroke='%234b4b5c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --mf-i-x-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 4.5l9 9M13.5 4.5l-9 9' stroke='%23060613' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ======================================================================================
 * 2. Cardul (formularul T1 însuși)
 * ==================================================================================== */
#mf-form.mf-form {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--mf-card-max);
  margin: 0 auto;
  padding: var(--mf-pad);
  background: var(--mf-white);
  border: 1px solid var(--mf-card-line);
  border-radius: var(--mf-radius-card);
  box-shadow: var(--mf-shadow-card);
  font-family: var(--mf-font) !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--mf-ink);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 479.98px) {
  #mf-form.mf-form {
    --mf-pad: 20px;
  }
}
#mf-form.mf-form *,
#mf-form.mf-form *::before,
#mf-form.mf-form *::after {
  box-sizing: border-box;
}
#mf-form.mf-form p {
  margin: 0;
}
#mf-form.mf-form br {
  display: none;
}
/* containerul câmpurilor ascunse din CF7 6 (fără chenar, chiar dacă styles.css al CF7 lipsește) */
#mf-form.mf-form fieldset.hidden-fields-container {
  display: none !important;
  margin: 0;
  padding: 0;
  border: 0;
}
#mf-form.mf-form .mf-row {
  margin: 0;
}

/* textul doar pentru cititoarele de ecran (etichetele nu-l mai folosesc din 0.4.0; titlul dialogului da) */
.mf-form .mf-sr-only,
.mf-dialog .mf-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- titlul (h4.title_form_mefi din registru): 600 20/25, la stânga, oriunde ar fi ---------- */
#mf-form.mf-form .mf-title {
  margin: 0 0 16px !important;
  padding: 0;
}
#mf-form.mf-form .mf-title,
#mf-form.mf-form .mf-title > * {
  font: 600 20px/25px var(--mf-font) !important;
  letter-spacing: -0.015em !important;
  color: var(--mf-ink) !important;
  text-align: left !important;
  text-transform: none !important;
  text-wrap: balance;
}
#mf-form.mf-form .mf-title > * {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* ---------- subtitlul / nota (subtitle_html): 400 14,5 / 1,55, text secundar ---------- */
#mf-form.mf-form .mf-subtitle {
  margin: 0 0 16px;
  font: 400 14.5px/1.55 var(--mf-font) !important;
  color: var(--mf-muted) !important;
  text-align: left !important;
}
#mf-form.mf-form .mf-title + .mf-subtitle {
  margin-top: -10px; /* 6 px sub titlu */
}
#mf-form.mf-form .mf-subtitle > * {
  margin: 0 !important;
  font: inherit !important;
  color: inherit !important;
  text-align: inherit !important;
}

/* ======================================================================================
 * 3. Câmpurile
 * ==================================================================================== */

/*
 * Grila: două coloane DOAR când formularul are cel puțin 560 px (decizia 6A), oricare ar fi ecranul —
 * și în dialog sau într-un card îngust de pe desktop. Fără container queries (containment-ul ar strânge
 * formularul într-un părinte care se potrivește după conținut) și fără JS (fără salt la încărcare): o
 * coloană are minimum max(272 px, jumătate din grilă), deci încap două doar de la 2 × 272 + 16 = 560 px;
 * sub 272 px, minimul e lățimea grilei. Cardul de pe Prestări (660 px, conținut 602) are deci 2 coloane,
 * cel de pe Contact (580 px, conținut 522) una, ca în schiță.
 */
#mf-form.mf-form .mf-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* rezerva pentru browserele fără min() / max() */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(272px, calc((100% - 16px) / 2))), 1fr));
  gap: 16px;
  align-items: start;
  margin: 0;
}
#mf-form.mf-form .mf-field {
  display: block;
  min-width: 0;
  margin: 0;
}
#mf-form.mf-form .mf-field--wide {
  grid-column: 1 / -1;
}

/* eticheta stă deasupra câmpului, legată prin for/id: 500 14/20, text principal, 6 px până la câmp */
#mf-form.mf-form .mf-label {
  display: block !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  font: 500 14px/20px var(--mf-font) !important;
  letter-spacing: normal !important;
  color: var(--mf-ink) !important;
  text-align: left !important;
  text-transform: none !important;
}
#mf-form.mf-form .mf-label-text {
  font: inherit;
  color: inherit;
}
#mf-form.mf-form .wpcf7-form-control-wrap {
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
}

/* câmpurile text: 44 px, contur #8c8ca3, text 16/22 pe toate ecranele (iOS nu mărește pagina) */
#mf-form.mf-form input[type="text"],
#mf-form.mf-form input[type="email"],
#mf-form.mf-form input[type="tel"],
#mf-form.mf-form input[type="search"],
#mf-form.mf-form input[type="url"],
#mf-form.mf-form input[type="number"],
#mf-form.mf-form select,
#mf-form.mf-form textarea {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--mf-h) !important;
  min-height: var(--mf-h) !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  font: 400 16px/22px var(--mf-font) !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-transform: none !important;
  color: var(--mf-ink) !important;
  background: var(--mf-white) !important;
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-radius) !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color var(--mf-dur) ease, box-shadow var(--mf-dur) ease !important;
}
#mf-form.mf-form textarea {
  height: auto !important;
  min-height: 110px !important;
  resize: vertical;
}
#mf-form.mf-form select {
  padding-right: 40px !important;
  background: var(--mf-white) var(--mf-i-chevron) right 12px center / 16px 16px no-repeat !important;
  cursor: pointer;
}
#mf-form.mf-form input::placeholder,
#mf-form.mf-form textarea::placeholder {
  font: inherit !important;
  color: var(--mf-placeholder) !important;
  opacity: 1 !important;
}
#mf-form.mf-form input[type="text"]:hover,
#mf-form.mf-form input[type="email"]:hover,
#mf-form.mf-form input[type="tel"]:hover,
#mf-form.mf-form input[type="search"]:hover,
#mf-form.mf-form select:hover,
#mf-form.mf-form textarea:hover {
  border-color: var(--mf-line-hover) !important;
}
#mf-form.mf-form input[type="text"]:focus,
#mf-form.mf-form input[type="email"]:focus,
#mf-form.mf-form input[type="tel"]:focus,
#mf-form.mf-form input[type="search"]:focus,
#mf-form.mf-form select:focus,
#mf-form.mf-form textarea:focus {
  box-shadow: var(--mf-ring) !important;
}

/* completat automat de browser: tot pe alb (fără albastrul pus de Chrome), text principal */
#mf-form.mf-form input:-webkit-autofill,
#mf-form.mf-form input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--mf-ink) !important;
  caret-color: var(--mf-ink);
  -webkit-box-shadow: inset 0 0 0 1000px var(--mf-white) !important;
  box-shadow: inset 0 0 0 1000px var(--mf-white) !important;
}
#mf-form.mf-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--mf-ink) !important;
  -webkit-box-shadow: inset 0 0 0 1000px var(--mf-white), var(--mf-ring) !important;
  box-shadow: inset 0 0 0 1000px var(--mf-white), var(--mf-ring) !important;
}
#mf-form.mf-form input:autofill {
  -webkit-text-fill-color: var(--mf-ink) !important;
  box-shadow: inset 0 0 0 1000px var(--mf-white) !important;
}
#mf-form.mf-form input:autofill:focus {
  box-shadow: inset 0 0 0 1000px var(--mf-white), var(--mf-ring) !important;
}

/* eroare pe câmp: contur #d92d20, fondul rămâne alb (aria-invalid pus de mf-form.js sau de CF7) */
#mf-form.mf-form input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]),
#mf-form.mf-form select[aria-invalid="true"],
#mf-form.mf-form textarea[aria-invalid="true"] {
  border-color: var(--mf-err) !important;
  background-color: var(--mf-white) !important;
}

/* ---------- mesajul de sub câmp: 500 13/18 #d92d20 cu iconiță de 16 px ---------- */
/* mesajele proprii sunt vizibile mereu (paginile 43 și 12973 ascund .wpcf7-not-valid-tip cu !important);
   fără mf-form.js rămân cele native ale CF7, în același aspect */
#mf-form.mf-form .mf-err:not([hidden]),
#mf-form.mf-form:not(.mf-js) .wpcf7-not-valid-tip {
  position: static !important;
  display: flex !important;
  align-items: flex-start;
  gap: 6px;
  width: auto !important;
  max-width: none !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  font: 500 13px/18px var(--mf-font) !important;
  letter-spacing: normal !important;
  color: var(--mf-err) !important;
  text-align: left !important;
  text-transform: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#mf-form.mf-form .mf-err:not([hidden])::before,
#mf-form.mf-form:not(.mf-js) .wpcf7-not-valid-tip::before {
  content: '' !important;
  position: static !important;
  display: block !important;
  flex: 0 0 16px;
  width: 16px !important;
  height: 16px !important;
  margin: 1px 0 0 !important;
  border: 0 !important;
  background: var(--mf-i-err) center / 16px 16px no-repeat !important;
}
#mf-form.mf-form .mf-err[hidden] {
  display: none !important;
}
/* sub acord, mesajul începe în dreptul textului (24 px bifa + 12 px) */
#mf-form.mf-form .mf-checks .mf-err:not([hidden]),
#mf-form.mf-form:not(.mf-js) .mf-checks .wpcf7-not-valid-tip {
  margin-left: 36px !important;
}
/* cu JS activ, mesajele CF7 se oglindesc în .mf-err / .mf-status */
#mf-form.mf-form.mf-js .wpcf7-not-valid-tip,
#mf-form.mf-form.mf-js .wpcf7-response-output {
  display: none !important;
}
/* ...și regiunea CF7 pentru cititoarele de ecran (role=status) tace: un singur anunț, cel din .mf-status
   (revizia 0.4.0; mf-form.js o ascunde și el, cu hidden + aria-hidden, pentru browserele fără :has()) */
.wpcf7:has(> #mf-form.mf-js) > .screen-reader-response {
  display: none !important;
}

/* ======================================================================================
 * 4. Telefonul: prefixul de țară (100 px, randat de server) + câmpul, la 8 px unul de altul
 * ==================================================================================== */
#mf-form.mf-form .mf-tel {
  position: relative;
  display: flex !important;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
#mf-form.mf-form .mf-tel > .wpcf7-form-control-wrap {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
#mf-form.mf-form .mf-tel-flag {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  flex: 0 0 100px;
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  height: var(--mf-h) !important;
  min-height: var(--mf-h) !important;
  margin: 0 !important;
  padding: 0 10px 0 12px !important;
  font: 600 14px/20px var(--mf-font) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--mf-ink) !important;
  background: var(--mf-tint) !important;
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-radius) !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--mf-dur) ease, box-shadow var(--mf-dur) ease !important;
}
#mf-form.mf-form .mf-tel-flag:hover {
  border-color: var(--mf-line-hover) !important;
}
#mf-form.mf-form .mf-tel-flag:focus-visible {
  box-shadow: var(--mf-ring) !important;
}
#mf-form.mf-form .mf-tel-flag[aria-expanded="true"] {
  border-color: var(--mf-blue) !important;
  box-shadow: var(--mf-ring) !important;
}
#mf-form.mf-form .mf-tel-flag .mf-tel-pf {
  color: var(--mf-ink);
}
.mf-tel-fl {
  display: inline-flex;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.mf-tel-fl img.mf-flag {
  display: block;
  width: 18px;
  height: 18px;
  max-width: none;
  margin: 0;
  border-radius: 4px;
  object-fit: cover;
}
/* săgeata: SVG din server (0.4.0); HTML-ul vechi din cache are „▾” ca text → aceeași săgeată, desenată */
#mf-form.mf-form .mf-tel-flag .mf-tel-ar {
  flex: none;
  margin-left: auto;
  color: var(--mf-muted);
  transition: transform var(--mf-dur) ease;
}
/* lista deschisă: săgeata în sus (planșa de componente, butonul cu aria-expanded="true": M4 10l4-4 4 4) */
#mf-form.mf-form .mf-tel-flag[aria-expanded="true"] .mf-tel-ar {
  transform: rotate(180deg);
}
#mf-form.mf-form .mf-tel-flag svg.mf-tel-ar {
  display: block;
  width: 16px;
  height: 16px;
}
#mf-form.mf-form .mf-tel-flag span.mf-tel-ar {
  display: block;
  width: 16px;
  height: 16px;
  font-size: 0;
  color: transparent;
  background: var(--mf-i-chevron) center / 16px 16px no-repeat;
}

/* ---------- lista de țări (portal în <body> sau în dialogul aria-modal, poziționată fix de JS; înălțimea maximă 340 px
   e și în JS, care o micșorează la locul vizibil) ---------- */
.mf-tel-dd {
  position: fixed;
  z-index: 2147483620; /* peste dialog (2147483610), vezi §9 */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 300px;
  max-width: calc(100vw - 24px);
  max-height: 340px;
  margin: 0;
  padding: 8px;
  overflow: hidden;
  background: var(--mf-white);
  border: 1px solid var(--mf-card-line);
  border-radius: 12px;
  box-shadow: var(--mf-shadow-pop);
  font: 400 14px/20px var(--mf-font) !important;
  color: var(--mf-ink);
  text-align: left;
}
.mf-tel-dd *,
.mf-tel-dd *::before,
.mf-tel-dd *::after {
  box-sizing: border-box;
}
.mf-tel-dd[hidden] {
  display: none !important;
}
.mf-tel-dd .mf-tel-dd__s {
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.mf-tel-dd .mf-tel-dd__s input {
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  font: 400 16px/22px var(--mf-font) !important;
  color: var(--mf-ink) !important;
  background: var(--mf-white) !important;
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-radius) !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color var(--mf-dur) ease, box-shadow var(--mf-dur) ease !important;
}
.mf-tel-dd .mf-tel-dd__s input::placeholder {
  font: inherit !important;
  color: var(--mf-placeholder) !important;
  opacity: 1 !important;
}
.mf-tel-dd .mf-tel-dd__s input:hover {
  border-color: var(--mf-line-hover) !important;
}
.mf-tel-dd .mf-tel-dd__s input:focus {
  box-shadow: var(--mf-ring) !important;
}
.mf-tel-dd ul {
  flex: 1 1 auto;
  min-height: 0;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  outline: none; /* focusul pe listă (ecranele tactile): rândul activ / ales îl arată */
}
.mf-tel-dd li {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0 !important;
  padding: 0 10px !important;
  font: 400 14px/20px var(--mf-font) !important;
  color: var(--mf-ink) !important;
  background: none;
  border-radius: var(--mf-radius);
  list-style: none !important;
  cursor: pointer;
  transition: background-color var(--mf-dur) ease;
}
.mf-tel-dd li::before {
  content: none !important;
}
/* locul bifei rezervat pe toate rândurile (aliniere); rândul ales îl desenează */
.mf-tel-dd li::after {
  content: '';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}
.mf-tel-dd li[hidden] {
  display: none !important;
}
/* rândul ales: nuanța + bifa (ca în planșa de componente); hover: nuanța */
.mf-tel-dd li:hover,
.mf-tel-dd li[aria-selected="true"] {
  background: var(--mf-tint);
}
/* rândul activ la tastatură (aria-activedescendant, se alege cu Enter): contur interior albastru de 2 px (11,88 pe
   alb), diferit de rândul ales. Doar după o săgeată sau o căutare (.mf-kb, pus de mf-form.js): la deschidere,
   rândul activ = rândul ales, deci lista arată ca în schiță. */
.mf-tel-dd.mf-kb li.is-active {
  box-shadow: inset 0 0 0 2px var(--mf-blue);
}
.mf-tel-dd li[aria-selected="true"]::after {
  background: var(--mf-i-picked) center / 16px 16px no-repeat;
}
.mf-tel-dd .mf-tel-nm {
  flex: 1 1 auto;
  min-width: 0;
}
.mf-tel-dd .mf-tel-pf {
  flex: none;
  color: var(--mf-muted);
}
.mf-tel-dd .mf-tel-dd__empty {
  padding: 16px 10px;
  font-size: 13px;
  line-height: 18px;
  color: var(--mf-muted);
  text-align: left;
}
.mf-tel-dd .mf-tel-dd__empty[hidden] {
  display: none;
}

/* ======================================================================================
 * 5. Acordul și newsletterul (întâi acordul, apoi newsletterul, la 12 px — decizia 3A)
 * ==================================================================================== */
#mf-form.mf-form .mf-checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 0;
}
#mf-form.mf-form .mf-checks > .mf-row {
  min-width: 0;
  margin: 0;
}
#mf-form.mf-form .mf-checks .wpcf7-form-control-wrap,
#mf-form.mf-form .mf-checks .wpcf7-form-control {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font: 400 13px/20px var(--mf-font) !important;
  color: var(--mf-muted) !important;
  text-align: left !important;
}
#mf-form.mf-form .mf-checks .wpcf7-list-item {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
/* bifa (24 px) + 12 px + textul (400 13/20, secundar); zona de atingere: tot rândul, plus 44 px în stânga */
#mf-form.mf-form .mf-checks label {
  position: relative;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  min-height: 24px;
  margin: 0 !important;
  padding: 0 !important;
  font: 400 13px/20px var(--mf-font) !important;
  letter-spacing: normal !important;
  color: var(--mf-muted) !important;
  text-align: left !important;
  text-transform: none !important;
  cursor: pointer;
}
#mf-form.mf-form .mf-checks label::before {
  content: '';
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: -10px;
  width: 46px;
}
#mf-form.mf-form .mf-checks .wpcf7-list-item-label {
  display: block;
  margin: 0 !important;
  padding: 2px 0 0 !important;
  font: inherit !important;
  color: inherit !important;
  text-align: left !important;
}
#mf-form.mf-form .mf-checks a {
  color: var(--mf-blue) !important;
  font-weight: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  border-radius: 2px;
  transition: color var(--mf-dur) ease;
}
#mf-form.mf-form .mf-checks a:hover {
  color: var(--mf-blue-hover) !important;
}
#mf-form.mf-form .mf-checks a:focus-visible {
  outline: none;
  box-shadow: var(--mf-ring);
}

/* bifa proprie: 24 × 24, rază 6, contur 1,5 px; bifată: fond #252299 cu bifă albă SVG */
#mf-form.mf-form .mf-checks input[type="checkbox"] {
  position: relative;
  z-index: 1;
  display: block !important;
  flex: none;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--mf-white) !important;
  border: 1.5px solid var(--mf-line) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer;
  transition: background-color var(--mf-dur) ease, border-color var(--mf-dur) ease, box-shadow var(--mf-dur) ease !important;
}
#mf-form.mf-form .mf-checks input[type="checkbox"]:hover {
  border-color: var(--mf-line-hover) !important;
}
#mf-form.mf-form .mf-checks input[type="checkbox"]:checked {
  background: var(--mf-blue) var(--mf-i-check) center / 14px 14px no-repeat !important;
  border-color: var(--mf-blue) !important;
}
#mf-form.mf-form .mf-checks input[type="checkbox"]:focus-visible {
  box-shadow: var(--mf-ring) !important;
}
#mf-form.mf-form .mf-checks input[type="checkbox"][aria-invalid="true"]:not(:checked),
#mf-form.mf-form .mf-checks .mf-invalid input[type="checkbox"]:not(:checked),
#mf-form.mf-form .mf-checks input[type="checkbox"].wpcf7-not-valid:not(:checked) {
  border-color: var(--mf-err) !important;
}

/* ======================================================================================
 * 6. Turnstile: locul rezervat din prima randare (fără salt când apare widgetul)
 * ==================================================================================== */
/*
 * 70 px pentru „flexible” (300 × 65); 140 px pentru „compact” (150 × 140), pe care mf-form.js îl alege când
 * rândul e mai îngust de 300 px (aceeași măsură, fitTurnstile, corectura din 0.3.1). Înălțimea depinde de
 * lățime fără JS: padding-ul în procente se raportează la lățimea zonei din grilă, deci (300 px − 100 %) ×
 * 1000, limitat la 0…70 px, adaugă 70 px exact sub 300 px. Pseudo-elementul și widgetul stau în aceeași
 * celulă (rândul = maximul lor). Rândul fără widget (integrarea CF7 oprită) nu se randează
 * (FormMarkup::dropEmptyTurnstileRow). Widgetul stă la stânga (paginile îl centrau: .wpcf7-turnstile).
 */
#mf-form.mf-form .mf-row-turnstile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 70px; /* rezerva pentru browserele fără clamp() */
  margin: 20px 0 0;
}
#mf-form.mf-form .mf-row-turnstile::before {
  content: '';
  grid-area: 1 / 1;
  padding-top: calc(70px + clamp(0px, calc((300px - 100%) * 1000), 70px));
}
#mf-form.mf-form .mf-row-turnstile > * {
  grid-area: 1 / 1;
  min-width: 0;
}
#mf-form.mf-form .cf-turnstile,
#mf-form.mf-form .wpcf7-turnstile {
  display: flex !important;
  justify-content: flex-start !important;
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  overflow: hidden;
  /* iframe-ul Cloudflare e inline: fără rândul de text din jurul lui, widgetul are exact înălțimea lui
     (65 / 140), deci încape în locul rezervat; altfel „compact” ieșea 145 și împingea butonul cu 5 px */
  line-height: 0;
}

/* ======================================================================================
 * 7. Mesajul de stare (eroare generală, succes, „așteaptă verificarea anti-robot”)
 * ==================================================================================== */
#mf-form.mf-form .mf-status[hidden] {
  display: none !important;
}
#mf-form.mf-form .mf-status:not([hidden]) {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  margin: 16px 0 0 !important;
  padding: 12px 14px !important;
  font: 400 14px/20px var(--mf-font) !important;
  letter-spacing: normal !important;
  color: var(--mf-ink) !important;
  text-align: left !important;
  background: var(--mf-white);
  border: 1px solid var(--mf-card-line);
  border-radius: var(--mf-radius);
}
#mf-form.mf-form .mf-status:not([hidden])::before {
  content: '';
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: none center / 18px 18px no-repeat;
}
#mf-form.mf-form .mf-status > * {
  grid-column: 2;
  min-width: 0;
}
#mf-form.mf-form .mf-status.is-error {
  background: var(--mf-err-bg) !important;
  border-color: var(--mf-err-line) !important;
}
#mf-form.mf-form .mf-status.is-error::before {
  background-image: var(--mf-i-err);
}
/* succes: fond #edfcf2, contur #abefc6, iconița #079455 de 20 px, text 600 15/22, spațiu 16 pe toate laturile
   (ecranul „Prestări · telefon · succes” din schiță; planșa de componente are 14/16, deci ecranul stării decide) */
#mf-form.mf-form .mf-status.is-ok:not([hidden]) {
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 12px;
  padding: 16px !important;
  font: 600 15px/22px var(--mf-font) !important;
  background: var(--mf-ok-bg) !important;
  border-color: var(--mf-ok-line) !important;
}
#mf-form.mf-form .mf-status.is-ok::before {
  width: 20px;
  height: 20px;
  background-image: var(--mf-i-ok);
  background-size: 20px 20px;
}
/* informativ („Așteptăm verificarea anti-robot…”): blocul Sand, fără iconiță */
#mf-form.mf-form .mf-status.is-info:not([hidden]) {
  grid-template-columns: minmax(0, 1fr);
  color: var(--mf-muted) !important;
  background: var(--mf-sand) !important;
  border-color: var(--mf-sand) !important;
}
#mf-form.mf-form .mf-status.is-info::before {
  display: none;
}
#mf-form.mf-form .mf-status.is-info > * {
  grid-column: 1;
}
#mf-form.mf-form .mf-status__t {
  display: block;
}
#mf-form.mf-form .mf-status__note {
  display: block;
  margin-top: 6px;
  font: 600 12px/16px var(--mf-font);
  color: var(--mf-muted);
}
#mf-form.mf-form .mf-status:focus:not(:focus-visible) {
  outline: none; /* focus pus din script, ca mesajul să fie anunțat */
}

/* fără mf-form.js: mesajul general al CF7, în același aspect (CF7 îl ascunde singur cât e „init”) */
#mf-form.mf-form:not(.mf-js) .wpcf7-response-output {
  margin: 16px 0 0 !important;
  padding: 12px 14px !important;
  font: 400 14px/20px var(--mf-font) !important;
  color: var(--mf-ink) !important;
  text-align: left !important;
  background: var(--mf-white);
  border: 1px solid var(--mf-card-line) !important;
  border-radius: var(--mf-radius);
}
#mf-form.mf-form.sent:not(.mf-js) .wpcf7-response-output {
  background: var(--mf-ok-bg);
  border-color: var(--mf-ok-line) !important;
}
#mf-form.mf-form.invalid:not(.mf-js) .wpcf7-response-output,
#mf-form.mf-form.unaccepted:not(.mf-js) .wpcf7-response-output,
#mf-form.mf-form.failed:not(.mf-js) .wpcf7-response-output,
#mf-form.mf-form.aborted:not(.mf-js) .wpcf7-response-output,
#mf-form.mf-form.spam:not(.mf-js) .wpcf7-response-output {
  background: var(--mf-err-bg);
  border-color: var(--mf-err-line) !important;
}

/* ======================================================================================
 * 8. Butonul: #252299, hover #191768, apăsat #0f0e3f, text alb 600 14,5/20, 44 px, toată lățimea
 * ==================================================================================== */
/* spațiile: Turnstile → buton 16; fără Turnstile (integrarea oprită), bifele → buton 20 */
#mf-form.mf-form .mf-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  text-align: left;
}
#mf-form.mf-form .mf-checks ~ .mf-actions,
#mf-form.mf-form .mf-checks ~ .mf-status:not([hidden]) {
  margin-top: 20px !important;
}
#mf-form.mf-form .mf-row-turnstile ~ .mf-actions,
#mf-form.mf-form .mf-row-turnstile ~ .mf-status:not([hidden]),
#mf-form.mf-form .mf-status:not([hidden]) ~ .mf-actions {
  margin-top: 16px !important;
}
#mf-form.mf-form input[type="submit"],
#mf-form.mf-form button[type="submit"],
#mf-form.mf-form .wpcf7-submit {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: var(--mf-h) !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  font: 600 14.5px/20px var(--mf-font) !important;
  letter-spacing: normal !important;
  text-align: center;
  text-decoration: none !important;
  text-transform: none !important;
  text-shadow: none !important;
  white-space: normal;
  color: var(--mf-white) !important;
  background: var(--mf-blue) !important;
  border: 0 !important;
  border-radius: var(--mf-radius) !important;
  box-shadow: var(--mf-shadow-xs) !important;
  outline: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer;
  transition: background-color var(--mf-dur) ease, box-shadow var(--mf-dur) ease !important;
}
#mf-form.mf-form input[type="submit"]:hover,
#mf-form.mf-form button[type="submit"]:hover,
#mf-form.mf-form .wpcf7-submit:hover {
  background: var(--mf-blue-hover) !important;
  box-shadow: var(--mf-shadow-xs) !important;
  transform: none !important;
}
#mf-form.mf-form input[type="submit"]:active,
#mf-form.mf-form button[type="submit"]:active,
#mf-form.mf-form .wpcf7-submit:active {
  background: var(--mf-blue-press) !important;
  box-shadow: none !important;
  transform: none !important;
}
#mf-form.mf-form input[type="submit"]:focus-visible,
#mf-form.mf-form button[type="submit"]:focus-visible,
#mf-form.mf-form .wpcf7-submit:focus-visible {
  box-shadow: var(--mf-ring) !important;
}
#mf-form.mf-form .mf-submit__t {
  min-width: 0;
}
#mf-form.mf-form .mf-submit__spin {
  display: inline-flex;
  flex: none;
  width: 16px;
  height: 16px;
}
#mf-form.mf-form .mf-submit__spin[hidden] {
  display: none !important;
}
#mf-form.mf-form .mf-submit__spin svg {
  display: block;
  width: 16px;
  height: 16px;
  animation: mf-spin 0.8s linear infinite;
}
@keyframes mf-spin {
  to { transform: rotate(360deg); }
}
/* „se trimite” și „așteaptă verificarea anti-robot” (garda TS pune disabled): butonul nu se mai apasă,
   dar culoarea rămâne plină, fără hover */
#mf-form.mf-form.mf-is-busy .wpcf7-submit,
#mf-form.mf-form.mf-is-waiting .wpcf7-submit,
#mf-form.mf-form .wpcf7-submit[aria-disabled="true"],
#mf-form.mf-form .wpcf7-submit:disabled,
#mf-form.mf-form.mf-is-busy .wpcf7-submit:hover,
#mf-form.mf-form.mf-is-waiting .wpcf7-submit:hover,
#mf-form.mf-form .wpcf7-submit[aria-disabled="true"]:hover,
#mf-form.mf-form .wpcf7-submit:disabled:hover {
  background: var(--mf-blue) !important;
  box-shadow: var(--mf-shadow-xs) !important;
  opacity: 1 !important;
  cursor: default;
}
/* rotița CF7: cu mf-form.js o înlocuiește cea din buton; fără el stă sub buton (tema o muta absolut,
   la ~490 px deasupra formularului) */
#mf-form.mf-form .wpcf7-spinner {
  position: static !important;
  display: block;
  margin: 8px auto 0 !important;
}
#mf-form.mf-form.mf-js .wpcf7-spinner {
  display: none !important;
}

/* ---------- după succes: rămân titlul și panoul verde până la redirect (decizia 12A) ---------- */
#mf-form.mf-form.mf-is-sent .mf-attach,
#mf-form.mf-form.mf-is-sent .mf-fields,
#mf-form.mf-form.mf-is-sent .mf-checks,
#mf-form.mf-form.mf-is-sent .mf-row-turnstile,
#mf-form.mf-form.mf-is-sent .mf-actions,
#mf-form.mf-form.mf-is-sent .mf-err {
  display: none !important;
}
#mf-form.mf-form.mf-is-sent .mf-status:not([hidden]) {
  margin-top: 0 !important;
}
#mf-form.mf-form.mf-is-sent .mf-subtitle {
  display: none;
}

#mf-form.mf-form .mf-note {
  margin: 12px 0 0;
  font: 400 13px/20px var(--mf-font);
  color: var(--mf-muted);
  text-align: left;
}

/* ---------- rezumatul calculatorului [mf_attach]: blocul informativ Sand ---------- */
#mf-form.mf-form .mf-attach {
  margin: 0 0 16px;
  padding: 14px 16px;
  font: 400 14px/20px var(--mf-font);
  color: var(--mf-muted);
  text-align: left;
  background: var(--mf-sand);
  border: 0;
  border-radius: var(--mf-radius);
}
#mf-form.mf-form .mf-attach[hidden] {
  display: none !important;
}
#mf-form.mf-form .mf-attach__hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}
#mf-form.mf-form .mf-attach__t {
  min-width: 0;
  font: 600 15px/22px var(--mf-font);
  color: var(--mf-ink);
}
#mf-form.mf-form .mf-attach__acts {
  display: inline-flex;
  flex: none;
  gap: 12px;
}
#mf-form.mf-form .mf-attach__acts button {
  position: relative;
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: -6px -8px !important;
  padding: 6px 8px !important;
  font: 600 14px/20px var(--mf-font) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  color: var(--mf-blue) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
  transition: color var(--mf-dur) ease !important;
}
/* zona de atingere de 44 px (vizibil: 32 px, ca în schiță): se lungește doar în jos, peste textul rezumatului
   (nimic de apăsat acolo); în sus ar ajunge sub X-ul dialogului */
#mf-form.mf-form .mf-attach__acts button::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: -12px;
  left: 0;
}
#mf-form.mf-form .mf-attach__acts button:hover {
  color: var(--mf-blue-hover) !important;
}
#mf-form.mf-form .mf-attach__acts button:focus-visible {
  outline: none !important;
  box-shadow: var(--mf-ring) !important;
}
#mf-form.mf-form .mf-attach__txt,
#mf-form.mf-form .mf-attach__none {
  margin: 0 0 4px;
}
/* modulele alese: un rând de text, despărțit prin virgulă (fără „pastile”) */
#mf-form.mf-form .mf-attach__chips {
  display: block;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}
#mf-form.mf-form .mf-attach__chip {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  list-style: none;
}
#mf-form.mf-form .mf-attach__chip:not(:last-child)::after {
  content: ', ';
}
#mf-form.mf-form .mf-attach__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
#mf-form.mf-form .mf-attach__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}
#mf-form.mf-form .mf-attach__row dt,
#mf-form.mf-form .mf-attach__row dd {
  min-width: 0;
  margin: 0;
}
#mf-form.mf-form .mf-attach__row dd,
#mf-form.mf-form .mf-attach__row b {
  font-weight: 500;
  color: var(--mf-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#mf-form.mf-form .mf-attach__cap {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--mf-muted);
}
#mf-form.mf-form .mf-attach__row--total {
  margin-top: 4px;
  font-weight: 600;
  color: var(--mf-ink);
}
#mf-form.mf-form .mf-attach__row--total dd,
#mf-form.mf-form .mf-attach__row--total b {
  font-weight: 600;
}

/* ---------- evidențierea după derularea la formular (1,5 s): un contur care se stinge, o singură dată ---------- */
/* pe outline, nu pe box-shadow: cardurile paginilor, golite mai jos, au box-shadow:none !important */
.mf-hl {
  border-radius: var(--mf-radius-card, 16px);
  outline: 0 solid transparent;
  outline-offset: 4px;
  animation: mf-hl 1.5s ease-out 1;
}
@keyframes mf-hl {
  0% { outline: 3px solid rgba(37, 34, 153, 0.45); }
  60% { outline: 3px solid rgba(37, 34, 153, 0.3); }
  100% { outline: 3px solid rgba(37, 34, 153, 0); }
}

/* ======================================================================================
 * 9. Dialogul (calc_pret pe /preturi/) și fereastra gazdă de pe /testimoniale/
 * ==================================================================================== */
/*
 * Decizia lockată a popup-ului: max 460 px, spațiu interior 28 px, rază 16, umbra cardului; fundal
 * rgba(6,6,19,.62) cu estompare 6 px; pe mobil (≤ 640 px) panou care urcă de jos: raza 18, spațiu
 * 24/20/20, până la 56 px de marginea de sus. X: 44 × 44 (decizia lui Ciprian, 12.10), iconiță SVG de
 * 18 px, la 8 / 8 px de colțul panoului (absolut, ca în schiță; derulează odată cu conținutul).
 *
 * Ordinea ferestrelor (plan-extindere-contexte.md §4.2, punctul 5): pe /preturi-crm-erp-pm-bi/ bannerul de
 * dependențe are 2147483600 și fereastra cu informații despre modul 2147483700 (plafonat de browser la
 * 2147483647). Dialogul T1 stă peste banner (2147483610), lista de țări peste dialog (2147483620), dar sub
 * bannerul de cookie-uri Cookiebot (2147483631), care rămâne accesibil. Fereastra modulului și dialogul
 * T1 nu pot fi deschise împreună (fiecare acoperă butoanele care îl deschid pe celălalt).
 */
html.mf-dialog-open,
html.mf-dialog-open body {
  overflow: hidden !important;
}
.mf-dialog {
  position: fixed;
  inset: 0;
  z-index: 2147483610;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 16px;
  background: transparent;
  overflow: hidden;
  font-family: var(--mf-font);
  color: var(--mf-ink);
  text-align: left;
}
.mf-dialog[hidden] {
  display: none !important;
}
.mf-dialog *,
.mf-dialog *::before,
.mf-dialog *::after {
  box-sizing: border-box;
}
.mf-dialog .mf-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: var(--mf-overlay);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: mf-fade 0.16s ease-out;
}
.mf-dialog .mf-dialog__panel,
#mefi-demo-modal:has(#mf-form) .mefi-demo__box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: 0;
  --mf-dlg-pt: 28px; /* spațiul interior sus / în lateral, folosit și de X */
  --mf-dlg-px: 28px;
  padding: var(--mf-dlg-pt) var(--mf-dlg-px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: var(--mf-white);
  border: 0;
  border-radius: var(--mf-radius-card);
  box-shadow: var(--mf-shadow-card);
  animation: mf-pop 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mf-dialog .mf-dialog__panel:focus {
  outline: none;
}
/* titlul dialogului: doar pentru cititoarele de ecran (schița: blocul „Ce trimiți către mefi” deschide
   dialogul); rămâne eticheta dialogului (aria-labelledby) */
.mf-dialog .mf-dialog__title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* X: 44 × 44, rază 8, iconița SVG de 18 px (#4b4b5c → #060613 la hover, fond #f7f7fa); textul vechi „×” /
   „✕” din marcaj nu se mai vede. Absolut, la 8 / 8 px de colțul panoului, ca în schiță: panoul e containerul
   lui și derulează, deci X-ul pleacă odată cu începutul conținutului și nu stă niciodată peste ce derulează
   (revizia 0.4.0: lipit sus — sticky —, ajungea peste „Modifică” și peste prețurile rezumatului, iar atingerea
   colțului linkului închidea dialogul). După derulare, dialogul se închide din fundal, cu Escape sau din X, după
   derularea înapoi. Nu împinge conținutul (nu e în flux). */
.mf-dialog .mf-dialog__close,
#mefi-demo-modal:has(#mf-form) .mefi-demo__x {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-shadow: none;
  background: transparent var(--mf-i-x) center / 18px 18px no-repeat;
  border: 0;
  border-radius: var(--mf-radius);
  box-shadow: none;
  transform: none;
  cursor: pointer;
  transition: background-color var(--mf-dur) ease, box-shadow var(--mf-dur) ease;
}
.mf-dialog .mf-dialog__close:hover,
#mefi-demo-modal:has(#mf-form) .mefi-demo__x:hover {
  background-color: var(--mf-tint);
  background-image: var(--mf-i-x-hover);
}
.mf-dialog .mf-dialog__close:focus-visible,
#mefi-demo-modal:has(#mf-form) .mefi-demo__x:focus-visible {
  outline: none;
  box-shadow: var(--mf-ring);
}

/* T1 în dialog: panoul e cardul, formularul nu mai desenează unul */
.mf-dialog__panel #mf-form.mf-form,
.mefi-demo__box #mf-form.mf-form {
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* titlul formularului nu intră sub X; rezumatul calculatorului (primul bloc, fără titlu deasupra) coboară
   20 px, ca în schiță */
.mf-dialog__panel #mf-form.mf-form .mf-title,
.mefi-demo__box #mf-form.mf-form .mf-title {
  padding-right: 36px;
}
.mf-dialog__panel #mf-form.mf-form .mf-attach {
  margin-top: 20px;
}
.mf-dialog__panel #mf-form.mf-form .mf-title ~ .mf-attach,
.mf-dialog__panel #mf-form.mf-form .mf-subtitle ~ .mf-attach {
  margin-top: 0;
}

/* fereastra de pe /testimoniale/ (cât conține T1): același aspect ca dialogul pluginului */
#mefi-demo-modal:has(#mf-form) {
  padding: 16px;
  font-family: var(--mf-font);
}
#mefi-demo-modal:has(#mf-form) .mefi-demo__overlay {
  background: var(--mf-overlay);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: mf-fade 0.16s ease-out;
}

@media (max-width: 640px) {
  .mf-dialog,
  #mefi-demo-modal:has(#mf-form) {
    align-items: flex-end;
    padding: 0;
  }
  .mf-dialog .mf-dialog__panel,
  #mefi-demo-modal:has(#mf-form) .mefi-demo__box {
    max-width: none;
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px);
    --mf-dlg-pt: 24px;
    --mf-dlg-px: 20px;
    padding: 24px 20px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: var(--mf-radius-sheet) var(--mf-radius-sheet) 0 0;
    box-shadow: var(--mf-shadow-sheet);
    animation: mf-sheet 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

@keyframes mf-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mf-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.965); }
  to { opacity: 1; transform: none; }
}
@keyframes mf-sheet {
  from { transform: translateY(24px); }
  to { transform: none; }
}

/* ======================================================================================
 * 10. Paginile: fundalul din jur și lățimea maximă (skin-urile nu mai schimbă aspectul formularului)
 * ==================================================================================== */
/*
 * Cardurile paginilor (rază, umbră, spațiu, fond alb) se golesc cât conțin T1: cardul îl desenează
 * formularul, iar în jurul lui se vede fundalul secțiunii (gradientul închis pe Prestări, lavanda pe
 * Contact, griul pe afiliere). Marginile (suprapunerea peste hero) și poziția rămân ale paginii.
 * Fără :has() (browsere foarte vechi) rămâne cardul paginii în jurul cardului T1: arată dublat, dar merge.
 */
.lp-ps-form-card:has(#mf-form),
.lp-mg-form-card:has(#mf-form),
.form_contact_pg:has(#mf-form),
.afiliati-form-wrap:has(#mf-form) {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--mf-radius-card, 16px) !important; /* evidențierea (.mf-hl) urmează colțurile cardului */
  box-shadow: none !important;
}
.lp-ps-form-card:has(#mf-form) {
  max-width: 660px !important; /* cardul paginii avea 600 px: cu 28 px spațiu, T1 n-ar mai avea 2 coloane */
}
/* paginile lp-mg (/platforma-mefi/, /consultanta-1-la-1/): pe telefon coloana paginii n-are spațiu lateral, deci
   cardul T1 ar fi lipit de marginile ecranului (raza și conturul tăiate); 16 px de fiecare parte, ca în schiță
   (cardul are mereu fundal în jur). Revizia 0.4.0; contextele lor sunt oprite în 0.4.0. */
@media (max-width: 479.98px) {
  .lp-mg-form-card:has(#mf-form) {
    padding: 0 16px !important;
  }
}

/* lățimea maximă a cardului T1, pe context (schița: Prestări 660 → 2 coloane, Contact 580 → 1 coloană) */
#mf-form.mf-form.mf-skin-lp-ps {
  --mf-card-max: 660px; /* /crm-firme-prestari-servicii/, /crm-firme-hvac/ */
}
#mf-form.mf-form.mf-skin-lp-mg {
  --mf-card-max: 680px; /* /platforma-mefi/, /consultanta-1-la-1/ */
}
#mf-form.mf-form.mf-skin-contact {
  --mf-card-max: 580px; /* /contact/, /prezentare-personalizata/ */
}
#mf-form.mf-form.mf-skin-lp-fv {
  --mf-card-max: 600px;
}
/* afiliere: aspectul unic, cât coloana paginii (fără regulă proprie); calc: în dialog (fără card) */

/* ======================================================================================
 * 11. Accesibilitate: mișcare redusă, contrast forțat
 * ==================================================================================== */
@media (prefers-reduced-motion: reduce) {
  #mf-form.mf-form *,
  #mf-form.mf-form *::before,
  #mf-form.mf-form *::after,
  .mf-tel-dd *,
  .mf-dialog,
  .mf-dialog *,
  #mefi-demo-modal:has(#mf-form) * {
    transition: none !important;
    animation: none !important;
  }
  .mf-hl {
    animation: none;
    outline: 3px solid rgba(37, 34, 153, 0.35);
  }
}
@media (forced-colors: active) {
  #mf-form.mf-form .mf-checks input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    appearance: auto !important;
  }
  /* conturul de focus (inelul din box-shadow dispare în contrast forțat); selectorii de pe rândurile 2–6 sunt cel
     puțin la fel de specifici ca regulile de bază cu `outline: none !important` (bifele, butonul, „Modifică”,
     X-ul ferestrei de pe /testimoniale/), altfel acelea câștigă (revizia 0.4.0; verificat în mf-form-css.test.mjs) */
  #mf-form.mf-form :focus-visible,
  #mf-form.mf-form .mf-checks input[type="checkbox"]:focus-visible,
  #mf-form.mf-form input[type="submit"]:focus-visible,
  #mf-form.mf-form button[type="submit"]:focus-visible,
  #mf-form.mf-form .wpcf7-submit:focus-visible,
  #mf-form.mf-form .mf-attach__acts button:focus-visible,
  #mf-form.mf-form input:focus {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px;
  }
  .mf-tel-dd input:focus,
  .mf-dialog .mf-dialog__close:focus-visible,
  #mefi-demo-modal:has(#mf-form) .mefi-demo__x:focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px;
  }
  /* rândul activ al listei de țări (contur interior din box-shadow, dispărut aici) */
  .mf-tel-dd.mf-kb li.is-active {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}