/* ============================================================
   General Computer Service — custom.css
   Nalepiti u Helix Ultimate: Template Manager -> Custom CSS
   (ili Extensions -> Templates -> stil sablona -> Custom SCSS/CSS).
   Ovaj fajl NE ide u SPPB stranicu — sadrzaj stranice (gcs_home.json)
   koristi iskljucivo native SPPB addone (heading, text_block, button,
   feature, icon, animated_number, blocknumber). CSS ispod samo
   doteruje ono sto addoni ne mogu sami: hero dijagnostički panel,
   izgled kartica, hover efekte, oblik taster-a za tagove.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@500;600;700;800;900&family=Rajdhani:wght@600;700&display=swap');

:root{
  --gcs-cyan:#00E5FF;
  --gcs-blue:#2979FF;
  --gcs-green:#00FFB3;
  --gcs-bg:#070B14;
  --gcs-bg-2:#0C1220;
  --gcs-border:rgba(0,229,255,.18);
  --gcs-muted:#8B96AD;
}

/* Izjednačavanje visine kartica u istom redu (kartice usluga, koraci
   popravke). Ranije pogađena klasa ".row-column" NE POSTOJI u stvarnom
   renderu (proverено preko DevTools) — prava putanja je:
   .sppb-row-column > .sppb-column > .sppb-column-addons >
   .sppb-addon-wrapper > div(.clearfix) > .sppb-addon(.gcs-step/.gcs-card).
   Provlačimo height:100% kroz ceo taj potvrđeni lanac, skenirano preko
   :has() samo na kolone koje sadrže karticu, da ne diramo hero ili druge
   sekcije. */
.sppb-row:has(.gcs-step),
.sppb-row:has(.gcs-card){
  align-items:stretch;
}
.sppb-row-column:has(.gcs-step),
.sppb-row-column:has(.gcs-card){
  height:100%;
}
.sppb-row-column:has(.gcs-step) > .sppb-column,
.sppb-row-column:has(.gcs-card) > .sppb-column{
  height:100%;
}
.sppb-column:has(.gcs-step) > .sppb-column-addons,
.sppb-column:has(.gcs-card) > .sppb-column-addons{
  height:100%;
}
.sppb-column-addons:has(.gcs-step) > .sppb-addon-wrapper,
.sppb-column-addons:has(.gcs-card) > .sppb-addon-wrapper{
  height:100%;
}
.sppb-addon-wrapper:has(.gcs-step) > div,
.sppb-addon-wrapper:has(.gcs-card) > div{
  height:100%;
}
.gcs-step,
.gcs-card{
  height:100% !important;
  box-sizing:border-box;
}
/* Vanjska kartica je sad iste visine na sve 4, ali unutrašnja traka sa
   opisom (.sppb-blocknumber-text — potvrđena iz stvarnog DOM-a) ima svoju
   fiksnu visinu pa ostaje prazan prostor kod kraćih opisa. Razvlačimo ceo
   unutrašnji lanac da traka sa opisom ispuni preostali prostor i uvek
   dodiruje dno kartice. */
