:root {
  --teal: #087F8B;
  --teal-dark: #066670;
  --aqua: #2dd4c4;
  --ink: #12333a;
  --muted: #5b6f75;
  --line: #e3eaec;
  --bg: #f4f8f9;
  --navy: linear-gradient(120deg, #062540 0%, #0a3050 55%, #0e3f62 100%);
  --radius: 0.875rem;
}

/* osnovna veličina raste blago s ekranom i staje na 22px; raspored je običan responzivni (container + breakpointi) */
html { font-size: clamp(14px, calc(0.7vw + 5.7px), 22px); }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
button, select, input, textarea { font: inherit; color: inherit; }

/* ---------- HEADER ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 max(1.25rem, calc((100vw - 80rem) / 2));
  height: 2.4rem;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(0.5rem);
  border-bottom: 1px solid var(--line);
}

.logo img { display: block; height: 1.5rem; width: auto; }

.nav { display: flex; gap: 2.25rem; font-weight: 500; font-size: 0.78rem; }
.nav a { padding: 0.375rem 0; border-bottom: 0.125rem solid transparent; transition: .2s; }
.nav a:hover { color: var(--teal); border-color: var(--teal); }

.header-right { display: flex; align-items: center; gap: 1.5rem; }
.lang {
  display: flex; align-items: center; gap: 0.375rem; font-size: 0.78rem;
  background: none; border: 0; cursor: pointer; font-weight: 500;
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  border: 0; border-radius: 0.625rem; cursor: pointer;
  font-weight: 600; transition: background .2s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); }
.btn-sm { padding: 0.4rem 1rem; font-size: 0.78rem; border-radius: 0.5rem; }
.btn-lg { padding: 0 1.75rem; font-size: 0.9375rem; height: 2.875rem; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  --hero-h: 20.45rem;
  --img-w: max(calc(var(--hero-h) * 2.8), 62%);   /* na širokim ekranima slika se širi da lijevo ne ostane prazno */
  height: var(--hero-h);
  padding: 1.75rem 1.5rem 4.75rem max(1.5rem, calc(50% - 36rem));
  color: #fff;
  background: #0a3a44;
  overflow: hidden;
  /* donji rub hero sekcije: blaga zakrivljenost, sredina niže od ivica */
  border-radius: 0 0 50% 50% / 0 0 2rem 2rem;
}
/* slika stanice (cijela zgrada), lijevi rub se utapa u tamnu pozadinu */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 40, 50, .6) 0%, rgba(8, 40, 50, 0) 50%),
    url("slike/hero.webp") right 85% / var(--img-w) auto no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(100% - var(--img-w)), #000 calc(100% - var(--img-w) * 0.73));
  mask-image: linear-gradient(90deg, transparent calc(100% - var(--img-w)), #000 calc(100% - var(--img-w) * 0.73));
}
.hero-content { max-width: 37.5rem; position: relative; z-index: 1; }
.eyebrow { font-size: 0.6875rem; letter-spacing: 0.125rem; opacity: .85; margin-bottom: 0.25rem; }
.hero h1 { font-size: 2.75rem; line-height: 1.02; font-weight: 700; }
.hero h1 span { display: block; color: var(--aqua); }
.lead { font-size: 1.1875rem; margin: 0.3rem 0 0.6rem; }
.desc { font-size: 0.875rem; line-height: 1.4; opacity: .95; max-width: 18.75rem; }

/* ---------- SEARCH CARD ---------- */
.search {
  position: relative;
  z-index: 2;
  max-width: 72rem;
  margin: -4rem auto 0;
}
.tabs { display: flex; align-items: stretch; position: relative; }
.tab {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.8rem 2rem;
  border: 0; background: #edf2f5;
  font-weight: 600; font-size: 0.8125rem; color: var(--muted); cursor: pointer;
  position: relative; z-index: 1;
  border-radius: 0;
}
.tab:first-child { border-top-left-radius: 1.1rem; }
.tab:last-child { border-top-right-radius: 1.1rem; }
.tab.active {
  z-index: 2; color: var(--ink);
  background:
    linear-gradient(var(--teal), var(--teal)) 1.6rem 100% / calc(100% - 3.2rem) 0.19rem no-repeat,
    #fff;
}
.tab.active svg { color: var(--teal); }
/* aktivni tab ima nakošen rub prema susjednom tabu (prvi: desno, drugi: lijevo) */
.tab:first-child.active::after, .tab:last-child.active::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1.6rem;
  background: #fff; z-index: -1;
}
.tab:first-child.active::after { right: -0.8rem; border-top-right-radius: 1.1rem; transform: skewX(14deg); }
.tab:last-child.active::before { left: -0.8rem; border-top-left-radius: 1.1rem; transform: skewX(-14deg); }
/* razmak teksta od nakošenog ruba */
.tab:first-child { padding-right: 2.4rem; }
.tab:last-child { padding-left: 2.8rem; padding-right: 2.2rem; }

.search-form {
  display: grid;
  grid-template-columns: 1.1fr auto 1.2fr 1.2fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  background: #fff;
  border-radius: 0 1rem 1rem 1rem;
  box-shadow: 0 0.75rem 2.5rem rgba(10, 50, 60, .15);
}

.field {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0 1rem; height: 2.875rem;
  border: 1px solid var(--line); border-radius: 0.75rem;
  background: #fff; cursor: pointer;
}
.field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 0.1875rem rgba(11, 122, 117, .12); }
.field .pin { color: var(--teal); flex: none; }
.field-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.field-body small { font-size: 0.6875rem; color: var(--muted); line-height: 1.2; }
.field-body select, .field-body input {
  border: 0; outline: 0; background: transparent;
  font-weight: 600; font-size: 0.875rem; width: 100%; cursor: pointer;
}

.swap {
  width: 2.125rem; height: 2.125rem; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--teal);
  display: grid; place-items: center; cursor: pointer;
}
.swap:hover { background: var(--bg); }

