/* Secțiunile în plus de pe pagina Colocare: pașii, comparația și
   întrebările frecvente.

   Două culori, ca banda „Procesul nostru" de pe prima pagină: violetul
   #5b32b8 cu degradeul lui radial și turcoazul accentelor. Valorile sunt
   luate din sectiuni-flux.css, ca să fie aceeași bandă, nu una asemănătoare.

   Benzile alternează alb - violet - alb, ca pagina să respire.
   Scris de scripts/colocare-plus.py.
*/
/* Aceleași două culori ca pe prima pagină: violetul benzii și turcoazul
   accentelor. Valorile sunt luate din sectiuni-flux.css, ca să fie exact
   aceeași bandă, nu una asemănătoare. */
.rdn-plus{
  --cyan:#74c5da; --cyan-clar:#a6e4f2; --violet-adanc:#3d1f86;
  box-sizing:border-box; width:100vw; margin-left:calc(50% - 50vw);
  position:relative; z-index:2; overflow:hidden;
  padding:78px 0; font-size:15px; color:rgba(255,255,255,.82);
  background-color:#5b32b8;
  background-image:radial-gradient(120% 90% at 8% 0%, rgba(124,79,224,.95) 0%, rgba(91,50,184,.92) 42%, rgba(61,31,134,.98) 100%);
}
.rdn-plus *{ box-sizing:border-box; }
/* aceeași textură discretă ca pe prima pagină */
.rdn-plus::before{ content:""; position:absolute; inset:0; z-index:0;
  background:url("../img/avada-it-section-bg.webp") center/cover no-repeat;
  opacity:.08; mix-blend-mode:overlay; pointer-events:none; }
.rdn-plus > .in{ position:relative; z-index:1; }
.rdn-plus .in{ max-width:1216px; margin:0 auto; padding:0 24px; }

/* banda albă dintre două benzi violet, ca pagina să respire */
.rdn-plus.alb{ background:#fff; background-image:none; color:#6b7385; }
.rdn-plus.alb::before{ display:none; }

/* eticheta cu liniuța turcoaz, ca pe prima pagină */
.rdn-plus .et{ display:flex; align-items:center; justify-content:center; gap:12px;
  margin:0 0 16px; font-family:'Open Sans',Arial,sans-serif; font-size:12px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase; color:var(--cyan-clar); }
.rdn-plus .et::before, .rdn-plus .et::after{ content:""; width:38px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(116,197,218,0), var(--cyan)); }
.rdn-plus .et::after{ background:linear-gradient(90deg, var(--cyan), rgba(116,197,218,0)); }
.rdn-plus.alb .et{ color:var(--rdn-violet); }
.rdn-plus.alb .et::before{ background:linear-gradient(90deg, rgba(98,57,189,0), var(--rdn-violet)); }
.rdn-plus.alb .et::after{ background:linear-gradient(90deg, var(--rdn-violet), rgba(98,57,189,0)); }