.gcs-step .sppb-addon-content,
.gcs-step .sppb-blocknumber.sppb-media,
.gcs-step .sppb-media-body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  width:100%;
}
.gcs-step .sppb-blocknumber-text{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Naslovi neka koriste tech font — kačimo se na "gcs-light-text" (klasa koju
   generator garantovano stavlja na svaki heading/text_block/feature/
   animated_number/blocknumber addon), a ne na pogađeno ime SPPB wrapper-a
   (".sppb-addon-heading" se nije pojavilo u stvarnom renderu — zato font
   ranije nije hvatao i stranica je padala na temp-ov podrazumevani font). */
.gcs-light-text h1,
.gcs-light-text h2,
.gcs-light-text h3,
.gcs-light-text h4,
.gcs-light-text h5,
.gcs-light-text h6{
  font-family:'Oxanium', sans-serif !important;
}

/* Gradient akcenat unutar naslova: <span class="gcs-accent">...</span> */
.gcs-accent{
  background:linear-gradient(90deg, var(--gcs-cyan), var(--gcs-green));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
}

/* Svetao tekst na tamnoj pozadini — dodaje se automatski na svaki
   heading/text_block/feature/animated_number/blocknumber addon
   (klasa "gcs-light-text" iz generatora). Boja se nasleđuje na sve
   elemente unutra (h1-h6, p, div, span) osim gde postoji eksplicitan
   inline override (npr. cyan eyebrow naslovi, .gcs-accent gradient). */
.gcs-light-text{
  color:#E9EEFB;
}
.gcs-light-text h1,
.gcs-light-text h2,
.gcs-light-text h3,
.gcs-light-text h4,
.gcs-light-text h5,
.gcs-light-text h6,
.gcs-light-text p,
.gcs-light-text div,
.gcs-light-text span{
  color:inherit;
}

/* Eyebrow (mali naziv sekcije iznad naslova) */
.gcs-eyebrow{
  font-family:'Oxanium', sans-serif !important;
  letter-spacing:3px;
  text-transform:uppercase;
}
.gcs-eyebrow h1::before,
.gcs-eyebrow h2::before,
.gcs-eyebrow h3::before,
.gcs-eyebrow h4::before,
.gcs-eyebrow h5::before,
.gcs-eyebrow h6::before{
  content:"";
  width:26px;
  height:2px;
  background:var(--gcs-cyan);
  box-shadow:0 0 8px var(--gcs-cyan);
  display:inline-block;
  margin-right:10px;
  vertical-align:middle;
}

/* Hero dugmad jedno pored drugog */
.gcs-btn-inline{
  display:inline-block;
  margin:0 14px 14px 0;
}
.gcs-btn-outline a{
  border:1px solid var(--gcs-border);
}

/* ---------- Hero dijagnostički panel (text_block sa custom HTML) ---------- */
.gcs-hero-panel{
  background:linear-gradient(155deg,#0e1626 0%,#0a1120 100%);
  border:1px solid var(--gcs-border);
  border-radius:16px;
  padding:30px;
  box-shadow:0 25px 60px rgba(0,0,0,.5);
  text-align:left;
}
.gcs-scan-icon{
  position:relative;
  width:100%;
  height:210px;
  border-radius:10px;
  background:linear-gradient(160deg,#0a1526,#0f2038);
  border:1px solid var(--gcs-border);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-bottom:20px;
}
.gcs-scan-icon i{
  font-size:64px;
  color:var(--gcs-cyan);
  filter:drop-shadow(0 0 20px rgba(0,229,255,.6));
}
.gcs-scan-line{
  position:absolute;
  left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gcs-green),transparent);
  box-shadow:0 0 12px var(--gcs-green);
  animation:gcsScan 2.4s linear infinite;
}
@keyframes gcsScan{ 0%{top:0} 100%{top:100%} }
.gcs-diag-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  border-bottom:1px dashed rgba(255,255,255,.08);
  font-size:14px;
  color:#e9eefb;
}
.gcs-diag-row:last-child{ border:none; }
.gcs-diag-ok{ color:var(--gcs-green); font-family:'Oxanium'; font-size:11px; letter-spacing:1px; }
.gcs-diag-progress{ color:var(--gcs-cyan); font-family:'Oxanium'; font-size:11px; letter-spacing:1px; }

