/* ---------------------------------------------------------------------------
   Autos Drina - dopune na RentQ temu.
   Učitava se POSLIJE style.css, pa sve ovdje ima prednost.

   Tema je građena Tailwind-om i njen style.css sadrži SAMO klase koje tema
   sama koristi. Zato se nove stranice grade od postojećih blokova teme, a
   sve što tema nema dopisuje se ovdje, običnim CSS-om.
--------------------------------------------------------------------------- */

/* --- Boja marke ---------------------------------------------------------
   Tema svoju narandžastu drži u jednoj varijabli, pa je dovoljno promijeniti
   nju da se preboji cijeli sajt. */
:root,
.dark {
  --color-primary: #d7292c;
}

/* Nekoliko mjesta u temi ima narandžastu upisanu direktno u klasu.
   Prebojavamo ih SAMO u svijetlom režimu - u tamnom tema sama stavlja
   crnu pozadinu (dark:bg-black), pa je ne smijemo pregaziti. */
html:not(.dark) .bg-\[\#FFF2E8\] { background-color: #fdf1f1 !important; }  /* pozadina hero sekcije */
html:not(.dark) .bg-\[\#FFD6BB\] { background-color: #f7d7d7 !important; }  /* okvir forme u hero sekciji */

/* --- Mjesta za slike -----------------------------------------------------
   Dok klijent ne dostavi fotografije, umjesto praznog prostora stoji obojeno
   polje sa opisom šta tu treba doći i preporučenom veličinom.
   Kad slika stigne, poziv Ui::placeholder() se zamijeni <img> tagom. */

.img-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  border-radius: 15px;
  color: #b3252a;
  background-color: #fdeaea;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(215, 41, 44, 0.07) 0 12px,
    rgba(215, 41, 44, 0) 12px 24px
  );
  border: 2px dashed rgba(215, 41, 44, 0.35);
}

.img-placeholder__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
  line-height: 1.35;
}

.img-placeholder__icon {
  font-size: 30px;
  line-height: 1;
  opacity: 0.65;
}

.img-placeholder__label {
  font-weight: 600;
  font-size: 14px;
  max-width: 22ch;
}

.img-placeholder__size {
  font-size: 12px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* Manje polje - manji tekst */
.img-placeholder--sm .img-placeholder__icon  { font-size: 22px; }
.img-placeholder--sm .img-placeholder__label { font-size: 12px; }
.img-placeholder--sm .img-placeholder__size  { font-size: 11px; }

/* Tamna varijanta - za polja preko kojih ide bijeli tekst
   (kartica sa pozivom na akciju u bočnoj koloni). */
.img-placeholder--dark {
  color: #ffd9da;
  background-color: #7c1a1c;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.08) 0 12px,
    rgba(255, 255, 255, 0) 12px 24px
  );
  border-color: rgba(255, 255, 255, 0.35);
}

/* Polja za slike u tamnom režimu.
   Bez ovoga ostaju svijetlo roza i "svijetle" usred tamne stranice. */
html.dark .img-placeholder {
  color: #e79a9c;
  background-color: #17100f;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(215, 41, 44, 0.22) 0 12px,
    rgba(215, 41, 44, 0) 12px 24px
  );
  border-color: rgba(215, 41, 44, 0.45);
}

/* Tamna varijanta je već tamna - u tamnom režimu je samo malo ublažimo */
html.dark .img-placeholder--dark {
  background-color: #4a1012;
  border-color: rgba(255, 255, 255, 0.22);
}

/* ---------------------------------------------------------------------------
   Prilagodbe za male ekrane.
   Tema je Tailwind i njen style.css sadrži samo klase koje sama koristi, pa
   se ovdje piše običnim CSS-om.
--------------------------------------------------------------------------- */

/* Gornja traka na telefonu.
   Radno vrijeme i adresa se ponavljaju u podnožju i na stranici Kontakt, pa
   se ovdje skrivaju. Ostaje jedan red: e-mail i telefon lijevo, prekidač
   svijetlo/tamno skroz desno. */
@media (max-width: 767px) {
  .topbar-secondary { display: none; }

  .topbar-grid {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
  }
  .topbar-left  { flex: none; justify-content: flex-start; }
  /* desna grupa uzima ostatak reda: telefon ostaje uz e-mail,
     a prekidač ide na sam kraj */
  .topbar-right { flex: 1 1 auto; flex-wrap: nowrap; justify-content: space-between; }
  .topbar-left, .topbar-right { gap: 10px; }
  .topbar-left  a,
  .topbar-right a { white-space: nowrap; }
}

/* Mobilni meni: stavke su izgledale kao običan tekst. Dodane su linije i
   veći razmak da se lakše pogađaju prstom. Linija ide samo na stavke
   prvog nivoa - podmeni ima svoju okomitu crtu iz teme. */
.sidebar-nav-list > .nav-item {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(13, 20, 22, 0.08);
}
.sidebar-nav-list > .nav-item:last-child { border-bottom: 0; }
.sidebar-nav-list > .nav-item > .nav-link {
  padding: 14px 0;
  font-size: 17px;
}
html.dark .sidebar-nav-list > .nav-item { border-bottom-color: rgba(255, 255, 255, 0.12); }

/* Podmeni (Usluge): stavke su bile sitne za dodir. */
.sidebar-nav-list .dropdown-menu { margin-top: 0; padding-bottom: 6px; }
.sidebar-nav-list .dropdown-menu .nav-item { margin-bottom: 0; }
.sidebar-nav-list .dropdown-menu .nav-link {
  padding: 11px 0;
  font-size: 16px;
}

/* Strelica pored "Usluge" - tema je crta ikonicom u ::before */
.sidebar-nav-list > .nav-item > .nav-link.dropdown-toggle::before { font-size: 20px; }

