/* ============================================================
   Focus Factor — responsive & čitljivost popravke (početna)
   Učitava se POSLE child style.css → veći prioritet.
   Cilj: ništa se ne lomi na različitim rezolucijama.
   Autor: Alkom / Claude — 2026-07
   ============================================================ */

/* ------------------------------------------------------------
   0) JEDINSTVEN FONT NA CELOM SAJTU — Montserrat (self-hostovan)
   Ranije je sajt mešao 5-6 fontova (Ubuntu, Cormorant, Roboto,
   Helvetica, sistemski). Montserrat je profesionalan geometrijski
   sans u duhu finansija/faktoringa, sa PUNIM latinskim setom
   (č ć ž š đ Č Ć Ž Š Đ). Variable 400–800, jedan font svuda.
   Fajlovi: /fonts/montserrat-*.woff2 (Google Fonts, v31).
   Ikonski fontovi (Font Awesome, eicon) se NAMERNO ne diraju.
   ------------------------------------------------------------ */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/montserrat-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat na sve tekstualne elemente (ikone se ne diraju) */
body,
h1, h2, h3, h4, h5, h6,
p, a, li, blockquote, figcaption, label, caption,
button, input, textarea, select, optgroup,
strong, em, b, i:not([class*="fa"]):not([class*="eicon"]):not([class*="icon"]), small, th, td,
span:not([class*="fa"]):not([class*="eicon"]):not([class*="icon"]):not([class*="dashicon"]),
.elementor-heading-title,
.elementor-widget-container,
.elementor-button, .elementor-button-text,
.overlay-text, .overlay-text-mobile,
.form-subtitle, .form-title,
.gform_wrapper, .gform_wrapper * {
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif !important;
}

/* ------------------------------------------------------------
   1) HERO tekst — čitljivost na svetlim kadrovima slike
   Tekst je beo bez senke; na širim/svetlijim kadrovima gubi
   kontrast. Blaga senka pomaže svuda, ne šteti na tamnom.
   ------------------------------------------------------------ */
.first-tab-text h1,
.first-tab-text h2,
.first-tab-text h3,
.first-tab-text p,
.home-banner-slider-mob-text h2,
.home-banner-slider-mob-text p {
    text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

/* ------------------------------------------------------------
   2) MOBILNI "Šta nudimo?" accordion (<768px)
   Problem: naslov (h2) se renderuje na 26px (Elementor CSS sa
   produkcije nadjačava media-query temu) → duge reči
   ("MEĐUNARODNI FAKTORING", "OTKUP POTRAŽIVANJA") prelivaju
   preko toggle dugmeta i vizuelno se seku.
   Rešenje: manja/proporcionalna slika, naslov dobija prostor,
   prelama se umesto da se seče.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .custom-sections .top-row-wrapper {
        gap: 12px;
    }
    .custom-sections .top-row {
        flex: 1 1 auto;
        min-width: 0;           /* dozvoli skupljanje da h2 može da se prelomi */
        gap: 14px;
    }
    .custom-sections .top-row img {
        flex: 0 0 100px;
        width: 100px !important;
        height: 100px !important;
    }
    .custom-sections .top-row h2 {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
        margin: 0 !important;
        font-size: 19px !important;
        line-height: 1.25 !important;
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }
    .custom-sections .toggle-btn {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
}

@media (max-width: 450px) {
    .custom-sections .top-row img {
        flex-basis: 84px;
        width: 84px !important;
        height: 84px !important;
    }
    .custom-sections .top-row h2 {
        font-size: 17px !important;
    }
    .custom-sections .toggle-btn {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }
}

/* ------------------------------------------------------------
   3) FOOTER kontakt na mobilnom/tabletu
   Kolona sa adresom i telefonima je bila sakrivena
   (elementor-hidden-mobile/tablet). Za B2B kontakt je koristan
   na telefonu — vraćamo je, centriranu.
   ID selektor jer je jedini pouzdan handle za tu kolonu.
   ------------------------------------------------------------ */
.elementor-element.elementor-element-e8ae86d.e-con {
    display: flex !important;
}
@media (max-width: 1024px) {
    .elementor-element-e8ae86d .footer-contact,
    .elementor-element-e8ae86d .footer-contact * {
        text-align: center;
    }
    .elementor-element-e8ae86d {
        padding-top: 10px;
    }
}

