/* ==========================================================================
   ProSoft — butoanele „Calculator” și „Detect CMS”
   Se așază în rând cu comutatorul de limbă (.pss-sitelang), în același stil.
   Poziția pe orizontală o calculează prosoft-tools.js, măsurând comutatorul,
   ca să rămână lipite de el indiferent de lățimea lui.
   ========================================================================== */

.ps-tools{
  position:fixed;
  top:18px;
  right:232px;                       /* valoare de rezervă; JS o rescrie */
  z-index:2147483000;                /* același plan cu comutatorul de limbă */
  display:flex;
  align-items:center;
  justify-content:flex-end;          /* la rupere, randul al doilea ramane aliniat */
  flex-wrap:wrap;                    /* patru butoane nu incap pe un ecran ingust */
  gap:10px 14px;                     /* butoanele stau separat, nu lipite */
  max-width:min(66vw,720px);         /* nu trec peste logo, oricat text ar avea */
}

/* Pe ecran mare grupurile nu exista vizual: cele patru butoane raman pe un
   singur rand, exact ca inainte. Pe telefon devin containere adevarate. */
.ps-tools__grp{display:contents}

.ps-tools__b{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 15px;
  border:0;
  border-radius:999px;
  background:none;
  color:rgba(255,255,255,.62);
  font-family:"Barlow Bold",Barlow,Helvetica,Arial,sans-serif;
  font-size:12px;
  letter-spacing:.06em;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background .2s,color .2s;
}
.ps-tools__b:hover{color:#fff;background:rgba(255,255,255,.08)}
.ps-tools__b:focus-visible{outline:2px solid #ff7300;outline-offset:2px}
.ps-tools__b svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* conținutul stă deasupra straturilor de lumină */
.ps-tools__b > *{position:relative;z-index:2}

/* ---------- Calculator: volum și puls ---------- */
.ps-tools__b--hi{
  position:relative;
  color:#160b02;
  background:linear-gradient(180deg,#ffa64d 0%,#ff7300 55%,#e05f00 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,225,190,.75),        /* lumină pe muchia de sus */
    inset 0 -1px 0 rgba(120,45,0,.5),           /* umbră pe muchia de jos */
    0 3px 10px -2px rgba(255,115,0,.55),        /* umbra care ridică butonul */
    0 0 16px -2px rgba(255,115,0,.5);           /* halou */
  animation:psPulse 2.8s ease-in-out infinite;
}
@keyframes psPulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,225,190,.75),inset 0 -1px 0 rgba(120,45,0,.5),
                     0 3px 10px -2px rgba(255,115,0,.55),0 0 16px -2px rgba(255,115,0,.45)}
  50%    {box-shadow:inset 0 1px 0 rgba(255,225,190,.75),inset 0 -1px 0 rgba(120,45,0,.5),
                     0 4px 14px -2px rgba(255,115,0,.7), 0 0 26px 0 rgba(255,115,0,.75)}
}
.ps-tools__b--hi:hover{
  background:linear-gradient(180deg,#ffb866 0%,#ff8524 55%,#f06a00 100%);
  color:#160b02;
  transform:translateY(-1px);
  animation-play-state:paused;
  box-shadow:inset 0 1px 0 rgba(255,235,210,.85),inset 0 -1px 0 rgba(120,45,0,.5),
             0 6px 18px -3px rgba(255,115,0,.8),0 0 30px 0 rgba(255,140,30,.85);
}
.ps-tools__b--hi:active{transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(90,35,0,.55),0 1px 4px -1px rgba(255,115,0,.5)}

/* ---------- Detect Website_Tech: verde, volum și ploaie de cod ---------- */
.ps-tools__b--go{
  position:relative;
  overflow:hidden;
  color:#4dffa6;
  font-weight:700;
  text-shadow:0 0 8px rgba(0,230,118,.8), 0 1px 0 rgba(0,0,0,.9);
  background:linear-gradient(180deg,#072a14 0%,#04170b 55%,#020d06 100%);
  border:1.5px solid #00e676;
  box-shadow:
    inset 0 1px 0 rgba(120,255,190,.35),
    inset 0 -1px 0 rgba(0,60,30,.8),
    0 3px 10px -2px rgba(0,230,118,.5),
    0 0 18px -3px rgba(0,230,118,.65);
}
.ps-tools__b--go svg{stroke:#4dffa6}

/* pânza pe care curg cifrele 0 și 1 */
.ps-matrix{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  opacity:1;
}

.ps-tools__b--go:hover{
  color:#9dffd0;
  transform:translateY(-1px);
  background:linear-gradient(180deg,#0a3a1c 0%,#062010 55%,#03110a 100%);
  border-color:#2bff92;
  box-shadow:inset 0 1px 0 rgba(160,255,210,.45),inset 0 -1px 0 rgba(0,60,30,.8),
             0 6px 18px -3px rgba(0,230,118,.8),0 0 32px -1px rgba(43,255,146,.95);
}
.ps-tools__b--go:active{transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(0,70,35,.6),0 1px 4px -1px rgba(0,230,118,.5)}

@media (prefers-reduced-motion:reduce){
  .ps-tools__b--hi{animation:none}
}

/* ---------- Dialogul de parolă ---------- */
.ps-gate{
  border:0;padding:0;background:transparent;max-width:none;max-height:none;
  font-family:Barlow,Helvetica,Arial,sans-serif;
}
.ps-gate::backdrop{background:rgba(4,5,8,.8);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.ps-gate__in{
  width:min(400px,calc(100vw - 32px));
  padding:30px 28px;
  background:#12141d;
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  color:#eef0f6;
  box-shadow:0 34px 80px -26px rgba(0,0,0,.95);
}
.ps-gate__ico{
  display:grid;place-items:center;width:48px;height:48px;margin-bottom:18px;
  border-radius:14px;background:rgba(255,115,0,.13);border:1px solid rgba(255,115,0,.3);
}
.ps-gate__ico svg{width:23px;height:23px;fill:none;stroke:#ffa24d;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ps-gate__in h2{margin:0 0 8px;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.ps-gate__in p{margin:0 0 20px;color:#9aa2b7;font-size:15px;line-height:1.55}
.ps-gate__in input{
  width:100%;padding:13px 15px;margin-bottom:12px;
  font-family:inherit;font-size:16px;color:#eef0f6;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:11px;
}
.ps-gate__in input:focus{outline:none;border-color:#ff7300;background:rgba(255,115,0,.06)}
.ps-gate__err{color:#ff7b7b !important;font-size:14px;min-height:20px;margin:0 0 12px !important}
.ps-gate__err[hidden]{display:none}
.ps-gate__act{display:flex;gap:10px;justify-content:flex-end}
.ps-gate__act button{
  padding:11px 20px;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:700;
  border:1px solid transparent;transition:filter .2s,border-color .2s,color .2s;
}
.ps-gate__ok{background:linear-gradient(180deg,#ffa24d,#ff7300);color:#160b02}
.ps-gate__ok:hover{filter:brightness(1.07)}
.ps-gate__no{background:transparent;color:#eef0f6;border-color:rgba(255,255,255,.16)}
.ps-gate__no:hover{border-color:#ff7300;color:#ffa24d}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .ps-tools__b{padding:5px 10px;font-size:11px;gap:6px}
  .ps-tools__b svg{width:13px;height:13px}
}
/* pe telefon nu mai încape în dreapta lângă limbi — trece în stânga sus */
@media (max-width:640px){
  .ps-tools{top:14px;right:auto !important;left:14px;max-width:calc(100vw - 28px);
            justify-content:flex-start}
}

/* ==========================================================================
   Logo ProSoft, sus-stanga, pe desktop si pe telefon
   ========================================================================== */

.ps-logo{
  position:fixed;
  top:18px;
  left:24px;
  z-index:2147483000;
  display:block;
  line-height:0;
  transition:opacity .2s ease,transform .2s ease;
}
.ps-logo:hover{opacity:.85;transform:translateY(-1px)}
/* Imaginea originala e complet opaca, cu fundal albastru inchis, si arata ca
   un dreptunghi lipit pe pagina neagra. Nu am rezolvat-o din CSS: mix-blend-mode
   nu are efect aici, fiindca z-index-ul creeaza un context de stivuire care
   izoleaza amestecul. Am prelucrat imaginea in schimb — logo-prosoft-alpha.png
   are fundalul scos dupa luminozitate si marginile inmuiate. */
.ps-logo__img{width:150px;height:auto;display:block}

/* cel desenat de aplicatie, in mijlocul ecranului, nu mai are rost */
img[src*="logo-prosoft"]:not(.ps-logo__img){display:none !important}   /* cel desenat de aplicatie, in mijloc */

@media (max-width:900px){
  .ps-logo{top:14px;left:16px}
  .ps-logo__img{width:118px}
}

/* Pe telefon, sus se inghesuiau patru lucruri deodata: logo-ul nostru
   (stanga), comutatorul de limba (dreapta), sloganul centrat al site-ului
   „New Super Software Next Generation" si butoanele noastre. Le asezam pe
   randuri separate, in loc sa se calce unele pe altele. */
@media (max-width:700px){
  .ps-logo{top:12px;left:12px}
  .ps-logo__img{width:88px}

  /* Sloganul coboara sub cele doua randuri (meniu + unelte), ca sa nu se calce. */
  [class*="logoWrap"]{top:170px !important}

  /* ---------- Limba: dropdown ingust in coltul din dreapta ----------
     Din pastila lata RO/EN/RU ramane un singur rand — limba activa cu o
     sageata. La atingere (clasa .pss-open, pusa din JS) cad si celelalte. */
  .pss-sitelang{
    top:12px !important;
    right:12px !important;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0;
    overflow:hidden;
    border-radius:12px;
  }
  .pss-sitelang button{
    display:none;                        /* ascunse pana se deschide lista */
    padding:8px 13px;
    border-radius:0;
    text-align:center;
    font-size:12px;
  }
  .pss-sitelang button.pss-on{
    display:flex;align-items:center;justify-content:center;gap:8px;
    order:-1;                            /* limba activa mereu prima */
  }
  .pss-sitelang button.pss-on::after{    /* sageata dropdown */
    content:"";width:6px;height:6px;flex:none;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-1px);
    transition:transform .2s;
  }
  .pss-sitelang.pss-open{z-index:2147483001}
  .pss-sitelang.pss-open button{display:block}
  .pss-sitelang.pss-open button.pss-on{display:flex}
  .pss-sitelang.pss-open button.pss-on::after{transform:rotate(-135deg) translateY(2px)}

  /* ---------- Bara noastra: doar cadru de asezare ---------- */
  .ps-tools{
    top:0;left:0;right:0 !important;bottom:auto;
    transform:none;max-width:none;display:block;
    pointer-events:none;                 /* cadrul nu prinde atingeri; butoanele da */
  }
  .ps-tools__grp{position:absolute;pointer-events:auto;display:flex}

  /* ---------- Meniul: pastila cu contur ca limbile, intre logo si limbi ----------
     Servicii si Portofoliu unul langa altul, in aceeasi pastila cu chenar si
     fundal ca al comutatorului de limba. */
  /* Meniul (Servicii, Portofoliu, Contacte) in RAND, orizontal, intr-o pastila
     centrata pe randul ei — sub randul cu logo si limbi. Trei articole nu
     incap in golul ingust dintre logo si limbi, deci le dam un rand doar al lor. */
  .ps-tools__grp--nav{
    top:54px;
    left:50%;
    transform:translateX(-50%);
    flex-direction:row;
    align-items:center;
    gap:2px;
    padding:3px;
    background:rgba(8,10,16,.55);
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  }
  .ps-tools__grp--nav .ps-tools__b{
    min-height:0;padding:6px 12px;border-radius:999px;
    font-size:12px;letter-spacing:.03em;color:rgba(255,255,255,.72);
  }
  .ps-tools__grp--nav .ps-tools__b svg{display:none}   /* doar cuvantul, ca la limbi */
  .ps-tools__grp--nav .ps-tools__b:hover{background:rgba(255,255,255,.08);color:#fff}

  /* ---------- Uneltele: in rand sub limbi, micsorate la jumatate ---------- */
  .ps-tools__grp--act{
    /* sub randul de meniu (care sta pe randul lui, orizontal) */
    top:100px;
    right:12px;
    flex-direction:row;
    align-items:center;
    gap:6px;
  }
  .ps-tools__grp--act .ps-tools__b{
    min-height:0;
    padding:5px 9px;
    font-size:10px;
    line-height:1.1;
    letter-spacing:0;
    white-space:nowrap;
    border-radius:9px;
    gap:4px;
  }
  .ps-tools__grp--act .ps-tools__b svg{width:12px;height:12px}
}