/* Dugme "Pozovite" u mobilnom meniju */
.sidebar-call-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
  padding: 13px 20px;
  border-radius: 5px;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: 17px;
  transition: background-color .3s ease-in-out;
}
.sidebar-call-btn:hover { background-color: #0d1416; color: #fff; }

/* Traka sa ponudom na početnoj: bijeli tekst je na telefonu padao na
   svijetli dio fotografije i bio nečitak. Dodan je zatamnjeni sloj. */
.offer-band { position: relative; z-index: 1; }
.offer-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 15px;
  /* Na telefonu tekst stoji pri VRHU trake, pa je tamo i zatamnjenje jače. */
  background: linear-gradient(180deg, rgba(13, 20, 22, 0.8) 0%, rgba(13, 20, 22, 0.55) 100%);
}
@media (min-width: 768px) {
  .offer-band::before {
    background: linear-gradient(180deg, rgba(13, 20, 22, 0) 45%, rgba(13, 20, 22, 0.75) 100%);
  }
}

/* Četiri oznake u kartici usluge su se na uskom ekranu lomile 3+1.
   Ispod 480px idu u mrežu 2x2. */
@media (max-width: 479px) {
  .svc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 10px; }
}

/* ---------------------------------------------------------------------------
   Mobilni meni preko cijelog ekrana, sa zamućenom ("frosted glass") pozadinom.
   Tema ga pravi kao usku ploču sa desne strane (320/400/500px) i punom
   bijelom pozadinom - ovdje se širi na cijeli ekran i postaje proziran.
--------------------------------------------------------------------------- */
/* Zajednička podešavanja "zamućenog stakla" - koriste ih i mobilni meni i
   panel forme za zakazivanje, da izgledaju isto.
   Bijela je namjerno slaba (55%): na 72% je sve ispod bilo isprano u bijelo
   pa se nije vidjelo da išta prosijava. */
:root {
  --glass-filter: blur(22px) saturate(160%);
  --glass-light: rgba(255, 255, 255, 0.55);
  --glass-dark:  rgba(13, 20, 22, 0.55);
}

.sidebar-modal {
  width: 100%;
  max-width: 100%;
  background-color: var(--glass-light);
}

/* Zamućenje se uključuje SAMO dok je meni otvoren.
   Ako stoji stalno, pretraživač drži sloj preko cijelog ekrana i
   računa zamućenje pri svakom pomjeranju - skrolanje postane trzavo. */
.sidebar-modal.show {
  -webkit-backdrop-filter: var(--glass-filter);
          backdrop-filter: var(--glass-filter);
}
/* Tema zaglavlju menija daje punu bijelu ('.sidebar-modal .sidebar-modal-header'),
   pa je potreban jednako specifičan selektor da ostane prozirno. */
.sidebar-modal .sidebar-modal-header,
.sidebar-modal .sidebar-modal-body {
  background-color: transparent;
}
.sidebar-modal .sidebar-modal-header {
  border-bottom-color: rgba(13, 20, 22, 0.08);
}
html.dark .sidebar-modal { background-color: var(--glass-dark); }
html.dark .sidebar-modal .sidebar-modal-header { border-bottom-color: rgba(255, 255, 255, 0.1); }

/* Ako pretraživač ne podržava zamućenje, pozadina mora biti neprozirna -
   inače se tekst menija miješa sa stranicom ispod. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar-modal,
  html:not(.dark) .hero-form-glass { background-color: #fff !important; }
  html.dark .sidebar-modal,
  html.dark .hero-form-glass { background-color: #0d1416 !important; }
}

/* Preko cijelog ekrana zastor iza menija nema šta da zatamni. */
.sidebar-modal.show ~ .backdrop.show { opacity: 0; }

/* Sadržaj se na širokim ekranima ne razvlači preko cijele širine */
.sidebar-modal-body > * { max-width: 560px; }

/* Kontakt podaci: ikonica + podatak, svaki u svom redu. */
.sidebar-contact { margin-top: 25px; }
.sidebar-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  line-height: 1.45;
}
.sidebar-contact li:last-child { margin-bottom: 0; }
.sidebar-contact .si {
  flex: none;
  margin-top: 3px;
  font-size: 19px;
  color: var(--color-primary);
}
.sidebar-contact a { font-weight: 600; color: var(--color-primary); }
.sidebar-contact a:hover { text-decoration: underline; }
.sidebar-contact strong { font-weight: 600; }

/* ---------------------------------------------------------------------------
   Efekat kucanja u naslovu (hero).

   U elementu uvijek stoji CIJELA riječ - "kucanje" je samo odsijecanje prikaza
   (clip-path), pa pretraživač u DOM-u vidi potpun naslov.

   Animiraju se clip-path i transform - svojstva koja ne mijenjaju raspored -
   a omotač je širok koliko najduža fraza. Zato naslov ne "poskakuje" (CLS).

   Bez JavaScripta klasa .tw--ready izostane i vidi se prva fraza, normalno.
--------------------------------------------------------------------------- */
.tw {
  display: inline-block;
  position: relative;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  vertical-align: bottom;
}

.tw__word { display: inline-block; }

/* Gornja i donja ivica se namjerno šire izvan okvira (negativan inset):
   naslov ima line-height 1, pa repovi slova (g, p, j) i kvačice (č, ž)
   izlaze iz okvira reda - bez ovoga bi ih clip-path odsjekao. */
.tw--ready .tw__word {
  -webkit-clip-path: inset(-0.35em var(--tw-hide, 0%) -0.35em 0);
          clip-path: inset(-0.35em var(--tw-hide, 0%) -0.35em 0);
}