/* ---------- Kartice usluga (feature addon) ---------- */
.gcs-card{
  background:linear-gradient(155deg,#0e1626 0%,#0a1120 100%);
  border:1px solid var(--gcs-border);
  border-radius:14px;
  padding:30px 26px;
  transition:.3s;
  min-height:330px !important;
  height:100%;
  box-sizing:border-box;
  margin-bottom: 30px;
}
.gcs-card:hover{
  transform:translateY(-6px);
  border-color:var(--gcs-cyan);
  box-shadow:0 20px 45px rgba(0,229,255,.12);
}
/* veći razmak između ikonice i naslova/teksta na kartici */
.gcs-card i{
  margin-bottom:22px !important;
  display:inline-block;
  font-size:34px !important;
}
.gcs-card h3{
  margin-top:0 !important;
  margin-bottom:32px !important;
  font-size:19px !important;
  line-height:1.3 !important;
}

/* ---------- Trust red u herou (text_block sa custom HTML, leva kolona) ---------- */
.gcs-hero-trust{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  margin-top:6px;
}
.gcs-hero-trust > div{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  color:#E9EEFB;
}
.gcs-hero-trust i{
  color:var(--gcs-green);
  font-size:16px;
}

/* ---------- "Zašto mi" stavke — 2x2 grid, text_block sa custom HTML
   (ubačeno u istu kolonu kao naslov/tekst; nema potvrđenog "ugnježdeni
   red unutar kolone" ponašanja u ovoj SPPB šemi, pa je ovo bezbednija
   varijanta koju je korisnik odobrio) ---------- */
.gcs-why-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 26px;
  margin-top:14px;
}
.gcs-why-item-html{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.gcs-why-item-html i{
  width:42px;
  height:42px;
  flex:none;
  border-radius:10px;
  background:rgba(0,255,179,.08);
  border:1px solid rgba(0,255,179,.25);
  color:var(--gcs-green);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}
.gcs-why-item-html h4{
  font-size:15px;
  color:#E9EEFB;
  margin:0 0 4px;
  font-family:'Oxanium', sans-serif;
}
.gcs-why-item-html p{
  font-size:13px;
  color:var(--gcs-muted);
  margin:0;
}

.g-review-card{
    max-width:560px;
   margin: 0px 0 0 0;
    padding: 15px;
    background:transparent;
    border-radius:24px;
    text-align:center;
    font-family:Inter,Arial,sans-serif;
    border:1px solid rgba(255,255,255,.12);
    transition:.35s;
}

.g-review-card:hover{
    border-color:rgba(255,255,255,.22);
    transform:translateY(-6px);
}

.g-review-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:18px;
}

.g-review-logo img{
    width:24px;
    height:24px;
}

.g-review-logo span{
    font-size:16px;
    font-weight:700;
    color:#ffffff;
}

