/**
 * Izgled kalendara (vanilla-calendar-pro).
 *
 * ---------------------------------------------------------------------------
 * PRAVILO: raspored dolazi iz css/vanilla-calendar-layout.css, ovdje je SAMO
 * izgled — boje, tipografija, razmaci, stanja.
 *
 * layout.css cilja `data-` atribute, ne klase, pa vrijedi i kad kroz opciju
 * `styles` zadamo vlastita imena klasa. Struktura je:
 *
 *   [data-vc=grid]        vodoravni red mjeseci        flex, wrap, gap
 *     [data-vc=column]      jedan mjesec               flex column
 *       [data-vc=header]      naziv mjeseca i godina
 *       [data-vc=wrapper]
 *         [data-vc=content]   flex COLUMN
 *           [data-vc=week]      imena dana             grid, 7 stupaca
 *           [data-vc=dates]     grid s JEDNIM stupcem
 *             [data-vc-dates=row]  tjedan              grid, 7 stupaca
 *               [data-vc-date]       dan
 *
 * Prva verzija ovog fajla postavljala je `display:flex` na [data-vc=content] i
 * `grid-template-columns: repeat(7,...)` na [data-vc=dates]. Oboje je bilo
 * krivo: content mora biti stupac, a dates drzi tjedne a ne dane. Posljedica
 * je bila da su svi datumi zavrsili u jednom redu, bez vidljivih celija.
 *
 * Zato ovdje NEMA display, grid-template-columns ni flex-direction na tim
 * elementima. Ako izgled treba drukciji raspored, mijenja se ovdje tek nakon
 * provjere sto layout.css vec radi.
 * ---------------------------------------------------------------------------
 *
 * Boje prate ostatak stranice:
 *   #333 tekst · #555 naslovi · #1f72c4 naglasak · #eee linije
 */

/* --- korijen ------------------------------------------------------------- */

.kal {
  color: #333;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  margin: 0 auto 20px;
  max-width: 1140px;
  position: relative;   /* strelice su absolute unutar kalendara */
  width: 90%;
}

/**
 * Ispod 700px kalendar radi u `type: 'default'` (jedan mjesec) — a biblioteka
 * u tom predlosku NE stvara [data-vc=column], dakle ni .kal-stupac. S njim
 * otpadaju rub i padding koje mjesec inace nosi, pa je kalendar ostajao bez
 * okvira.
 *
 * S jednim mjesecem korijen kalendara i JEST mjesec, pa okvir preuzima on.
 * Padding vec ima iz layout.css ([data-vc=calendar] { padding: 1rem }).
 *
 * Prag mora pratiti PRAGOVI u js/kalendar.js — ondje se bira tip.
 */
@media screen and (max-width: 700px) {
  .kal {
    border: 1px solid #eee;
  }
}

/* --- mjesec -------------------------------------------------------------- */

/* Rub oko svakog mjeseca. Ista boja i debljina kao div.cjenik2 iznad
   kalendara, da se dvije sekcije slazu.
   Ovdje se smije dirati padding i border jer layout.css na [data-vc=column]
   postavlja samo display, flex-direction, flex-grow i min-width. */
.kal-stupac {
  border: 1px solid #eee;
  padding: 14px 12px 10px;

  /* flex-basis 0, ne auto.
     layout.css daje [data-vc=column] samo `flex-grow: 1`, pa basis ostaje
     `auto` — sirina se racuna iz sadrzaja i mjesec sa sirim cijenama ispadne
     siri od ostalih. S basisom 0 visak prostora se dijeli jednako i sva tri
     mjeseca su iste sirine bez obzira sto je u njima.
     min-width: 240px iz layout.css i dalje vrijedi, pa se na uskom ekranu
     prelome umjesto da se stisnu. */
  flex: 1 1 0;
}

/* --- zaglavlje mjeseca --------------------------------------------------- */

.kal-mjesec,
.kal-godina {
  background: none;
  border: 0;
  color: #555;
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  font-weight: 300;
  padding: 0 2px;
}

/* --- strelice ------------------------------------------------------------ */