/* Kursor - stoji na mjestu do kojeg je riječ otkrivena. */
.tw--ready::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.14em;
  bottom: 0.14em;
  width: 0.06em;
  min-width: 2px;
  background-color: var(--color-primary);
  transform: translateX(var(--tw-caret, 0px));
  animation: tw-caret 1s step-end infinite;
}
.tw--ready.is-typing::after { animation: none; }

@keyframes tw-caret {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tw--ready .tw__word { -webkit-clip-path: none; clip-path: none; }
  .tw--ready::after { display: none; }
}

/* ---------------------------------------------------------------------------
   Font naslova u hero sekciji.
   Font se preuzima sa `php tools/build-hero-font.php` i stoji lokalno
   (assets/fonts). Promjena fonta = izmjena skripte + ovog jednog reda.
--------------------------------------------------------------------------- */
:root { --font-hero: 'Ubuntu', 'Figtree', system-ui, sans-serif; }

.hero-title {
  font-family: var(--font-hero);
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: none;
}

/* ---------------------------------------------------------------------------
   Ljepljivo zaglavlje - bez "nevidljive barijere" pri skrolanju.

   Tema na scrollY >= 120 dodaje klasu .navbar-sticky, a ona na velikim
   ekranima smanjuje unutrašnji razmak sa 15px na 5px. Zaglavlje tako postane
   20px niže, sadržaj skoči gore, stranica se vrati ispod praga, klasa se
   makne, zaglavlje naraste... i tako u krug. Skrolanje se "zaglavi" tačno na
   toj tački dok se ne odgurne jačim potezom.

   Rješenje: zaglavlje zadržava istu visinu u oba stanja. Ljepljivost, bijela
   pozadina i sjena ostaju - mijenja se samo izgled, ne i raspored.
--------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  #navbar.navbar-sticky {
    padding-block: 15px;
  }
}

/* ---------------------------------------------------------------------------
   Dugmad bez ikonica.

   Tema je dugme gradila oko ikonice: sitan okvir (padding 4-6px) plus bijeli
   kvadrat 37x37 sa ikonicom desno, a tekst je imao veliki lijevi razmak.
   Kad ikonice nema, razmak mora biti simetričan i dugme mora zadržati visinu.
--------------------------------------------------------------------------- */
.primary-btn {
  padding: 13px 24px;
}
.primary-btn > span {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 48rem) {
  .primary-btn { padding: 14px 28px; }
}
@media (min-width: 64rem) {
  .primary-btn { padding: 15px 32px; }
}

/* Dugme "Pozovite" u mobilnom meniju - i ono ide bez ikonice */
.sidebar-call-btn .si { display: none; }

/* ---------------------------------------------------------------------------
   Hero video (početna).

   Jedan video sa PROVIDNOM pozadinom (VP9 + alfa), pa isti fajl radi i u
   svijetloj i u tamnoj temi - boju iza njega daje sama hero sekcija.

   Video stoji IZA naslova i forme i počinje tačno ispod menija.
--------------------------------------------------------------------------- */
.hero-video {
  position: relative;
  aspect-ratio: 1920 / 900;
  /* Boja iza providnog videa - ista koju tema daje hero sekciji i
     zaglavlju početne, pa nema šava. */
  --hero-bg: #fdf1f1;
}
html.dark .hero-video { --hero-bg: #000000; }

/* Iznad izvorne širine sekcija ostaje preko cijelog ekrana, a zaključa se
   visina - video se onda ne uvećava preko 1920x900 (gubio bi oštrinu). */
@media (min-width: 1920px) {
  .hero-video { aspect-ratio: auto; height: 900px; }
}

.hero-video__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;       /* forma i naslov iznad ostaju klikabilni */
}

.hero-video__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus-x, 50%) var(--hero-focus-y, 50%);
}

/* Sadržaj (naslov, forma) iznad videa */
.hero-video > .container { position: relative; z-index: 1; }

/* Na širokim ekranima video se NE uvećava preko izvornih 1920x900 - iznad toga
   gubi oštrinu. Ostaje u sredini, a sa strana se vidi pozadina stranice
   (video je providan, pa se prelaz ne primjećuje). */
@media (min-width: 1024px) {
  .hero-video__media {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
    max-width: 1920px;
  }
}

/* Na telefonu je ekran uspravan, a video položen: sekcija puni visinu ekrana,
   a kadar se pomjera na lijevi far i gumu. Visinu postavlja JavaScript
   (--hero-h), jer zavisi od visine trake i menija iznad. */
@media (max-width: 1023px) {
  .hero-video {
    aspect-ratio: auto;
    max-height: none;
    min-height: var(--hero-h, 620px);
  }
  .hero-video__media {
    --hero-focus-x: 22%;
    --hero-focus-y: 62%;
  }
}

/* Vrh videa se stapa sa pozadinom da naslov ostane čitljiv.
   Krov auta ulazi u pojas gdje stoji naslov, pa bi tamni tekst pao na tamno
   staklo. Preliv je u BOJI POZADINE sekcije: tamo gdje je video providan ne
   vidi se, a "pojede" samo dio auta koji smeta tekstu. */
.hero-video__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--hero-bg, #fdf1f1) 0%,
    var(--hero-bg, #fdf1f1) 16%,
    transparent 46%
  );
}

/* Panel forme za zakazivanje - isto "zamućeno staklo" kao mobilni meni.
   Iza njega prolazi video, pa staklo daje dubinu umjesto pune boje.
   `!important` je nužan jer tema panelu daje punu boju preko klase
   bg-[#FFD6BB], koju i mi prebojavamo ranije u ovom fajlu. */
.hero-form-glass {
  -webkit-backdrop-filter: var(--glass-filter);
          backdrop-filter: var(--glass-filter);
}
html:not(.dark) .hero-form-glass { background-color: var(--glass-light) !important; }
html.dark       .hero-form-glass { background-color: var(--glass-dark)  !important; }