.g-stars{
    font-size:24px;
    letter-spacing:2px;
    margin-bottom:15px;
    background:linear-gradient(90deg,#FFD54F,#FFB300);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.g-review-card h2{
    margin:0 0 12px;
    color:#ffffff;
    font-size:22px;
    font-weight:700;
}

.g-review-card p{
    max-width:420px;
    margin:0 auto 24px;
    color:rgba(255,255,255,.82);
    line-height:1.7;
    font-size:13px;
}

.g-review-btn{
    display:inline-block;
    padding:12px 28px;
    border-radius:10px;
    background:#00E5FF;
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    transition:.3s;
    box-shadow:0 10px 24px rgba(66,133,244,.35);
}

a.g-review-btn {color: #04131A!important}

.speasyimagegallery-album-description {color:#fff; font-size:16px}

.g-review-btn:hover{
    background:#1a73e8;
    transform:translateY(-2px);
    box-shadow:0 16px 30px rgba(66,133,244,.45);
}

.g-review-btn:active{
    transform:translateY(0);
}

.gcs-price-table, .gcs-light-text {margin:20px 0}

.gcs-partner-logo img {    max-height: 140px;
    width: auto!important;
    margin: auto;
}

@media(max-width:600px){

    .g-review-card{
        padding:25px 18px;
    }

    .g-review-logo img{
        width:20px;
        height:20px;
    }

    .g-review-logo span{
        font-size:15px;
    }

    .g-stars{
        font-size:22px;
    }

    .g-review-card h2{
        font-size:20px;
    }

    .g-review-card p{
        font-size:12px;
    }

    .g-review-btn{
        width:100%;
        box-sizing:border-box;
        font-size:13px;
        padding:12px 20px;
    }

}

@media (max-width:600px){
  .gcs-why-list{ grid-template-columns:1fr; }
  
}


@media (max-width:991px) {    .gcs-partner-logo img {
        max-height: 120px !important;
        padding: 15px 0;
        width: auto !important;
    }}

/* ---------- Chip + orbit bedževi ("Zašto mi" vizual, text_block sa custom HTML) ---------- */
.gcs-why-visual{
  position:relative;
  height:380px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gcs-chip{
  width:180px;
  height:180px;
  border-radius:20px;
  background:linear-gradient(150deg,#0d1a2e,#0a1220);
  border:1px solid var(--gcs-border);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-shadow:0 0 60px rgba(0,229,255,.15);
}
.gcs-chip i{
  font-size:76px;
  color:var(--gcs-cyan);
  filter:drop-shadow(0 0 25px rgba(0,229,255,.5));
}
.gcs-chip::before,
.gcs-chip::after{
  content:"";
  position:absolute;
  border:1px dashed var(--gcs-border);
  border-radius:50%;
}
.gcs-chip::before{ width:270px; height:270px; }
.gcs-chip::after{ width:340px; height:340px; }
.gcs-orbit-badge{
  position:absolute;
  background:var(--gcs-bg);
  border:1px solid var(--gcs-border);
  border-radius:10px;
  padding:9px 13px;
  font-size:12px;
  font-family:'Oxanium', sans-serif;
  color:#E9EEFB;
  display:flex;
  align-items:center;
  gap:7px;
  box-shadow:0 10px 25px rgba(0,0,0,.4);
  white-space:nowrap;
}
.gcs-orbit-badge i{ font-size:13px; color:var(--gcs-green); }
.gcs-orbit-b1{ top:6%; left:0; }
.gcs-orbit-b2{ top:24%; right:0; }
.gcs-orbit-b3{ bottom:16%; left:-4%; }
.gcs-orbit-b4{ bottom:2%; right:6%; }
@media (max-width:991px){
  .gcs-why-visual{ height:auto; flex-wrap:wrap; gap:10px; padding:20px 0; }
  .gcs-orbit-badge{ position:static; margin:4px; }
  .gcs-chip::before, .gcs-chip::after{ display:none; }
}

/* ---------- Koraci popravke (blocknumber addon) ----------
   Veličina/boja kruga i broja idu kroz addon polja (size/background/
   color/border_radius) — već popunjeno u JSON-u (veći "size"). Ovde samo
   smanjujemo naslov koraka (h4) i dodajemo sjaj oko kruga, skenirano na
   ".gcs-step" (klasa koju addon garantovano nosi) + rendered tagovi. */
.gcs-step{
  min-height:280px !important;
  height:100%;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}
.gcs-step h1,.gcs-step h2,.gcs-step h3,.gcs-step h4,.gcs-step h5,.gcs-step h6{
  font-size:15px !important;
  line-height:1.3 !important;
  margin:14px 0 6px !important;
}
.gcs-step p{
  font-size:13px !important;
}
.gcs-step > div:first-child,
.gcs-step [class*="number"]{
  box-shadow:0 0 30px rgba(0,229,255,.45);
  margin-top:24px !important;
}

/* ---------- Video (text_block sa <video> tagom, lokalni fajl images/video.mp4) ---------- */
.gcs-video{
  width:100%;
  height:100%;
  min-height:340px;
  max-height:420px;
  display:block;
  border-radius:16px;
  background:#081020;
  object-fit:cover;
}

/* ---------- Partner logotipi (feature addon, image mode) ---------- */
.gcs-partner-logo img{
  filter:grayscale(1) brightness(1.6) opacity(.55);
  transition:.25s;
}
.gcs-partner-logo:hover img{
  filter:grayscale(0) brightness(1) opacity(1);
}

/* ---------- Tag dugmići (button addon, lokalni SEO blok) ----------
   Svi tagovi su sad u JEDNOJ koloni (jedan button addon za drugim).
   ".sppb-column-addons" je potvrđena klasa (iz stvarnog DOM-a) koja ih
   inače ređa jedan ispod drugog — ovde je pretvaramo u wrap-ujući flex
   red da tagovi budu kompaktni "pilići" kao na mockupu, ne pune-širine
   pravougaonici. Skenirano preko :has() samo na kolonu sa tagovima. */
.sppb-column-addons:has(.gcs-tag){
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.sppb-column-addons:has(.gcs-tag) > .sppb-addon-wrapper{
  width:auto;
}
.gcs-tag{
  display:inline-block;
  width:auto !important;
}
.gcs-tag a{
  display:inline-flex !important;
  width:auto !important;
  font-family:'Oxanium', sans-serif;
  font-size:12px;
  letter-spacing:.5px;
  padding:8px 18px !important;
  border-radius:30px !important;
  border:1px solid var(--gcs-border);
}

/* ---------- Servisi stranica: checklist kolone (text_block sa custom HTML) ---------- */
.gcs-list h4{
  font-family:'Oxanium', sans-serif;
  color:var(--gcs-cyan);
  font-size:15px;
  letter-spacing:1px;
  text-transform:uppercase;
  margin:0 0 16px;
}
.gcs-list ul{
  list-style:none;
  margin:0;
  padding:0;
}
.gcs-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:9px 0;
  border-bottom:1px dashed rgba(255,255,255,.07);
  font-size:14px;
  color:#E9EEFB;
}
.gcs-list li:last-child{ border-bottom:none; }
.gcs-list li i{
  color:var(--gcs-green);
  font-size:11px;
  margin-top:4px;
  flex:none;
}

/* ---------- Servisi stranica: info box (terenski servis) ---------- */
.gcs-info-box{
  background:linear-gradient(155deg,#0e1626 0%,#0a1120 100%);
  border:1px solid var(--gcs-border);
  border-radius:14px;
  padding:30px 34px;
  display:flex;
  gap:22px;
  align-items:flex-start;
}
.gcs-info-box i{
  font-size:30px;
  color:var(--gcs-cyan);
  flex:none;
  margin-top:4px;
}
.gcs-info-box p{
  color:var(--gcs-muted);
  font-size:14.5px;
  margin:0 0 12px;
  line-height:1.6;
}
.gcs-info-box p:last-child{ margin-bottom:0; }
.gcs-info-box strong{ color:#fff; }
@media (max-width:600px){
  .gcs-info-box{ flex-direction:column; }
}

/* ---------- Opšte ---------- */
body{ background:var(--gcs-bg); }

/* ---------- Cenovnik stranica: cena uz naziv usluge (text_block sa custom HTML) ---------- */
.gcs-price-table h4{
  font-family:'Oxanium', sans-serif;
  color:var(--gcs-cyan);
  font-size:15px;
  letter-spacing:1px;
  text-transform:uppercase;
  margin:0 0 16px;
}
.gcs-price-table ul{
  list-style:none;
  margin:0;
  padding:0;
}
.gcs-price-table li{
  padding:14px 0;
  border-bottom:1px dashed rgba(255,255,255,.08);
}
.gcs-price-table li:last-child{ border-bottom:none; }
.gcs-price-row-main{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}
.gcs-price-name{
  font-size:14px;
  font-weight:600;
  color:#E9EEFB;
  line-height:1.35;
}
.gcs-price-value{
  flex:none;
  font-family:'Oxanium', sans-serif;
  font-weight:700;
  font-size:13.5px;
  color:var(--gcs-cyan);
  white-space:nowrap;
}
.gcs-price-desc{
  margin:5px 0 0;
  font-size:12.5px;
  color:var(--gcs-muted);
  line-height:1.5;
}

/* ---------- Cenovnik stranica: cena badge u promo karticama (feature addon) ---------- */
.gcs-price-badge{
  display:inline-block;
  margin-top:14px;
  font-family:'Oxanium', sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.3px;
  color:var(--gcs-cyan);
}

/* ---------- Kontakt stranica: podaci (telefon/adresa/email) ---------- */
.gcs-contact-info{
  list-style:none;
  margin:0;
  padding:0;
}
.gcs-contact-info li{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:16px 0;
  border-bottom:1px dashed rgba(255,255,255,.08);
}
.gcs-contact-info li:last-child{ border-bottom:none; }
.gcs-contact-info i{
  width:42px;
  height:42px;
  flex:none;
  border-radius:10px;
  background:rgba(0,229,255,.08);
  border:1px solid var(--gcs-border);
  color:var(--gcs-cyan);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}
.gcs-contact-info div{
  font-size:14px;
  color:#E9EEFB;
  line-height:1.6;
}
.gcs-contact-info a{
  color:#E9EEFB;
  text-decoration:none;
}
.gcs-contact-info a:hover{ color:var(--gcs-cyan); }

/* ---------- Kontakt stranica: forma (form_builder addon) ----------
   Addon settings (btn_*, step_*) vec nose brend boje kroz sopstvena polja.
   Ovde stilizujemo SAMO stvarne HTML tagove (input/textarea) unutar našeg
   poznatog wrapper-a "gcs-contact-form" -- ne pogadjamo unutrasnje SPPB/Vue
   klase komponente jer nisu potvrdjene, ali <input>/<textarea> su garantovano
   pravi HTML elementi bez obzira na framework. */
.gcs-contact-form input,
.gcs-contact-form textarea,
.gcs-contact-form select{
  background:#0a1120 !important;
  border:1px solid var(--gcs-border) !important;
  color:#E9EEFB !important;
  border-radius:8px !important;
}
.gcs-contact-form input::placeholder,
.gcs-contact-form textarea::placeholder{
  color:var(--gcs-muted) !important;
  opacity:1;
}
.gcs-contact-form input:focus,
.gcs-contact-form textarea:focus{
  border-color:var(--gcs-cyan) !important;
  outline:none;
}
.gcs-contact-form label{
  color:var(--gcs-muted) !important;
}

/* ---------- Kontakt stranica: Google mapa (iframe embed, bez API kljuca) ---------- */
.gcs-map-embed{
  width:100%;
  height:420px;
  border-radius:0;
  overflow:hidden;
  filter:grayscale(.3) invert(.92) contrast(.9);
}
.gcs-map-embed iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* ---------- Reference stranica: kompaktan spisak klijenata ---------- */
.gcs-ref-list{
  list-style:none;
  margin:0;
  padding:0;
}
.gcs-ref-list li{
  display:flex;
  align-items:center;
  gap:12px;
  background:linear-gradient(90deg, rgba(0,229,255,.09) 0%, rgba(0,229,255,.02) 100%);
  border:1px solid var(--gcs-border);
  border-left:3px solid var(--gcs-cyan);
  border-radius:0 8px 8px 0;
  padding:10px 16px;
  margin-bottom:8px;
  font-size:13.5px;
  color:#E9EEFB;
  line-height:1.4;
  transition:border-left-color .15s ease, background .15s ease, transform .15s ease;
}
.gcs-ref-list li i{
  color:var(--gcs-cyan);
  font-size:10px;
  flex:none;
  transition:color .15s ease;
}
.gcs-ref-list li:hover{
  border-left-color:var(--gcs-green);
  background:linear-gradient(90deg, rgba(0,229,255,.16) 0%, rgba(0,229,255,.04) 100%);
  transform:translateX(3px);
}
.gcs-ref-list li:hover i{ color:var(--gcs-green); }