/* ==========================================================================
   ARIVA — MODERN UI LAYER (theme-modern.css)
   --------------------------------------------------------------------------
   Ovaj fajl NE menja HTML strukturu, sadržaj, rute ni JavaScript logiku
   sajta. On se učitava POSLE bootstrap.min.css i style.css i dodaje
   savremeniji vizuelni sloj preko postojećeg dizajna: tipografiju,
   razmake, boje, senke, zaobljene ivice, hover efekte i suptilne
   animacije (150–300ms). Sve postojeće klase i ponašanje ostaju iste;
   ovde se samo profinjuje njihov IZGLED.

   Zašto poseban fajl umesto direktne izmene style.css:
   - lakše je pregledati tačno šta je "moderni sloj" a šta orginalni šablon
   - lakše je vratiti staro stanje (samo ukloniti jedan <link>)
   - manji rizik da neka izmena nenamerno slomi postojeće ponašanje
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) DIZAJN TOKENI (CSS promenljive)
   Centralizovana paleta, tipografija, razmaci, senke i tranzicije.
   Primarna brend boja (--bs-primary, tamno plava) je NETAKNUTA — samo joj
   dodajemo par nijansi (svetliju/tamniju) i neutralne tonove oko nje da
   dizajn deluje smirenije i profesionalnije nego čisto crno/belo.
   -------------------------------------------------------------------------- */
:root {
    /* Boje */
    --ariva-primary: var(--bs-primary);
    --ariva-primary-dark: #0d2557;
    --ariva-primary-50: #eef1f8;
    --ariva-ink: #14141f;
    --ariva-body: #4b5563;
    --ariva-muted: #6b7280;
    --ariva-border: #e7e9ee;
    --ariva-surface: #ffffff;
    --ariva-surface-alt: #f7f8fa;

    /* Tipografija */
    --font-base: 'Inter', 'Roboto', system-ui, sans-serif;
    --font-heading: 'Inter', 'Jost', system-ui, sans-serif;

    /* Razmaci (spacing scale) — koriste se u novim pravilima ispod */
    --space-2xs: .375rem;
    --space-xs: .75rem;
    --space-sm: 1.25rem;
    --space-md: 2rem;
    --space-lg: 3rem;

    /* Zaobljenost */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;

    /* Senke — suptilne, slojevite (u duhu Material/SaaS dizajna) */
    --shadow-xs: 0 1px 2px rgba(20, 20, 31, .05);
    --shadow-sm: 0 4px 12px rgba(20, 20, 31, .06);
    --shadow-md: 0 10px 28px rgba(20, 20, 31, .10);
    --shadow-lg: 0 20px 45px rgba(20, 20, 31, .14);
    --shadow-primary: 0 10px 24px rgba(19, 53, 123, .22);

    /* Tranzicije */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --transition-fast: 150ms var(--ease);
    --transition-base: 220ms var(--ease);
    --transition-slow: 300ms var(--ease);
}

/*
   Zašto: definisanje tokena na jednom mestu umesto "magičnih brojeva"
   razbacanih po fajlu. Kako poboljšava UX: dizajn postaje vizuelno
   konzistentan (iste senke/razmaci/zaobljenosti svuda). Utiče na
   funkcionalnost: ne, ovo su samo promenljive, ništa se ne renderuje
   iz ovog bloka.
*/


/* --------------------------------------------------------------------------
   2) TIPOGRAFIJA
   Uvodimo Inter kao primarni font (moderniji, čitljiviji na ekranu od
   Roboto/Jost kombinacije), uz blago poboljšan prored i boju teksta za
   bolji kontrast i "vazdušniji" utisak.
   -------------------------------------------------------------------------- */
body {
    font-family: var(--font-base);
    color: var(--ariva-body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--font-heading);
    color: var(--ariva-ink);
    letter-spacing: -0.01em;
}

p {
    color: var(--ariva-body);
}