/* ---------- FEATURES ---------- */
.features {
  max-width: 80rem;
  margin: 1rem auto 2.5rem;
  display: grid;
  grid-template-columns: repeat(7, auto);
  justify-content: space-between;
}
.feature {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.4rem 0.7rem;
  border-left: 1px solid #dbe6e8;
}
.feature:first-child { border-left: 0; padding-left: 0; }
.feature:last-child { padding-right: 0; }
.feature .ico { width: 1.5rem; height: 1.5rem; flex: none; object-fit: contain; }
.feature strong { display: block; white-space: nowrap; font-size: 0.76rem; color: #0a4a54; line-height: 1.25; }
.feature span { font-size: 0.68rem; color: var(--muted); line-height: 1.3; display: block; max-width: 6.4rem; margin-top: 0.15rem; }

/* ikone u rem da se skaliraju s ostatkom */
.lang svg { width: 1rem; height: 1rem; }
.lang svg:last-child { width: 0.75rem; height: 0.75rem; }
.btn svg { width: 1.125rem; height: 1.125rem; }
.btn-lg svg { width: 1.25rem; height: 1.25rem; }
.tab svg { width: 1.25rem; height: 1.25rem; }
.field .pin { width: 1.375rem; height: 1.375rem; }
.swap svg { width: 1.25rem; height: 1.25rem; }

/* ---------- POPULARNE DESTINACIJE ---------- */
.destinacije { max-width: 80rem; margin: 0 auto 3rem; padding: 0 0.1rem; }
.dest-glava { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.9rem; }
.dest-glava h2 { font-size: 1.2rem; font-weight: 700; color: #0a3a44; }
.dest-sve { font-size: 0.78rem; font-weight: 600; color: var(--teal-dark); }
.dest-sve:hover { text-decoration: underline; }
.dest-mreza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.dest-kartica {
  display: block; background: #fff; border-radius: 0.8rem; overflow: hidden;
  box-shadow: 0 0.2rem 0.9rem rgba(10, 50, 60, .08); transition: transform .2s, box-shadow .2s;
}
.dest-kartica:hover { transform: translateY(-0.2rem); box-shadow: 0 0.6rem 1.4rem rgba(10, 50, 60, .15); }
.dest-kartica img { display: block; width: 100%; aspect-ratio: 16 / 9.4; object-fit: cover; }
.dest-tijelo { position: relative; padding: 0.8rem 0.9rem 0.85rem; }
.dest-tijelo h3 { font-size: 0.9rem; font-weight: 700; color: var(--ink); margin-bottom: 0.45rem; }
.dest-tijelo h3 span { color: var(--teal); margin: 0 0.15rem; }
.dest-info { display: flex; gap: 0.9rem; font-size: 0.72rem; color: var(--muted); }
.dest-meta { display: inline-flex; align-items: center; gap: 0.35rem; }
.dest-meta svg { width: 0.9rem; height: 0.9rem; color: var(--teal); }
.dest-meta b { color: var(--ink); font-weight: 700; }
.dest-strelica {
  position: absolute; right: 0.8rem; bottom: 0.7rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--teal); color: #fff;
  display: grid; place-items: center; transition: background .2s;
}
.dest-strelica svg { width: 0.95rem; height: 0.95rem; }
.dest-kartica:hover .dest-strelica { background: var(--teal-dark); }

/* ---------- USLUGE NA STANICI ---------- */
.usluge-stanica { max-width: 80rem; margin: 0 auto 3.5rem; }
.usl-mreza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.usl-kartica {
  display: flex; flex-direction: column; background: #fff; border-radius: 0.8rem; overflow: hidden;
  box-shadow: 0 0.2rem 0.9rem rgba(10, 50, 60, .08);
}
.usl-slika { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #0b6f7a, #2aa3a8 60%, #8fd3d1); }
.usl-slika > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.usl-ikona {
  position: absolute; left: 0.9rem; bottom: -1.3rem;
  width: 2.6rem; height: 2.6rem; border-radius: 0.65rem; background: #fff;
  display: grid; place-items: center; box-shadow: 0 0.2rem 0.6rem rgba(10, 50, 60, .15);
}
.usl-ikona img { width: 1.5rem; height: 1.5rem; object-fit: contain; }
.usl-tijelo { padding: 1.9rem 0.9rem 1rem; display: flex; flex-direction: column; flex: 1; }
.usl-tijelo h3 { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.usl-tijelo p { font-size: 0.78rem; color: var(--muted); line-height: 1.4; margin: 0.25rem 0 0.9rem; }
.usl-dugme {
  margin-top: auto; align-self: flex-start;
  padding: 0.5rem 0.9rem; border: 1px solid var(--teal); border-radius: 0.5rem;
  font-size: 0.75rem; font-weight: 600; color: var(--teal-dark); transition: background .2s, color .2s;
}
.usl-dugme:hover { background: var(--teal); color: #fff; }

/* ---------- UNA TRANSPORT BANER ---------- */
.una-baner {
  max-width: 80rem; margin: 0 auto 1.3rem; min-height: 14rem; border-radius: 0.9rem; overflow: hidden;
  display: flex; align-items: center; color: #fff; position: relative;
  background:
    radial-gradient(ellipse 38rem 16rem at 12% 0%, rgba(45, 212, 196, .16), transparent 70%),
    var(--navy);
}
/* fotografija autobusa: lijevi dio se utapa u tamnu pozadinu, pa se od dalekog autobusa vidi tek trećina */
.una-baner::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 68%;
  background: url("slike/autobus.webp") center 82% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 34%, rgba(0,0,0,.55) 46%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 34%, rgba(0,0,0,.55) 46%, #000 60%);
}
.una-tekst { max-width: 31rem; padding: 1.8rem 2.4rem; }
.una-logo { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1rem; }
.una-logo img { display: block; height: 3.4rem; width: auto; filter: brightness(0) invert(1); }
.una-logo small {
  display: flex; align-items: center; gap: 0.7rem; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--aqua); margin: 0;
}
.una-logo small::before { content: ""; width: 2rem; height: 2px; background: var(--aqua); border-radius: 2px; }
.una-tekst p { font-size: 0.88rem; line-height: 1.6; margin-bottom: 1.2rem; color: rgba(255, 255, 255, .88); max-width: 27rem; }
.una-dugme {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.65rem 1.2rem; border-radius: 0.55rem;
  background: var(--teal); color: #fff; font-size: 0.8rem; font-weight: 600;
  box-shadow: 0 0.3rem 0.9rem rgba(0, 0, 0, .25); transition: background .2s, transform .2s;
}
.una-dugme:hover { background: #0a98a6; transform: translateX(0.15rem); }

/* ---------- POLASCI + INFORMACIJE ---------- */
.polasci-info { max-width: 80rem; margin: 0 auto 3rem; display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.1rem; }
.pol-kartica, .info-kartica { background: #fff; border-radius: 0.9rem; box-shadow: 0 0.2rem 0.9rem rgba(10, 50, 60, .08); padding: 1rem 1.1rem; }
.pol-tabovi { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.pol-tabs { display: flex; gap: 0.3rem; }
.pol-tab {
  display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1rem; border: 0; border-radius: 0.5rem;
  background: #edf2f5; color: var(--muted); font-weight: 600; font-size: 0.8rem; cursor: pointer;
}
.pol-tab svg { width: 1rem; height: 1rem; }
.pol-tab.active { background: var(--teal); color: #fff; }
.pol-tablica { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.pol-tablica th { text-align: left; font-weight: 600; font-size: 0.74rem; color: var(--muted); background: #f2f6f8; padding: 0.6rem 0.8rem; }
.pol-tablica td { padding: 0.75rem 0.8rem; border-bottom: 1px solid var(--line); }
.pol-tablica tbody tr:last-child td { border-bottom: 0; }
.pol-tablica .prev { font-size: 0.74rem; color: var(--teal-dark); font-weight: 600; }
.status { display: inline-flex; align-items: center; gap: 0.45rem; }
.status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #1fa65a; }
.status.kasni::before { background: #e0a000; }

.info-kartica h2 { font-size: 1.05rem; color: #0a3a44; margin-bottom: 0.4rem; }
.info-red { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.info-red:first-of-type { border-top: 0; }
.info-red > svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--teal); }
.info-red span { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.info-red strong { font-size: 0.78rem; color: var(--ink); }
.info-red b { font-size: 0.8rem; color: var(--ink); }
.info-red small { font-size: 0.72rem; color: var(--muted); }
.info-red i { font-style: normal; font-size: 1.3rem; color: var(--muted); }
.info-red:hover i { color: var(--teal); }

/* ---------- FOOTER ---------- */
.footer { background: var(--navy); color: #fff; border-top: 2px solid rgba(45, 212, 196, .35); }
.footer-glavni {
  max-width: 80rem; margin: 0 auto; padding: 1.9rem 1.5rem 1.7rem;
  display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1.3fr; gap: 2rem; justify-content: space-between;
}
.f-kolona h3 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding-bottom: 0.5rem; margin-bottom: 0.8rem; position: relative; }
.f-kolona h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2rem; height: 2px; background: var(--aqua); border-radius: 2px; }
.f-logo { display: block; height: 2.4rem; width: auto; filter: brightness(0) invert(1); margin-bottom: 0.45rem; }
.f-prevoznik { display: flex; align-items: center; gap: 0.7rem; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aqua); margin-bottom: 0.8rem; }
.f-prevoznik::before { content: ""; width: 2rem; height: 2px; background: var(--aqua); }
.f-opis { font-size: 0.72rem; line-height: 1.55; color: rgba(255, 255, 255, .8); max-width: 20rem; margin-bottom: 0.9rem; }
.f-drustvene { display: flex; gap: 0.7rem; }
.f-drustvene a { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.f-drustvene a:hover { background: var(--teal); border-color: var(--teal); }
.f-drustvene svg { width: 0.9rem; height: 0.9rem; }

.f-linkovi { list-style: none; display: grid; gap: 0.45rem; }
.f-linkovi a { display: flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; color: rgba(255, 255, 255, .88); transition: color .2s, transform .2s; }
.f-linkovi a::before { content: "\203A"; font-size: 1.1rem; line-height: 1; color: rgba(255, 255, 255, .7); }
.f-linkovi a:hover { color: var(--aqua); transform: translateX(0.15rem); }

.f-kontakt { list-style: none; display: grid; gap: 0.7rem; }
.f-kontakt li { display: flex; gap: 0.9rem; align-items: flex-start; }
.f-ikona { width: 1.9rem; height: 1.9rem; flex: none; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); display: grid; place-items: center; background: rgba(8, 127, 139, .25); }
.f-ikona svg { width: 0.9rem; height: 0.9rem; }
.f-kontakt strong { display: block; font-size: 0.74rem; }
.f-kontakt span, .f-kontakt a { font-size: 0.72rem; color: rgba(255, 255, 255, .78); line-height: 1.4; }
.f-kontakt a:hover { color: var(--aqua); }

.f-mapa { position: relative; border-radius: 0.7rem; overflow: hidden; aspect-ratio: 16 / 10; background: #e9eef2; }
.f-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.f-mapa-dugme { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.8rem; padding: 0.75rem 0.8rem; white-space: nowrap; border-radius: 0.55rem; background: var(--teal); font-size: 0.78rem; font-weight: 600; transition: background .2s; }
.f-mapa-dugme svg { width: 1rem; height: 1rem; }
.f-mapa-dugme:hover { background: #0a98a6; }

.footer-donji { border-top: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .18); }
.footer-donji { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between; align-items: center; padding: 0.7rem max(1.5rem, calc((100vw - 77rem) / 2)); font-size: 0.72rem; color: rgba(255, 255, 255, .85); }
.footer-donji nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; align-items: center; }
.footer-donji nav a:hover { color: var(--aqua); }
.footer-donji nav > * + * { padding-left: 1.3rem; border-left: 1px solid rgba(255, 255, 255, .25); }
.footer-donji b { color: #fff; }


/* ---------- INFORMACIJE O KARTAMA (drugi tab) ---------- */
.search.karte-otvoreno .search-form { display: none; }
.search.karte-otvoreno .tabs .tab:first-child { z-index: 1; }
.info-karte {
  position: relative; background: #fff; border-radius: 0 1rem 1rem 1rem; padding: 1.4rem 1.5rem 1.2rem;
  box-shadow: 0 0.75rem 2.5rem rgba(10, 50, 60, .15);
}
.info-karte[hidden] { display: none; }
.ik-zatvori {
  position: absolute; top: 0.9rem; right: 1.1rem; width: 2rem; height: 2rem; border: 0; background: none;
  font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 50%;
}
.ik-zatvori:hover { background: var(--bg); color: var(--ink); }
.ik-glava { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.ik-glava h2 { font-size: 1.45rem; color: #0a2a44; line-height: 1.1; }
.ik-glava p { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }
.ik-veliki, .ik-ikona {
  flex: none; display: grid; place-items: center; border-radius: 50%; background: #dff1f0; color: var(--teal-dark);
}
.ik-veliki { width: 3.6rem; height: 3.6rem; }
.ik-veliki img { width: 1.7rem; height: 1.7rem; object-fit: contain; }
.ik-mreza { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.ik-kartica {
  display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: 0.8rem;
  box-shadow: 0 0.15rem 0.6rem rgba(10, 50, 60, .06); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ik-kartica:hover { transform: translateY(-0.12rem); border-color: #b5dcdc; box-shadow: 0 0.4rem 1rem rgba(10, 50, 60, .12); }
.ik-ikona { width: 3.1rem; height: 3.1rem; }
.ik-ikona svg { width: 1.5rem; height: 1.5rem; }
.ik-ikona img { width: 1.5rem; height: 1.5rem; object-fit: contain; }
.ik-tekst { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.ik-tekst strong { font-size: 0.85rem; color: #0a2a44; }
.ik-tekst small { font-size: 0.72rem; color: var(--muted); line-height: 1.4; }
.ik-kartica i { font-style: normal; font-size: 1.4rem; color: #0a2a44; align-self: flex-start; line-height: 1; }
.ik-pitanje {
  display: flex; align-items: center; gap: 1rem; margin-top: 0.9rem; padding: 0.9rem 1.1rem;
  background: #e3f3f1; border-radius: 0.8rem;
}
.ik-balon { flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--teal-dark); color: #fff; display: grid; place-items: center; }
.ik-balon svg { width: 1.4rem; height: 1.4rem; }
.ik-pitanje > div { flex: 1; display: flex; flex-direction: column; }
.ik-pitanje strong { font-size: 0.9rem; color: #0a2a44; }
.ik-pitanje small { font-size: 0.74rem; color: var(--muted); }
.ik-dugme {
  flex: none; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.4rem; border-radius: 0.55rem;
  background: var(--teal); color: #fff; font-size: 0.82rem; font-weight: 600; transition: background .2s;
}
.ik-dugme:hover { background: var(--teal-dark); }


/* pogledi unutar panela */
.ik-pogled[hidden] { display: none; }
.ik-mrvice { display: flex; align-items: center; gap: 0.6rem; font-size: 0.76rem; color: var(--muted); margin-bottom: 1rem; padding-right: 2.5rem; flex-wrap: wrap; }
.ik-mrvice a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--teal-dark); font-weight: 500; }
.ik-mrvice a:hover { text-decoration: underline; }
.ik-mrvice svg { width: 0.95rem; height: 0.95rem; }
.ik-mrvice b { color: var(--ink); font-weight: 600; }
.ik-vrsta { align-items: flex-start; }
.ik-detalji { margin-top: 0.5rem; font-size: 0.74rem; font-weight: 600; color: var(--teal-dark); }
.ik-detalji:hover { text-decoration: underline; }


/* ---------- PRTLJAG ---------- */
.pr-nazad { display: inline-block; font-size: 0.76rem; font-weight: 500; color: var(--ink); margin-bottom: 0.9rem; }
.pr-nazad:hover { color: var(--teal-dark); }
.pr-naslov { margin-bottom: 1rem; }
.pr-naslov h2 { font-size: 1.6rem; color: #0a2a44; line-height: 1.1; }
.pr-naslov p { font-size: 0.82rem; color: var(--muted); margin-top: 0.25rem; }
.pr-raspored { display: grid; grid-template-columns: 3fr 1fr; gap: 0.9rem; align-items: start; }
.pr-kartice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.pr-kartica { background: #fff; border: 1px solid var(--line); border-radius: 0.8rem; padding: 1rem; box-shadow: 0 0.15rem 0.6rem rgba(10, 50, 60, .06); }
.pr-vrh { display: flex; gap: 0.8rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
.pr-vrh h3 { font-size: 0.88rem; color: #0a2a44; margin-bottom: 0.25rem; }
.pr-vrh p { font-size: 0.72rem; color: var(--muted); line-height: 1.45; }
.pr-redovi { list-style: none; display: grid; gap: 0.75rem; padding-top: 0.9rem; }
.pr-red { display: flex; gap: 0.7rem; align-items: flex-start; }
.pr-i { flex: none; width: 1.3rem; height: 1.3rem; color: #0a4a54; margin-top: 0.1rem; }
.pr-i img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pr-red strong { display: block; font-size: 0.76rem; color: var(--ink); }
.pr-red small { display: block; font-size: 0.72rem; color: var(--muted); line-height: 1.4; }
.pr-ok .pr-i { color: var(--teal); }
.pr-desno { display: grid; gap: 0.8rem; }
.pr-slika { border-radius: 0.8rem; overflow: hidden; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #0b2f55, #14527c 60%, #5d8fae); }
.pr-slika img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pr-napomene { background: #e3f3f1; border-radius: 0.8rem; padding: 0.9rem 1rem; }
.pr-napomene h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: #0a2a44; margin-bottom: 0.5rem; }
.pr-napomene h3 span { width: 1.2rem; height: 1.2rem; }
.pr-napomene h3 img { display: block; width: 100%; height: 100%; }
.pr-vrh .ik-ikona img { width: 1.7rem; height: 1.7rem; object-fit: contain; }
.pr-napomene p, .pr-napomene li { font-size: 0.7rem; color: var(--muted); line-height: 1.45; }
.pr-napomene ul { margin: 0.5rem 0 0 1rem; display: grid; gap: 0.4rem; }
.pr-posebni { background: #e8f3fb; }
.pr-svijetli { background: transparent; color: var(--teal-dark); }
.pr-svijetli img { width: 1.7rem; height: 1.7rem; object-fit: contain; }
.pr-povezano { font-size: 1rem; color: #0a2a44; margin: 1.1rem 0 0.7rem; }
.pr-povezane { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.pr-povezane .ik-ikona { width: 2.6rem; height: 2.6rem; }
.pr-povezane .ik-ikona img { width: 1.4rem; height: 1.4rem; }


/* ---------- KALENDAR ---------- */
.field-datum { position: relative; }
.field-datum.otvoreno { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8, 127, 139, .12); }
.field-datum:focus-visible { outline: none; border-color: var(--teal); }
#datum-prikaz { pointer-events: none; padding-right: 1.4rem; cursor: pointer; }
#datum-prikaz::placeholder { color: var(--muted); font-weight: 500; opacity: 1; }
.kalendar {
  position: absolute; top: calc(100% + 0.6rem); left: 0; z-index: 20;
  width: 17.5rem; padding: 0.9rem 0.9rem 0.7rem;
  background: #fff; border: 1px solid var(--line); border-radius: 0.9rem;
  box-shadow: 0 1rem 2.5rem rgba(10, 50, 60, .18); cursor: default;
}
.kalendar[hidden] { display: none; }
.kal-glava { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.kal-glava strong { font-size: 0.85rem; color: var(--ink); }
.kal-nav { width: 1.8rem; height: 1.8rem; border: 0; border-radius: 50%; background: var(--bg); color: var(--teal); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.kal-nav:hover:not(:disabled) { background: #dff0f2; }
.kal-nav:disabled { color: #b9c6c9; cursor: default; }
.kal-dani, .kal-mreza { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.kal-dani span { font-size: 0.68rem; font-weight: 600; color: var(--muted); padding: 0.3rem 0; }
.kal-mreza { gap: 0.15rem 0; }
.dan { height: 2rem; border: 0; border-radius: 0.55rem; background: none; font-size: 0.78rem; font-weight: 500; color: var(--ink); cursor: pointer; }
.dan:hover:not(:disabled):not(.odabran) { background: #e6f3f4; }
.dan.danas { box-shadow: inset 0 0 0 1px var(--teal); color: var(--teal); font-weight: 700; }
.dan.odabran { background: var(--teal); color: #fff; font-weight: 700; box-shadow: none; }
.dan.prosli { color: #c2ced1; cursor: default; }
.kal-podnozje { display: flex; justify-content: space-between; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.kal-podnozje button { border: 0; background: none; color: var(--teal); font-weight: 600; font-size: 0.75rem; cursor: pointer; }
.kal-podnozje button:hover { color: var(--teal-dark); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .nav { gap: 1.4rem; }
  .features { grid-template-columns: repeat(4, 1fr); gap: 1.2rem 0; padding: 0 1.5rem; }
  .feature:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
  .feature:last-child { padding-right: 0.7rem; }
  .feature span { max-width: none; }
  .dest-mreza, .usl-mreza { grid-template-columns: repeat(2, 1fr); }
  .destinacije, .usluge-stanica, .polasci-info { padding: 0 1.5rem; }
  .una-baner { margin: 0 1.5rem 1.3rem; }
  .polasci-info { grid-template-columns: 1fr; }
  .footer-glavni { grid-template-columns: 1fr 1fr; }
  .ik-mreza, .pr-povezane { grid-template-columns: 1fr 1fr; }
  .pr-raspored { grid-template-columns: 1fr; }
  .pr-kartice { grid-template-columns: 1fr 1fr; }
  .f-brend { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
  html { font-size: 16px; }
  .header { padding: 0 1rem; }
  .nav { display: none; }
  .hero { --hero-h: auto; height: auto; min-height: 26rem; padding: 2rem 1.25rem 7rem; border-radius: 0 0 50% 50% / 0 0 1.5rem 1.5rem; }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(8, 40, 50, .92) 0%, rgba(8, 40, 50, .55) 60%, rgba(8, 40, 50, .2) 100%),
      url("slike/hero.webp") 70% bottom / cover no-repeat;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero h1 { font-size: 2.25rem; }
  .search { margin: -5rem 0.75rem 0; }
  .tab { padding: 0.75rem 1rem; }
  .tab:last-child { padding-left: 2.2rem; padding-right: 1.4rem; }
  .search-form { grid-template-columns: 1fr 1fr; }
  .swap { display: none; }
  .btn-lg { grid-column: 1 / -1; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .feature:nth-child(4n + 1) { border-left: 1px solid #dbe6e8; padding-left: 0.7rem; }
  .feature:nth-child(odd) { border-left: 0; padding-left: 0; }
}

@media (max-width: 560px) {
  .header-right .btn { display: none; }
  .search-form { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .dest-mreza, .usl-mreza { grid-template-columns: 1fr; }
  .una-tekst { padding: 1.2rem; }
  .footer-glavni { grid-template-columns: 1fr; gap: 2rem; }
  .ik-mreza, .pr-povezane, .pr-kartice { grid-template-columns: 1fr; }
  .ik-pitanje { flex-wrap: wrap; }
  .ik-glava h2 { font-size: 1.15rem; padding-right: 1.5rem; }
  .footer-donji nav > * + * { padding-left: 0; border-left: 0; }
  .pol-tabovi { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .pol-tablica .prev, .pol-tablica th:nth-child(3) { display: none; }
  .feature { border-left: 0 !important; padding-left: 0 !important; }
}

/* sprječava probijanje polja izvan kartice na uskim ekranima */
.search, .search-form, .field, .field-body, .field-body input { min-width: 0; }
.ik-vrsta .ik-ikona img { width: 1.8rem; height: 1.8rem; }

/* kupovina i plaćanje */
.kp-raspored { grid-template-columns: 2.6fr 1fr; margin-top: 1rem; }
.kp-slika { aspect-ratio: 4 / 3.3; }
.pr-ok .pr-i svg { width: 100%; height: 100%; }

/* izmjena i otkazivanje */
.iz-kartice { margin-top: 1rem; }
.iz-napomene { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1rem; padding: 1rem 1.2rem; background: #e8f3fb; border-radius: 0.8rem; }
.iz-ikona { flex: none; width: 1.8rem; height: 1.8rem; }
.iz-ikona img { display: block; width: 100%; height: 100%; object-fit: contain; }
.iz-napomene strong { font-size: 0.9rem; color: #0a2a44; }
.iz-napomene p { font-size: 0.78rem; color: var(--muted); line-height: 1.55; margin-top: 0.3rem; }

/* polazište/odredište: tekstualno polje s prijedlozima + strelica */
.field-body { position: relative; }
.field-body input[list], #datum-prikaz {
  padding-right: 1.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312333a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center / 0.8rem no-repeat;
}
.field-body input[list] { cursor: text; }
.field-body input[list]::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 0; width: 1.4rem; cursor: pointer; }
.field-body input[list]::placeholder { color: var(--muted); font-weight: 500; opacity: 1; }

/* ---------- O NAMA ---------- */
.nav a.aktivan { color: var(--teal); border-color: var(--teal); }
.on-oznaka { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; color: var(--teal-dark); margin-bottom: 0.3rem; }
.on-oznaka-svijetla { color: rgba(255, 255, 255, .85); }
.on-dugme {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.4rem; border-radius: 0.55rem;
  background: var(--teal); color: #fff; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--teal);
  transition: background .2s, border-color .2s;
}
.on-dugme:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.on-dugme-obrub { background: transparent; border-color: rgba(255, 255, 255, .85); }
.on-dugme-obrub:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.on-hero {
  position: relative; overflow: hidden; color: #fff; background: #0a3a44;
  min-height: 17rem; display: flex; align-items: center;
  padding: 2.2rem 1.5rem 2.6rem max(1.5rem, calc(50% - 40rem));
}
.on-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 30, 45, .92) 0%, rgba(6, 30, 45, .7) 35%, rgba(6, 30, 45, 0) 65%),
    url("slike/hero.webp") right 80% / cover no-repeat;
}
.on-hero-tekst { position: relative; max-width: 26rem; }
.on-hero h1 { font-size: 2.3rem; line-height: 1.08; font-weight: 700; margin-bottom: 0.8rem; }
.on-hero-tekst > p:not(.on-oznaka) { font-size: 0.85rem; line-height: 1.55; color: rgba(255, 255, 255, .9); margin-bottom: 1.2rem; }
.on-dugmad { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.on-sekcija { max-width: 80rem; margin: 0 auto; padding: 1.6rem 0; display: grid; gap: 2rem; align-items: center; }
.on-sekcija h2 { font-size: 1.45rem; line-height: 1.15; color: #0a2a44; margin-bottom: 0.5rem; }
.on-opis { font-size: 0.85rem; line-height: 1.55; color: var(--muted); max-width: 34rem; }
.on-slika { border-radius: 0.8rem; overflow: hidden; box-shadow: 0 0.3rem 1.2rem rgba(10, 50, 60, .12); }
.on-slika img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.on-krug {
  flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: #dff1f0; color: var(--teal-dark);
}
.on-krug img { width: 1.35rem; height: 1.35rem; object-fit: contain; }

.on-uvod { grid-template-columns: 1.45fr 1fr; }
.on-prednosti { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; margin-top: 1.1rem; }
.on-prednost {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem;
  padding: 0.9rem 0.6rem; background: #fff; border-radius: 0.8rem; box-shadow: 0 0.2rem 0.9rem rgba(10, 50, 60, .07);
}
.on-prednost .on-krug { margin-bottom: 0.3rem; }
.on-prednost strong { font-size: 0.76rem; color: #0a2a44; }
.on-prednost small { font-size: 0.68rem; color: var(--muted); line-height: 1.35; }

.on-una { margin: 1rem auto; }
.on-una .on-oznaka { font-size: 0.68rem; margin-bottom: 0.3rem; color: rgba(255, 255, 255, .85); }
.on-una h2 { font-size: 2rem; font-weight: 800; letter-spacing: 0.01em; margin-bottom: 0.6rem; }

.on-usluge { grid-template-columns: 1.6fr 1fr; }
.on-sadrzaji { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; margin-top: 1.1rem; }
.on-sadrzaj {
  display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem 0.8rem;
  background: #fff; border-radius: 0.8rem; box-shadow: 0 0.2rem 0.9rem rgba(10, 50, 60, .07);
}
.on-sadrzaj > div { display: flex; flex-direction: column; min-width: 0; }
.on-sadrzaj strong { font-size: 0.76rem; color: #0a2a44; }
.on-sadrzaj small { font-size: 0.66rem; color: var(--muted); line-height: 1.35; }

.on-misija-traka { background: linear-gradient(180deg, #e8f3fb, #eef6f8); margin: 1rem 0; }
.on-misija { grid-template-columns: 1fr 1.7fr; padding: 1.8rem 0; }
.on-vrijednosti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 1.1rem; }

.on-lokacija { grid-template-columns: 1.5fr 1fr; padding-bottom: 2.5rem; }
.on-kontakti { display: grid; grid-template-columns: repeat(4, auto); gap: 1rem 1.4rem; margin: 1.1rem 0 1.3rem; }
.on-kontakt { display: flex; gap: 0.5rem; align-items: flex-start; }
.on-kontakt > svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--teal); margin-top: 0.1rem; }
.on-kontakt > div { display: flex; flex-direction: column; }
.on-kontakt strong { font-size: 0.74rem; color: #0a2a44; }
.on-kontakt small, .on-kontakt a { font-size: 0.7rem; color: var(--muted); line-height: 1.4; max-width: 11rem; }
.on-kontakt a:hover { color: var(--teal); }
.on-mapa { position: relative; border-radius: 0.8rem; overflow: hidden; aspect-ratio: 16 / 10; background: #e9eef2; box-shadow: 0 0.3rem 1.2rem rgba(10, 50, 60, .12); }
.on-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 1100px) {
  .on-sekcija { padding-left: 1.5rem; padding-right: 1.5rem; }
  .on-una { margin: 1rem 1.5rem; }
  .on-uvod, .on-usluge, .on-misija, .on-lokacija { grid-template-columns: 1fr; }
  .on-sadrzaji { grid-template-columns: repeat(2, 1fr); }
  .on-kontakti { grid-template-columns: repeat(2, auto); justify-content: start; }
}
@media (max-width: 899px) {
  .on-hero::before { background: linear-gradient(180deg, rgba(6, 30, 45, .9), rgba(6, 30, 45, .55)), url("slike/hero.webp") 70% bottom / cover no-repeat; }
  .on-hero h1 { font-size: 1.9rem; }
  .on-prednosti { grid-template-columns: repeat(2, 1fr); }
  .on-vrijednosti { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .on-sekcija { padding-left: 1rem; padding-right: 1rem; }
  .on-una { margin: 1rem; }
  .on-una h2 { font-size: 1.5rem; }
  .on-sadrzaji, .on-kontakti { grid-template-columns: 1fr; }
}

/* ---------- POLASCI (stranica) ---------- */
.pl-hero {
  position: relative; overflow: hidden; color: #fff; background: #0a3a44;
  min-height: 15rem; padding: 2.4rem 1.5rem 5.5rem max(1.5rem, calc(50% - 40rem));
}
.pl-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 30, 45, .9) 0%, rgba(6, 30, 45, .6) 40%, rgba(6, 30, 45, 0) 70%),
    url("slike/hero.webp") right 70% / cover no-repeat;
}
.pl-hero-tekst { position: relative; max-width: 36rem; }
.pl-hero h1 { font-size: 1.9rem; line-height: 1.15; font-weight: 600; margin-bottom: 0.6rem; }
.pl-hero h1 b { font-size: 2.4rem; font-weight: 800; }
.pl-hero p { font-size: 0.88rem; line-height: 1.5; color: rgba(255, 255, 255, .9); }

.pl-raspored {
  position: relative; z-index: 2; max-width: 80rem; margin: -4rem auto 3rem;
  display: grid; grid-template-columns: 1fr 19rem; gap: 1rem; align-items: start;
}
.pl-kartica, .pl-blok { background: #fff; border-radius: 0.9rem; box-shadow: 0 0.6rem 2rem rgba(10, 50, 60, .12); }
.pl-kartica { padding: 1.1rem 1.2rem 1rem; min-width: 0; }

.pl-glava { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pl-ikona { flex: none; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: #dff1f0; display: grid; place-items: center; }
.pl-ikona img { width: 1.7rem; height: 1.7rem; object-fit: contain; }
.pl-naslov { flex: 1; min-width: 10rem; }
.pl-naslov h2 { font-size: 1.35rem; color: #0a2a44; line-height: 1.15; }
.pl-naslov p { font-size: 0.78rem; color: var(--muted); }

.pl-datum {
  position: relative; display: flex; align-items: center; gap: 0.5rem; height: 2.3rem; padding: 0 0.8rem;
  border: 1px solid var(--line); border-radius: 0.55rem; font-size: 0.76rem; font-weight: 500; cursor: pointer;
}
.pl-datum:hover { border-color: var(--teal); }
.pl-datum svg { width: 1rem; height: 1rem; color: var(--teal-dark); }
.pl-datum .pl-strelica { width: 0.7rem; height: 0.7rem; color: var(--ink); margin-left: 0.4rem; }
.pl-datum input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }

.pl-dani { display: flex; gap: 0.35rem; }
.pl-dan {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 2.9rem; height: 2.3rem; padding: 0 0.5rem;
  border: 0; border-radius: 0.5rem; background: #edf3f6; color: var(--ink); font-size: 0.7rem; font-weight: 500; line-height: 1.15; cursor: pointer;
}
.pl-dan small { font-size: 0.62rem; color: var(--muted); }
.pl-dan:hover { background: #dff0f2; }
.pl-dan.aktivan { background: var(--teal); color: #fff; font-weight: 600; }
.pl-dan.aktivan small { color: rgba(255, 255, 255, .85); }

.pl-tablica-omot { overflow-x: auto; }
.pl-tablica { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.pl-tablica th { text-align: left; background: #eef4f8; padding: 0.55rem 0.8rem; font-size: 0.72rem; font-weight: 600; color: #0a2a44; white-space: nowrap; }
.pl-tablica th:first-child { border-radius: 0.5rem 0 0 0.5rem; }
.pl-tablica th:last-child { border-radius: 0 0.5rem 0.5rem 0; }
.pl-tablica th button { display: inline-flex; align-items: center; gap: 0.35rem; border: 0; background: none; font-weight: 600; color: inherit; cursor: pointer; }
.pl-tablica th button::after { content: "\21C5"; font-size: 0.75rem; color: #9fb3bb; }
.pl-tablica th button[data-smjer="gore"]::after { content: "\2191"; color: var(--teal); }
.pl-tablica th button[data-smjer="dolje"]::after { content: "\2193"; color: var(--teal); }
.pl-tablica td { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pl-vrijeme { font-weight: 700; color: #0a2a44; }
.pl-prev, .pl-nap { color: var(--muted); }
.pl-prosao td, .pl-prosao .pl-vrijeme { color: #a3b3b8; }
.pl-prazno { text-align: center; color: var(--muted); padding: 1.5rem !important; }
.pl-status { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 500; }
.pl-status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.pl-status.ok { color: #1a9a52; }
.pl-status.kasni { color: #e08a00; }
.pl-status.planirano { color: #6f818a; }
.pl-status.otisao { color: #a3b3b8; }

.pl-podnozje { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; font-size: 0.76rem; color: var(--muted); }
.pl-stranice { display: flex; gap: 0.3rem; }
.pl-stranice button {
  width: 2rem; height: 2rem; border: 0; border-radius: 0.5rem; background: none; color: var(--ink);
  font-size: 0.78rem; font-weight: 500; cursor: pointer;
}
.pl-stranice button:hover:not(:disabled):not(.aktivan) { background: #edf3f6; }
.pl-stranice button.aktivan { background: var(--teal); color: #fff; font-weight: 700; }
.pl-stranice button:disabled { color: #c2ced1; cursor: default; }

.pl-strana { display: grid; gap: 1rem; }
.pl-blok { padding: 1rem 1.1rem; }
.pl-blok-glava { display: flex; gap: 0.8rem; align-items: flex-start; }
.pl-blok-glava-sredina { align-items: center; margin-bottom: 0.8rem; }
.pl-blok h3 { font-size: 0.95rem; color: #0a2a44; margin-bottom: 0.25rem; }
.pl-blok-glava-sredina h3 { margin: 0; }
.pl-blok p { font-size: 0.72rem; color: var(--muted); line-height: 1.5; }
.pl-krug { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #dff1f0; color: var(--teal-dark); display: grid; place-items: center; }
.pl-krug img { width: 1.4rem; height: 1.4rem; object-fit: contain; }
.pl-krug svg { width: 1.25rem; height: 1.25rem; }
.pl-krug-obrub { background: none; }
.pl-krug-obrub img { width: 2rem; height: 2rem; }
.pl-krug-mali { width: 2.2rem; height: 2.2rem; }
.pl-krug-mali img { width: 1.2rem; height: 1.2rem; }

.pl-pretraga { display: grid; gap: 0.6rem; margin-top: 0.9rem; }
.pl-polje { display: flex; align-items: center; gap: 0.5rem; height: 2.4rem; padding: 0 0.8rem; border: 1px solid var(--line); border-radius: 0.55rem; }
.pl-polje:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8, 127, 139, .12); }
.pl-polje svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--muted); }
.pl-polje input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 0.76rem; }
.pl-polje input::-webkit-calendar-picker-indicator { display: none !important; }
.pl-dugme {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.4rem; border: 0; border-radius: 0.55rem;
  background: var(--teal); color: #fff; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background .2s;
}
.pl-dugme:hover { background: var(--teal-dark); }

.pl-linkovi { display: grid; border: 1px solid var(--line); border-radius: 0.7rem; overflow: hidden; }
.pl-linkovi a { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.8rem; transition: background .2s; }
.pl-linkovi a + a { border-top: 1px solid var(--line); }
.pl-linkovi a:hover { background: #f4f9fa; }
.pl-linkovi a > span:not(.pl-krug) { flex: 1; display: flex; flex-direction: column; }
.pl-linkovi strong { font-size: 0.76rem; color: #0a2a44; }
.pl-linkovi small { font-size: 0.68rem; color: var(--muted); }
.pl-linkovi i { font-style: normal; font-size: 1.3rem; color: #0a2a44; }

@media (max-width: 1100px) {
  .pl-raspored { grid-template-columns: minmax(0, 1fr); margin-left: 1.5rem; margin-right: 1.5rem; }
  .pl-strana { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
}
@media (max-width: 899px) {
  .pl-hero::before { background: linear-gradient(180deg, rgba(6, 30, 45, .9), rgba(6, 30, 45, .55)), url("slike/hero.webp") 70% bottom / cover no-repeat; }
  .pl-hero h1 { font-size: 1.5rem; }
  .pl-hero h1 b { font-size: 1.9rem; }
}
@media (max-width: 560px) {
  .pl-raspored { margin-left: 0.75rem; margin-right: 0.75rem; }
  .pl-dani { width: 100%; overflow-x: auto; }
  .pl-tablica .pl-prev, .pl-tablica th:nth-child(3) { display: none; }
  .pl-podnozje { justify-content: center; }
  .pl-tablica th, .pl-tablica td { padding-left: 0.45rem; padding-right: 0.45rem; }
  .pl-kartica { padding: 1rem 0.8rem; }
}

/* polasci: detalji rute */
.pl-red { cursor: pointer; transition: background .15s; }
.pl-red:hover td, .pl-red.otvoren td { background: #f4f9fa; }
.pl-red.otvoren td { border-bottom-color: transparent; }
.pl-det-kol { text-align: right; }
.pl-det-dugme {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border: 1px solid var(--teal); border-radius: 0.45rem;
  background: #fff; color: var(--teal-dark); font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: background .2s, color .2s;
}
.pl-det-dugme span { display: inline-block; font-size: 0.95rem; line-height: 1; transition: transform .2s; }
.pl-det-dugme:hover, .pl-red.otvoren .pl-det-dugme { background: var(--teal); color: #fff; }
.pl-red.otvoren .pl-det-dugme span { transform: rotate(90deg); }
.pl-det-red td { padding: 0 0.8rem 1rem !important; background: #f4f9fa; white-space: normal; }
.pl-detalji { display: grid; grid-template-columns: 13rem minmax(0, 32rem); gap: 1.2rem; padding: 0.9rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 0.7rem; }
.pl-det-info { display: grid; gap: 0.55rem; align-content: start; padding-right: 1.2rem; border-right: 1px solid var(--line); }
.pl-det-info small { display: block; font-size: 0.66rem; color: var(--muted); }
.pl-det-info strong { font-size: 0.78rem; color: #0a2a44; }
.pl-stanice { list-style: none; display: grid; }
.pl-stanice li { position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: 2rem; padding-bottom: 0.7rem; }
.pl-stanice li:last-child { padding-bottom: 0; }
.pl-stanice time { font-size: 0.78rem; font-weight: 700; color: #0a2a44; text-align: right; }
/* linija i tačke između vremena i naziva stanice */
.pl-stanice li::before { content: ""; position: absolute; left: 3.7rem; top: 0.3rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #fff; border: 2px solid var(--teal); z-index: 1; }
.pl-stanice li::after { content: ""; position: absolute; left: calc(3.7rem + 0.32rem); top: 0.5rem; bottom: -0.3rem; width: 2px; background: #bfe0e0; }
.pl-stanice li:last-child::after { display: none; }
.pl-stanice li.prva::before, .pl-stanice li.zadnja::before { background: var(--teal); }
.pl-stanice span { display: flex; flex-direction: column; line-height: 1.3; }
.pl-stanice b { font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.pl-stanice small { font-size: 0.66rem; color: var(--muted); }
.pl-stanice li.prva b, .pl-stanice li.zadnja b { color: var(--teal-dark); font-weight: 700; }
@media (max-width: 560px) {
  .pl-detalji { grid-template-columns: 1fr; }
  .pl-det-info { grid-template-columns: 1fr 1fr; padding: 0 0 0.8rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .pl-det-dugme { font-size: 0; gap: 0; padding: 0.2rem 0.5rem; }
  .pl-det-dugme span { font-size: 1.1rem; }
  .pl-tablica .pl-status { font-size: 0.72rem; }
  .pl-tablica th button:not([data-smjer="gore"]):not([data-smjer="dolje"])::after { display: none; }
}

/* ---------- RED VOŽNJE ---------- */
.pl-stanice li.poslije time, .pl-stanice li.poslije b { color: #a3b3b8; font-weight: 500; }
.pl-stanice li.poslije::before { border-color: #c5d3d6; }

.rv-naslov h2, .rv-rezultati-glava h2 { font-size: 1.35rem; color: #0a2a44; line-height: 1.15; }
.rv-naslov p, .rv-rezultati-glava p { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
.rv-forma {
  display: grid; grid-template-columns: 1fr 1.2fr 1fr auto; gap: 0.8rem; align-items: end;
  margin: 1rem 0 1.4rem; padding: 0.9rem 1rem; background: #f4f8fa; border-radius: 0.8rem;
}
.rv-polje-omot { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.rv-polje-omot small { font-size: 0.68rem; color: var(--muted); padding-left: 0.2rem; }
.rv-polje {
  display: flex; align-items: center; gap: 0.55rem; height: 2.4rem; padding: 0 0.8rem;
  background: #fff; border: 1px solid var(--line); border-radius: 0.55rem;
}
.rv-polje:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8, 127, 139, .12); }
.rv-polje svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--teal-dark); }
.rv-polje input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 0.8rem; font-weight: 500; }
.rv-polje input::placeholder { color: var(--muted); font-weight: 400; }
.rv-polje input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
.rv-zakljucano { background: #f0f4f6; }
.rv-zakljucano input { color: var(--ink); cursor: default; }
.rv-trazi { padding: 0 1.4rem; }
.rv-trazi svg { width: 1.05rem; height: 1.05rem; }
.rv-rezultati-glava { margin-bottom: 0.8rem; }

.rv-tablica td { vertical-align: middle; }
.rv-grad { display: block; font-size: 0.66rem; color: var(--muted); }
.rv-plus { font-size: 0.6rem; color: #e08a00; margin-left: 0.15rem; font-weight: 700; }
.rv-vrsta { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 0.35rem; background: #e3f1f8; color: #0a5a8a; font-size: 0.7rem; font-weight: 600; }
.rv-vrsta.usputna { background: #eef2f4; color: var(--muted); }
.rv-cijena { font-weight: 600; }

.rv-nema {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.1rem; padding: 0.9rem 1.1rem; background: #eef6f9; border-radius: 0.8rem;
}
.rv-nema strong { font-size: 0.85rem; color: #0a2a44; }
.rv-nema p { font-size: 0.72rem; color: var(--muted); max-width: 30rem; margin-top: 0.15rem; }
.rv-obrub-dugme {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1.3rem; border: 1px solid var(--teal); border-radius: 0.55rem;
  background: #fff; color: var(--teal-dark); font-size: 0.78rem; font-weight: 600; transition: background .2s, color .2s;
}
.rv-obrub-dugme:hover { background: var(--teal); color: #fff; }

.rv-link { color: var(--teal-dark); font-weight: 600; text-decoration: underline; }
.rv-blok-naslov { margin-bottom: 0.6rem !important; }
.rv-lista { display: grid; }
.rv-lista a, .rv-lista button {
  display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.2rem; border: 0; border-top: 1px solid var(--line);
  background: none; font-size: 0.78rem; color: var(--ink); text-align: left; cursor: pointer; transition: color .2s, padding .2s;
}
.rv-lista > :first-child { border-top: 0; }
.rv-lista i { font-style: normal; font-size: 1.2rem; line-height: 1; color: var(--teal-dark); }
.rv-lista a:hover, .rv-lista button:hover { color: var(--teal-dark); padding-left: 0.4rem; }

@media (max-width: 899px) {
  .rv-forma { grid-template-columns: 1fr 1fr; }
  .rv-trazi { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .rv-forma { grid-template-columns: 1fr; padding: 0.8rem; }
  .rv-tablica .rv-sakrij { display: none; }
  .rv-nema { flex-direction: column; align-items: flex-start; }
}

/* ---------- KONTAKT ---------- */
.kt-hero { padding-bottom: 4.5rem; }
.kt-mrvice { display: flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; color: rgba(255, 255, 255, .85); margin-bottom: 0.6rem; }
.kt-mrvice a { display: inline-flex; align-items: center; gap: 0.35rem; }
.kt-mrvice a:hover { color: #fff; text-decoration: underline; }
.kt-mrvice svg { width: 0.9rem; height: 0.9rem; }
.kt-mrvice b { font-weight: 600; color: #fff; }
.kt-hero p { max-width: 24rem; }

.kt-raspored {
  position: relative; z-index: 2; max-width: 80rem; margin: -3rem auto 3rem;
  display: grid; grid-template-columns: 1fr 1.35fr 1.15fr; gap: 1rem; align-items: stretch;
}
.kt-blok { padding: 1.2rem 1.3rem; }
.kt-blok h2 { font-size: 1.1rem; color: #0a2a44; }
.kt-uvod { font-size: 0.74rem !important; margin: 0.2rem 0 1rem; }

.kt-podaci { list-style: none; display: grid; gap: 1.1rem; }
.kt-podaci li { display: flex; gap: 0.85rem; align-items: flex-start; }
.kt-ik { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #e6f2f4; color: var(--teal-dark); display: grid; place-items: center; }
.kt-ik svg { width: 1.1rem; height: 1.1rem; }
.kt-podaci div { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.kt-podaci strong { font-size: 0.8rem; color: #0a2a44; }
.kt-podaci a, .kt-podaci span { font-size: 0.78rem; color: var(--ink); overflow-wrap: anywhere; }
.kt-podaci a:hover { color: var(--teal-dark); text-decoration: underline; }
.kt-podaci small { font-size: 0.7rem; color: var(--muted); }

.kt-forma { display: grid; gap: 0.8rem; }
.kt-red { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.kt-polje { position: relative; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.kt-polje > span { font-size: 0.72rem; font-weight: 500; color: var(--ink); }
.kt-polje i { font-style: normal; color: #d0453a; }
.kt-polje input, .kt-polje select, .kt-polje textarea {
  width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 0.5rem; background: #fff;
  font-size: 0.78rem; outline: 0; transition: border-color .2s, box-shadow .2s;
}
.kt-polje select { appearance: none; cursor: pointer; padding-right: 2rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312333a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 0.75rem center / 0.75rem no-repeat; }
.kt-polje select:invalid { color: var(--muted); }
.kt-polje textarea { resize: vertical; min-height: 6.5rem; padding-bottom: 1.4rem; line-height: 1.5; }
.kt-polje input::placeholder, .kt-polje textarea::placeholder { color: #93a4aa; }
.kt-polje input:focus, .kt-polje select:focus, .kt-polje textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8, 127, 139, .12); }
.kt-polje .neispravno { border-color: #d0453a; }
.kt-brojac { position: absolute; right: 0.7rem; bottom: 0.45rem; font-size: 0.64rem; color: var(--muted); }
.kt-greska, .kt-uspjeh { font-size: 0.74rem; padding: 0.55rem 0.75rem; border-radius: 0.5rem; }
.kt-greska { background: #fdecea; color: #a8322a; }
.kt-uspjeh { background: #e6f5ec; color: #1a7a43; }
.kt-greska[hidden], .kt-uspjeh[hidden] { display: none; }
.kt-posalji { justify-self: start; padding: 0 1.5rem; }
.kt-posalji svg { width: 1rem; height: 1rem; }

.kt-mapa { position: relative; border-radius: 0.7rem; overflow: hidden; aspect-ratio: 4 / 3; background: #e9eef2; }
.kt-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kt-mapa-dno { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.9rem; }
.kt-mapa-dno div { display: flex; flex-direction: column; }
.kt-mapa-dno strong { font-size: 0.78rem; color: #0a2a44; }
.kt-mapa-dno small { font-size: 0.68rem; color: var(--muted); }
.kt-mapa-dno .rv-obrub-dugme { padding: 0.45rem 0.9rem; font-size: 0.72rem; }

@media (max-width: 1100px) {
  .kt-raspored { grid-template-columns: 1fr 1fr; margin-left: 1.5rem; margin-right: 1.5rem; }
  .kt-raspored > :nth-child(2) { grid-column: 2; grid-row: 1 / 3; }
}
@media (max-width: 899px) {
  .kt-raspored { grid-template-columns: minmax(0, 1fr); }
  .kt-raspored > :nth-child(2) { grid-column: auto; grid-row: auto; }
}
@media (max-width: 560px) {
  .kt-raspored { margin-left: 0.75rem; margin-right: 0.75rem; }
  .kt-red { grid-template-columns: 1fr; }
  .kt-posalji { justify-self: stretch; }
}

/* ---------- PRAVNO (modal) ---------- */
body.pravno-otvoren { overflow: hidden; }
.pravno {
  width: min(44rem, calc(100vw - 2rem)); max-height: min(85vh, 46rem); margin: auto; padding: 0;
  border: 0; border-radius: 0.9rem; background: #fff; color: var(--ink);
  box-shadow: 0 1.5rem 4rem rgba(6, 30, 45, .35); overflow: hidden;
}
.pravno[open] { display: flex; flex-direction: column; animation: pravno-ulaz .2s ease-out; }
.pravno::backdrop { background: rgba(6, 30, 45, .55); backdrop-filter: blur(2px); }
@keyframes pravno-ulaz { from { opacity: 0; transform: translateY(0.6rem); } }
.pravno-glava { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.9rem 0 1.4rem; border-bottom: 1px solid var(--line); }
.pravno-tabovi { display: flex; gap: 1.2rem; overflow-x: auto; }
.pravno-tabovi button {
  padding: 0.6rem 0; border: 0; border-bottom: 2px solid transparent; background: none;
  font-size: 0.78rem; font-weight: 600; color: var(--muted); white-space: nowrap; cursor: pointer;
}
.pravno-tabovi button:hover { color: var(--ink); }
.pravno-tabovi button[aria-selected="true"] { color: var(--teal-dark); border-bottom-color: var(--teal); }
.pravno-zatvori { flex: none; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: none; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; }
.pravno-zatvori:hover { background: var(--bg); color: var(--ink); }
.pravno-tijelo { flex: 1; overflow-y: auto; padding: 1.2rem 1.4rem 1rem; }
.pravno-tijelo h2 { font-size: 1.3rem; color: #0a2a44; }
.pravno-datum { font-size: 0.68rem; color: var(--muted); margin: 0.15rem 0 1rem; }
.pravno-tekst h3 { font-size: 0.86rem; color: #0a2a44; margin: 1.1rem 0 0.35rem; }
.pravno-tekst p, .pravno-tekst li { font-size: 0.78rem; line-height: 1.6; color: #3d5258; }
.pravno-tekst p + p { margin-top: 0.5rem; }
.pravno-tekst ul { margin: 0.4rem 0 0.5rem 1.1rem; display: grid; gap: 0.3rem; }
.pravno-tekst a { color: var(--teal-dark); font-weight: 600; text-decoration: underline; }
.pravno-tekst table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 0.7rem; font-size: 0.74rem; }
.pravno-tekst th { text-align: left; background: #eef4f8; padding: 0.45rem 0.6rem; color: #0a2a44; }
.pravno-tekst td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); color: #3d5258; vertical-align: top; }
.pravno-dno { display: flex; justify-content: flex-end; padding: 0.8rem 1.4rem; border-top: 1px solid var(--line); background: #f8fbfc; }
.pravno-ok { padding: 0 1.6rem; }
@media (max-width: 560px) {
  .pravno { width: 100vw; max-width: none; max-height: 92vh; margin: auto 0 0; border-radius: 0.9rem 0.9rem 0 0; }
  .pravno-glava { padding-left: 1rem; }
  .pravno-tijelo { padding: 1rem; }
  .pravno-ok { flex: 1; }
}
.pravno-tijelo:focus { outline: none; }

/* kalendar na Polascima i Redu vožnje */
.pl-datum.otvoreno, .rv-datum.otvoreno { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8, 127, 139, .12); }
.pl-datum:focus-visible, .rv-datum:focus-visible { outline: none; border-color: var(--teal); }
.rv-datum { position: relative; cursor: pointer; }
.rv-datum input { cursor: pointer; pointer-events: none; }
.rv-datum .pl-strelica { width: 0.7rem; height: 0.7rem; color: var(--ink); }
.pl-datum .kalendar, .rv-datum .kalendar { font-weight: 400; }
.kal-podnozje-desno { justify-content: flex-end; }
@media (max-width: 560px) { .pl-datum .kalendar { left: auto; right: 0; } }

/* ---------- INFORMACIJE ---------- */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 4rem; }
.in-skok {
  position: relative; z-index: 2; max-width: 80rem; margin: -3rem auto 1.4rem;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.8rem;
}
.in-skok a {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; padding: 1rem 0.6rem 0.9rem;
  background: #fff; border-radius: 0.8rem; box-shadow: 0 0.5rem 1.6rem rgba(10, 50, 60, .1);
  transition: transform .2s, box-shadow .2s;
}
.in-skok a:hover { transform: translateY(-0.15rem); box-shadow: 0 0.8rem 2rem rgba(10, 50, 60, .15); }
.in-skok img { width: 1.9rem; height: 1.9rem; object-fit: contain; margin-bottom: 0.35rem; }
.in-skok strong { font-size: 0.78rem; color: #0a2a44; }
.in-skok small { font-size: 0.68rem; color: var(--muted); }

.in-raspored { max-width: 80rem; margin: 0 auto 1.6rem; display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1rem; align-items: start; }
.in-glavno { background: #fff; border-radius: 0.9rem; box-shadow: 0 0.2rem 0.9rem rgba(10, 50, 60, .08); padding: 0.4rem 1.3rem; }
.in-tema { display: grid; grid-template-columns: minmax(0, 1fr) 15.5rem; gap: 1.4rem; align-items: center; padding: 1.2rem 0; }
.in-tema + .in-tema { border-top: 1px solid var(--line); }
.in-tema > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0.7rem; }
.in-tekst h2 { font-size: 1.2rem; color: #0a2a44; margin-bottom: 0.35rem; }
.in-tekst p { font-size: 0.8rem; line-height: 1.6; color: var(--muted); }
.in-dugme { display: inline-flex; margin-top: 0.9rem; padding: 0 1.2rem; }
.in-cinjenice { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0.5rem 1.6rem; margin-top: 0.9rem; padding: 0.75rem 1rem; background: #f1f7f9; border-radius: 0.6rem; }
.in-cinjenice dt { font-size: 0.66rem; color: var(--muted); }
.in-cinjenice dd { font-size: 0.8rem; font-weight: 600; color: #0a2a44; }
.in-cinjenice a:hover { color: var(--teal-dark); text-decoration: underline; }

.in-strana { position: sticky; top: 4rem; }
.in-obavjestenja { list-style: none; display: grid; gap: 0.75rem; }
.in-obavjestenja li { position: relative; padding-left: 1.1rem; display: flex; flex-direction: column; line-height: 1.4; }
.in-obavjestenja li::before { content: ""; position: absolute; left: 0; top: 0.35rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #2f7fd0; }
.in-obavjestenja li.upozorenje::before { background: #e08a00; }
.in-obavjestenja li.dodatno::before { background: #1a9a52; }
.in-obavjestenja strong { font-size: 0.76rem; color: #0a2a44; }
.in-obavjestenja small { font-size: 0.68rem; color: var(--muted); }
.in-pomoc h3 { font-size: 0.95rem; color: #0a2a44; }
.in-pomoc p { margin: 0.2rem 0 0.8rem; }

.in-sekcija { max-width: 80rem; margin: 0 auto 1.6rem; padding: 1.3rem 1.4rem; background: #fff; border-radius: 0.9rem; box-shadow: 0 0.2rem 0.9rem rgba(10, 50, 60, .08); }
.in-sekcija h2 { font-size: 1.2rem; color: #0a2a44; }
.in-podnaslov { font-size: 0.78rem; color: var(--muted); margin: 0.15rem 0 1rem; }
.in-pravila { list-style: none; counter-reset: pravilo; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.in-pravila li { counter-increment: pravilo; display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1rem; background: #f4f8fa; border-radius: 0.7rem; }
.in-pravila li::before { content: counter(pravilo, decimal-leading-zero); font-size: 0.8rem; font-weight: 800; color: var(--teal); margin-bottom: 0.2rem; }
.in-pravila strong { font-size: 0.82rem; color: #0a2a44; }
.in-pravila small { font-size: 0.72rem; color: var(--muted); line-height: 1.45; }

.in-pitanja { display: grid; border: 1px solid var(--line); border-radius: 0.7rem; overflow: hidden; }
.in-pitanja details + details { border-top: 1px solid var(--line); }
.in-pitanja summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem;
  font-size: 0.82rem; font-weight: 600; color: #0a2a44; cursor: pointer; list-style: none;
}
.in-pitanja summary::-webkit-details-marker { display: none; }
.in-pitanja summary::after { content: "+"; font-size: 1.2rem; font-weight: 400; color: var(--teal); line-height: 1; transition: transform .2s; }
.in-pitanja details[open] summary::after { transform: rotate(45deg); }
.in-pitanja summary:hover { background: #f4f9fa; }
.in-pitanja details p { padding: 0 1rem 0.9rem; font-size: 0.78rem; line-height: 1.6; color: var(--muted); max-width: 48rem; }
.in-pitanja details a { color: var(--teal-dark); font-weight: 600; text-decoration: underline; }

.in-lokacija { background: #fff; border-radius: 0.9rem; box-shadow: 0 0.2rem 0.9rem rgba(10, 50, 60, .08); padding: 1.3rem 1.4rem !important; margin-bottom: 3rem !important; }

@media (max-width: 1100px) {
  .in-skok { grid-template-columns: repeat(3, 1fr); margin-left: 1.5rem; margin-right: 1.5rem; }
  .in-raspored { grid-template-columns: minmax(0, 1fr); margin-left: 1.5rem; margin-right: 1.5rem; }
  .in-strana { position: static; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
  .in-sekcija { margin-left: 1.5rem; margin-right: 1.5rem; }
  .in-lokacija { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
}
@media (max-width: 899px) {
  .in-tema { grid-template-columns: minmax(0, 1fr); }
  .in-tema > img { order: -1; }
  .in-pravila { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .in-skok { grid-template-columns: 1fr 1fr; margin-left: 0.75rem; margin-right: 0.75rem; }
  .in-raspored, .in-sekcija { margin-left: 0.75rem; margin-right: 0.75rem; }
  .in-lokacija { margin-left: 0.75rem !important; margin-right: 0.75rem !important; }
  .in-glavno { padding: 0.2rem 1rem; }
  .in-sekcija { padding: 1.1rem 1rem; }
  .in-cinjenice { grid-template-columns: 1fr; }
  .in-pravila { grid-template-columns: 1fr; }
}

/* ---------- HEADER (novi dizajn) ---------- */
.header { height: 3.2rem; background: rgba(255, 255, 255, .96); }
.nav { align-self: stretch; gap: 2.1rem; font-size: 0.8rem; font-weight: 600; }
.nav > a, .nav-padajuci > a {
  position: relative; display: flex; align-items: center; gap: 0.35rem; height: 100%; padding: 0;
  border: 0; color: #0a2a44; transition: color .2s;
}
.nav > a::after, .nav-padajuci > a::after {
  content: ""; position: absolute; left: -0.5rem; right: -0.5rem; bottom: 0; height: 0.2rem;
  border-radius: 0.2rem 0.2rem 0 0; background: var(--teal); transform: scaleX(0); transition: transform .2s;
}
.nav > a:hover, .nav-padajuci > a:hover, .nav a.aktivan { color: var(--teal); border-color: transparent; }
.nav > a:hover::after, .nav-padajuci:hover > a::after { transform: scaleX(.5); opacity: .5; }
.nav a.aktivan::after { transform: scaleX(1); opacity: 1; }
.nav-chev { width: 0.7rem; height: 0.7rem; transition: transform .2s; }

.nav-padajuci { position: relative; display: flex; }
.podmeni {
  position: absolute; top: 100%; left: -0.9rem; z-index: 60; min-width: 12rem; padding: 0.4rem;
  background: #fff; border: 1px solid var(--line); border-radius: 0.7rem; box-shadow: 0 0.8rem 2rem rgba(10, 50, 60, .14);
  display: grid; opacity: 0; visibility: hidden; transform: translateY(0.3rem); transition: opacity .15s, transform .15s, visibility .15s;
}
.podmeni a { padding: 0.5rem 0.7rem; border-radius: 0.45rem; font-size: 0.76rem; font-weight: 500; color: var(--ink); white-space: nowrap; border: 0; transition: background .2s, color .2s; }
.podmeni a:hover { background: #eef6f7; color: var(--teal-dark); }
.nav-padajuci:hover .podmeni, .nav-padajuci:focus-within .podmeni { opacity: 1; visibility: visible; transform: none; }
.nav-padajuci:hover .nav-chev, .nav-padajuci:focus-within .nav-chev { transform: rotate(180deg); }

.header-right { gap: 1.1rem; }
.lang { gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: #0a2a44; }
.header-razdjelnik { width: 1px; height: 1.6rem; background: var(--line); }
.header-right .btn-sm { padding: 0.62rem 1.7rem; font-size: 0.8rem; border-radius: 0.6rem; }

.meni-dugme { display: none; order: 3; width: 2.3rem; height: 2.3rem; padding: 0 0.55rem; border: 1px solid var(--line); border-radius: 0.5rem; background: #fff; cursor: pointer; flex-direction: column; justify-content: center; gap: 0.25rem; }
.meni-dugme span { display: block; height: 2px; border-radius: 2px; background: #0a2a44; transition: transform .2s, opacity .2s; }
.meni-otvoren .meni-dugme span:nth-child(1) { transform: translateY(calc(0.25rem + 2px)) rotate(45deg); }
.meni-otvoren .meni-dugme span:nth-child(2) { opacity: 0; }
.meni-otvoren .meni-dugme span:nth-child(3) { transform: translateY(calc(-0.25rem - 2px)) rotate(-45deg); }

@media (max-width: 1100px) { .nav { gap: 1.4rem; } }
@media (max-width: 899px) {
  .meni-dugme { display: flex; }
  .header.meni-otvoren .nav {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    padding: 0.5rem 1rem 1rem; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 1rem 2rem rgba(10, 50, 60, .12);
    max-height: calc(100vh - 3.2rem); overflow-y: auto;
  }
  .meni-otvoren .nav > a, .meni-otvoren .nav-padajuci > a { height: auto; padding: 0.75rem 0.5rem; font-size: 0.95rem; border-radius: 0.5rem; }
  .meni-otvoren .nav > a::after, .meni-otvoren .nav-padajuci > a::after { left: 0; right: auto; top: 0.6rem; bottom: 0.6rem; width: 0.2rem; height: auto; border-radius: 0 0.2rem 0.2rem 0; }
  .meni-otvoren .nav a.aktivan { background: #eef6f7; }
  .meni-otvoren .nav-padajuci { flex-direction: column; }
  .meni-otvoren .nav-chev { display: none; }
  .meni-otvoren .podmeni { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0.3rem 1rem; min-width: 0; grid-template-columns: 1fr 1fr; }
  .meni-otvoren .podmeni a { font-size: 0.82rem; color: var(--muted); padding: 0.45rem 0.5rem; }
}
@media (max-width: 560px) {
  .header-razdjelnik { display: none; }
  .meni-otvoren .podmeni { grid-template-columns: 1fr; }
}
.nav a:focus-visible, .lang:focus-visible, .meni-dugme:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 0.3rem; }

/* ---------- MOBILNA APLIKACIJA ---------- */
.donja-nav { display: none; }

@media (max-width: 899px) {
  /* iOS ne zumira polja kad je font bar 16px */
  input[type="text"], input[type="email"], input[type="search"], select, textarea { font-size: 16px !important; }

  body { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); -webkit-tap-highlight-color: rgba(8, 127, 139, .12); }
  .header { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }

  /* donja navigacija */
  .donja-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 0.35rem 0.4rem calc(0.35rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(0.6rem);
    border-top: 1px solid var(--line); box-shadow: 0 -0.3rem 1.2rem rgba(10, 50, 60, .08);
  }
  .donja-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.35rem 0 0.25rem;
    border-radius: 0.6rem; font-size: 0.68rem; font-weight: 600; color: #6f818a;
  }
  .donja-nav img, .donja-nav svg { width: 1.35rem; height: 1.35rem; object-fit: contain; }
  .donja-nav img { filter: grayscale(1) opacity(.55); }
  .donja-nav a.aktivan { color: var(--teal-dark); background: #e6f3f4; }
  .donja-nav a.aktivan img { filter: none; }
  .donja-nav a:active { background: #e6f3f4; }

  /* naslovi sekcija s linkom: link ide ispod naslova */
  .dest-glava { flex-direction: column; align-items: flex-start; gap: 0.2rem; }

  /* UNA TRANSPORT baner: tekst gore, autobus dolje */
  .una-baner { flex-direction: column; align-items: stretch; min-height: 0; }
  .una-baner::before {
    top: auto; width: 100%; height: 10rem; background-position: center 80%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%); mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
  }
  .una-tekst { max-width: none; padding-bottom: 9rem; }
  .una-logo img { height: 2.6rem; }

  /* tablica polazaka na početnoj */
  .pol-tab { white-space: nowrap; }
  .status { white-space: nowrap; }

  /* footer: kraći */
  .footer-glavni { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; }
  .footer-glavni > .f-kolona:last-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  /* usluge ispod pretrage: dvije kolone */
  .features { grid-template-columns: 1fr 1fr; gap: 0.6rem; padding: 0 0.75rem; margin-top: 1.2rem; }
  .feature { flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 0.75rem !important; background: #fff; border-radius: 0.7rem; box-shadow: 0 0.15rem 0.6rem rgba(10, 50, 60, .06); }
  .feature strong { white-space: normal; }
  .feature:last-child { grid-column: 1 / -1; }

  /* destinacije i usluge: vodoravno listanje prstom */
  .destinacije, .usluge-stanica { padding: 0 !important; }
  .destinacije .dest-glava, .usluge-stanica .dest-glava { padding: 0 1rem; }
  .dest-mreza, .usl-mreza {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.8rem; padding: 0.2rem 1rem 0.8rem; scrollbar-width: none;
  }
  .dest-mreza::-webkit-scrollbar, .usl-mreza::-webkit-scrollbar { display: none; }
  .dest-kartica, .usl-kartica { scroll-snap-align: center; }
  .una-baner { margin: 0 1rem 1.3rem; }
  .polasci-info { padding: 0 1rem; }

  /* O nama: sadržaji u dvije kolone */
  .on-sadrzaji { grid-template-columns: 1fr 1fr; }
  .on-sadrzaji .on-sadrzaj { flex-direction: column; align-items: flex-start; }

  .footer-glavni { padding-left: 1rem; padding-right: 1rem; }
  .f-kontakt span, .f-kontakt a { overflow-wrap: anywhere; }
  .footer-donji { padding-bottom: 1rem; }
}
@media (min-width: 561px) and (max-width: 899px) {
  .donja-nav { grid-template-columns: repeat(5, minmax(0, 7rem)); justify-content: center; }
  .search-form .field-datum { grid-column: 1 / -1; }
}

/* red vožnje: popis relacija */
.rv-relacije { margin-bottom: 3rem; }
.rv-relacije-mreza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.rv-relacije-mreza a { display: flex; flex-direction: column; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 0.6rem; transition: border-color .2s, background .2s; }
.rv-relacije-mreza a:hover { border-color: var(--teal); background: #f4f9fa; }
.rv-relacije-mreza strong { font-size: 0.8rem; color: #0a2a44; }
.rv-relacije-mreza small { font-size: 0.7rem; color: var(--muted); }
@media (max-width: 1100px) { .rv-relacije { margin-left: 1.5rem; margin-right: 1.5rem; } .rv-relacije-mreza { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .rv-relacije { margin-left: 0.75rem; margin-right: 0.75rem; } .rv-relacije-mreza { grid-template-columns: 1fr 1fr; } }

/* izbor jezika */
.jezik-omot { position: relative; }
.jezik-izbor {
  position: absolute; top: calc(100% + 0.6rem); right: 0; z-index: 60; min-width: 10rem; padding: 0.35rem;
  background: #fff; border: 1px solid var(--line); border-radius: 0.7rem; box-shadow: 0 0.8rem 2rem rgba(10, 50, 60, .14); display: grid;
}
.jezik-izbor[hidden] { display: none; }
.jezik-izbor a { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.65rem; border-radius: 0.45rem; font-size: 0.78rem; color: var(--ink); }
.jezik-izbor a b { width: 1.6rem; font-size: 0.7rem; color: var(--muted); }
.jezik-izbor a:hover { background: #eef6f7; color: var(--teal-dark); }
.jezik-izbor a[aria-current] { color: var(--teal-dark); font-weight: 600; }
.jezik-izbor a[aria-current] b { color: var(--teal); }
.lang[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang svg { transition: transform .2s; }

/* ---------- ISTO ZAGLAVLJE NA SVIM PODSTRANICAMA ---------- */
.pl-hero { min-height: 16rem; padding: 1.9rem 1.5rem 5.5rem max(1.5rem, calc(50% - 40rem)); }
.pl-hero h1 { font-size: 2.4rem; font-weight: 800; line-height: 1.1; margin-bottom: 0.6rem; }
.pl-hero p { max-width: 30rem; font-size: 0.88rem; line-height: 1.55; }
.pl-raspored, .kt-raspored, .in-skok { margin-top: -4rem; }
.pl-hero:has(+ .on-uvod) { min-height: 13rem; padding-bottom: 2.4rem; }
.pl-hero + .on-uvod { padding-top: 2rem; }
@media (max-width: 899px) {
  .pl-hero { min-height: 0; padding: 1.5rem 1.25rem 5rem; }
  .pl-hero h1 { font-size: 1.9rem; }
}

/* logo u headeru: znak + naziv */
.logo { display: flex; align-items: center; gap: 0.5rem; }
.logo img { height: 2.15rem; width: auto; }
.logo-tekst { display: flex; flex-direction: column; line-height: 1; }
.logo-tekst b { font-size: 1.08rem; font-weight: 800; letter-spacing: 0.01em; color: #CA1E25; }
.logo-tekst small { align-self: center; margin-top: 0.12rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; color: #006CF0; }
@media (max-width: 899px) {
  .logo img { height: 2.3rem; }
  .logo-tekst b { font-size: 1.15rem; }
  .logo-tekst small { font-size: 0.7rem; }
}

/* ---------- uski ekrani: ništa ne smije proširiti stranicu ---------- */
html, body { overflow-x: clip; }
@media (max-width: 560px) {
  .pol-tabovi { align-items: stretch; }
  .pol-tabs { width: 100%; }
  .pol-tab { flex: 1; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; padding: 0.55rem 0.6rem; }
  .tabs .tab { white-space: normal; line-height: 1.2; }
}
@media (max-width: 400px) {
  .header { gap: 0.6rem; }
  .header-right { gap: 0.5rem; }
  .logo { gap: 0.35rem; }
  .logo img { height: 1.9rem; }
  .logo-tekst b { font-size: 0.98rem; }
  .logo-tekst small { font-size: 0.62rem; }
  .lang { font-size: 0.75rem; gap: 0.25rem; }
  .meni-dugme { width: 2.1rem; height: 2.1rem; }
  .donja-nav a { font-size: 0.62rem; }
  .tab { padding: 0.7rem 0.8rem; font-size: 0.75rem; }
  .tab:last-child { padding-left: 1.8rem; padding-right: 1rem; }
}
@media (max-width: 1100px) { .polasci-info { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .pol-kartica { padding: 0.9rem 0.8rem; }
  .pol-tab { min-width: 0; }
  .pol-tablica th, .pol-tablica td { padding-left: 0.45rem; padding-right: 0.45rem; }
  .pol-tablica td:nth-child(2) { white-space: normal; }
}

/* ---------- STVARNI RED VOŽNJE ---------- */
.pol-naslov { font-size: 1.05rem; color: #0a3a44; }
.status.planirano::before { background: #9aabb2; }
.pl-odr { line-height: 1.3; }
.pl-preko { display: block; font-size: 0.66rem; color: var(--muted); white-space: normal; max-width: 16rem; }
.rv-rel { white-space: normal; font-weight: 500; color: var(--ink); max-width: 22rem; line-height: 1.35; }

/* vrsta linije */
.rv-vrsta { white-space: nowrap; }
.rv-vrsta.v-medjunarodna { background: #e8ecfb; color: #3a4ba8; }
.rv-vrsta.v-federalna { background: #e3f1f8; color: #0a5a8a; }
.rv-vrsta.v-medjuentitetska { background: #f3ebfa; color: #6b3d9a; }
.rv-vrsta.v-kantonalna { background: #e3f4ee; color: #187055; }
.rv-vrsta.v-opcinska { background: #fdf1e2; color: #94580c; }

.rv-vrste { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: -0.2rem 0 0.9rem; }
.rv-vrste button {
  padding: 0.38rem 0.85rem; border: 1px solid var(--line); border-radius: 2rem; background: #fff;
  font-size: 0.72rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.rv-vrste button:hover { border-color: var(--teal); color: var(--teal-dark); }
.rv-vrste button.aktivan { background: var(--teal); border-color: var(--teal); color: #fff; }

.rv-grupa { font-size: 0.85rem; color: #0a2a44; margin: 1.1rem 0 0.55rem; }
.rv-grupa:first-of-type { margin-top: 0.2rem; }
.rv-relacije-mreza small { font-variant-numeric: tabular-nums; }

/* stanice bez vremena (red vožnje ne navodi vrijeme dolaska) */
.pl-stanice-bez-vremena li { grid-template-columns: 3rem 1fr; }

@media (max-width: 560px) {
  .pl-tablica:not(.rv-tablica) .pl-vrsta-kol, .pl-tablica:not(.rv-tablica) th:nth-child(4) { display: none; }
  .rv-relacije-mreza { grid-template-columns: 1fr; }
  .rv-vrste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -0.2rem; padding: 0 0.2rem 0.2rem; }
  .rv-vrste::-webkit-scrollbar { display: none; }
  .rv-vrste button { flex: none; }
}

.pl-tablica td.rv-rel, .pl-tablica td.pl-odr { white-space: normal; }
.pl-tablica td.rv-rel { min-width: 15rem; }

/* ---------- PADAJUĆA LISTA MJESTA (odabir.js) ---------- */
.odabir-omot { position: relative; }
.odabir-unos {
  padding-right: 1.4rem !important; cursor: text;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312333a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center / 0.75rem no-repeat !important;
}
.odabir-otvoren .odabir-unos { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087F8B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E") !important; }
.odabir-unos::placeholder { color: var(--muted); font-weight: 500; opacity: 1; }
.odabir-otvoren { border-color: var(--teal) !important; box-shadow: 0 0 0 3px rgba(8, 127, 139, .12); }
.odabir-lista {
  position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; z-index: 40;
  max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0.35rem; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: 0.7rem; box-shadow: 0 0.8rem 2rem rgba(10, 50, 60, .16);
  cursor: default; text-align: left;
}
.odabir-lista[hidden] { display: none; }
.odabir-lista li {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.65rem; border-radius: 0.45rem;
  font-size: 0.8rem; font-weight: 500; color: var(--ink); cursor: pointer;
}
.odabir-lista li::before {
  content: ""; flex: none; width: 0.9rem; height: 0.9rem; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23087F8B'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.odabir-lista li:hover, .odabir-lista li.aktivan { background: #eef6f7; color: var(--teal-dark); }
.odabir-lista li.aktivan::before, .odabir-lista li:hover::before { opacity: 1; }
.odabir-lista li.izabrano { font-weight: 700; color: var(--teal-dark); }
.odabir-lista li.izabrano::after { content: "✓"; margin-left: auto; color: var(--teal); font-weight: 700; }
.odabir-lista mark { background: none; color: var(--teal-dark); font-weight: 700; }
.odabir-lista .odabir-prazno { color: var(--muted); cursor: default; }
.odabir-lista .odabir-prazno::before { display: none; }
.odabir-lista .odabir-prazno:hover { background: none; color: var(--muted); }
/* na početnoj lista ide preko cijelog polja, ne samo ispod teksta */
.search-form .field.odabir-omot .odabir-lista { left: -1px; right: -1px; }
@media (max-width: 899px) { .odabir-lista li { font-size: 0.95rem; padding: 0.65rem 0.7rem; } }

.pl-smjer { margin: -0.3rem 0 0.9rem; }

.rv-sljedeci { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; }
.rv-sljedeci strong { color: #0a2a44; font-size: 0.85rem; }
.rv-sljedeci .pl-dugme { padding: 0 1.3rem; margin-top: 0.2rem; }

/* UNA TRANSPORT baner: manji, uredniji logo */
.una-logo { gap: 0.7rem; margin-bottom: 0.9rem; }
.una-logo img { height: 2.3rem; max-width: 100%; object-fit: contain; object-position: left center; }
.una-logo small { font-size: 0.68rem; }
.una-tekst { padding: 2rem 2.4rem; }
@media (max-width: 560px) { .una-logo img { height: 1.9rem; } }

/* ---------- GORNJA TRAKA (kontakt iznad menija) ---------- */
.gornja-traka {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.38rem max(1.25rem, calc((100vw - 80rem) / 2));
  background: #062540; color: rgba(255, 255, 255, .85); font-size: 0.7rem;
}
.gt-lijevo { display: flex; align-items: center; gap: 1.6rem; }
.gornja-traka a, .gornja-traka span { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.gornja-traka svg { width: 0.8rem; height: 0.8rem; color: var(--aqua); flex: none; }
.gornja-traka a { transition: color .2s; }
.gornja-traka a:hover { color: #fff; }
@media (max-width: 899px) {
  .gornja-traka { padding: 0.4rem 1rem; font-size: 0.75rem; }
  .gt-adresa, .gt-mail { display: none !important; }
  .gt-lijevo { width: 100%; justify-content: space-between; gap: 1rem; }
}

/* width/height na slikama daju samo omjer – stvarnu veličinu određuje CSS */
img { max-width: 100%; height: auto; }

.gr-404 { margin-top: -4rem; position: relative; z-index: 2; margin-bottom: 3rem; }
@media (max-width: 1100px) { .gr-404 { margin-left: 1.5rem; margin-right: 1.5rem; } }
@media (max-width: 560px) { .gr-404 { margin-left: 0.75rem; margin-right: 0.75rem; } }