/* pizzaizi.com — dopune Divijevim stilovima
 *
 * Divi veze stilove proizvoda uz redni broj modula (.et_pb_text_1 … _17).
 * Cim se u adminu doda 18. proizvod, taj redni broj vise nije pokriven i
 * stavka ostane bez stila. Ova pravila su doslovna kopija Divijevih, ali
 * vezana uz POLOZAJ modula (tekst odmah iza slike), pa vrijede za bilo
 * koliko proizvoda. Divijeva pravila ostaju i dalje — istovjetna su, pa
 * se ne sukobljavaju.
 *
 * Doseg je namjerno sužen na stranice menija (page-id-92 HR, 233 EN);
 * na tim stranicama svaki modul slike je proizvod, a tekst alergena nema
 * sliku ispred sebe pa ga ovo ne dira.
 */

.page-id-92  .et_pb_column > .et_pb_image,
.page-id-233 .et_pb_column > .et_pb_image { text-align: left; margin-left: 0 }

.page-id-92  .et_pb_image + .et_pb_text.et_pb_text,
.page-id-233 .et_pb_image + .et_pb_text.et_pb_text { color: #e0af4a !important }

.page-id-92  .et_pb_image + .et_pb_text,
.page-id-233 .et_pb_image + .et_pb_text {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  background-color: #283341;
  padding-top: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 20px !important;
  padding-left: 20px !important;
  margin-top: -30px !important;
}

.page-id-92  .et_pb_image + .et_pb_text h3,
.page-id-233 .et_pb_image + .et_pb_text h3 {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4em;
}

@media only screen and (max-width: 980px) {
  .page-id-92  .et_pb_column > .et_pb_image .et_pb_image_wrap img,
  .page-id-233 .et_pb_column > .et_pb_image .et_pb_image_wrap img { width: auto }
}

@media only screen and (max-width: 767px) {
  .page-id-92  .et_pb_column > .et_pb_image .et_pb_image_wrap img,
  .page-id-233 .et_pb_column > .et_pb_image .et_pb_image_wrap img { width: auto }
}

/* Zadnji, nepotpuni red menija je uži od ostalih. Divi je to vezao uz
 * .et_pb_row_6 — redni broj koji se pomakne cim se promijeni broj proizvoda —
 * pa se sada veze uz klasu koju generator stavi samo na takav red.
 * Hrvatska i engleska stranica imaju različitu širinu (811 vs 825 px); to je
 * zatečena nedosljednost i namjerno je sačuvana da se izgled ne promijeni. */
body.page-id-92 .pi-row-partial,
body.page-id-92 #page-container .et-db #et-boc .et-l .pi-row-partial { max-width: 811px }

body.page-id-233 .pi-row-partial,
body.page-id-233 #page-container .et-db #et-boc .et-l .pi-row-partial { max-width: 825px }

/* "Izdvojeno iz menia" na naslovnoj. Doslovna kopija Divijevih pravila za tih
 * devet stavki, ali vezana uz vlastite klase umjesto uz redne brojeve modula,
 * pa se sadržaj može mijenjati u adminu bez gubitka stila. */
.pi-izdvojeno-ime {
  line-height: 2em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 2px;
  background-color: #283341;
  padding: 10px !important;
  margin-bottom: -1px !important;
}

.pi-izdvojeno-slika { text-align: left; margin-left: 0 }

.pi-izdvojeno-cijena {
  line-height: 1.9em;
  font-weight: 700;
  font-size: 15px;
  background-color: #283341;
  padding: 5px !important;
  margin-top: -19px !important;
  box-shadow: -5px 6px 19px 4px #000000;
  transform: translateX(0px) translateY(-11px);
}

@media only screen and (max-width: 980px) {
  .pi-izdvojeno-slika .et_pb_image_wrap img { width: auto }
}
@media only screen and (max-width: 767px) {
  .pi-izdvojeno-slika .et_pb_image_wrap img { width: auto }
}

/* Obavijest o kolačićima. Boje su iste kao u podnožju sitea, da ne djeluje
 * kao tuđi dodatak. Traka je u dokumentu uvijek, a JavaScript je pokaže samo
 * ako izbor još nije napravljen — tako nema bljeska pri učitavanju. */
.pi-kolacici {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: #1b2430;
  border-top: 2px solid #e0af4a;
  color: #e8edf2;
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .35);
}
.pi-kolacici[hidden] { display: none }