/**
 * Poravnanje s nazivom mjeseca.
 *
 * Strelice su `position: absolute` unutar .kal, dakle mjere se od NJEGOVOG
 * padding-boxa — padding korijena ih ne pomice, a naslov pomice. Odmak se zato
 * mora zbrojiti kroz cijeli lanac predaka:
 *
 *   16px   padding korijena     [data-vc=calendar] { padding: 1rem }
 *  + 1px   rub stupca           .kal-stupac
 *  + 14px  padding stupca       .kal-stupac
 *  = 31px  do vrha zaglavlja
 *
 *   + 12px  pola visine naslova (line-height 1.5rem iz layout.css)
 *   = 43px  srediste naslova
 *
 * Vodoravno isto: 16px korijen + 1px rub + 12px padding = 29px.
 *
 * Prva verzija je racunala samo rub i padding stupca (15px) jer je padding
 * korijena promakao — strelice su bile 16px previsoko. Prije toga su stajale na
 * `padding-top: 1.25rem` iz layout.css, sto je odgovaralo naslovu PRIJE nego
 * mu je .kal-mjesec maknuo vertikalni padding.
 *
 * Ako se promijeni bilo koji od ta tri paddinga, ovaj broj ide s njim.
 */
.kal-kontrole {
  align-items: center;
  height: 24px;
  left: 29px;
  padding: 0;
  right: 29px;
  top: 31px;
}

/* layout.css strelici daje velicinu i polozaj, a znak ocekuje kao pozadinsku
   sliku iz teme. Teme ne ucitavamo, pa ga crtamo sami — na :after, jer je
   :before vec zauzet. */
.kal-strelica {
  border-radius: 50%;
  color: #9a9a9a;
  height: 26px;
  transition: background-color .18s ease, color .18s ease;
  width: 26px;
}

.kal-strelica:hover {
  background: #f4f4f4;
  color: #333;
}

/* Tanji potez djeluje mirnije od 2px kvacice; 1.5px je i dalje ostar na
   ekranima s dvostrukom gustocom. */
.kal-strelica:after {
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  content: '';
  height: 7px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 7px;
}

.kal-strelica-lijevo:after {
  transform: translate(-35%, -50%) rotate(-135deg);
}

.kal-strelica-desno:after {
  transform: translate(-65%, -50%) rotate(45deg);
}

/* --- sadrzaj mjeseca ----------------------------------------------------- */

/**
 * Linija izmedju zaglavlja mjeseca i mreze dana.
 *
 * Samo gornja. Donja bi pala 10 px iznad ruba .kal-stupac (njegov
 * padding-bottom), pa bi se vidjele dvije gotovo paralelne linije — to izgleda
 * kao greska, ne kao namjera. Zato `border-top`, a ne `border-block`.
 *
 * Smije se dirati: layout.css na [data-vc=content] postavlja samo display,
 * flex-direction i flex-grow.
 */
.kal-sadrzaj {
  border-top: 1px solid #eee;
  padding-top: 10px;
}

/* --- imena dana ---------------------------------------------------------- */

.kal-dan-tjedna {
  color: #999;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
}

/* --- dan ----------------------------------------------------------------- */

/**
 * layout.css celiju dana postavlja kao `display: flex` s vodoravnim smjerom.
 * Broj dana, cijena i crtica dolaska su tri djeteta tog flexa, pa su stajali
 * JEDAN PORED DRUGOG — crtica sa strane umjesto ispod, a celija sira nego sto
 * treba. Zbog toga su i mjeseci ispadali razlicitih sirina.
 *
 * flex-direction: column ih slaze jedno ispod drugog. Ne dira se `display`,
 * koji je i dalje flex kako biblioteka ocekuje.
 */
.kal-dan-gumb {
  background: none;
  border: 1px solid transparent;
  color: #333;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
  padding: 5px 2px;
  text-align: center;
  transition: background-color .15s, color .15s, border-color .15s;
  width: 100%;
}

.kal-dan-gumb:hover {
  border-color: #1f72c4;
}

/* Cijena po noci ispod broja dana. */
.kal-cijena {
  color: #999;
  display: block;
  font-size: 10px;
  line-height: 1;
  margin-top: 2px;
}