/*
   Zašto: Inter je dizajniran specifično za ekrane (UI font koji koriste
   Stripe, Linear, GitHub i dr.), pa tekst deluje savremenije i čitkije
   od default Roboto/Jost kombinacije. Kako poboljšava UX: veći line-height
   (1.7) olakšava čitanje dužih opisa proizvoda i pasusa na "O nama".
   Utiče na funkcionalnost: ne — menja se samo font i boja teksta, ne i
   koji se tekst prikazuje.
*/


/* --------------------------------------------------------------------------
   3) DUGMAD (BUTTONS)
   Dodajemo suptilan "lift" hover efekat (podizanje + senka) svim dugmićima,
   umesto ravnog default Bootstrap izgleda. Ne diramo boje/tekst/href —
   samo pokret i senku pri hoveru.
   -------------------------------------------------------------------------- */
.btn {
    transition: transform var(--transition-base), box-shadow var(--transition-base),
                background-color var(--transition-base), border-color var(--transition-base),
                color var(--transition-base);
}

.btn-primary,
.btn-hover,
.btn-hover-bg {
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-hover-bg:hover,
a.btn-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

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

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    box-shadow: var(--shadow-sm);
}

/* Fokus stanje - jasan, ali suptilan prsten umesto podrazumevanog oštrog */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem var(--ariva-primary-50), 0 0 0 .05rem var(--ariva-primary) inset;
}

/*
   Zašto: ravna dugmad bez povratne informacije pri hoveru deluju statično
   i "jeftino"; blagi lift + senka je standard u modernim SaaS interfejsima
   (Stripe, Linear, Vercel). Kako poboljšava UX: jasna vizuelna potvrda da
   je dugme interaktivno, pre nego što se i klikne. Utiče na funkcionalnost:
   ne — href/onclick/submit ponašanje ostaje identično, menja se samo
   vizuelni feedback.
*/


/* --------------------------------------------------------------------------
   4) KARTICE (packages, usluge, footer, about okvir)
   Dodajemo suptilnu senku, zaobljene ivice i "lift" hover na sve kartice
   koje prikazuju sadržaj (proizvodi, usluge), bez menjanja njihovog
   sadržaja ili rasporeda.
   -------------------------------------------------------------------------- */