/* ------------------------------------------------------------
   4) FOOTER razmak na mobilnom
   Fiksni "pozovi" taster (dole desno) je prekrivao red sa
   autorskim pravima. Dodajemo prostor ispod footera.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    [data-elementor-type="footer"] {
        padding-bottom: 72px;
    }
}

/* ------------------------------------------------------------
   5) WATERMARK naslovi sekcija (veliki providni "O NAMA" itd.)
   Element je imao nasleđen line-height (~24px) na fontu 120–230px,
   pa su glyphs "ispadali" iz svog boksa: tekst je izgledao
   pomeren i odsečen ("O NAMA je palo dole"). line-height:1 vraća
   tekst u okvir na svim rezolucijama.
   ------------------------------------------------------------ */
.overlay-text,
.overlay-text-mobile {
    line-height: 1 !important;
}
/* Mobilni "O NAMA" — watermark preko DONJEG dela slike (kao desktop),
   umesto zasebnog svetlog prostora iznad slike. Slika je kvadrat
   (visina ≈ širina viewporta), pa watermark kačimo blizu dna slike. */
@media (max-width: 767px) {
    .about-us-section .overlay-text-mobile {
        position: absolute !important;
        top: calc(100vw - 26px) !important;   /* slika je kvadrat = 100vw visoka */
        transform: translateY(-100%) !important; /* kači DNO teksta uz dno slike, nezavisno od veličine fonta */
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
        z-index: 3 !important;
        pointer-events: none;
        color: #ffffff !important;
        opacity: 0.5 !important;
        text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
    }
}

/* ------------------------------------------------------------
   6) TIM carousel (auto-slide) — kartice jednake i centrirane
   Owl obavija Elementor kartice; ovim ih poravnavamo unutar
   owl-item-a i stilizujemo tačkice.
   ------------------------------------------------------------ */
.our-team-wrapper .owl-carousel .owl-stage {
    display: flex;
}
.our-team-wrapper .owl-carousel .owl-item {
    display: flex;
    justify-content: center;
}
.our-team-wrapper .owl-item .services-block {
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
}
.our-team-wrapper .owl-dots {
    text-align: center;
    margin-top: 22px;
}
.our-team-wrapper .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 4px;
    background: #cfd6e4;
}
.our-team-wrapper .owl-dots .owl-dot.active span {
    background: #10182E;
}

/* ------------------------------------------------------------
   7) FEATURE KRUGOVI (Likvidnost, Sigurnost, ...) — ikona i
   tekst kompaktnije i optički centrirani, malo naniže u krugu.
   Ranije: veliki padding (40px) je razmicao ikonu i tekst.
   ------------------------------------------------------------ */
.box.e-con {
    padding: 22px 0 8px !important;
    gap: 8px !important;
    justify-content: center !important;
    /* Uvek ikona IZNAD teksta. Na uskim ekranima krug je bio
       flex-row+wrap: dugi nazivi su se prelamali (ikona gore),
       ali kratki "Brzina" je ostajao u redu (ikona pored teksta). */
    flex-direction: column !important;
    flex-wrap: nowrap !important;
}

/* ------------------------------------------------------------
   8) KONTAKT — naslov, forma i "KONTAKT" watermark (sve širine)
   Ranije: naslov i forma apsolutno pozicionirani procentima koji
   ne računaju visinu forme → naslov je nalegao na watermark
   (desktop) ili je watermark padao preko forme (tablet).
   Rešenje: naslov pri vrhu, forma tačno ispod, a watermark
   "KONTAKT" centriran IZA forme (providno kroz nju) — nigde se
   ne sudara sa čitljivim tekstom.
   ------------------------------------------------------------ */
.form-subtitle {
    top: 44px !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;
}
.form-home {
    top: 104px !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
}
.page-id-1295 .form-home {
    top: 104px !important;
    bottom: auto !important;
}
/* c67c98a = KONTAKT watermark na početnoj; ae4f61c = na /kontakt/ stranici.
   Dupla .elementor-element klasa za veći specificitet (Elementor override). */
