/* =====================================================================
   CNP Craiova — Modal „Solicitare arhivă acte succesorale și autentice"
   Popup de alegere (e-mail / formular) + formular online + succes.
   Namespace .sa-*  ·  Paletă navy/blue/gold a site-ului.
   ===================================================================== */
:root{
  --sa-navy:#0D2B4E; --sa-navy2:#16386a; --sa-blue:#1A5EA8;
  --sa-gold:#C9A84C; --sa-gold2:#a8853c;
  --sa-ink:#46566b; --sa-line:#e6ebf2; --sa-bg:#f4f7fb;
  --sa-sans:'Libre Franklin','Inter',Arial,sans-serif;
  --sa-radius:18px;
}

/* ---------- Overlay ------------------------------------------------- */
.sa-modal{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center; padding:24px;
  visibility:hidden; pointer-events:none;
  /* NU animăm opacity pe tot overlay-ul: ar forța recalcularea blur-ului din
     spate la fiecare cadru → deschiderea era „grea"/sacadată. Doar ascundem cu
     întârziere, ca dialogul + întunecarea să apuce să facă fade-out la închidere. */
  transition:visibility 0s linear .28s;
}
.sa-modal.is-open{ visibility:visible; pointer-events:auto; transition-delay:0s; }

/* Strat de ÎNTUNECARE — ieftin: fade doar prin opacity, fără backdrop-filter. */
.sa-modal::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 0%, rgba(13,43,78,.66), rgba(8,22,42,.82));
  opacity:0; transition:opacity .24s ease;
}
.sa-modal.is-open::before{ opacity:1; }

/* Strat de BLUR — apare instant la deschidere (fără animație pe filtru). Animarea
   blur-ului cadru cu cadru era cauza deschiderii lente pe grafică integrată/mobil. */
.sa-backdrop{
  position:absolute; inset:0;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  transform:translateZ(0);
}

