/* ValidShoot — un singur fisier de stil, fara biblioteci externe.
   Fara CDN-uri: site-ul trebuie sa mearga si cand gazduirea n-are iesire la internet, si sa nu
   depinda de un serviciu strain pentru ca o galerie sa se deschida. */

:root{
  --fund:#11151a; --card:#1a2029; --linie:#2b3542; --text:#e9eef4; --slab:#93a3b5;
  --bun:#2f7d4f; --rau:#8c3a3a; --accent:#3d7fb8;
}
*{box-sizing:border-box}

/* `hidden` TREBUIE SA INVINGA orice regula de afisare a noastra.
   Browserul aplica `[hidden]{display:none}` din stilul lui implicit, care are prioritate MICA —
   asa ca `.lupa{display:flex}` il invingea, iar vizualizarea mare statea permanent peste pagina,
   cu fundalul ei negru la 96%. Imaginile se incarcau normal dedesubt; pur si simplu nu se vedeau.
   Regula asta e scurta si scapa de intreaga categorie de greseli, nu doar de cazul lupei. */
[hidden]{display:none!important}
body{margin:0;background:var(--fund);color:var(--text);
     font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
body.blocat{overflow:hidden}
a{color:#8fc4ff}

/* ---- antet ---- */
.sus{display:flex;gap:14px;align-items:center;padding:10px 16px;background:var(--card);
     border-bottom:1px solid var(--linie);flex-wrap:wrap;position:sticky;top:0;z-index:20}
.marca{font-weight:800;text-decoration:none;color:var(--text);font-size:16px}
.titlu{color:var(--slab)}
.spatiu{flex:1}
.cine{color:var(--slab);font-size:13px}
.rol{font-size:11px;padding:2px 7px;border-radius:20px;margin-left:5px;font-weight:700}
.rol-admin{background:#5a3a7a;color:#e9d6ff}
.rol-moderator{background:#1f5673;color:#cfe9ff}
.rol-invitat{background:#2f5a3a;color:#d3f0dd}

.btn{display:inline-block;padding:7px 12px;border-radius:7px;background:#26313d;color:var(--text);
     border:0;cursor:pointer;text-decoration:none;font:inherit;font-size:14px}
.btn:hover{background:#31404f}
.btn.activ{background:var(--accent);color:#fff}
.btn.ok{background:var(--bun);color:#fff;font-weight:700}
.btn.nu{background:var(--rau);color:#fff}
.btn.mare{width:100%;padding:12px;font-size:16px;font-weight:700;background:var(--accent);color:#fff;
          margin-top:14px}
.mic{color:var(--slab);font-size:13px}
.gol{padding:40px;text-align:center;color:var(--slab)}

/* ---- intrare ---- */
body.centrat{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.carte{background:var(--card);border:1px solid var(--linie);border-radius:14px;padding:26px;
       width:100%;max-width:380px}
.carte h1{margin:0 0 4px;font-size:22px}
.carte label{display:block;margin:12px 0 5px;font-size:13px;color:var(--slab)}
.carte input{width:100%;padding:11px;border-radius:8px;border:1px solid var(--linie);
             background:#12181f;color:var(--text);font:inherit}
.taburi{display:flex;gap:8px;margin:18px 0 6px}
.tab{flex:1;padding:9px;border:1px solid var(--linie);background:transparent;color:var(--slab);
     border-radius:8px;cursor:pointer;font:inherit}
.tab.activ{background:var(--accent);color:#fff;border-color:var(--accent)}
.eroare{background:#3a1f1f;border:1px solid #6a3030;color:#ffd7d7;padding:9px 11px;
        border-radius:8px;margin-top:14px;font-size:14px}

/* ---- pagina de galerii ---- */
.pagina{padding:20px;max-width:1100px;margin:0 auto}
.galerii{display:flex;flex-direction:column;gap:16px}
.galerie{display:flex;gap:18px;background:var(--card);border:1px solid var(--linie);
         border-radius:14px;padding:18px}
.pict{font-size:58px;line-height:1;min-width:76px;text-align:center}
.detalii{flex:1}
.detalii h2{margin:0 0 4px;font-size:19px}
.sectiuni{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.sect{display:flex;flex-direction:column;gap:2px;padding:11px 16px;background:#22303d;
      border-radius:10px;text-decoration:none;color:var(--text);min-width:150px}
.sect:hover{background:#2b3d4d}
.unelte{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}

/* ---- bara galeriei ---- */
.bara{display:flex;gap:12px;align-items:center;padding:9px 16px;background:var(--card);
      border-bottom:1px solid var(--linie);flex-wrap:wrap;position:sticky;top:47px;z-index:15}
.com{display:flex;gap:6px;align-items:center;font-size:14px;cursor:pointer}
.ajutor{margin-left:auto}

/* ---- grila ---- */
.grila{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px;padding:12px}
.cadru{position:relative;margin:0;aspect-ratio:3/2;background:#0d1116;border-radius:9px;
       overflow:hidden;cursor:pointer;border:3px solid transparent}
.cadru img{width:100%;height:100%;object-fit:cover;display:block}
.cadru.ales{border-color:var(--bun)}
.cadru.scoasa{opacity:.4;border-color:var(--rau)}
.cadru.asteapta{opacity:.6}
.bifa{position:absolute;top:7px;right:7px;width:30px;height:30px;border-radius:50%;
      background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;
      font-size:17px;opacity:.45}
.cadru.ales .bifa{background:var(--bun);opacity:1}
.numar{position:absolute;bottom:7px;left:7px;background:rgba(0,0,0,.6);color:#fff;
       border-radius:12px;padding:1px 8px;font-size:12px}
.grila.doar-alese .cadru:not(.ales){display:none}

/* ---- lupa ---- */
/* FOTOGRAFIA IA TOT ECRANUL. Fundal opac, nu translucid: orice se vede pe dedesubt distrage de
   la singura intrebare care conteaza — merita pastrata sau nu? */
.lupa{position:fixed;inset:0;background:#07090c;z-index:50;display:flex;
      flex-direction:column;align-items:center;justify-content:center}
#lupa-scena{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;
            justify-content:center;cursor:grab}
#lupa-scena:active{cursor:grabbing}
#lupa-img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;
          transform-origin:center center;transition:transform .06s linear}

/* BUTOANELE PLUTESC PESTE fotografie, jos. Sub ea ar fi taiat din inaltimea imaginii cu inca 80
   de pixeli — exact ce nu-ti permiti cand incerci sa vezi daca o poza e clara. Fundalul e un
   gradient, ca sa se citeasca si peste o zona deschisa a fotografiei. */
.lupa-bara{position:absolute;left:0;right:0;bottom:0;display:flex;gap:9px;padding:16px 12px 18px;
           flex-wrap:wrap;justify-content:center;z-index:2;
           background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0))}
.lupa-info{position:absolute;top:14px;left:18px;color:#dbe4ee;font-size:14px;z-index:2;
           background:rgba(0,0,0,.45);padding:4px 12px;border-radius:14px}
.lupa-zoom{position:absolute;top:14px;right:74px;color:#cfe;font-size:13px;z-index:2;
           background:rgba(0,0,0,.45);padding:4px 12px;border-radius:14px}
/* ecranul complet, la alegere. Sus-dreapta, unde nu incurca nici imaginea, nici butonul verde. */
.lupa-plin{position:absolute;top:10px;right:14px;z-index:3;width:44px;height:44px;font-size:19px;
           background:rgba(0,0,0,.45)}

/* SAGETILE, pe laturile fotografiei. Zona de atins e inalta cat o palma, ca sa se nimereasca
   fara sa te uiti la ea. Fundal semi-transparent, ca sa se vada si peste o poza deschisa. */
.sageata{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
         width:76px;height:130px;border:0;cursor:pointer;color:#fff;font-size:46px;line-height:1;
         display:flex;align-items:center;justify-content:center;
         background:rgba(0,0,0,.32);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.sageata.st{left:0;border-radius:0 16px 16px 0;padding-right:8px}
.sageata.dr{right:0;border-radius:16px 0 0 16px;padding-left:8px}
.sageata:hover{background:rgba(0,0,0,.58)}
.sageata:active{background:rgba(0,0,0,.72)}

@media (max-width:700px){
  .lupa-bara{padding:12px 8px 16px;gap:7px}
  .lupa-bara .btn.urias{order:-1;width:100%;margin-bottom:4px}
  /* mai inguste, ca sa nu acopere subiectul, dar la fel de inalte: degetul le gaseste oricum */
  .sageata{width:58px;height:160px;font-size:40px;background:rgba(0,0,0,.24)}
}

/* ================== TELEFON INTORS PE ORIZONTALA ==================
   Aici inaltimea e resursa rara: un telefon in landscape are vreo 360 de pixeli pe verticala, iar
   o bara de butoane jos ii mananca un sfert. Fotografiile de sport sunt aproape toate orizontale,
   deci exact in pozitia asta se vad cel mai bine — ar fi pacat sa castigi latimea si sa pierzi
   inaltimea.
   Deci butoanele trec pe LATURA DREAPTA, in coloana. Imaginea primeste toata inaltimea, iar mana
   dreapta, care oricum tine telefonul, le are sub degetul mare. */
/* Pragul e 760px, nu 560: un telefon mare in landscape are 540-560 de pixeli pe verticala, iar
   o tableta 700-800. In ambele cazuri inaltimea e resursa rara, deci amandoua castiga din
   asezarea pe lateral. Sub 760 intra tot ce nu e monitor. */
@media (orientation: landscape) and (max-height: 760px){
  .lupa-bara{left:auto;right:0;top:0;bottom:0;width:96px;
             flex-direction:column;justify-content:center;gap:10px;padding:8px;
             background:linear-gradient(to left, rgba(0,0,0,.72), rgba(0,0,0,0))}
  .lupa-bara .btn.urias{order:0;width:80px;min-width:0;padding:14px 6px;font-size:15px;
                        line-height:1.15;margin:0}
  .lupa-bara .btn.rotund{width:46px;height:46px;font-size:19px}
  .lupa-bara .btn.mic-btn{padding:9px 12px}

  /* imaginea nu mai trece pe sub coloana de butoane */
  #lupa-scena{right:96px}

  /* sagetile: mai scunde si mai inguste, ca sa nu acopere subiectul pe un cadru deja jos */
  .sageata{width:52px;height:110px;font-size:34px}
  .sageata.dr{right:96px;border-radius:14px 0 0 14px}

  .lupa-info{top:8px;left:10px;font-size:12px;padding:3px 9px}
  .lupa-zoom{top:8px;right:150px;font-size:12px;padding:3px 9px}
  .lupa-plin{top:6px;right:104px;width:38px;height:38px;font-size:17px}

  /* si grila: mai multe coloane, fiindca latimea e acum resursa din belsug */
  .grila{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  .sus{padding:6px 12px}
  .bara{top:39px;padding:6px 12px}
}

/* ---- tabele (administrare) ---- */
table{border-collapse:collapse;width:100%;margin:10px 0 22px}
th,td{padding:8px 10px;border-bottom:1px solid var(--linie);text-align:left;font-size:14px}
th{color:var(--slab);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
form.rand{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin:8px 0 22px}
form.rand label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--slab)}
form.rand input,form.rand select{padding:8px;border-radius:7px;border:1px solid var(--linie);
                                 background:#12181f;color:var(--text);font:inherit}
code{background:#0d1116;padding:2px 6px;border-radius:5px;font-size:13px}

@media (max-width:700px){
  .grila{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .ajutor{display:none}
  .galerie{flex-direction:column}
}


/* ---- simplificari pentru oameni nontehnici ---- */

/* bifa de pe miniatura: tinta mare, vizibila mereu. Cea de 30px era buna la mouse si greu de
   nimerit pe telefon, iar moderatorii vor lucra si de pe tableta. */
.bifa{width:46px;height:46px;font-size:24px;top:9px;right:9px;opacity:.55;
      box-shadow:0 2px 8px rgba(0,0,0,.4)}
.cadru:hover .bifa{opacity:.9}
.cadru.ales .bifa{opacity:1}

/* butonul principal din lupa: mare, verde, imposibil de ratat */
.btn.urias{font-size:20px;font-weight:800;padding:16px 46px;border-radius:12px;
           background:var(--bun);color:#fff;min-width:240px}
.btn.urias.activ{background:#1f5c3a;box-shadow:inset 0 0 0 3px #7fe0a6}
.btn.urias.activ::after{content:' ✓'}
.btn.rotund{width:52px;height:52px;border-radius:50%;font-size:22px;padding:0;line-height:1}
.btn.mic-btn{padding:7px 10px;font-size:15px;opacity:.8}

/* progresul: cat ai parcurs din galerie */
.progres{width:170px;height:8px;background:#26313d;border-radius:6px;overflow:hidden}
.progres-bara{height:100%;width:0;background:var(--accent);transition:width .3s}

/* GHIDUL DE LA PRIMA INTRARE. Peste pagina, nu langa ea: la prima deschidere nimeni nu citeste
   o bara subtire de sus, dar toata lumea citeste un card care il opreste o secunda. */
.ghid-fundal{position:fixed;inset:0;background:rgba(8,11,15,.82);z-index:60;display:flex;
             align-items:center;justify-content:center;padding:18px}
.ghid-carte{background:var(--card);border:1px solid var(--linie);border-radius:14px;
            padding:26px 28px;max-width:520px;width:100%}
.ghid-carte h2{margin:0 0 14px;font-size:20px}
.ghid-carte ol{margin:0 0 14px;padding-left:22px;line-height:1.85}
.ghid-carte li{margin-bottom:3px}
.ghid-carte .btn.mare{margin-top:6px}

@media (max-width:700px){
  .btn.urias{min-width:0;flex:1;padding:16px 20px}
  .progres{width:90px}
  .ghid{font-size:13px}
}