/* =========================================================
   ITER - brend sloj (učitava se POSLIJE main.css)
   Ovdje su samo izmjene specifične za Iter identitet.
   Boje brenda:
     --iter-bakarna : #B86B43  (primarna, štit + naziv)
     --iter-antracit: #383431  (tamna, tekst / podnaslov)
   Osnovni akcenat Massively teme (#18bfef) je već zamijenjen
   bakarnom bojom direktno u main.css.
   ========================================================= */

:root {
  --iter-bakarna: #B86B43;
  --iter-bakarna-tamna: #9c5636;
  --iter-antracit: #383431;
  --iter-krem: #f6efe7;          /* topla (bakarna) nijansa umjesto čiste bijele */
  --iter-krem-tamniji: #efe4d5;  /* footer / trake */
  --iter-linija: #e7dccb;        /* granice umjesto #eeeeee */
}

/* --- Topla (bakar-bronza) pozadina sadržaja umjesto bijele --- */
#main,
#main > .post,
#main > .posts,
#main > .posts > article {
  background-color: var(--iter-krem);
}
#main > * {
  border-top-color: var(--iter-linija);
}
#main > .posts > article {
  border-color: var(--iter-linija);
}
#footer {
  background-color: var(--iter-krem-tamniji);
}
#footer .split.contact section + section {
  border-left-color: var(--iter-linija);
}

/* --- Slike uz sadržaj: blago tonirane u bronzu (da se uklope u paletu) --- */
#main .image img {
  filter: sepia(0.42) saturate(0.9) brightness(0.97) contrast(1.02) hue-rotate(-6deg);
  transition: filter 0.3s ease;
}
#main .posts > article:hover .image img {
  filter: sepia(0.15) saturate(1) brightness(1) contrast(1);
}

/* --- Naslovna: istaknuta sekcija "Osiguranje bez komplikacija" --- */
/* tamna, elegantna bronzano-bakarna sa mekim metalnim odsjajem */
#main > .post.featured {
  background-color: #4c3826;
  background-image:
    /* dijagonalni odsjaj: topli bakarni highlight -> dublja sjena */
    linear-gradient(125deg, rgba(201, 143, 96, 0.20) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.26) 100%),
    /* meki topli sjaj u gornjem lijevom uglu */
    radial-gradient(130% 95% at 26% 16%, rgba(214, 158, 108, 0.16) 0%, rgba(0, 0, 0, 0) 58%);
}
#main > .post.featured header.major > h2,
#main > .post.featured header.major > p,
#main > .post.featured p {
  color: #ffffff;
}
#main > .post.featured .button {
  box-shadow: inset 0 0 0 2px #ffffff;
  color: #ffffff !important;
}
#main > .post.featured .button:hover {
  background-color: #ffffff;
  box-shadow: inset 0 0 0 2px #ffffff;
  color: #4c3826 !important;
}

/* --- Logo u headeru: slika umjesto teksta u okviru --- */
#header .logo {
  border: none !important;
  padding: 0 !important;
  font-size: 0 !important;          /* sakrij eventualni tekstualni fallback */
}
#header .logo img {
  display: block;
  height: 10rem;
  width: auto;
}
#header .logo:hover img {
  opacity: 0.85;
}

@media screen and (max-width: 980px) {
  #header .logo img { height: 7rem; }
}
@media screen and (max-width: 736px) {
  #header .logo img { height: 5.75rem; }
}

/* --- Primarno dugme: bakarna ispuna (umjesto tamne) --- */
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
  background-color: var(--iter-bakarna);
}
input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover {
  background-color: var(--iter-bakarna-tamna);
}

/* --- Kalkulator: sekcija "Podaci o vozilu" --- */
#vozilo-polja {
  margin-top: 1rem;
  padding-top: 2rem;
  border-top: solid 2px var(--iter-linija);
}
#vozilo-polja h3 {
  margin-bottom: 1.5rem;
}
/* .fields raspored (Massively cilja samo "form > .fields", ovdje je ugniježđeno) */
#vozilo-polja .fields {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 3rem);
  margin: -1.5rem 0 2rem -1.5rem;
}
#vozilo-polja .fields > .field {
  flex-grow: 0;
  flex-shrink: 0;
  padding: 1.5rem 0 0 1.5rem;
  width: calc(100% - 1.5rem);
}
#vozilo-polja .fields > .field.half {
  width: calc(50% - 0.75rem);
}
@media screen and (max-width: 480px) {
  #vozilo-polja .fields > .field.half {
    width: calc(100% - 1.5rem);
  }
}

/* --- Kontakt: blok "Podsjetnik na istek police" --- */
#podsjetnik-blok {
  margin-top: 1rem;
  padding-top: 2rem;
  border-top: solid 2px var(--iter-linija);
}
#podsjetnik-blok h3 {
  margin-bottom: 0.75rem;
}
#podsjetnik-blok .podsjetnik-uvod {
  margin-bottom: 1.5rem;
  font-size: 0.95em;
}
/* .fields raspored (Massively cilja samo "form > .fields", ovdje je ugniježđeno) */
#podsjetnik-blok .fields {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 3rem);
  margin: -1.5rem 0 1.5rem -1.5rem;
}
#podsjetnik-blok .fields > .field {
  flex-grow: 0;
  flex-shrink: 0;
  padding: 1.5rem 0 0 1.5rem;
  width: calc(100% - 1.5rem);
}
#podsjetnik-blok .fields > .field.half {
  width: calc(50% - 0.75rem);
}
@media screen and (max-width: 480px) {
  #podsjetnik-blok .fields > .field.half {
    width: calc(100% - 1.5rem);
  }
}
#podsjetnik-blok .field > label:first-child {
  display: block;
  margin-bottom: 0.5rem;
}
/* checkboxe poredaj jedan ispod drugog */
#podsjetnik-blok .field input[type="checkbox"] + label {
  display: block;
  margin: 0.35rem 0;
}
/* Neoznačen checkbox = bijeli kvadratić (kao polja za tekst/datum), da se jasno
   vidi da je kliknabilan na krem pozadini. Označen = bakarna ispuna s kvačicom.
   Selektor po IMENU polja (ne po #podsjetnik-blok roditelju) — pokriva SVE forme koje
   koriste ova dva checkbox polja (kontakt forma I kalkulator), umjesto samo kontakt formu
   gdje su ova polja slučajno bila unutar tog wrappera. */