/* --- stanja ---------------------------------------------------------------
 *
 * Rjecnik boja, da se stanja ne pocnu tuci:
 *
 *   plava (#1f72c4, #e8f1fa)   ISKLJUCIVO odabir — odabrani dan i raspon
 *   siva ispuna (#f2f2f2)      djelomicno dostupno (moguc samo odlazak)
 *   sivi tekst + precrtano     nedostupno (zauzeto)
 *   siva crtica (#999)         dan na koji se smije doci
 *
 * Prva verzija je crticu dolaska crtala u #1f72c4, dakle u boji odabira, pa je
 * neodabran dan izgledao kao odabran.
 * -------------------------------------------------------------------------- */

.kal-dan[data-vc-date-disabled] .kal-dan-gumb {
  color: #ccc;
  cursor: default;
  text-decoration: line-through;
}

.kal-dan[data-vc-date-disabled] .kal-cijena {
  color: #ddd;
  text-decoration: none;
}

/* Dan tudjeg dolaska — kod nas moguc samo kao odlazak. Pola dana je zauzeto,
   pa to i pokazujemo umjesto da dan izgleda potpuno slobodan.
   Tekst ostaje pun (#333): dan JEST upotrebljiv, samo ne za dolazak. */
/**
 * Dan tudjeg dolaska — kod nas moguc samo kao odlazak.
 *
 * U MIROVANJU izgleda isto kao zauzet dan. Prije je imao vlastiti, svjetliji
 * stil, pa je svaka rezervacija pucala na prvom danu: blok 10.-14. crtao se
 * kao svijetlo, tamno, tamno, tamno. Zauzeti termin mora izgledati kao jedan
 * neprekinut niz.
 *
 * Cim gost odabere dolazak, ovaj se dan otvara (vidi .kal--bira-odlazak) jer
 * tada JEST valjan izbor. Da ostane zauzet i tada, gost ga ne bi ni pokusao
 * kliknuti — a u sezoni su to bas subote, jedini dopusteni dani odlaska.
 */
.kal-dan--samo-odlazak .kal-dan-gumb {
  color: #ccc;
  text-decoration: line-through;
}

.kal-dan--samo-odlazak .kal-cijena {
  color: #ddd;
  text-decoration: none;
}

/**
 * Otvoren samo ako je BAS taj dan valjan odlazak za odabrani dolazak.
 *
 * Klasu postavlja oznaciMoguceOdlaske() u js/kalendar.js, po danu. Ranije je
 * jedna klasa na korijenu (.kal--bira-odlazak) otvarala sve takve dane, pa su
 * se nakon klika na 12.09. otvarali i 22.08. i 29.08. — dani koji su prije
 * dolaska i ne mogu se odabrati.
 */
.kal-dan--odlazak-moguc .kal-dan-gumb {
  color: #333;
  text-decoration: none;
}

.kal-dan--odlazak-moguc .kal-cijena {
  color: #999;
}

/* Dan na koji se smije doci, ondje gdje ogranicenje postoji (u sezoni subota).
   Oznaka je crtica ispod broja — bez boje, citljiva i onima koji ne razlikuju
   nijanse.

   Namjerno se istice OVO, a ne suprotnost: dana bez dolaska je sest od sedam,
   pa bi njihovo prigusivanje zasivilo pola kalendara i ne bi reklo nista.
   Ranije su bili #aaa, sto je uz zauzete #ccc bilo prakticki ista siva za dva
   posve razlicita stanja. */
.kal-dan--dolazak .kal-dan-gumb {
  font-weight: 400;
}

/* Siva, NE #1f72c4. Plava je u ovom kalendaru boja odabira (ispuna odabranog
   dana i raspona), pa bi na neodabranom danu govorila da je vec kliknut. */
.kal-dan--dolazak .kal-dan-gumb:after {
  background: #999;
  content: '';
  display: block;
  height: 2px;
  margin: 3px auto 0;
  width: 14px;
}

.kal-dan--dolazak[data-vc-date-selected] .kal-dan-gumb:after {
  background: #fff;
}

