/* [cc 21.10c] contact-skin.css: aspectul nou al paginii de contact (contact.php + en/contact.php).
   Se încarcă DOAR din inc/_skin_nou.php, doar pe contact.php și doar cu cookie-ul st_skin=nou (după plata-nou.css). Toate regulile stau sub body.st-skin.st-skin-contact
   (clasa o pune filtrul de ieșire, din numele scriptului), deci nu ating paginile de cumpărare și nici contactul fără cookie.
   Schimbă DOAR aspectul: cardul închis devine cardul paginilor de plată (hârtie + cerneală navy pe tema deschisă, cardul închis pe tema închisă), câmpurile și butonul
   sunt cele din configuration.php, fontul Work Sans, erorile formularului (balonul + iconița) și mesajul de succes în culorile noi.
   NU schimbă: textele, câmpurile, ordinea, poza, telefoanele, validarea, trimiterea (cta.check.php). Aceleași puncte de rupere ca style.css (1250 / 768 / 600 px).
   Multe !important: style.css (vechi) pune stilul cardului/câmpurilor pe id (#cta_form, #cta_submit) și pe clase fără prefix, iar plata-nou.css pune culoarea textului pe #about-page-wrapper. */

/* ===================================================================================== 1. firul de pagini: pe pagina veche e invizibil (link transparent, „activ” ascuns); rămâne invizibil */
body.st-skin.st-skin-contact.st-skin-hdr #breadcrumb-wrapper { display: none !important; }

/* [cc 21.10 impr] pagina intră acum în standards mode (scriptul de dinaintea <!DOCTYPE> a fost mutat în <head>). Singura diferență de așezare față de quirks mode: rândul citatului de sub antet
   („Nu ai cum să progresezi…”) ieșea cu 8 px mai înalt (strutul paragrafului de 16 px sub <em> de 15 px). Paragraful ia corpul și înălțimea rândului lui <em> (15 px / 1,5): titlul, cardul și subsolul rămân unde erau. */
body.st-skin.st-skin-contact .titlebar > p { font-size: 15px !important; line-height: 1.5 !important; }

/* ===================================================================================== 2. cardul mare (poza + informații + formular) */
body.st-skin.st-skin-contact .contact-wrapper {
  background: var(--pn-card) !important; background-image: none !important;
  border: 0 !important; border-radius: 16px !important; box-shadow: var(--pn-sh-card) !important;
  margin-top: 56px !important; margin-bottom: 96px !important; padding: 32px !important;
}
body.st-skin.st-skin-contact .contact-photo img { padding: 8px 15px; }

/* ===================================================================================== 3. informațiile de contact */
body.st-skin.st-skin-contact #about-page-wrapper .contact-info h3 {
  color: var(--pn-ink) !important; font: 500 24px/1.25 var(--ws) !important; letter-spacing: -.01em !important;
  transform: none !important; text-shadow: none !important; margin: 0 0 14px !important;
}
body.st-skin.st-skin-contact #about-page-wrapper :is(.contact-info, .contact-details) p {
  color: var(--pn-ink) !important; font: 400 16px/1.5 var(--ws) !important; letter-spacing: 0 !important;
}
body.st-skin.st-skin-contact #about-page-wrapper :is(.contact-info, .contact-details) p .fa { color: var(--pn-ink2) !important; }
/* sub 1250 px lista de telefoane / email / adresă: iconița pe linia textului (în style.css e flex, iconița rămânea sus) */
body.st-skin.st-skin-contact .contact-details p { align-items: center; }
body.st-skin.st-skin-contact .contact-details p .fa { width: 1.25em; text-align: center; }
/* [cc 21.10 impr] telefoanele și emailul sunt linkuri (tel: / mailto:, puse de filtrul din inc/_skin_nou.php): arată ca textul de azi; subliniate la hover și la focus de tastatură */
body.st-skin.st-skin-contact #about-page-wrapper :is(.contact-info, .contact-details) p a { color: inherit !important; text-decoration: none !important; }
body.st-skin.st-skin-contact #about-page-wrapper :is(.contact-info, .contact-details) p a:is(:hover, :focus-visible) { text-decoration: underline !important; text-underline-offset: 3px; }