/* ---------- Dialog -------------------------------------------------- */
.sa-dialog{
  position:relative; z-index:1;
  width:100%; max-width:720px; max-height:92vh; overflow:hidden;
  background:#fff; border-radius:var(--sa-radius);
  box-shadow:0 30px 70px rgba(8,22,42,.42), 0 0 0 1px rgba(255,255,255,.04);
  transform:translateY(18px) scale(.98); opacity:0;
  transition:transform .26s cubic-bezier(.22,.61,.36,1), opacity .26s ease;
  will-change:transform, opacity;
  display:flex; flex-direction:column;
}
.sa-modal.is-open .sa-dialog{ transform:none; opacity:1; }
.sa-dialog::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px; z-index:3;
  background:linear-gradient(90deg,var(--sa-gold),var(--sa-gold2) 60%,var(--sa-blue));
}
.sa-x{
  position:absolute; top:14px; right:14px; z-index:4;
  width:38px; height:38px; border:0; cursor:pointer; border-radius:10px;
  background:rgba(13,43,78,.06); color:#5a6b80; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s, transform .2s;
}
.sa-x:hover{ background:rgba(184,50,59,.12); color:#b8323b; transform:rotate(90deg); }

/* ---------- Panouri (swap) ------------------------------------------ */
.sa-panel{ display:none; overflow-y:auto; padding:40px 40px 36px; }
.sa-panel.is-active{ display:block; animation:saFade .38s ease; }
@keyframes saFade{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

.sa-head{ margin-bottom:26px; padding-right:40px; } /* spațiu ca titlul să nu intre sub butonul X */
.sa-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sa-sans); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sa-gold2); margin-bottom:12px;
}
.sa-eyebrow i{ font-size:16px; }
.sa-head h2{
  font-family:var(--sa-sans); font-weight:800; font-size:clamp(21px,3.4vw,27px);
  color:var(--sa-navy); margin:0 0 10px; line-height:1.2;
}
.sa-head p{ font-family:var(--sa-sans); font-size:14.5px; line-height:1.7; color:var(--sa-ink); margin:0; max-width:560px; }
.sa-req{ color:#b8323b; font-weight:700; }

/* ---------- Panou alegere ------------------------------------------- */
.sa-choices{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.sa-choice{
  position:relative; display:flex; flex-direction:column; gap:8px; text-align:left;
  background:#fff; border:1px solid var(--sa-line); border-radius:15px;
  padding:26px 24px 22px; cursor:pointer; text-decoration:none;
  box-shadow:0 10px 26px rgba(13,43,78,.05);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  font-family:var(--sa-sans); width:100%;
}
.sa-choice::after{
  content:""; position:absolute; left:0; top:0; height:100%; width:3px; border-radius:15px 0 0 15px;
  background:linear-gradient(180deg,var(--sa-gold),var(--sa-gold2)); transform:scaleY(0); transform-origin:top; transition:transform .3s ease;
}
.sa-choice:hover{ transform:translateY(-5px); box-shadow:0 26px 50px rgba(13,43,78,.16); border-color:#d6e0ec; }
.sa-choice:hover::after{ transform:scaleY(1); }
.sa-choice-ic{
  width:54px; height:54px; border-radius:14px; margin-bottom:8px;
  display:flex; align-items:center; justify-content:center; font-size:26px; color:var(--sa-blue);
  background:linear-gradient(135deg,rgba(26,94,168,.12),rgba(201,168,76,.18));
  transition:transform .25s ease;
}
.sa-choice:hover .sa-choice-ic{ transform:scale(1.08) rotate(-4deg); }
.sa-choice-form .sa-choice-ic{ color:var(--sa-gold2); }
.sa-choice strong{ font-size:17px; font-weight:700; color:var(--sa-navy); }
.sa-choice-d{ font-size:13px; line-height:1.6; color:#5a6b80; flex:1 1 auto; }
.sa-choice-go{
  display:inline-flex; align-items:center; gap:7px; margin-top:6px;
  font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--sa-gold2);
}
.sa-choice-go i{ transition:transform .2s; }
.sa-choice:hover .sa-choice-go i{ transform:translateX(5px); }

.sa-note{
  display:flex; gap:10px; align-items:flex-start; margin:24px 0 0; padding:16px 18px;
  background:linear-gradient(135deg,#fff8e7,#fffdf7); border:1px solid #ecdcae; border-left:4px solid var(--sa-gold);
  border-radius:12px; font-family:var(--sa-sans); font-size:13px; line-height:1.65; color:#6a5a30;
}
.sa-note i{ flex:0 0 auto; font-size:18px; color:var(--sa-gold2); margin-top:1px; }

/* ---------- Formular ------------------------------------------------ */
.sa-head-form{ position:relative; }
.sa-back{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:14px;
  border:0; background:none; cursor:pointer; padding:0;
  font-family:var(--sa-sans); font-size:13px; font-weight:700; color:#5a6b80; transition:color .2s, transform .2s;
}
.sa-back:hover{ color:var(--sa-blue); transform:translateX(-3px); }

.sa-fieldset{ border:0; padding:0; margin:0 0 24px; }
.sa-fieldset legend{
  display:flex; align-items:center; gap:9px; padding:0; margin-bottom:14px; width:100%;
  font-family:var(--sa-sans); font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--sa-navy);
  text-transform:uppercase; border-bottom:1px solid var(--sa-line); padding-bottom:9px;
}
.sa-fieldset legend i{ font-size:18px; color:var(--sa-gold2); }

.sa-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.sa-field{ display:flex; flex-direction:column; }
.sa-w-full{ grid-column:1 / -1; }
.sa-field label{
  font-family:var(--sa-sans); font-size:12.5px; font-weight:600; color:#3f4f63; margin-bottom:6px;
}
.sa-field input, .sa-field select, .sa-field textarea{
  font-family:var(--sa-sans); font-size:14px; color:var(--sa-navy);
  background:#fff; border:1.5px solid var(--sa-line); border-radius:10px;
  padding:11px 13px; width:100%; box-sizing:border-box;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.sa-field textarea{ resize:vertical; min-height:76px; }
.sa-field select{ cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8853c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
.sa-field input:focus, .sa-field select:focus, .sa-field textarea:focus{
  outline:0; border-color:var(--sa-blue); background:#fff;
  box-shadow:0 0 0 3px rgba(26,94,168,.14);
}
.sa-field.is-invalid input, .sa-field.is-invalid select, .sa-field.is-invalid textarea{
  border-color:#d9534f; box-shadow:0 0 0 3px rgba(217,83,79,.12);
}
.sa-err{ font-family:var(--sa-sans); font-size:11.5px; color:#c0392b; margin-top:5px; min-height:0; display:none; }
.sa-field.is-invalid .sa-err{ display:block; }

/* honeypot */
.sa-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* GDPR */
.sa-gdpr{
  display:flex; gap:12px; align-items:flex-start; margin:6px 0 0; padding:16px 18px;
  background:var(--sa-bg); border:1px solid var(--sa-line); border-radius:12px; cursor:pointer;
}
.sa-gdpr input{ flex:0 0 auto; width:20px; height:20px; margin-top:1px; accent-color:var(--sa-blue); cursor:pointer; }
.sa-gdpr span{ font-family:var(--sa-sans); font-size:12.5px; line-height:1.6; color:#51617a; }
.sa-err-gdpr{ margin-left:2px; }
.sa-err-gdpr.show{ display:block; }

/* Acțiuni */
.sa-actions{ display:flex; gap:12px; justify-content:flex-end; margin-top:24px; flex-wrap:wrap; }
.sa-btn-ghost{
  border:1.5px solid var(--sa-line); background:#fff; cursor:pointer;
  font-family:var(--sa-sans); font-size:13.5px; font-weight:700; color:#5a6b80;
  padding:13px 22px; border-radius:11px; transition:border-color .2s, color .2s, transform .2s;
}
.sa-btn-ghost:hover{ border-color:#cbd6e3; color:var(--sa-navy); transform:translateY(-1px); }
.sa-btn-primary{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:0; cursor:pointer; min-width:210px;
  font-family:var(--sa-sans); font-size:14px; font-weight:700; letter-spacing:.01em; color:#fff;
  background:linear-gradient(135deg,var(--sa-blue),var(--sa-navy));
  padding:14px 26px; border-radius:11px;
  box-shadow:0 12px 26px rgba(26,94,168,.30);
  transition:transform .2s, box-shadow .2s, filter .2s;
}
.sa-btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 18px 34px rgba(26,94,168,.40); }
.sa-btn-primary:disabled{ opacity:.7; cursor:default; transform:none; }
.sa-btn-primary i{ font-size:17px; }
.sa-btn-spin{
  display:none; width:18px; height:18px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; animation:saSpin .7s linear infinite;
}
.sa-loading .sa-btn-label{ display:none; }
.sa-loading .sa-btn-spin{ display:inline-block; }
@keyframes saSpin{ to{ transform:rotate(360deg); } }

.sa-formerr{
  margin:14px 0 0; font-family:var(--sa-sans); font-size:13px; font-weight:600; color:#c0392b;
  text-align:right; min-height:0; display:none;
}
.sa-formerr.show{ display:block; }

/* ---------- Panou succes -------------------------------------------- */
.sa-done{ text-align:center; padding:18px 8px 6px; }
.sa-done-ic{
  width:84px; height:84px; margin:0 auto 22px; border-radius:50%;
  background:linear-gradient(135deg,#1f9d5b,#157a45); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:46px;
  box-shadow:0 18px 40px rgba(31,157,91,.34); animation:saPop .5s cubic-bezier(.22,1.2,.36,1);
}
@keyframes saPop{ 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.sa-done h2{ font-family:var(--sa-sans); font-size:24px; font-weight:800; color:var(--sa-navy); margin:0 0 12px; }
.sa-done p{ font-family:var(--sa-sans); font-size:14.5px; line-height:1.75; color:var(--sa-ink); margin:0 auto 24px; max-width:460px; }
.sa-done .sa-btn-primary{ background:linear-gradient(135deg,var(--sa-gold),var(--sa-gold2)); box-shadow:0 12px 26px rgba(201,168,76,.34); }

/* ---------- Buton declanșator (în pagină) --------------------------- */
button.sa-open{ border:0; cursor:pointer; font-family:var(--sa-sans); }

/* ---------- Responsive ---------------------------------------------- */
@media (max-width:640px){
  .sa-modal{ padding:0; align-items:flex-end; }
  .sa-dialog{ max-width:100%; max-height:94vh; border-radius:20px 20px 0 0; }
  .sa-panel{ padding:34px 20px 28px; }
  .sa-head{ padding-right:44px; } /* pe mobil X-ul e mai mare → gardă mai lată */
  .sa-choices{ grid-template-columns:1fr; }
  .sa-grid{ grid-template-columns:1fr; }
  .sa-w-half{ grid-column:1 / -1; }
  .sa-actions{ flex-direction:column-reverse; }
  .sa-btn-primary, .sa-btn-ghost{ width:100%; }
  /* Buton X mai mare și mai vizibil, țintă de atingere confortabilă */
  .sa-x{ top:12px; right:12px; width:42px; height:42px; font-size:22px;
    background:rgba(13,43,78,.10); }
}
@media (prefers-reduced-motion:reduce){
  .sa-modal, .sa-modal::before, .sa-dialog, .sa-panel, .sa-done-ic{ transition:none; animation:none; }
}

/* =====================================================================
   Bandă „Arhivă acte succesorale" pe pagina de acasă (.sa-home)
   ===================================================================== */
.sa-home{
  position:relative; overflow:hidden;
  padding:64px 0;
  background:radial-gradient(120% 140% at 82% 0%, #16386a 0%, var(--sa-navy) 58%);
  color:#cdd9ea;
}
.sa-home::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:22px 22px;
}
.sa-home::after{
  content:""; position:absolute; right:-80px; top:-80px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,168,76,.20), transparent 70%); pointer-events:none;
}
.sa-home .container{ position:relative; z-index:1; }
.sa-home-inner{
  display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:44px; align-items:center;
}
.sa-home-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sa-sans); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sa-gold); margin-bottom:14px;
}
.sa-home-eyebrow i{ font-size:17px; }
.sa-home-main h2{
  font-family:var(--sa-sans); font-weight:800; font-size:clamp(25px,3.4vw,34px);
  color:#fff; margin:0 0 14px; line-height:1.18;
}
.sa-home-main > p{
  font-family:var(--sa-sans); font-size:15.5px; line-height:1.8; color:#b9c8de; margin:0 0 22px; max-width:640px;
}
.sa-home-main strong{ color:#fff; }
.sa-home-feats{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px 26px; }
.sa-home-feats li{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sa-sans); font-size:14px; font-weight:600; color:#d7e2f1;
}
.sa-home-feats i{
  width:32px; height:32px; flex:0 0 auto; border-radius:9px;
  background:rgba(201,168,76,.16); color:var(--sa-gold);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}

/* Card alb cu CTA */
.sa-home-card{
  background:#fff; border-radius:18px; padding:30px 28px; text-align:center;
  box-shadow:0 30px 64px rgba(8,22,42,.34);
}
.sa-home-card > i{
  width:60px; height:60px; margin:0 auto 14px; border-radius:15px;
  background:linear-gradient(135deg,rgba(26,94,168,.12),rgba(201,168,76,.20)); color:var(--sa-blue);
  display:flex; align-items:center; justify-content:center; font-size:29px;
}
.sa-home-card strong{ display:block; font-family:var(--sa-sans); font-size:19px; font-weight:800; color:var(--sa-navy); margin-bottom:8px; }
.sa-home-card > p{ font-family:var(--sa-sans); font-size:13.5px; line-height:1.65; color:#5a6b80; margin:0 0 20px; }
.sa-home-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; box-sizing:border-box;
  font-family:var(--sa-sans); font-size:14px; font-weight:700; letter-spacing:.01em; color:#fff;
  background:linear-gradient(135deg,var(--sa-gold),var(--sa-gold2));
  padding:15px 24px; border-radius:12px; cursor:pointer; border:0;
  box-shadow:0 14px 30px rgba(201,168,76,.36);
  transition:transform .2s, box-shadow .2s, filter .2s;
}
.sa-home-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 20px 40px rgba(201,168,76,.46); color:#fff; }
.sa-home-btn i{ font-size:17px; }
.sa-home-link{
  display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  font-family:var(--sa-sans); font-size:13px; font-weight:700; color:var(--sa-blue); text-decoration:none;
}
.sa-home-link i{ transition:transform .2s; }
.sa-home-link:hover i{ transform:translateX(4px); }

@media (max-width:880px){
  .sa-home-inner{ grid-template-columns:1fr; gap:30px; }
  .sa-home-aside{ max-width:420px; }
}
@media (max-width:560px){
  .sa-home{ padding:48px 0; }
  .sa-home-feats{ flex-direction:column; gap:12px; }
}