/**
 * Traka perioda s ogranicenim danom dolaska.
 *
 * Vrlo blijedo i namjerno: oznacava PERIOD, ne stanje dana. Tekst ostaje pun
 * (#333) pa se ne moze zamijeniti s nedostupnim danom, koji je #ccc i
 * precrtan.
 *
 * Stoji PRIJE pravila za zauzeto/odabrano nize, da ih ta pravila mogu
 * pregaziti — dan u sezoni koji je usto zauzet mora izgledati zauzeto.
 */
.kal-dan--sezona .kal-dan-gumb {
  background: #fafafa;
}

.kal-dan[data-vc-date-today] .kal-dan-gumb {
  font-weight: 400;
}

.kal-dan[data-vc-date-selected] .kal-dan-gumb {
  background: #1f72c4;
  border-color: #1f72c4;
  color: #fff;
}

.kal-dan[data-vc-date-selected] .kal-cijena {
  color: rgba(255, 255, 255, .85);
}

/* Dani izmedju dolaska i odlaska. */
.kal-dan[data-vc-date-hover] .kal-dan-gumb {
  background: #e8f1fa;
}

/* --- oblacic s brojem noci i iznosom ------------------------------------- */

.kal-oblacic {
  background: #333;
  border-radius: 3px;
  color: #fff;
  font-size: 12px;
  padding: 5px 9px;
  pointer-events: none;
  white-space: nowrap;
}

/* --- legenda ------------------------------------------------------------- */

/**
 * Bez legende gost vidi dijagonalno sjencan dan i ne zna da znaci "moguc samo
 * odlazak". Nijedna boja to ne bi objasnila — objasnjava tekst.
 *
 * Uzorci su isti elementi kao u kalendaru (.kal-dan-gumb u odgovarajucem
 * stanju), pa se ne mogu raziici sa stvarnim celijama.
 */
.kal-legenda {
  color: #777;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 8px 22px;
  justify-content: center;
  list-style: none;
  /* Bez donje margine: legenda je zadnji element sekcije, pa bi se margina samo
     zbrajala s njezinim paddingom. Razmak iznad daje .kal-odabir. */
  margin: 0 auto;
  max-width: 1140px;
  padding: 0;
  width: 90%;
}

.kal-legenda li {
  align-items: center;
  display: flex;
  gap: 7px;
}

/* Uzorak mora imati isti raspored kao prava celija, inace se pravila pisana za
   kalendar na njemu ne ponasaju isto.
   U kalendaru je celija [data-vc-date] koju biblioteka postavlja na display:flex,
   pa je gumb unutra flex stavka i time blokovski element — tek zato na njemu rade
   width: 100%, okomiti padding i text-align iz .kal-dan-gumb.
   U legendi je uzorak obican <span>: bez ovoga ostaje inline, pa se sva ta
   svojstva tiho ignoriraju i uzorak nema ni sirinu ni visinu celije. */
.kal-legenda .kal-dan {
  align-items: center;
  display: flex;
  flex: none;
  justify-content: center;
  width: 30px;
}

/* Fiksna kutija, jednaka za sve uzorke.
   Bez nje su uzorci razlicite visine: onaj za dolazak nosi ::after crticu
   (3px margine + 2px trake), pa je 5px visi od prekrizenog. U kalendaru se to
   ne vidi jer grid izjednacava visine redaka; u legendi stoje jedan uz drugi.

   display: flex ujedno ozivljava flex-direction i justify-content iz baznog
   pravila — u kalendaru su ondje bez ucinka, jer je gumb tamo flex STAVKA, a ne
   spremnik. Ovdje centriraju broj i crticu unutar fiksne visine. */
.kal-legenda .kal-dan-gumb {
  align-items: center;
  border-color: #eee;
  cursor: default;
  display: flex;
  font-size: 12px;
  height: 26px;
  padding: 0;
}

/* Uzorak se ne ponasa kao gumb — ne smije reagirati na misa. */
.kal-legenda .kal-dan-gumb:hover {
  border-color: #eee;
}