/* Work Sans e mai lată decât fontul vechi: coloana de informații (15vw, 188 px la 1251 px) rupea adresa de email în două rânduri; aici încape întreagă */
@media (min-width: 1251px) {
  body.st-skin.st-skin-contact .contact-info { width: auto !important; flex: 0 0 auto !important; min-width: 232px; padding-right: 20px; }
}

/* ===================================================================================== 4. câmpurile (ca în configuration.php: umbră adâncită, colț 4 px, 44 px înălțime) */
body.st-skin.st-skin-contact #cta_form input.form-control,
body.st-skin.st-skin-contact #cta_form textarea.form-control {
  -webkit-appearance: none; appearance: none;
  width: 100%; border: 0 !important; border-radius: 4px !important;
  background: var(--pn-field) !important; background-image: none !important; color: var(--pn-ink) !important;
  box-shadow: inset 0 1px 2px var(--pn-in-top), inset 0 0 0 1px var(--pn-edge) !important;
  font: 400 16px/24px var(--ws) !important; letter-spacing: 0 !important; padding: 0 44px 0 12px !important;
  height: 44px; -webkit-text-fill-color: currentColor; transition: box-shadow .15s ease !important;
}
body.st-skin.st-skin-contact #cta_form textarea.form-control { height: auto; min-height: 150px; padding: 10px 44px 10px 12px !important; resize: vertical; }
body.st-skin.st-skin-contact #cta_form :is(input, textarea).form-control::placeholder { color: var(--pn-ink2) !important; opacity: 1 !important; }
body.st-skin.st-skin-contact #cta_form :is(input, textarea).form-control:focus {
  outline: none !important;
  box-shadow: inset 0 1px 2px var(--pn-in-top), inset 0 0 0 1px var(--pn-edge), 0 0 0 2px var(--pn-ink) !important;
}
body.st-skin.st-skin-contact #cta_form input.form-control:-webkit-autofill,
body.st-skin.st-skin-contact #cta_form input.form-control:-webkit-autofill:hover,
body.st-skin.st-skin-contact #cta_form input.form-control:-webkit-autofill:focus,
body.st-skin.st-skin-contact #cta_form input.form-control:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--pn-field) inset, inset 0 0 0 1px var(--pn-edge) !important;
  -webkit-text-fill-color: var(--pn-ink) !important; caret-color: var(--pn-ink);
}
/* erori + valid (balonul și iconița vin din formValidation, neschimbate) */
body.st-skin.st-skin-contact #cta_form .has-error :is(input, textarea).form-control,
body.st-skin.st-skin-contact #cta_form .has-error :is(input, textarea).form-control:focus {
  box-shadow: inset 0 1px 2px var(--pn-in-top), inset 0 0 0 1.5px var(--pn-bad) !important;
}
body.st-skin.st-skin-contact #cta_form .has-error :is(input, textarea).form-control:focus { box-shadow: inset 0 1px 2px var(--pn-in-top), inset 0 0 0 1.5px var(--pn-bad), 0 0 0 2px var(--pn-ink) !important; }
body.st-skin.st-skin-contact #cta_form .form-control-feedback { width: 44px !important; height: 44px !important; line-height: 44px !important; top: 0 !important; right: 0 !important; font-size: 13px; }
body.st-skin.st-skin-contact #cta_form .has-error .form-control-feedback { color: var(--pn-bad) !important; }
body.st-skin.st-skin-contact #cta_form .has-success .form-control-feedback { color: var(--pn-ok) !important; }
body.st-skin.st-skin-contact #cta_form .help-block { color: var(--pn-bad) !important; }
/* [cc 21.10 impr] mesajul de eroare stă sub fiecare câmp gol (js/custom.js nu mai folosește balonul): text mic, aproape de câmp */
body.st-skin.st-skin-contact #cta_form .help-block { margin: 6px 2px 0; font: 500 13px/18px var(--ws); flex: 0 0 100%; }
/* coloana mesajului (col-sm-8) e flex în style.css: fără împachetare mesajul de sub „Mesajul” ajungea lângă câmp și îl strângea; așa coboară pe rândul lui, câmpul rămâne cât coloana */
body.st-skin.st-skin-contact #cta_form .form-group > [class*="col-sm-"] { flex-wrap: wrap; }
/* balonul „Nume gol”: cerneala navy (tema deschisă) / hârtia deschisă (tema închisă), ca butonul principal */
/* bootstrap pune balonului clasa „top” (loc deasupra câmpului), iar foaia antetului nou (final.css) are reguli pe „.top” gol: .top{height:64px;display:flex;padding:0 gutter;position:relative;z-index:30;
   pointer-events:none;margin-inline:auto} și body>.top{position:sticky}. Fără reset balonul „Nume gol” ieșea lat de 1440 px, în capătul paginii, nu deasupra câmpului. */