.elementor-element.elementor-element-c67c98a,
.elementor-element.elementor-element-ae4f61c {
    position: absolute !important;
    top: 46% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.elementor-element-c67c98a .elementor-heading-title,
.elementor-element-ae4f61c .elementor-heading-title {
    line-height: 1 !important;
    text-align: center !important;
}
/* Naslov "Pošaljite nam poruku" na mobilnom je bio sitan (22px);
   uvećavamo ga na nivo naslova "Upoznajte naš tim" (~32px).
   Desktop je već veći (45px) pa se ne dira. */
@media (max-width: 767px) {
    .form-subtitle .elementor-heading-title,
    .elementor-element-b37d630 .elementor-heading-title {
        font-size: 30px !important;
        line-height: 1.2 !important;
    }
    /* fe9849d = "KONTAKT" watermark na /kontakt/ stranici u MOBILNOM
       prikazu. Preklapao se sa naslovom "Pošaljite nam poruku" (tekst
       preko teksta). Na telefonu ga sakrivamo — ostaje samo čitljiv
       naslov, kao na početnoj. */
    .elementor-element.elementor-element-fe9849d {
        display: none !important;
    }
}

/* ------------------------------------------------------------
   9) HEADER na mobilnom — veći logo + čist hamburger
   Logo je bio sitan (150px); uvećavamo ga da se lepo vidi.
   Hamburger dugme je imalo svetlo sivu pozadinu (rgba(0,0,0,.05))
   — uklanjamo je (transparentno).
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .elementor-element-7af9697 img {
        width: 200px !important;
        max-width: 200px !important;
    }
    .elementor-menu-toggle {
        background-color: transparent !important;
    }
    /* Logo je bio priljubljen uz levu ivicu (~4px) i uz gornju/donju.
       Vertikalno ga centriramo u header-u i dajemo ujednačen razmak od
       ivica (levo margin, gore/dole padding na header-red). Samo
       vertikalni padding — horizontalni bi suzio red i prelomio
       logo + "ENGLISH" u dva reda. */
    .elementor-element.elementor-element-11de25a > .e-con-inner {
        align-items: center !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    .elementor-element.elementor-element-7af9697 {
        margin-left: 14px !important;
    }
}

/* ------------------------------------------------------------
   10) FOOTER — ujednačena tipografija
   Naziv/adresa/telefoni su imali letter-spacing: 2px (razmaknuta
   slova) dok meni ima normalan razmak → izgledalo je kao različiti
   fontovi. Ujednačavamo razmak i dajemo čitljiviju boju kontaktu.
   ------------------------------------------------------------ */
.footer-contact,
.footer-contact * {
    letter-spacing: normal !important;
}
.footer-contact p,
.footer-contact a {
    color: #5b6270 !important;
}
/* Sav tekst u footeru centriran na mobilnom (slogan i kontakt blok
   su bili levo poravnati; meni i copyright su već centrirani).
   Desktop 3-kolonski footer se ne dira. */
@media (max-width: 767px) {
    /* osnovno centriranje */
    [data-elementor-type="footer"],
    [data-elementor-type="footer"] *,
    .elementor-location-footer,
    .elementor-location-footer *,
    .footer-main,
    .footer-main * {
        text-align: center !important;
    }
    /* jači selektor: nadjačava Elementor 'text-align:left' na widget-ima
       (npr. slogan) koji ima veći specificitet od pravila iznad */
    .elementor-location-footer .elementor-element .elementor-widget-container,
    .elementor-location-footer .elementor-element .elementor-widget-container p,
    .elementor-location-footer .elementor-widget .elementor-widget-container,
    .elementor-location-footer .elementor-widget .elementor-widget-container p,
    [data-elementor-type="footer"] .elementor-element .elementor-widget-container,
    [data-elementor-type="footer"] .elementor-element .elementor-widget-container p,
    .footer-main .elementor-element .elementor-widget-container,
    .footer-main .elementor-element .elementor-widget-container p {
        text-align: center !important;
    }
    /* UJEDNAČEN vertikalni razmak između svih futer-sekcija
       (logo → slogan → meni → kontakt-blok). Futer je ugnežden flex:
       6dfb68c (kolona: logo+slogan) i 99ac3f7 > div (red: blokovi).
       Isti gap na oba daje identičan razmak svuda. */
    .elementor-element.elementor-element-6dfb68c {
        gap: 24px !important;
    }
    .elementor-element.elementor-element-99ac3f7 > div {
        gap: 24px !important;
    }
}

/* ------------------------------------------------------------
   11) OPISNI TEKST na mobilnom — justify → left
   Servisne stranice koriste text-align: justify. Na uskim
   ekranima (malo reči po redu) to pravi ružne velike razmake
   između reči. Na mobilnom prebacujemo na levo poravnanje.
   Naslovi (heading widgeti) se ne diraju — ostaju centrirani.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .elementor-widget-text-editor .elementor-widget-container,
    .elementor-widget-text-editor p,
    .elementor-widget-text .elementor-widget-container,
    .elementor-widget-text p {
        text-align: left !important;
    }
}

/* ------------------------------------------------------------
   12) FAKTORING feature blokovi ("Prednosti faktoringa")
   Blokovi (.factoring-icons-box) su flex-column + flex-wrap:wrap;
   na mobilnom se opis prelivao u DRUGU kolonu i izlazio desno van
   bloka (odsečen). nowrap drži naslov i opis naslagane vertikalno.
   Desktop je već nowrap, pa je globalno bezbedno.
   ------------------------------------------------------------ */
/* MOBILNI: spreči prelamanje opisa u drugu kolonu + vertikalno
   centriraj sadržaj bloka (ikonica levo, tekst desno). */
@media (max-width: 767px) {
    .factoring-icons-box {
        flex-wrap: nowrap !important;
        justify-content: center !important;
    }
}
/* DESKTOP: ujednačen raspored svih blokova — ikonica GORE, naslov i
   tekst centrirani. Ranije je globalni justify-content:center vertikalno
   "razbacivao" blokove (imaju različite dužine teksta), a align-items je
   bio nekonzistentan (neki centrirani, neki levo). Ovde poravnavamo sve
   po vrhu i centriramo horizontalno. */
@media (min-width: 768px) {
    .factoring-icons-box {
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: center !important;
    }
    .factoring-icons-box .elementor-widget-container,
    .factoring-icons-box p,
    .factoring-icons-box h1, .factoring-icons-box h2,
    .factoring-icons-box h3, .factoring-icons-box h4 {
        text-align: center !important;
    }
}

/* ------------------------------------------------------------
   13) IZUZECI od sekcije 11 (justify→left) na MOBILNOM
   Sekcija 11 poravnava SVE text-editore levo na mobilnom (dobro za
   telo teksta), ali zahvati i "kicker/watermark" labele koje treba
   da ostanu centrirane (kao na desktopu). Ovde ih vraćamo na center.
   - 559cc95 = "USLUGE" iznad "Šta nudimo?" (početna)
   - 738d6a7 = "ZAPOSLENI" iznad "Upoznajte naš tim" (početna)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .elementor-element.elementor-element-559cc95 .elementor-widget-container,
    .elementor-element.elementor-element-559cc95 p,
    .elementor-element.elementor-element-738d6a7 .elementor-widget-container,
    .elementor-element.elementor-element-738d6a7 p {
        text-align: center !important;
    }
}

/* ------------------------------------------------------------
   14) FUTER na MOBILNOM — sakriven meni + uklonjen sivi prostor
   a) Meni linkova u futeru je suvišan (isti linkovi su u hamburgeru).
      Sakrivamo CEO wrapper (17008dc), ne samo widget (6510e64) — inače
      prazan flex-item ostaje i pravi dupli razmak (48px) slogan→kontakt.
   b) Futer je imao padding-bottom:72px sa providnom pozadinom, pa se
      ispod belog futera video sivi (telo) — smanjujemo padding i
      postavljamo belu pozadinu da nema sive trake.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .elementor-element.elementor-element-17008dc {
        display: none !important;
    }
    .elementor-location-footer,
    [data-elementor-type="footer"] {
        padding-bottom: 20px !important;
        background-color: #ffffff !important;
    }
    /* c) Copyright bar (aa83ce6) je bio previsok (67px) sa velikim
       razmakom (gap 20px) između divider linije i teksta. Smanjujemo
       na ~pola i vertikalno centriramo sadržaj. */
    .elementor-element.elementor-element-aa83ce6 {
        min-height: 0 !important;
    }
    .elementor-element.elementor-element-aa83ce6 > .e-con-inner {
        gap: 4px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        justify-content: center !important;
    }
}