input[type="checkbox"][name="contact_channels"] + label:before,
input[type="checkbox"][name="reminder_offsets"] + label:before {
  background-color: #ffffff;
  border-color: #e2d5c3;
}
input[type="checkbox"][name="contact_channels"]:checked + label:before,
input[type="checkbox"][name="reminder_offsets"]:checked + label:before {
  background-color: var(--iter-bakarna);
  border-color: var(--iter-bakarna);
  color: #ffffff;
}
input[type="checkbox"][name="contact_channels"]:focus + label:before,
input[type="checkbox"][name="reminder_offsets"]:focus + label:before {
  border-color: var(--iter-bakarna);
  box-shadow: 0 0 0 2px rgba(184, 107, 67, 0.25);
}

/* Nenametljiva napomena uz polje (npr. "za Viber treba broj telefona").
   Vidljiva ali mirna — bez crvene, bez treskanja. */
.polje-napomena {
  margin: 0.5rem 0 0 0;
  padding: 0.6rem 0.9rem;
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--iter-antracit);
  background-color: #fbf3e8;
  border-left: 3px solid var(--iter-bakarna);
  border-radius: 3px;
}
.polje-napomena[hidden] {
  display: none;
}

/* --- Polja forme: bijela na krem pozadini --- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
select,
textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #ffffff;
  border: solid 2px #e2d5c3;
  border-radius: 0;
  color: inherit;
  width: 100%;
  padding: 0 1rem;
}
input[type="tel"],
input[type="number"] {
  height: 3rem;
}
textarea {
  padding: 0.75rem 1rem;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--iter-bakarna);
}
/* strelica u <select> - bakarna (default je skoro nevidljiva na bijelom) */
select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23B86B43' /%3E%3C/svg%3E");
}

/* --- Označeni tekst --- */
::selection { background: rgba(184, 107, 67, 0.25); }
::-moz-selection { background: rgba(184, 107, 67, 0.25); }

/* --- Naslovna: tamni bakarni sjaj u sredini pozadine --- */
body.page-home #wrapper > .bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 140vh;               /* pokriva hero i malo ispod */
  pointer-events: none;
  /* bronza (#8c6d43) - topla ali manje narandžasta od bakra, prigušeno */
  background:
    radial-gradient(56% 44% at 50% 34%,
      rgba(140, 109, 67, 0.40) 0%,
      rgba(140, 109, 67, 0.22) 40%,
      rgba(140, 109, 67, 0.07) 64%,
      rgba(140, 109, 67, 0) 82%);
}

/* --- Mapa (OpenStreetMap iframe) — responzivna --- */
.map-embed {
  position: relative;
  width: 100%;
  padding-bottom: 52%;          /* omjer visine mape */
  border: 1px solid rgba(210, 215, 217, 0.75);
  border-radius: 4px;
  overflow: hidden;
  background: #e9ecef;
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media screen and (max-width: 736px) {
  .map-embed { padding-bottom: 75%; }
}

/* --- Chatwoot chat — info panel na stranici /komunikacija --- */
/* (sam chat je plutajući prozor iz Chatwoot SDK-a, ne iframe u sadržaju) */
.chat-embed {
  margin: 1.5em 0 0.75em;
  padding: 1.5em;
  border: 1px solid rgba(210, 215, 217, 0.75);
  border-radius: 6px;
  background: #f6efe7;
}
.chat-embed--cta {
  border-color: rgba(184, 107, 67, 0.45);
  background: #fbf5ee;
}
.chat-embed p:last-of-type { margin-bottom: 1em; }
.chat-embed .actions { margin-bottom: 0; }
.chat-embed-note {
  font-size: 0.85em;
  color: rgba(56, 52, 49, 0.7);
}

/* --- Full-screen chat (landing preko linka "Nastavite razgovor" iz SMS-a) ---
   body.chat-fullscreen postavlja se u routes/index.js SAMO kad je token iz linka važeći.
   Chatwoot widget je i dalje SDK/iframe (ne mijenjamo mehanizam, samo ga uvećamo na cijeli
   ekran umjesto malog plutajućeg prozora) — klase su iz Chatwoot widget skripte, mogu se
   promijeniti u budućim verzijama Chatwoota, provjeriti ako se widget prestane vidjeti ovako. */
body.chat-fullscreen .woot-widget-bubble {
  display: none !important; /* nema potrebe za dugmetom, chat se sam otvara */
}
body.chat-fullscreen .woot-widget-holder {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.chat-fullscreen .woot-widget-holder iframe {
  width: 100% !important;
  height: 100% !important;
}