.rdn-plus h2{ margin:0 0 14px; font-size:46px; line-height:1.04; font-weight:700;
  letter-spacing:-.02em; text-align:center; background:none;
  -webkit-text-fill-color:#fff; color:#fff; }
.rdn-plus h2 .p{ color:var(--cyan); -webkit-text-fill-color:var(--cyan); }
.rdn-plus.alb h2{ -webkit-text-fill-color:var(--rdn-noapte); color:var(--rdn-noapte); }
.rdn-plus.alb h2 .p{ -webkit-text-fill-color:var(--rdn-violet); color:var(--rdn-violet); }
.rdn-plus .sub{ margin:0 auto 52px; max-width:60ch; text-align:center; font-size:16.5px; line-height:1.7; }
.rdn-plus h3{ margin:0 0 9px; font-size:17px; font-weight:700; color:#fff; line-height:1.35; }
.rdn-plus.alb h3{ color:var(--rdn-noapte); }
.rdn-plus p{ margin:0; font-size:14.5px; line-height:1.64; }

/* A. pașii — fișe translucide, cu numărul în cerc turcoaz */
.rdn-pasi .grila{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.rdn-pas{ padding:30px 26px 28px; border-radius:20px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -28px rgba(0,0,0,.8); }
.rdn-pas .nr{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.07);
  font-family:Teko,'Open Sans',sans-serif; font-size:20px; color:var(--cyan-clar); margin-bottom:18px; }

/* B. comparație — pe alb, cu coloana noastră în violet */
.rdn-comp .tabel-cutie{ overflow:hidden; border-radius:20px; background:#fff;
  box-shadow:0 1px 2px rgba(9,41,51,.04), 0 26px 50px -34px rgba(9,41,51,.45);
  border:1px solid rgba(25,35,63,.09); }
.rdn-comp table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.rdn-comp th, .rdn-comp td{ padding:17px 20px; text-align:left; }
.rdn-comp thead th{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  padding-top:20px; padding-bottom:20px; }
.rdn-comp thead th.noi{ background:#5b32b8; color:var(--cyan-clar); }
.rdn-comp thead th.ei{ color:#8b95ab; }
.rdn-comp tbody th{ font-weight:700; color:var(--rdn-noapte); width:24%; }
.rdn-comp tbody tr + tr th, .rdn-comp tbody tr + tr td{ border-top:1px solid rgba(25,35,63,.07); }
.rdn-comp td.da{ background:rgba(98,57,189,.05); color:var(--rdn-noapte); font-weight:600; }
.rdn-comp td.da::before{ content:"✓"; color:var(--cyan); font-weight:700; margin-right:9px; }
.rdn-comp td.nu{ color:#9aa3b2; }
.rdn-comp td.nu::before{ content:"–"; color:#c3c9d4; font-weight:700; margin-right:9px; }

/* C. întrebări — pe violet, fișe translucide cu „?" turcoaz */
.rdn-intrebari .grila{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 28px; }
.rdn-ir{ padding:26px 28px; border-radius:20px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -28px rgba(0,0,0,.8); }
.rdn-ir h3{ display:flex; gap:11px; align-items:flex-start; }
.rdn-ir h3::before{ content:"?"; flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.07);
  color:var(--cyan-clar); font-family:Teko,'Open Sans',sans-serif; font-size:17px;
  display:inline-flex; align-items:center; justify-content:center; }

/* D. butonul turcoaz al site-ului */
.rdn-chem{ text-align:center; padding-top:0; }
.rdn-chem a{ display:inline-block; padding:16px 34px; border-radius:30px;
  background:var(--cyan); color:var(--violet-adanc) !important;
  font-family:'Open Sans',Arial,sans-serif; font-size:14px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; text-decoration:none;
  transition:transform .3s var(--rdn-arc), box-shadow .3s, background .3s; }
.rdn-chem p{ margin:0 0 22px; font-size:16.5px; }

/* fișele de pe banda albă: ce era translucid peste violet devine card alb
   cu margine, iar cercurile primesc violetul site-ului */
.rdn-plus.alb .rdn-pas,
.rdn-plus.alb .rdn-ir{
  background:#fff; border:1px solid rgba(25,35,63,.1); backdrop-filter:none;
  box-shadow:0 1px 2px rgba(9,41,51,.04), 0 18px 34px -28px rgba(9,41,51,.4); }
.rdn-plus.alb .rdn-pas .nr,
.rdn-plus.alb .rdn-ir h3::before{
  border-color:rgba(98,57,189,.3); background:rgba(98,57,189,.07); color:var(--rdn-violet); }
.rdn-plus.alb p{ color:#6b7385; }
/* pe alb, butonul turcoaz ar fi prea palid: ia degradeul site-ului */
.rdn-plus.alb.rdn-chem a{ background:var(--rdn-grad); color:#fff !important;
  box-shadow:var(--rdn-lumina); }

@media (max-width:900px){
  .rdn-plus{ padding:52px 0; }
  .rdn-plus h2{ font-size:30px; }
  .rdn-plus .sub{ margin-bottom:34px; font-size:15.5px; }
  .rdn-pasi .grila{ grid-template-columns:1fr 1fr; gap:16px; }
  .rdn-intrebari .grila{ grid-template-columns:1fr; gap:16px; }
}
@media (max-width:540px){ .rdn-pasi .grila{ grid-template-columns:1fr; } }
@media (max-width:640px){
  .rdn-comp .tabel-cutie{ background:transparent; box-shadow:none; border:0; overflow:visible; }
  .rdn-comp table, .rdn-comp tbody, .rdn-comp tr, .rdn-comp tbody th, .rdn-comp td{ display:block; width:auto; }
  .rdn-comp thead{ display:none; }
  .rdn-comp tr{ border:1px solid rgba(25,35,63,.1); border-radius:18px; padding:20px 22px;
    margin-bottom:14px; background:#fff; }
  .rdn-comp tbody tr + tr th, .rdn-comp tbody tr + tr td{ border-top:0; }
  .rdn-comp tbody th{ padding:0 0 14px; font-size:16.5px; }
  .rdn-comp td{ padding:0; }
  .rdn-comp td.da{ background:transparent; display:flex; flex-direction:column; }
  .rdn-comp td.nu{ display:flex; flex-direction:column; margin-top:16px; }
  .rdn-comp td::after{ display:block; font-size:11px; letter-spacing:.11em; text-transform:uppercase;
    font-weight:700; margin-bottom:3px; }
}

/* ======================================================================
   Banda violet pentru o secțiune scrisă de temă
   ======================================================================
   Secțiunile noastre își aduc stilurile cu ele. Când vrem ca o bandă
   existentă, făcută în Avada, să treacă pe violet, are nevoie de mai mult:
   titlul e scris cu gradient, textul e gri, bifele sunt violet — toate
   gândite pentru fundal deschis.

   Clasa se pune din scripts/benzi-alternate.py, pe secțiunile alese. */
.fusion-fullwidth.rdn-violet{
  position:relative;
  background-color:#5b32b8 !important;
  background-image:radial-gradient(120% 90% at 8% 0%, rgba(124,79,224,.95) 0%, rgba(91,50,184,.92) 42%, rgba(61,31,134,.98) 100%) !important;
  overflow:hidden;
}
.fusion-fullwidth.rdn-violet::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../img/avada-it-section-bg.webp") center/cover no-repeat;
  opacity:.08;mix-blend-mode:overlay;
}
.fusion-fullwidth.rdn-violet > .fusion-builder-row{position:relative;z-index:1}

/* titlul temei e scris cu gradient (futurist.css, punctul 2); pe violet
   gradientul s-ar pierde în fundal, deci îl oprim */
.fusion-fullwidth.rdn-violet .fusion-title h1,
.fusion-fullwidth.rdn-violet .fusion-title h2,
.fusion-fullwidth.rdn-violet .fusion-title h3{
  background:none !important;
  -webkit-text-fill-color:#ffffff !important;
  color:#ffffff !important;
}
/* punctul de la capătul titlului rămâne turcoaz, ca pe prima pagină */
.fusion-fullwidth.rdn-violet .fusion-title h1 strong span,
.fusion-fullwidth.rdn-violet .fusion-title h2 strong span,
.fusion-fullwidth.rdn-violet .fusion-title h3 strong span{
  -webkit-text-fill-color:var(--rdn-cyan) !important;
  color:var(--rdn-cyan) !important;
}
.fusion-fullwidth.rdn-violet .fusion-text,
.fusion-fullwidth.rdn-violet .fusion-text p,
.fusion-fullwidth.rdn-violet li,
.fusion-fullwidth.rdn-violet li span{
  color:rgba(255,255,255,.82) !important;
}
.fusion-fullwidth.rdn-violet strong{color:#ffffff !important}
.fusion-fullwidth.rdn-violet a{color:var(--rdn-cyan-clar) !important}
.fusion-fullwidth.rdn-violet a:hover{color:#ffffff !important}
/* linia de sub titlu și bifele din listă trec pe turcoaz */
.fusion-fullwidth.rdn-violet .fusion-separator-border{
  --awb-sep-color:var(--rdn-cyan) !important;
  border-color:var(--rdn-cyan) !important;
}
/* bifa e desenată din două margini; „border-color" le-ar șterge culoarea,
   deci le numim pe fiecare */
.fusion-fullwidth.rdn-violet .rdn-lista li::before{
  border-left-color:var(--rdn-cyan-clar) !important;
  border-bottom-color:var(--rdn-cyan-clar) !important;
}
/* sub titlu stau două linii: una desenată de noi, în degrade violet-turcoaz,
   și separatorul temei. Pe violet, jumătatea violetă a celei dintâi dispare în
   fundal și rămâne o bucată de linie, ca o zgârietură. O ascundem, cum face și
   banda Data Center, și lăsăm doar separatorul turcoaz. */
.fusion-fullwidth.rdn-violet .fusion-title .fusion-title-heading::after{display:none !important}
/* linia decorativă a temei de lângă titlu e gri-deschis: pe alb nu se vede,
   pe violet ieșea ca o dungă palidă */
.fusion-fullwidth.rdn-violet .title-sep,
.fusion-fullwidth.rdn-violet .title-sep-container{border-color:transparent !important}

/* ======================================================================
   Tabel pe trei coloane
   ======================================================================
   Pe Certificate SSL comparația nu e „noi față de ei", ci între cele trei
   tipuri de certificat, deci are trei coloane în loc de două. */
.rdn-comp--trei thead th.noi{background:var(--rdn-violet-adanc, #3d1f86)}
.rdn-comp--trei tbody th{width:20%}
.rdn-comp--trei td{width:26.6%}
.rdn-comp--trei td.mid{background:rgba(98,57,189,.028)}
.rdn-comp--trei td.da::before,
.rdn-comp--trei td.nu::before,
.rdn-comp--trei td.mid::before{content:none}
.rdn-comp--trei td.da{font-weight:600}
@media (max-width:640px){
  .rdn-comp--trei tbody th{width:auto}
  .rdn-comp--trei td{width:auto}
  .rdn-comp--trei td.mid{background:transparent;display:flex;flex-direction:column;margin-top:16px}
  .rdn-comp--trei td.da::after{content:"EV SSL"}
  .rdn-comp--trei td.mid::after{content:"OV — Instant / Premium"}
  .rdn-comp--trei td.nu::after{content:"DV — Positive / Essential"}
  .rdn-comp--trei td.nu{margin-top:16px}
}