body.st-skin.st-skin-contact .tooltip.top {
  position: absolute !important; display: block !important; height: auto !important; max-width: none !important;
  padding: 5px 0 !important; margin-inline: 0 !important; z-index: 1070 !important; pointer-events: auto !important;
  align-items: normal !important; justify-content: normal !important;
}
body.st-skin.st-skin-contact .tooltip { opacity: 1 !important; }
body.st-skin.st-skin-contact .tooltip-inner { background: var(--pn-btn) !important; color: var(--pn-btnink) !important; border-radius: 4px !important; font: 500 13px/18px var(--ws) !important; padding: 6px 10px !important; box-shadow: var(--pn-sh-btn); }
body.st-skin.st-skin-contact .tooltip.top .tooltip-arrow { border-top-color: var(--pn-btn) !important; }
body.st-skin.st-skin-contact .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--pn-btn) !important; }
body.st-skin.st-skin-contact .tooltip.left .tooltip-arrow { border-left-color: var(--pn-btn) !important; }
body.st-skin.st-skin-contact .tooltip.right .tooltip-arrow { border-right-color: var(--pn-btn) !important; }

/* ===================================================================================== 5. butonul „Trimite Mesaj” (nivelul 1 din plata-nou.css: plin, 4 px; aici doar lățimea și starea oprită) */
body.st-skin.st-skin-contact #cta_submit { min-width: 220px; margin: 0 auto; }
body.st-skin.st-skin-contact #cta_submit:is(:disabled, [disabled], .disabled) {
  background: var(--pn-key) !important; color: var(--pn-ink2) !important; box-shadow: inset 0 0 0 1px var(--pn-line) !important;
  cursor: not-allowed !important; opacity: 1 !important; transform: none !important; filter: none !important;
}

/* ===================================================================================== 6. mesajul „Mesajul a fost trimis cu succes” (#cta-toast, sus, în mijloc) */
body.st-skin.st-skin-contact #cta-toast {
  background: var(--pn-btn) !important; color: var(--pn-btnink) !important; border: 0 !important; border-radius: 12px !important;
  font: 500 16px/24px var(--ws) !important; padding: 14px 24px !important; width: max-content; max-width: calc(100vw - 32px); text-align: center;
  box-shadow: 0 12px 40px -12px rgba(20, 42, 62, .45), var(--pn-sh-btn) !important;
}

/* ===================================================================================== 7. ecrane mai înguste: aceleași rupturi ca style.css (cardul se așază pe coloană sub 1250 px) */
@media (max-width: 1250px) {
  body.st-skin.st-skin-contact #about-page-wrapper .contact-info h3 { font: 500 clamp(26px, 4vw, 36px)/1.15 var(--ws) !important; margin: 0 0 4px !important; }
  body.st-skin.st-skin-contact .contact-wrapper { padding: 28px 24px !important; margin-top: 40px !important; margin-bottom: 72px !important; }
  body.st-skin.st-skin-contact .contact-form-cta { margin-top: 24px !important; }
  body.st-skin.st-skin-contact .contact-details { margin-top: 12px; }
}
@media (max-width: 768px) {
  /* telefonul: cardul cât ecranul, 16 px de o parte și de alta */
  body.st-skin.st-skin-contact .contact-wrapper { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 24px 16px !important; }
  body.st-skin.st-skin-contact #banner .container { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 600px) {
  body.st-skin.st-skin-contact .contact-wrapper { margin-top: 28px !important; margin-bottom: 56px !important; }
  body.st-skin.st-skin-contact #cta_submit { width: 100%; }
  body.st-skin.st-skin-contact #cta_form .form-group { gap: 16px !important; margin-bottom: 16px !important; }
  /* bootstrap pune ::before/::after (clearfix) pe .form-group; în coloană flex fiecare capăt adaugă încă 16 px de gol: ritm egal între câmpuri */
  body.st-skin.st-skin-contact #cta_form .form-group::before, body.st-skin.st-skin-contact #cta_form .form-group::after { display: none !important; }
}