.pi-kolacici-tekst { flex: 1; min-width: 240px; margin: 0 }
.pi-kolacici-tekst a { color: #e0af4a; text-decoration: underline }

.pi-kolacici-gumbi { display: flex; gap: 10px; flex-shrink: 0 }
.pi-kolacici button {
  padding: 10px 22px;
  border: 1px solid #e0af4a;
  border-radius: 3px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: #e0af4a;
}
.pi-kolacici .pi-prihvati { background: #e0af4a; color: #1b2430 }
.pi-kolacici button:hover { opacity: .85 }

/* gumb za ponovni izbor, na stranici o kolačićima */
.pi-kolacici-ponovno {
  padding: 10px 22px;
  border: 1px solid #e0af4a;
  border-radius: 3px;
  background: #e0af4a;
  color: #1b2430;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 600px) {
  .pi-kolacici { flex-direction: column; align-items: stretch; gap: 12px }
  .pi-kolacici-gumbi button { flex: 1 }
}

/* Widget "Narudžbe" — pozadinska slika na svim stranicama.
 *
 * Divi ju je postavio samo na stranici Gdje smo / Contact. Ista slika i isti
 * preljev sada idu i na ostale, jer taj blok inače stoji na praznoj podlozi.
 * Sekcija se na svakoj stranici zove drukčije jer Divi broji sekcije redom,
 * pa se svaka navodi posebno; te su sekcije doslovno u predlošcima i njihovi
 * se brojevi ne mijenjaju s brojem proizvoda.
 *
 *   page-id-8   naslovna        sekcija 5
 *   page-id-92  meni            sekcija 2
 *   page-id-94  gdje smo        sekcija 1   (Divi ju je već imao)
 *   page-id-228 home (EN)       sekcija 5
 *   page-id-233 menu (EN)       sekcija 2
 *   page-id-241 contact (EN)    sekcija 1   (pokriva i pravne stranice)
 */
body.page-id-8   div.et_pb_section.et_pb_section_5,
body.page-id-92  div.et_pb_section.et_pb_section_2,
body.page-id-94  div.et_pb_section.et_pb_section_1,
body.page-id-228 div.et_pb_section.et_pb_section_5,
body.page-id-233 div.et_pb_section.et_pb_section_2,
body.page-id-241 div.et_pb_section.et_pb_section_1 {
  background-image:
    linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.38) 100%),
    url(/assets/img/2023/09/pizzeria_77.jpg) !important;
}

/* Ikona TikToka u modulu „Follow". Divi to pravilo ispisuje samo na
 * stranicama gdje je vlasnik TikTok i dodao (naslovnica, meni), pa ga na
 * kontaktu nije bilo. Glif je iz FontAwesomea, ne iz Divijevog fonta ikona. */
.et-social-tiktok a.icon:before { content: "\E07B" }

/* Naslov koji se ispisuje kao da ga ruka piše.
 *
 * Klasu `pi-rukopis` na <html> postavlja sitna skripta u zaglavlju, prije nego
 * se išta iscrta — zato nema bljeska cijelog teksta pa rezanja. Ako JavaScript
 * ne radi ili je posjetitelj tražio manje animacija, klase nema i tekst se vidi
 * odmah, bez ikakve razlike od prije. */
html.pi-rukopis body.page-id-8   .et_pb_text_0 .et_pb_text_inner,
html.pi-rukopis body.page-id-228 .et_pb_text_0 .et_pb_text_inner,
html.pi-rukopis body.page-id-92  .et_pb_text_0 .et_pb_text_inner,
html.pi-rukopis body.page-id-233 .et_pb_text_0 .et_pb_text_inner { visibility: hidden }

.pi-rukopis-cilj { visibility: visible !important }
.pi-rukopis-tekst { display: inline-block; clip-path: inset(0 100% 0 0) }

.pi-ruka {
  position: absolute;
  top: 0; left: 0;
  z-index: 9;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}
.pi-ruka-odlazi { opacity: 0; transition: opacity .5s ease }

/* Naslov menija u rukopisnom fontu, da pisanje rukom ima smisla.
 * Bez ovoga bi se „pisao" geometrijski font velikih slova, što izgleda čudno.
 * Isključuje se postavkom rukopis_font. */
body.pi-rukopis-font.page-id-92  .et_pb_text_0 h1,
body.pi-rukopis-font.page-id-233 .et_pb_text_0 h1 {
  font-family: 'Euphoria Script', cursive;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
  .pi-rukopis-tekst { clip-path: none !important }
  .pi-ruka { display: none }
}

/* TikTok u modulu „Follow" crtan kao SVG.
 * Divi ga inače crta glifom iz FontAwesomea, ali to pravilo i sam font
 * ispisuje samo na stranici kontakta — na naslovnici i meniju ostajalo je
 * prazno mjesto. SVG ne ovisi ni o kakvom fontu. Veličine prate Divijeve:
 * gumb je 32×32, znak 16×16. */
.pi-ikona-svg a.icon:before { content: none !important }
.pi-ikona-svg a.icon > svg {
  width: 16px;
  height: 16px;
  display: block;
  margin: 8px auto;
  position: relative;
  z-index: 10;
  color: #fff;
  transition: color .3s;
}
.pi-ikona-svg a.icon:hover > svg { color: rgba(255, 255, 255, .7) }