/* ------------------------------------------------------------
   15) TIM carousel ("Upoznajte naš tim") na MOBILNOM
   Roditelj owl-carousela (cec2b65) ima overflow-x:auto pa se pojavljuje
   native scrollbar koji, kad se skroluje, pomera owl i seče kartice.
   Gasimo taj scroll — owl-stage-outer već pravilno klipuje prikaz.
   (Broj vidljivih kartica se podešava u main.js: 1 na uskim telefonima,
   2 na širim ≥480, 3 na desktopu.)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .elementor-element.elementor-element-cec2b65 {
        overflow-x: hidden !important;
    }
}

/* ------------------------------------------------------------
   16) DESKTOP popravke
   a) PROJEKTNO FINANSIRANJE — kartice faza (1–5): bile su neujednačene
      visine i brojevi na različitim visinama (justify-content:center +
      različita dužina naslova). align-items:stretch daje jednake visine,
      a justify-content:space-between gura naslov gore a broj DOLE — pa su
      svi brojevi poravnati "pod konac".
   b) KONTAKT — "KONTAKT" watermark (ae4f61c) se preklapao sa formom;
      sklanjamo ga (na mobilnom je već sklonjen fe9849d).
   ------------------------------------------------------------ */
@media (min-width: 768px) {
    .elementor-element.elementor-element-6e73d61 > .e-con-inner {
        align-items: stretch !important;
    }
    .elementor-element-ccd16ec,
    .elementor-element-e509ec5,
    .elementor-element-929b848,
    .elementor-element-e613691,
    .elementor-element-57b39b7 {
        justify-content: space-between !important;
    }
    .elementor-element.elementor-element-ae4f61c {
        display: none !important;
    }
}