/* ===================================================================================== 8. en/contact.php: antetul și subsolul vechi rămân (filtrul le schimbă doar pe pagina în română), dar trebuie să se citească pe hârtia nouă */
/* firul de pagini invizibil ține locul de sub antetul fix (70 px, ca pe pagina veche): fără el titlul intră sub antet */
body.st-skin.st-skin-contact:not(.st-skin-hdr) #breadcrumb-wrapper { display: block !important; visibility: hidden; height: 70px; padding: 0 !important; margin: 0 !important; }
/* antetul vechi e sticlă închisă (35% opac) gândită pentru fundal închis: pe hârtie devenea gri cu text alb (2,3:1); aici navy aproape plin */
body.st-skin.st-skin-contact:not(.st-skin-hdr) #header .navbar-fixed-top { background: rgba(15, 25, 40, .94) !important; }
body.st-skin.st-skin-contact:not(.st-skin-hdr) #header .sr-only { color: #fff !important; }   /* „Toggle navigation” (doar pentru cititoare de ecran) moștenea cerneala navy pe fundalul antetului */
/* subsolul vechi (#353d48): plata-nou.css îi punea cerneala navy pe fundal închis (1,3:1); textul revine la gri deschis, iconițele sociale la alb */
body.st-skin.st-skin-contact:not(.st-skin-hdr) #footer :is(p, span, strong) { color: #c9d1d9 !important; }
body.st-skin.st-skin-contact:not(.st-skin-hdr) #footer .he_social, body.st-skin.st-skin-contact:not(.st-skin-hdr) #footer .he_social .fa { color: #f8f8f8 !important; }
/* [cc 21.10 e2e H4] subsolul vechi (iconițele sociale, „Powered by euload”) se termină cu 88 px de loc: bara de chat veche (fixă, 72 px de jos) nu le mai acoperă la capătul paginii (măsurat la 1440 și 390 px: 4-5 linkuri sub bară) */
body.st-skin.st-skin-contact:not(.st-skin-hdr) #footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

/* ===================================================================================== 9. [e2e2 21.10 D8] „Trimite Mesaj” și mesajul de eroare nu rămân niciodată sub bara de chat veche
   Bara (#st-chat-widget: fixă, 48 px înălțime, la 24 px de marginea de jos, z-index 20 din plata-nou.css §11). La 390 px, cu butonul la 754–802 px (derulat de mână, sau cât pagina încă se
   derulează lin spre mesajul de eroare), elementul de sub centrul butonului era bara: un tap deschidea chatul în loc să trimită mesajul, iar bara acoperea textul „pagina a expirat”.
   (1) butonul și caseta de eroare stau peste bară (z-index 25: peste bară, 20, sub antet, 30), caseta cu fundal plin (cel al cardului), deci bara nu se vede prin ea, la orice poziție de derulare;
   (2) la focus (Tab) și la scrollIntoView ({block:'nearest'} din js/custom.js) rămâne loc de 96 px jos: html { scroll-padding-bottom } din plata-nou.css §11, deasupra barii (72 px). */
body.st-skin.st-skin-contact :is(#cta_submit, #cta_error .alert) { position: relative; z-index: 25; }
body.st-skin.st-skin-contact #cta_error .alert { background: var(--pn-card) !important; }