/* Pravne stranice.
 * Nastaju iz stranice „Gdje smo", gdje je tekst kratak i stoji na fotografiji.
 * Pravni tekstovi su dugi pa se spuštaju ispod slike, na crnu pozadinu
 * stranice — a Divi im daje tamnosivu boju slova, pa se nisu vidjeli.
 * Ovdje dobivaju svijetla slova i vlastitu podlogu, da se čitaju i preko
 * fotografije i preko crnog. */
body.pi-pravna .et_pb_text_1 .et_pb_text_inner {
  background: rgba(19, 26, 35, .88);
  padding: 32px 34px;
  border-radius: 6px;
  color: #dfe6ee;
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
}
body.pi-pravna .et_pb_text_1 .et_pb_text_inner h2 {
  color: #e0af4a;
  font-size: 20px;
  line-height: 1.35;
  padding: 26px 0 8px;
  text-transform: none;
  letter-spacing: 0;
}
body.pi-pravna .et_pb_text_1 .et_pb_text_inner h2:first-child { padding-top: 0 }
body.pi-pravna .et_pb_text_1 .et_pb_text_inner p { padding-bottom: 1em }
body.pi-pravna .et_pb_text_1 .et_pb_text_inner a { color: #e0af4a; text-decoration: underline }
body.pi-pravna .et_pb_text_1 .et_pb_text_inner strong { color: #fff }

/* tablica u izjavi o kolačićima */
body.pi-pravna .et_pb_text_1 .et_pb_text_inner table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 20px;
  font-size: 15px;
}
body.pi-pravna .et_pb_text_1 .et_pb_text_inner th,
body.pi-pravna .et_pb_text_1 .et_pb_text_inner td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  vertical-align: top;
}
body.pi-pravna .et_pb_text_1 .et_pb_text_inner th { color: #e0af4a; font-weight: 700 }

@media (max-width: 767px) {
  body.pi-pravna .et_pb_text_1 .et_pb_text_inner { padding: 22px 18px; font-size: 15px }
  body.pi-pravna .et_pb_text_1 .et_pb_text_inner table { display: block; overflow-x: auto }
}

/* Sidrena cijena uz maloprodajnu.
 * Odluka NN 101/2026 traži da bude istaknuta „jasno, vidljivo i čitljivo uz
 * maloprodajnu cijenu", pa je čitljiva ali namjerno tiša od same cijene —
 * da se ne pomiješa s onom koja se plaća. */
.pi-sidrena {
  margin: 2px 0 0;
  padding: 0 !important;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.4;
  text-transform: none;
  color: rgba(255, 255, 255, .72);
}

/* na naslovnici cijene stoje u užem stupcu, pa i oznaka mora biti uža */
.pi-izdvojeno-cijena .pi-sidrena { font-size: 10px; margin-top: 1px }

/* Copyright i pravne poveznice u vidljivoj donjoj traci.
 * Divijevo podnožje je sakriveno (display:none), pa sve što bi ondje stajalo
 * nitko ne vidi — a poveznice na politiku privatnosti, kolačiće i cjenik
 * moraju biti dostupne. */
/* Bijela traka ispod karte i oko podnožja.
 *
 * Divi svakoj sekciji daje bijelu pozadinu (.et_pb_section{background-color:#fff}),
 * a onda je pojedinim sekcijama prepiše. Sekcija blagdanskog popupa nema svoju
 * pozadinu i popup je skriven, pa je ostajala kao prazna bijela traka na dnu.
 * Na ovom siteu je svaka sekcija tamna ili ima sliku — bijelo je uvijek
 * previd, pa se propušta crna pozadina stranice. */
#page-container,
#et-main-area,
#main-content,
.et_pb_section { background-color: transparent }

.pi-podnozje {
  background: #1b2430;
  padding: 26px 20px 30px;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  text-align: center;
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.9;
}
.pi-podnozje p { padding: 0; margin: 0 }
.pi-podnozje-pravno a {
  color: #e0af4a;
  text-decoration: none;
  white-space: nowrap;
}
.pi-podnozje-pravno a:hover { text-decoration: underline }
.pi-podnozje-copy { color: rgba(255, 255, 255, .55); margin-top: 6px !important }

@media (max-width: 600px) {
  .pi-podnozje { font-size: 12px; line-height: 2.2 }
}

/* Sekcija blagdanskog popupa ne treba zauzimati visinu: popup je position:fixed
 * i prekriva stranicu, a kad nije blagdan uopće se ne prikazuje. Bez ovoga
 * ostaje prazan razmak između donje trake i podnožja. */
.et_pb_section:has(#blagdanski-popup),
.et_pb_section:has(#blagdanski-popup) .et_pb_row { padding: 0 }