/* --- poruke ispod kalendara ---------------------------------------------- */

/**
 * Poruka o odbijenom odabiru.
 *
 * Bila je obicni redak teksta ispod legende, u istom stilu kao napomene oko
 * njega — pa se nije razlikovala od stalnog sadrzaja i lako se previdjela.
 * Sada je okvir s trakom uz lijevi rub, odmah ispod kalendara.
 */
.kal-poruka {
  background: #fdf3f2;
  border: 1px solid #f0cfcb;
  color: #a03228;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 auto 24px;
  max-width: 90%;
  padding: 10px 18px;
  text-align: center;

  /* Steze se na sadrzaj i centrira. Prije je bio blok pune sirine s crvenom
     trakom uz lijevi rub; s centriranim tekstom bi ta traka visjela sama na
     lijevoj strani, daleko od recenice koju oznacava. */
  width: fit-content;
}

.kal-poruka[hidden] {
  display: none;
}

/* --- odabrani termin i ponistavanje -------------------------------------- */

/**
 * Svaki u svom redu. Iznos je rezultat odabira i najvazniji podatak ispod
 * kalendara; gumb je sporedna radnja. Dok su dijelili redak, iznos se nije
 * mogao povecati a da ne razbije poravnanje.
 */
.kal-odabir {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 auto 32px;
  max-width: 1140px;
  width: 90%;
}

/**
 * Okvir oko iznosa.
 *
 * Klase `text napomena` iz css.css su namjerno maknute s ovog elementa: one
 * velicinu racunaju u `em` nad `body { font-size: 62.5% }`, pa se iznos nije
 * mogao povecati bez lomljenja tog lanca. Ovdje je sve u px i nezavisno.
 */
/* Bez okvira: stoji na sivoj traci sekcije rezervacije, koja ga i sama izdvaja
   iz okoline — okvir bi bio drugi rub oko istog sadrzaja. Tezinu mu daje
   velicina slova, ne kutija. */
.kal-iznos {
  color: #333;

  /* 3em = 30px, dakle 75% naslova sekcije (section h2 je 4em = 40px).
     Iznimka od px-a kojim je ostatak ovog fajla pisan: .kal-odabir je izasao iz
     .kal (koji nosi font-size: 14px) i sad stoji izravno u sekciji, pa se em
     racuna od korijenskih 10px — isto kao h2.
     Odnos 75% je zapisan, ne automatski: ako se h2 promijeni, ovo ide s njim. */
  font-size: 3em;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
  text-align: center;
}

/* Depozit, ispod ukupnog iznosa. Sitnije i blijedje — ukupno je ono sto gost
   trazi, depozit je nastavak. Pretvara napomenu "Placanje pri rezervaciji 20%"
   iz cjenika u konkretnu brojku, tocno kad je gostu bitna. */
.kal-depozit {
  color: #777;
  font-size: 1.5em;
  line-height: 1.3;
  margin: 4px 0 0;
  text-align: center;
}

.kal-depozit:empty {
  display: none;
}

/* Prazan <p> bi i bez okvira zauzeo visinu retka, pa bi u sekciji stajala
   praznina prije nego gost uopce odabere termin. */
.kal-iznos:empty {
  display: none;
}

/* Red s gumbom uz kalendar. Centriran, sa zracnim razmakom iznad legende.
   :has() — bez njega bi prazan div ostavljao razmak i dok je gumb skriven. */
.kal-ponisti-red {
  display: flex;
  justify-content: center;
}

.kal-ponisti-red:has(button:not([hidden])) {
  margin-bottom: 20px;
}

.kal-ponisti {
  background: none;
  border: 1px solid #ddd;
  color: #555;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  padding: 6px 14px;
  transition: border-color .15s, color .15s;
}

.kal-ponisti:hover {
  border-color: #1f72c4;
  color: #1f72c4;
}

.kal-ponisti[hidden] {
  display: none;
}

/* Admin ima isti element ali bez .kal-iznos (nosi klasu .opis iz admin.css),
   pa mu prazno stanje treba vlastito pravilo. */
#kalendar-iznos:empty {
  display: none;
}