/* ---------------------------------------------------------------------------
   Forma za zakazivanje - raspored polja.

   Poslije izbacivanja polja za vrijeme ostala su četiri polja. Na velikom
   ekranu "Vozilo" dobija najviše prostora jer nosi dva podatka (marka i model).
--------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .hero-form-glass { grid-template-columns: 1fr 1.7fr 1fr 0.9fr; }
}

/* --- Telefon sa stalnim pozivnim brojem ---------------------------------- */
.phone-field { position: relative; }
.phone-field__prefix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  padding-inline: 14px 8px;
  font-weight: 600;
  color: #0d1416;
  pointer-events: none;   /* klik pada na polje ispod */
}
html.dark .phone-field__prefix { color: #fff; }
.phone-field .form-input { padding-inline-start: 62px; }

/* Samo za čitače ekrana */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Padajući spisak sa pretragom (marka vozila).

   Nadogradnja preko običnog <select>: bez JavaScripta ostaje ispravan
   sistemski spisak, a sa njim se dobija polje za pretragu i tastatura.
   Namjerno bez vanjske biblioteke - ovako se stil poklapa sa temom i ne
   učitava se dodatnih 50-ak KB zbog jednog polja.
--------------------------------------------------------------------------- */
.combo-ready { display: none !important; }   /* izvorni select kad JS preuzme */

.combo-wrap { position: relative; }
.combo-wrap.is-open { z-index: 30; }

.combo-btn {
  /* Dugme nasljeđuje temine klase sa <select>-a, a .form-select nosi
     strelicu kao pozadinsku sliku. Bez ovoga bi se vidjele dvije strelice:
     temina iz pozadine i naša ikonica koja se okreće pri otvaranju. */
  background-image: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: start;
  cursor: pointer;
}
.combo-btn__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-btn__value.is-placeholder { color: #8b8b8b; }
html.dark .combo-btn__value.is-placeholder { color: #9a9a9a; }
.combo-btn .si { flex: none; font-size: 18px; transition: transform .2s ease-in-out; }
.combo-wrap.is-open .combo-btn .si { transform: rotate(180deg); }

.combo-panel {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  z-index: 40;
  overflow: hidden;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 12px 34px rgba(13, 20, 22, 0.18);
  border: 1px solid rgba(13, 20, 22, 0.1);
}
html.dark .combo-panel {
  background-color: #0d1416;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
}

.combo-search-wrap { position: relative; padding: 10px; border-bottom: 1px solid rgba(13, 20, 22, 0.08); }
html.dark .combo-search-wrap { border-bottom-color: rgba(255, 255, 255, 0.12); }
.combo-search-wrap .si {
  position: absolute;
  top: 50%;
  inset-inline-start: 20px;
  transform: translateY(-50%);
  color: var(--color-primary);
  pointer-events: none;
}
.combo-search {
  width: 100%;
  padding: 9px 12px 9px 38px;
  border: 1px solid rgba(13, 20, 22, 0.15);
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font-size: 15px;
}
.combo-search:focus { outline: none; border-color: var(--color-primary); }
html.dark .combo-search { border-color: rgba(255, 255, 255, 0.18); }

.combo-list {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;   /* skrol liste ne vuče stranicu */
  padding: 6px;
}
.combo-option {
  padding: 9px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.3;
}
.combo-option[aria-selected="true"] { font-weight: 600; color: var(--color-primary); }
.combo-option.is-active,
.combo-option:hover { background-color: rgba(215, 41, 44, 0.1); }
html.dark .combo-option.is-active,
html.dark .combo-option:hover { background-color: rgba(215, 41, 44, 0.25); }

.combo-empty { padding: 14px 12px; text-align: center; font-size: 14px; opacity: .7; }

/* Stavke glavnog menija su na velikim ekranima bile sitne u odnosu na logotip.
   Tema im ne zadaje veličinu (nasljeđuju je od teksta stranice), pa se ovdje
   postavlja izričito. */
@media (min-width: 1024px) {
  #navbar .navbar-nav .nav-item .nav-link { font-size: 17px; }
}
@media (min-width: 1280px) {
  #navbar .navbar-nav .nav-item .nav-link { font-size: 18px; }
}
/* Podstavke u padajućem meniju ostaju nešto manje od glavnih */
#navbar .navbar-nav .dropdown-menu .nav-link { font-size: 16px; }

/* ---------------------------------------------------------------------------
   Prekidač svijetli/tamni prikaz.

   Ranije je bila samo bijela ikonica na crvenoj traci - izgledala je kao
   ukras, pa se nije prepoznavalo da je dugme. Sada je bijeli kvadratić sa
   zaobljenim uglovima i crvenom ikonicom: isti jezik oblika (radijus 5px)
   kao ostala dugmad na sajtu, a bijelo na crvenom se jasno izdvaja.

   Prikaz je isti u svijetloj i u tamnoj temi jer gornja traka u obje ostaje
   crvena - dugme tako ne "nestaje" pri promjeni teme.
--------------------------------------------------------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background-color: #ffffff;
  color: var(--color-primary);
  line-height: 1;
  transition: background-color .3s ease-in-out, color .3s ease-in-out;
}
.theme-toggle .si { font-size: 17px; }
.theme-toggle:hover { background-color: #f1f1f1; }

@media (min-width: 768px) {
  .theme-toggle { width: 34px; height: 34px; }
  .theme-toggle .si { font-size: 19px; }
}


/* ---------------------------------------------------------------------------
   Brendirani panel na mjestu slike (Ui::vizual).

   Fotografije stoje samo u galeriji, gdje uz svaku ide opis pa se ne može
   desiti da slika ne odgovara mjestu. Svuda drugdje ide ovaj panel.

   Namjerno je isti u svijetloj i tamnoj temi: tamna pločica se lijepo odvaja
   na svijetloj stranici, a na tamnoj joj tanka linija drži ivicu. Tako sve
   kartice izgledaju isto bez obzira na temu, a ne treba drugi set boja.

   Sastav: crveni čip sa ikonicom gore lijevo, ista ikonica kao veliki vodeni
   žig koji izlazi iz donjeg desnog ugla, i po potrebi naslov sa crvenom crtom
   iznad. Naslov se ispisuje samo tamo gdje tema ispod slike već ne piše isto.
--------------------------------------------------------------------------- */
.vz {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 15px;
  background: linear-gradient(135deg, #1c2225 0%, #0e1315 100%);
  /* da se vodeni žig može mjeriti u odnosu na samu pločicu, a ne u fiksnim
     pikselima - ista slika onda radi i na 380x250 i na 900x660 */
  container-type: size;
}
html.dark .vz { border: 1px solid rgba(255, 255, 255, 0.08); }

/* Vodeni žig: ikonica je CSS maska, pa je font-size ujedno i njena veličina */
.vz__vodeni {
  position: absolute;
  right: -8%;
  bottom: -16%;
  font-size: 230px;        /* zamjena za starije pretraživače bez cqh */
  font-size: 78cqh;
  line-height: 1;
  color: rgba(255, 255, 255, 0.11);
  pointer-events: none;
}

.vz__ikona {
  position: absolute;
  top: 18px;
  inset-inline-start: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
}

.vz__naslov {
  position: absolute;
  inset-inline-start: 18px;
  bottom: 16px;
  inset-inline-end: 18px;
  color: #ffffff;
  font-family: 'Ubuntu', system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.vz__naslov::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 8px;
  background-color: var(--color-primary);
}

/* Male kartice (380 x 250) - sve srazmjerno manje */
.vz--mala .vz__ikona  { top: 14px; inset-inline-start: 14px; width: 38px; height: 38px; font-size: 20px; }
.vz--mala .vz__naslov { inset-inline-start: 14px; bottom: 13px; font-size: 15px; }

/* Poziv na akciju: tema preko panela stavlja svoj bijeli naslov i dugme,
   pa ostaje samo vodeni žig da površina ne bude prazna */
.vz--cista .vz__ikona,
.vz--cista .vz__naslov { display: none; }
.vz--cista .vz__vodeni { right: -6%; bottom: -12%; }

@media (max-width: 575px) {
  .vz__naslov { font-size: 17px; }
}

/* ---------------------------------------------------------------------------
   Akordeon ("Zašto baš mi", česta pitanja).

   Tema pokazuje isti plus i kad je stavka otvorena, pa se ne vidi šta je
   trenutno otvoreno ni da se klikom zatvara. Klasu `active` tema već
   postavlja - ovdje se samo iskorištava, bez diranja njenog JavaScripta.
--------------------------------------------------------------------------- */

/* Znak: plus kad je zatvoreno, minus kad je otvoreno */
.akordeon-znak .si-minus-fill { display: none; }
.accordion-item.active .akordeon-znak .si-add-fill { display: none; }
.accordion-item.active .akordeon-znak .si-minus-fill { display: inline-block; }

/* Otvorena stavka: znak se puni bojom, da se odmah vidi gdje ste */
.accordion-item.active .akordeon-znak {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

/* Kvadratić sa ikonicom uz naslov - otvorena stavka dobija crvenu podlogu
   i bijelu ikonicu */
.akordeon-ikona {
  transition: background-color .25s ease-in-out, color .25s ease-in-out;
}
.accordion-item.active .akordeon-ikona,
html.dark .accordion-item.active .akordeon-ikona {
  background-color: var(--color-primary);
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Značka "20+ godina na istoj adresi" u sekciji "Zašto baš mi".

   Značka je apsolutno pozicionirana i u HTML-u stoji PRIJE pločica pored
   kojih se prikazuje. Otkad su na tom mjestu brendirani paneli (koji su
   `position: relative`), pločice se crtaju preko nje i broj se ne vidi.
   Ovim se značka vraća iznad.
--------------------------------------------------------------------------- */
.znacka-godine { z-index: 2; }

/* Otvaranje i zatvaranje: tema je koristila display:none, što se ne može
   animirati. Sada panel klizi - visina, prozirnost i razmak idu zajedno.
   Klasu `active` postavlja JS teme (izmijenjen samo dio koji zatvara). */
.accordion-panel {
  overflow: hidden;
  max-height: 600px;
  opacity: 1;
  transition: max-height .35s ease-in-out, opacity .25s ease-in-out,
              padding-top .35s ease-in-out, padding-bottom .35s ease-in-out;
}
/* `hidden` ostaje u HTML-u iz teme na zatvorenim stavkama - display:none bi
   ubio animaciju, pa ga ovdje poništavamo; zatvaranje radi pravilo ispod. */
.accordion-panel.hidden { display: block; }

.accordion-item:not(.active) .accordion-panel {
  max-height: 0;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-panel { transition: none; }
}

/* ---------------------------------------------------------------------------
   Društvene mreže u mobilnom meniju.

   Sve tri u jednom redu na dnu, bez naslova - znak mreže sam kaže o čemu se
   radi. Pločica je ista kao kod prekidača teme (bijeli kvadrat, zaobljeni
   uglovi, crvena ikonica), pa se prepoznaje kao dugme. Veće su od ikonica u
   tekstu jer se na telefonu pogađaju prstom.
--------------------------------------------------------------------------- */
.sidebar-social {
  display: flex;
  gap: 12px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(13, 20, 22, 0.10);
}
html.dark .sidebar-social { border-top-color: rgba(255, 255, 255, 0.12); }

.sidebar-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background-color: #ffffff;
  border: 1px solid rgba(13, 20, 22, 0.10);
  color: var(--color-primary);
  font-size: 22px;
  line-height: 1;
  transition: background-color .25s ease-in-out, color .25s ease-in-out;
}
html.dark .sidebar-social a { border-color: rgba(255, 255, 255, 0.14); }

.sidebar-social a:hover,
.sidebar-social a:focus-visible {
  background-color: var(--color-primary);
  color: #ffffff;
}

/* Kontakt kolona u podnožju - isti raspored kao u mobilnom meniju:
   ikonica lijevo, podatak desno, svaki u svom redu. */
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.footer-contact li:last-child { margin-bottom: 0; }
.footer-contact .si {
  flex: none;
  margin-top: 4px;
  font-size: 18px;
  color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Podnožje: kolona "Firma" je izbačena (isti linkovi već stoje u glavnom
   meniju), pa su ostale dvije - Usluge i Kontakt. Kontakt dobija više
   prostora da adresa i radno vrijeme stanu u jedan red.
--------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .footer-kolone { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
}
@media (min-width: 1280px) {
  .footer-kolone { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
}
/* Redovi u Kontaktu ne prelamaju se osim ako baš moraju */
.footer-contact li > span,
.footer-contact li > a { min-width: 0; }

/* ---------------------------------------------------------------------------
   Traka sa pozivom na akciju (/o-nama, /usluge).

   Preko fotografije tima ide preliv, jer je slika svijetla a natpis i dugme
   su bijeli. Jači je uz lijevu ivicu gdje stoji tekst, a desno se gubi da se
   lica ne zatamne bez potrebe.
--------------------------------------------------------------------------- */
.cta-foto { position: relative; isolation: isolate; }
.cta-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(13, 20, 22, 0.85) 0%,
    rgba(13, 20, 22, 0.62) 38%,
    rgba(13, 20, 22, 0.28) 70%,
    rgba(13, 20, 22, 0.20) 100%
  );
}
.cta-foto > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   Mape lokacija (kontakt)

   Firma ima dvije stanice, pa stoje dvije mape jedna pored druge. Visine i
   razmaci se pisu ovdje jer ociscen Tailwind nema h-[340px] ni h-[420px] -
   bez ovoga se ugradjena mapa srusi na podrazumjevanu visinu okvira.
   --------------------------------------------------------------------------- */
.mape-lokacija {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

@media (min-width: 768px) {
    .mape-lokacija { grid-template-columns: 1fr 1fr; }
}

.mapa-naslov {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .mapa-naslov { font-size: 18px; }
}

.mapa-lokacije {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
    border-radius: 15px;
}

@media (min-width: 768px) {
    .mapa-lokacije { height: 420px; }
}

@media (min-width: 1024px) {
    .mapa-lokacije { height: 500px; }
}

/* ---------------------------------------------------------------------------
   Natpis iznad naslova sekcije ("Gdje nas možete pronaći", "Naše usluge"...)

   Tema mu ne daje veličinu, pa je nasljeđivao veličinu teksta (14/15/16px) i
   bio sitniji nego što treba. Podiže se za dva piksela po svakoj širini, tako
   da i dalje ostane manji od naslova ispod (20/24/30px).

   Izuzetak su brojke u karticama usluga ("20 min", "1 dolazak") - one imaju
   svoju veličinu kroz text-base/md:text-lg, pa ih :not() ostavlja na miru.
   --------------------------------------------------------------------------- */
span.block.font-bold.text-primary:not([class*="text-base"]) {
    font-size: 16px;
}

@media (min-width: 768px) {
    span.block.font-bold.text-primary:not([class*="text-base"]) { font-size: 17px; }
}

@media (min-width: 1024px) {
    span.block.font-bold.text-primary:not([class*="text-base"]) { font-size: 18px; }
}

/* ---------------------------------------------------------------------------
   Brojke na dnu kartica lokacija (20+ godina | Sve kategorije | 1 dolazak)

   Tema ih ređa sa justify-between, pa se krajnje dvije zalijepe za ivice
   kartice i red izgleda razvučeno. Ovdje idu u tri jednake kolone, odvojene
   crtom od spiska iznad, a sama brojka je u brendiranoj crvenoj.
   --------------------------------------------------------------------------- */
.kartica-brojke {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
}

html.dark .kartica-brojke { border-top-color: rgba(255, 255, 255, 0.12); }

/* prva vrijednost u paru je brojka, druga je natpis ispod nje */
.kartica-brojke > div > span:first-child {
    color: var(--color-primary);
    font-weight: 700;
}

.kartica-brojke > div > span:last-child {
    opacity: 0.75;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
   Traka poziva na akciju sa centriranim natpisom (početna)

   Ista fotografija-podloga kao na /o-nama, ali je ovdje natpis po sredini, pa
   preliv ne smije biti jači sa jedne strane. Ide ravnomjeran tamni sloj plus
   blagi crveni odsjaj u sredini - da traka ostane brendirana i da crveno dugme
   "Pozovite nas" ima od čega da se odvoji.
   --------------------------------------------------------------------------- */
.cta-foto--sredina::before {
  background:
    linear-gradient(180deg, rgba(20, 10, 12, 0.58) 0%, rgba(20, 10, 12, 0.78) 100%),
    radial-gradient(ellipse at 50% 45%, rgba(215, 41, 44, 0.30) 0%, rgba(215, 41, 44, 0) 72%);
}

/* ---------------------------------------------------------------------------
   Sekcija recenzija na početnoj

   Tema je ovdje imala svoju tamnu sliku, pa je bijel tekst radio bez ičega.
   Naša fotografija objekta je snimljena po danu, pa preko nje ide tamni sloj -
   bez njega naslov, brojke i kartice recenzija se ne bi vidjeli. Blagi crveni
   odsjaj u sredini drži traku brendiranom.
   --------------------------------------------------------------------------- */
.recenzije-foto { position: relative; isolation: isolate; }

.recenzije-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13, 20, 22, 0.86) 0%, rgba(13, 20, 22, 0.79) 50%, rgba(13, 20, 22, 0.88) 100%),
    radial-gradient(ellipse at 50% 40%, rgba(215, 41, 44, 0.22) 0%, rgba(215, 41, 44, 0) 70%);
}

.recenzije-foto > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   Zakazivanje termina - prozor uz hero obrazac

   Sve je pisano ručno jer očišćen Tailwind nema klase koje tema nije koristila.
   Boje idu iz istih promjenljivih kao ostatak sajta, a za tamnu temu se mijenja
   samo podloga i tekst (html.dark).
   --------------------------------------------------------------------------- */

/* skriveno polje protiv robota - van ekrana, ali ne display:none
   (neki roboti preskaču polja koja nisu u rasporedu) */
.tp-zamka {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.tp-greska-forma {
    display: none;
    margin-top: 10px;
    font-weight: 600;
    color: var(--color-primary);
}

.tp-greska-forma.je-vidljiva { display: block; }

/* --- okvir prozora ------------------------------------------------------- */
.tp-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tp-modal[hidden] { display: none; }

.tp-bez-skrola { overflow: hidden; }

.tp-modal__zastor {
    position: absolute;
    inset: 0;
    background: rgba(13, 20, 22, 0.62);
}

.tp-modal__okvir {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 28px 26px 26px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 24px 60px rgba(13, 20, 22, 0.25);
}

html.dark .tp-modal__okvir {
    background: #101617;
    color: #fff;
}

.tp-modal__x {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 20px;
    color: inherit;
    background: transparent;
    transition: background-color 0.2s ease;
}

.tp-modal__x:hover { background: rgba(13, 20, 22, 0.08); }
html.dark .tp-modal__x:hover { background: rgba(255, 255, 255, 0.12); }

.tp-modal__naslov {
    margin: 0 34px 6px 0;
    font-size: 20px;
    line-height: 1.25;
}

.tp-modal__uvod {
    margin: 0 0 18px;
    font-size: 15px;
    opacity: 0.85;
}

.tp-modal__uvod:empty { display: none; }

/* --- ponuda termina ------------------------------------------------------ */
.tp-vremena {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}

.tp-vrijeme {
    padding: 10px 6px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid rgba(13, 20, 22, 0.16);
    border-radius: 8px;
    background: #fff;
    color: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

html.dark .tp-vrijeme {
    background: #171f21;
    border-color: rgba(255, 255, 255, 0.16);
}

.tp-vrijeme:hover { border-color: var(--color-primary); }

/* Izabran termin mora nadjačati i pravilo za tamnu temu, zato oba
   selektora - inače u tamnoj temi ostane siv i ne vidi se šta je izabrano. */
.tp-vrijeme.je-izabran,
html.dark .tp-vrijeme.je-izabran {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* --- neobavezni e-mail --------------------------------------------------- */
.tp-email { margin-bottom: 16px; }

.tp-email label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.tp-email label span {
    font-weight: 400;
    opacity: 0.65;
}

.tp-email input {
    width: 100%;
    padding: 11px 14px;
    font-size: 15px;
    border: 1px solid rgba(13, 20, 22, 0.16);
    border-radius: 8px;
    background: #fff;
    color: inherit;
}

html.dark .tp-email input {
    background: #171f21;
    border-color: rgba(255, 255, 255, 0.16);
}

.tp-email input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.tp-email__opis {
    margin: 6px 0 0;
    font-size: 13px;
    opacity: 0.7;
}

/* --- dugmad i poruke ----------------------------------------------------- */
.tp-potvrdi {
    display: block;
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: var(--color-primary);
    border-radius: 8px;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.tp-potvrdi:hover:not(:disabled) { background: #0d1416; }

.tp-potvrdi:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tp-greska {
    margin: 0 0 12px;
    font-weight: 600;
    color: var(--color-primary);
}

.tp-poruka,
.tp-ucitavanje {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.6;
}

.tp-telefon {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
}

/* --- potvrda ------------------------------------------------------------- */
.tp-uspjeh { text-align: center; }

/* Znak potvrde je zelen, ne brend crven: crveno na sajtu znači grešku, pa bi
   crveni krug uz uspješno zakazan termin zbunio. Mijenja se samo krug i
   ikonica u njemu - ostatak potvrde ostaje u brend bojama. */
.tp-uspjeh__znak {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    background: #198754;
    border-radius: 50%;
}

.tp-uspjeh__termin {
    margin: 0 0 4px;
    font-size: 22px;
    line-height: 1.25;
}

.tp-uspjeh__adresa {
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 600;
}

.tp-uspjeh__adresa span {
    font-weight: 400;
    opacity: 0.7;
}

/* napomene su jedini dio potvrde koji se čita redom, pa idu lijevo poravnate */
.tp-uspjeh__napomene {
    margin: 0 0 16px;
    padding: 16px 18px;
    text-align: start;
    list-style: disc;
    padding-inline-start: 36px;
    background: rgba(215, 41, 44, 0.07);
    border-radius: 10px;
    line-height: 1.65;
}

html.dark .tp-uspjeh__napomene { background: rgba(215, 41, 44, 0.14); }

.tp-uspjeh__mail,
.tp-uspjeh__otkaz {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.85;
}

.tp-uspjeh__otkaz .tp-telefon { font-size: 15px; }

@media (min-width: 768px) {
    .tp-modal__okvir { padding: 32px 30px 30px; }
    .tp-modal__naslov { font-size: 24px; }
}

/* ---------------------------------------------------------------------------
   Kalendar uz polje datuma (hero obrazac)

   Ugrađeni kalendar preglednika je na jeziku sistema i ne prima nikakav stil.
   Umjesto njega ide flatpickr, pa ovdje dobija boje sajta: brendirano crvena
   za izabrani dan, ista zaobljenja i sjenka kao ostali okviri, i tamna tema.
   --------------------------------------------------------------------------- */

/* Vidljivo polje koje flatpickr napravi mora izgledati kao i ostala polja. */
.hero-form-glass input.form-input.flatpickr-input,
.hero-form-glass input.form-input[readonly] {
    cursor: pointer;
    background: #fff;
}

html.dark .hero-form-glass input.form-input[readonly] { background: #000; }

/* flatpickr.css je preuzet iz panela, a tamo se boji Bootstrap promjenljivim
   (--bs-*) kojih na sajtu nema. Bez njih je `background: var(--bs-paper-bg)`
   prazna vrijednost, pa je kalendar bio providan. Umjesto prepravljanja
   preuzetog fajla, promjenljive se ovdje popune bojama sajta - jednim
   potezom dobiju podlogu i kalendar i sve njegove trake. */
.flatpickr-calendar {
    --bs-paper-bg: #fff;
    --bs-body-color: #0d1416;
    --bs-heading-color: #0d1416;
    --bs-secondary-color: rgba(13, 20, 22, 0.45);
    --bs-border-color: rgba(13, 20, 22, 0.12);
    --bs-gray-50: rgba(13, 20, 22, 0.05);
    --bs-gray-400: rgba(13, 20, 22, 0.4);
    --bs-primary: var(--color-primary);
    --bs-primary-contrast: #fff;
    --bs-primary-bg-subtle: rgba(215, 41, 44, 0.12);
    --bs-box-shadow: 0 18px 40px rgba(13, 20, 22, 0.18);
}

html.dark .flatpickr-calendar {
    --bs-paper-bg: #101617;
    --bs-body-color: #fff;
    --bs-heading-color: #fff;
    --bs-secondary-color: rgba(255, 255, 255, 0.45);
    --bs-border-color: rgba(255, 255, 255, 0.15);
    --bs-gray-50: rgba(255, 255, 255, 0.08);
    --bs-gray-400: rgba(255, 255, 255, 0.4);
    --bs-primary-bg-subtle: rgba(215, 41, 44, 0.28);
    --bs-box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.tp-kalendar.flatpickr-calendar {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(13, 20, 22, 0.18);
    font-family: inherit;
}

.tp-kalendar .flatpickr-month,
.tp-kalendar .flatpickr-weekdays,
.tp-kalendar .flatpickr-days,
.tp-kalendar .flatpickr-weekday { background: transparent; }

.tp-kalendar .flatpickr-months {
    padding: 6px 0 2px;
    border-radius: 12px 12px 0 0;
    background: var(--color-primary);
}

.tp-kalendar.flatpickr-calendar .flatpickr-month,
.tp-kalendar.flatpickr-calendar .flatpickr-current-month,
.tp-kalendar.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.tp-kalendar.flatpickr-calendar .numInput.cur-year {
    color: #fff;
    fill: #fff;
}

.tp-kalendar .flatpickr-prev-month svg,
.tp-kalendar .flatpickr-next-month svg { fill: #fff; }

.tp-kalendar .flatpickr-prev-month:hover svg,
.tp-kalendar .flatpickr-next-month:hover svg { fill: rgba(255, 255, 255, 0.75); }

/* Naziv mjeseca ide velikim početnim slovom, kako se i piše */
.tp-kalendar .flatpickr-current-month .flatpickr-monthDropdown-months { text-transform: capitalize; }

.tp-kalendar.flatpickr-calendar .flatpickr-weekdays span.flatpickr-weekday {
    font-weight: 700;
    color: var(--color-primary);
}

.tp-kalendar .flatpickr-day {
    border-radius: 8px;
    font-weight: 500;
}

.tp-kalendar.flatpickr-calendar .flatpickr-days .flatpickr-day:hover {
    background: rgba(215, 41, 44, 0.1);
    border-color: transparent;
}

.tp-kalendar.flatpickr-calendar .flatpickr-days .flatpickr-day.selected,
.tp-kalendar.flatpickr-calendar .flatpickr-days .flatpickr-day.selected:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.tp-kalendar.flatpickr-calendar .flatpickr-days .flatpickr-day.today {
    border-color: var(--color-primary);
}

/* Nedjelje i datumi izvan roka - jasno neaktivni, ne samo blijedi */
.tp-kalendar .flatpickr-day.flatpickr-disabled,
.tp-kalendar .flatpickr-day.prevMonthDay,
.tp-kalendar .flatpickr-day.nextMonthDay {
    color: rgba(13, 20, 22, 0.25);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.tp-kalendar .flatpickr-day.prevMonthDay,
.tp-kalendar .flatpickr-day.nextMonthDay { text-decoration: none; }

/* --- tamna tema ----------------------------------------------------------- */

html.dark .tp-kalendar.flatpickr-calendar {
    background: #101617;
    color: #fff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

html.dark .tp-kalendar .flatpickr-day { color: #fff; }

html.dark .tp-kalendar .flatpickr-day.flatpickr-disabled,
html.dark .tp-kalendar .flatpickr-day.prevMonthDay,
html.dark .tp-kalendar .flatpickr-day.nextMonthDay { color: rgba(255, 255, 255, 0.3); }

html.dark .tp-kalendar .flatpickr-day:hover { background: rgba(215, 41, 44, 0.25); }