/* "Izdvajamo iz ponude" kartice proizvoda */
.packages-content {
    box-shadow: var(--shadow-sm);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.packages-img {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
}

.packages-item:hover .packages-content {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.packages-img img {
    transition: transform var(--transition-slow);
}

.packages-item:hover .packages-img img {
    transform: scale(1.06);
}

/* Naziv proizvoda i kategorija - rezervisana visina za tačno 2 reda,
   bez obzira na dužinu teksta, da kartice ostanu jednake visine (bez
   ovoga, kraći naziv koji stane u 1 red pravi nižu karticu od one čiji
   naziv/kategorija pređe u 2 reda - vidljivo najviše na mobilnom gde je
   kartica uža pa tekst lakše prelama). Ako bi tekst bio i duži od 2
   reda, dodatno se skraćuje sa "..." kao sigurnosna mera. */
.packages-content .proizvod-naziv {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.4em;
    line-height: 1.2;
}

.packages-content .proizvod-kategorija {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.6em;
    line-height: 1.3;
    margin-top: .25rem;
}

/* Kartice usluga na početnoj ("Zašto da izaberete baš nas" i
   "Proizvodi u našoj ponudi") */
.service .service-content-inner {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.service .service-content-inner:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

/* Ikonica kategorije - suptilan krug u pozadini umesto "golog" fa znaka,
   isti obrazac koji koriste moderne SaaS stranice (Stripe/Linear) za
   feature-grid sekcije. Krug menja boju zajedno sa karticom na hover. */
.service .service-icon {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    background: var(--ariva-primary-50);
    transition: background-color var(--transition-base);
}

.service .service-icon i {
    font-size: 1.75rem;
}

.service .service-content-inner:hover .service-icon {
    background: rgba(255, 255, 255, .15);
}

/* Okvir slike u "O nama" sekciji */
.about .col-lg-5 > div {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* Footer kolone - blaga vizuelna separacija bez linija */
.footer .footer-item {
    transition: transform var(--transition-base);
}

/*
   Zašto: ravne, bezsenkovne kartice se stapaju sa pozadinom i teško je
   okom razdvojiti gde jedan proizvod počinje a drugi počinje. Kako
   poboljšava UX: senka + hover-lift jasno definišu granice kartice i daju
   trenutnu povratnu informaciju da je kartica "dodirljiva"/klikabilna,
   što je posebno važno na touch uređajima gde hover ne postoji ali tap
   stanje ipak koristi iste tranzicije. Utiče na funkcionalnost: ne —
   redosled, sadržaj i linkovi unutar kartica su nepromenjeni.
*/


/* --------------------------------------------------------------------------
   5) FORME (kontakt, admin panel)
   Blago uvećan padding za lakše kucanje na mobilnom, jasniji fokus prsten
   u brend boji, i suptilna tranzicija border-boje.
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
    border-radius: var(--radius-sm);
    border-color: var(--ariva-border);
    padding: .65rem .9rem;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-control:hover,
.form-select:hover {
    border-color: #c7cce0;
}

.form-label {
    font-weight: 500;
    color: var(--ariva-ink);
    font-size: .925rem;
}

textarea.form-control {
    line-height: 1.6;
}

/*
   Zašto: default Bootstrap polja imaju uzak padding i vrlo blagu ivicu
   koja se teško uočava, posebno na mobilnom. Kako poboljšava UX: veći
   dodirni razmak i jasniji fokus prsten smanjuju grešku pri unosu i čine
   formu (kontakt, admin login, dodavanje proizvoda) prijatnijom za
   korišćenje. Utiče na funkcionalnost: ne — validacija, name/id atributi
   i submit logika su nepromenjeni.
*/


/* --------------------------------------------------------------------------
   6) NAVIGACIJA
   Postojeći sticky/scroll efekat (iz main.js) ostaje netaknut. Dodajemo
   samo animiranu "underline" liniju ispod linka na hover/active, umesto
   trenutne promene boje, i blagu tranziciju senke.
   -------------------------------------------------------------------------- */
.navbar {
    transition: box-shadow var(--transition-base);
}

.navbar-light .navbar-nav .nav-link {
    position: relative;
    transition: color var(--transition-base);
}

@media (min-width: 992px) {
    .navbar-light .navbar-nav .nav-link:not(.nav-contact)::after {
        content: "";
        position: absolute;
        left: var(--bs-nav-link-padding-x, 0);
        right: var(--bs-nav-link-padding-x, 0);
        bottom: 2px;
        height: 2px;
        background: var(--ariva-primary);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--transition-base);
    }

    .navbar-light .navbar-nav .nav-link:hover::after,
    .navbar-light .navbar-nav .nav-link.active::after {
        transform: scaleX(1);
    }
}

.dropdown-menu {
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: .5rem;
}

.dropdown-item {
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

/*
   Zašto: postojeći nav-link hover je samo promena boje teksta, što je
   lako previdljivo. Kako poboljšava UX: animirana linija ispod aktivnog/
   hovered linka je poznat obrazac iz savremenih sajtova (Stripe, Vercel)
   i jasno pokazuje gde se korisnik nalazi u meniju. Utiče na
   funkcionalnost: ne — koristi se ::after pseudo-element, ne dodaje se
   nijedan novi element u HTML niti se menja ponašanje klika/linkova.
   Desktop-only (min-width:992px) da ne bi remetio već ispravljen mobilni
   meni.
*/


/* --------------------------------------------------------------------------
   7) SITNI DETALJI (ikonice, section-title, badge/alert, scrollbar)
   -------------------------------------------------------------------------- */

/* Section title liniji (npr. "O NAMA ——") dajemo malo vazduha i lakšu težinu */
.section-title,
.section-about-title {
    font-weight: 600;
    letter-spacing: .08em;
}

/* Alert komponente (npr. admin.html upozorenja) - zaobljenije, bez teške ivice */
.alert {
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
}

/* Ikonice unutar kartica/dugmadi - konzistentno poravnanje */
.btn i,
.btn .fa,
.btn .fas,
.btn .far {
    vertical-align: -1px;
}

/* Tanja, modernija scroll-traka (kozmetika, ne utiče na funkcionalnost) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--ariva-surface-alt);
}
::-webkit-scrollbar-thumb {
    background: #c7cce0;
    border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--ariva-primary);
}


/* --------------------------------------------------------------------------
   8) ADMIN PANEL — usklađivanje sa novim dizajn sistemom
   admin.html ima sopstveni mali <style> blok; ovde ga samo nadograđujemo
   istim tokenima (senke, radius, tranzicije) da izgleda kao deo istog
   sajta, ne kao posebna alatka.
   -------------------------------------------------------------------------- */
.admin-card {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base);
}

.proizvod-red {
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.proizvod-red:hover {
    background-color: var(--ariva-surface-alt);
}

.proizvod-red img {
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-xs);
}

/*
   Zašto: admin.html je ranije napravljen kao funkcionalna, ali vizuelno
   odvojena stranica. Kako poboljšava UX: sada deli isti "jezik" dizajna
   (senke, zaobljenost, razmaci) kao ostatak sajta, pa administracija
   proizvoda deluje kao integrisan deo Ariva sistema, a ne kao dodatak.
   Utiče na funkcionalnost: ne — ID-jevi, forme i JS logika (login, upload,
   izmena, brisanje) su nepromenjeni, menja se samo izgled istih elemenata.
*/


/* --------------------------------------------------------------------------
   9) POLITIKA PRIVATNOSTI - poravnanje teksta
   Dugi pravni pasusi se bolje čitaju poravnati na obe strane (justify).
   Namerno ograničeno na .privacy-content (politika-privatnosti.html), ne
   utiče na paragrafe drugde na sajtu.
   -------------------------------------------------------------------------- */
.privacy-content p {
    text-align: justify;
}


/* --------------------------------------------------------------------------
   10) GALERIJA - filter (dropdown, vidi gallery.html)
   Uočljiviji izgled od standardnog .form-select: deblja ivica u brend
   boji, veći tekst/padding i suptilna senka - ovo je glavna akcija na
   stranici (bez izbora kategorije se ništa ne prikazuje), pa treba da
   privuče pažnju umesto da izgleda kao sporedno polje forme.
   -------------------------------------------------------------------------- */
.galerija-select {
    border: 2px solid var(--ariva-primary);
    border-radius: var(--radius-md);
    padding: .9rem 2.5rem .9rem 1.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ariva-primary-dark);
    box-shadow: var(--shadow-sm);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2313357b'%3e%3cpath d='M8 11 3 6h10z'/%3e%3c/svg%3e");
}

.galerija-select:hover {
    box-shadow: var(--shadow-md);
}

.galerija-select:focus {
    border-color: var(--ariva-primary);
    box-shadow: 0 0 0 .2rem var(--ariva-primary-50);
}


/* --------------------------------------------------------------------------
   11) FOOTER - kredit šablona (Designed By / Distributed By)
   Šablon (HTML Codex / ThemeWagon) je besplatan uz uslov da ovaj link
   ostane prisutan i funkcionalan na sajtu - vidi LICENSE.txt. Stilizovan
   diskretno (sitniji font, prigušena boja) da ne odvlači pažnju od
   glavnog copyright teksta iznad njega, ali ostaje čitljiv i klikabilan.
   -------------------------------------------------------------------------- */
.footer-credit {
    font-size: .75rem;
    color: rgba(255, 255, 255, .45);
}

.footer-credit a {
    color: rgba(255, 255, 255, .55);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-credit a:hover {
    color: rgba(255, 255, 255, .85);
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   12) ISTAKNUTI PROIZVODI - oznaka u galeriji i fokus na packages.html
   Vidi js/galerija.js i js/proizvodi.js. Slike proizvoda u galeriji dobijaju
   vidljivu "Istaknuto" znacku (uvek, ne samo na hover) i klik vodi na
   packages.html sa fokusom na tacan artikal.
   -------------------------------------------------------------------------- */
.gallery-featured-badge {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--ariva-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .35rem .7rem;
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Eksplicitno hover stanje - bez ovoga, Bootstrap-ov podrazumevani
   "a:hover" ima vecu specificnost od nase .gallery-featured-badge boje,
   pa tekst na hover postaje skoro nevidljiv (tamnoplav na plavoj
   pozadini). Umesto toga, na hover zamenjujemo boje: bela pozadina,
   tamno-plav tekst - jasno vidljivo i namerno, ne slucajno. */
.gallery-featured-badge:hover,
.gallery-featured-badge:focus-visible {
    background: #fff;
    color: var(--ariva-primary-dark);
}

.gallery-featured-badge i {
    font-size: .7rem;
}

/* Kratka, upadljiva ali ne-nametljiva animacija (pulsirajuca senka) kad
   posetilac stigne iz galerije na tacan artikal na packages.html. */
.packages-item.proizvod-fokusiran .packages-content {
    animation: fokus-pulsiranje 1.25s ease-out 2;
}

@keyframes fokus-pulsiranje {
    0% { box-shadow: 0 0 0 0 rgba(19, 53, 123, .55); }
    70% { box-shadow: 0 0 0 14px rgba(19, 53, 123, 0); }
    100% { box-shadow: 0 0 0 0 rgba(19, 53, 123, 0); }
}


/* --------------------------------------------------------------------------
   13) KONTAKT PODACI - kartica na contact.html
   Zamena za staru verziju (sve centrirano, plosnato, bez razmaka između
   grupa) - sada su ikonica i tekst poravnati levo (isti obrazac kao
   moderni "info card" komponenti), sa jasnim razdvajanjem adrese,
   telefona i email-a putem tankih linija.
   -------------------------------------------------------------------------- */
.contact-info-card {
    background: var(--ariva-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-info-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ariva-primary-50);
    color: var(--ariva-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.contact-info-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ariva-muted);
    font-weight: 600;
    margin-bottom: .4rem;
}

.contact-info-link {
    color: var(--ariva-ink);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.contact-info-link:hover {
    color: var(--ariva-primary);
    text-decoration: underline;
}

.contact-info-divider {
    margin: 1.5rem 0;
    border: none;
    border-top: 1px solid var(--ariva-border);
    opacity: 1;
}


/* --------------------------------------------------------------------------
   14) NAJČEŠĆA PITANJA - akordeon na faq.html
   Pitanja (dugmad akordeona) su podebljana i u tamnijoj boji da se jasno
   izdvoje od običnog, sivkastog teksta odgovora ispod njih.
   -------------------------------------------------------------------------- */
.accordion-button {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ariva-ink);
}

.accordion-button:not(.collapsed) {
    color: var(--ariva-primary-dark);
    background-color: var(--ariva-primary-50);
}

.accordion-button:focus {
    box-shadow: 0 0 0 .2rem var(--ariva-primary-50);
}

.accordion-body {
    color: var(--ariva-body);
    line-height: 1.7;
}


/* --------------------------------------------------------------------------
   15) "ZAŠTO DA IZABERETE BAŠ NAS" - kartice pogodnosti na index.html
   Zamena za staru verziju (generičke stok-fotografije + prazan opis) -
   sada su ikonice u krugu, isti obrazac kao kod "Proizvodi u našoj
   ponudi" kartica, uz stvaran, kratak opis svake pogodnosti.
   -------------------------------------------------------------------------- */
.guide-item {
    background: var(--ariva-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    padding: 2rem 1.5rem;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.guide-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.guide-icon {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ariva-primary-50);
    color: var(--ariva-primary);
    font-size: 1.75rem;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.guide-item:hover .guide-icon {
    background: var(--ariva-primary);
    color: #fff;
}

.guide-item p {
    color: var(--ariva-muted);
    font-size: .925rem;
}


/* --------------------------------------------------------------------------
   16) PRISTUPAČNOST — poštovanje "prefers-reduced-motion"
   Ako korisnik u svom sistemu ima uključeno smanjeno kretanje (npr. zbog
   vrtoglavice), sve tranzicije/animacije iz ovog fajla se gase.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
    }
}