#sp-header {
  background: transparent;
}

.point-header {
  margin-top: -100px !important;
}

.sp-megamenu-parent > li > a {
	
	font-size: 1rem;
	color: #fff !important;
	padding: 0 10px;
}

.sp-megamenu-parent > li > a:hover {
	
	color: #b7b8bf !important;
}

.sp-megamenu-parent > li.active > a {

color: #fff !important;
}

#sp-header {
  height: 100px;
}

/* 1) Osiguraj da su kolone u headeru stvarno poravnate po visini */
#sp-header .row.align-items-center {
  align-items: center !important;
}

/* 2) Poravnaj sadržaj unutar logo/menu/desno */
#sp-header #sp-logo .sp-column,
#sp-header #sp-menu .sp-column,
#sp-header #menu-right {
  display: flex;
  align-items: center;
}

/* 3) Da menu wrapper ne gura gore/dolje */
#sp-header #sp-menu .menu-with-offcanvas {
  align-items: center;
}

/* 4) Ključ: “header-right” modul (tvoj SPPB modul) često ima default margin/padding */
#sp-header .header-modules,
#sp-header .header-modules .sp-module,
#sp-header .header-modules .sp-module-content,
#sp-header .header-modules .mod-sppagebuilder,
#sp-header .header-modules .sp-page-builder,
#sp-header .header-modules .page-content,
#sp-header .header-modules section.sppb-section {
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal;
}

/* 5) Ako ti "test" i dalje sjedi malo niže/više: */
#sp-header .header-modules p {
  margin: 0 !important;
}

#sp-header.full-header {
  padding-left: 45px;
  padding-right: 45px;
  display: flex;
  align-items: center;
}

.point-botuni-slide {
  margin-top: -121px !important;
  border-top: 1px solid #bbb;
}

/* =========================================================
   NOVOSTI slider (SP Page Builder Articles)
   Wrapper: .point-novosti
   - BIJELA pozadina iza svega (bez sivih nijansi)
   - scrollbar skriven
   - blagi shadow (bez "sive trake")
   - SVG cut L/R + hover + CTA
   ========================================================= */

/* 1) Pozadina bloka */
.point-novosti{
  background: #fff !important;
}

/* Ujednači pozadinu i na unutarnjim wrapperima */
.point-novosti .sppb-addon,
.point-novosti .sppb-addon-content,
.point-novosti .sppb-addon-articles,
.point-novosti .sppb-row{
  background-color: #fff !important;
  background-image: none !important;
}

/* 2) Horizontalni slider */
.point-novosti .sppb-row{
  display: flex;
  flex-wrap: nowrap !important;
  gap: 28px;

  overflow-x: auto;
  overflow-y: hidden;

  padding: 26px 18px 28px;
  margin: 0 !important;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none; /* Firefox */
}
.point-novosti .sppb-row::-webkit-scrollbar{
  height: 0;
  display: none;         /* Chrome/Safari/Edge */
}

/* 3) Kartice */
.point-novosti .sppb-addon-article-layout{
  flex: 0 0 auto !important;
  width: 400px;
  max-width: 78vw;
  scroll-snap-align: start;
}

.point-novosti .sppb-addon-article{
  position: relative;
  height: 420px;
  border-radius: 18px;
  overflow: hidden;

  /* nema pozadine koja bi se vidjela oko slike */
  background: transparent !important;



  transform: translateZ(0);
}

/* Klik preko cijele kartice */
.point-novosti .sppb-addon-article a.sppb-article-img-wrap{
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
}

/* Slika */
.point-novosti .sppb-addon-article img.sppb-img-responsive{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform .45s ease;
}
.point-novosti .sppb-addon-article:hover img.sppb-img-responsive{
  transform: scale(1.10);
}

/* 4) Cinematic overlay (blaže da ne izgleda sivo oko bloka) */
.point-novosti .sppb-addon-article::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 2;
  pointer-events:none;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(0,0,0,.06), transparent 60%),
    linear-gradient(to top, rgba(0,0,0,.74) 0%, rgba(0,0,0,.22) 45%, rgba(0,0,0,.03) 100%);
}

/* 5) SVG rezovi */
.point-novosti .sppb-addon-article::after{
  content:"";
  position:absolute;
  top: 75px;
  left: -16px;
  width: 152px;
  height: 41px;
  z-index: 4;
  pointer-events:none;
  background: url("/socrat/images/resent-video-left.svg") no-repeat left center / contain;
  transition: top .4s ease;
}

.point-novosti .sppb-addon-article .novosti-cut-right{
  position:absolute;
  top: 75px;
  right: -16px;
  width: 152px;
  height: 41px;
  z-index: 4;
  pointer-events:none;
  background: url("/socrat/images/resent-video-right.svg") no-repeat right center / contain;
  transition: top .4s ease;
}

/* Hover: spusti rezove */
.point-novosti .sppb-addon-article:hover::after,
.point-novosti .sppb-addon-article:hover .novosti-cut-right{
  top: 48%;
}

/* 6) Tekst layer */
.point-novosti .sppb-article-info-wrap{
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 22px 28px;
  color: #fff;
}

.point-novosti .sppb-article-info-wrap h3{
  margin: 0;
  text-align: center;
  line-height: 1.05;
  letter-spacing: .02em;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 24px;
}

.point-novosti .sppb-article-info-wrap h3 a{
  color: #fff !important;
  text-decoration: none !important;
}

/* Datum */
.point-novosti .sppb-article-meta{
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 7;
}

.point-novosti .sppb-meta-date{
  display: inline-block;
  font-size: 14px;
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(6px);
}

/* CTA */
.point-novosti .sppb-article-info-wrap::after{ content:""; }

.point-novosti .sppb-addon-article:hover .sppb-article-info-wrap::after {
  content: "Pročitaj više";
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%,-50%);
  z-index: 8;
  padding: 10px 12px;

  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.25);

  background: rgba(0,0,0,.40);

  backdrop-filter: blur(8px);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Responsive */
@media (max-width: 768px){
  .point-novosti .sppb-addon-article-layout{ width: 320px; }
  .point-novosti .sppb-addon-article{ height: 380px; }
  .point-novosti .sppb-article-info-wrap h3{ font-size: 26px; }
}

/* CTA mora propustiti klik na glavni link ispod */
.point-novosti .sppb-article-info-wrap::after{
  pointer-events: none;
}

/* Daj do znanja da je klikabilno */
.point-novosti .sppb-addon-article{
  cursor: pointer;
}

/* Klik treba proći kroz info layer do glavnog linka */
.point-novosti .sppb-article-info-wrap{
  pointer-events: none;
}

/* Ali naslov (link) neka ostane klikabilan */
.point-novosti .sppb-article-info-wrap h3 a{
  pointer-events: auto;
  position: relative;
  z-index: 9;
}

/* (Opcionalno) ako želiš da i datum bude klikabilan */
.point-novosti .sppb-article-meta,
.point-novosti .sppb-article-meta *{
  pointer-events: auto;
}

/* CTA pseudo-element ionako ne može biti pravi link,
   ali ovako sigurno neće blokirati klik */
.point-novosti .sppb-article-info-wrap::after{
  pointer-events: none;
}



.point-novosti .sppb-article-meta > time {
  display: inline-block;
  margin: 5px;
  color: #fff !important;
  font-size: 11px;
  font-weight: bold;
}


.point-novosti .sppb-addon-title {
	
	text-align: center;
  line-height: 1.05;
  letter-spacing: .02em;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 36px; 
  color: #363636;
  display: flex;
  justify-content: center;
}

/* =========================================================
   POINT-NOVOSTI – MOBILE: pokaži dio sljedeće kartice + swipe hint
   (override SPPB col-12 / flex-basis:100% problem)
   ========================================================= */
@media (max-width: 768px){

  /* scroll container */
  .point-novosti .sppb-row{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;

    padding: 18px 10px 50px 16px !important; /* bottom za hint */
    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 16px;
  }

  /* KLJUČ: SP Page Builder često stavi col-12 na 100% -> ovo ga ruši */
  .point-novosti .sppb-row > .sppb-addon-article-layout{
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    width: 84vw !important;       /* vidi se dio sljedeće */
    max-width: 84vw !important;
    min-width: 84vw !important;

    /* makni grid/column ograničenja */
    max-inline-size: none !important;
  }

  /* ako SP doda još max-width pravila na col klase */
  .point-novosti .sppb-row > [class*="sppb-col-"]{
    max-width: none !important;
  }

  .point-novosti .sppb-addon-article{
    height: 360px !important;
  }

  .point-novosti .sppb-addon-title{
    font-size: 28px !important;
  }

  /* ---- Swipe hint: fade rub DESNO (jasno "ima još") ---- */
  .point-novosti{
    position: relative;
  }
  .point-novosti::after{
    content:"";
    position:absolute;
    right: 0;
    bottom: 0;
    top: 0;
    width: 64px;
    pointer-events:none;
    z-index: 50;
    background: linear-gradient(to left, #fff 0%, rgba(255,255,255,0) 100%);
  }

  /* ---- Swipe hint: tekst + strelica dolje u sredini ---- */
  .point-novosti::before{
    content:"Povuci →";
    position:absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 60;
    pointer-events:none;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(0,0,0,.55);

    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 6px 18px rgba(0,0,0,.10);

    animation: pnSwipe 1.4s ease-in-out infinite;
  }

  @keyframes pnSwipe{
    0%,100%{ transform: translateX(-50%) translateY(0); opacity: .75; }
    50%{ transform: translateX(-50%) translateY(-3px); opacity: 1; }
  }
}

/* ultra uski mobiteli: još mrvu uža kartica da se peek uvijek vidi */
@media (max-width: 420px){
  .point-novosti .sppb-row > .sppb-addon-article-layout{
    width: 88vw !important;
    max-width: 88vw !important;
    min-width: 88vw !important;
  }
}

@media (max-width: 768px){

  /* Firefox */
  .point-novosti .sppb-row{
    scrollbar-width: thin;
    scrollbar-color: #888 #e5e5e5;   /* thumb / track */
  }

  /* Chrome / Safari / Edge */
  .point-novosti .sppb-row::-webkit-scrollbar{
    height: 10px;                    /* visina cijelog scrollbara */
  }

  .point-novosti .sppb-row::-webkit-scrollbar-track{
    background: #e5e5e5;             /* OVO je "linija iza" */
    border-radius: 999px;
  }

  .point-novosti .sppb-row::-webkit-scrollbar-thumb{
    background: #777;                /* pomični dio */
    border-radius: 999px;
  }

  .point-novosti .sppb-row::-webkit-scrollbar-thumb:hover{
    background: #555;
  }
}



.point-header{
  position: relative;
  overflow: visible;
}

.o-projektu .sppb-addon-title {
  display: inline-block;
  text-transform: uppercase;
  font-weight: 800;
  padding-bottom: 30px;
}

.o-projektu .sppb-addon-content  {
  font-size: 0.9rem;
}

.point-btn1{
  width: 150px;
  background: white;
  text-align: center;
  padding: 15px;
  border-radius: 30px;
  margin-top: 40px;
}

.point-btn1 a{
	
	color: black;
	font-weight: bold;
}

/* =========================================================
   O PROJEKTU + BROSURE – desktop "viri", mobile slider
   ========================================================= */

/* --- SEKCIJA: dopusti virenje --- */
.o-projektu{
  position: relative;
  overflow: visible !important;
}

/* SP Page Builder ponekad reže */
.o-projektu .sppb-row-container,
.o-projektu .sppb-row,
.o-projektu .sppb-column,
.o-projektu .sppb-column-addons{
  overflow: visible !important;
}

/* =========================================================
   DESKTOP (default): brosure vire dolje i 2x2 grid
   ========================================================= */

.o-projektu .brosure1{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -150px;              /* koliko viri dolje */
  z-index: 20;
}

/* da sljedeća sekcija ne upadne u brosure 
.o-projektu{
  padding-bottom: 220px !important;  
}
*/

/* GRID 2x2 */
.brosure{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  padding: 0 18px;   /* bez velikog paddinga jer je absolute */
}

/* kartica */
.brosure .brosura-item{
  position: relative;
  isolation: isolate;
  height: 300px;
  margin: 0 !important;

  border-radius: 18px;
  overflow: hidden;

  background: transparent;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);

  cursor: pointer;
}

/* slika */
.brosure .brosura-item img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;

  transform: scale(1.03);
  transition: transform .45s ease;
}
.brosure .brosura-item:hover img{
  transform: scale(1.10);
}

/* overlay */
.brosure .brosura-item::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  pointer-events:none;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(0,0,0,.06), transparent 60%),
    linear-gradient(to top, rgba(0,0,0,.74) 0%, rgba(0,0,0,.22) 45%, rgba(0,0,0,.03) 100%);
}

/* naslov */
.brosure .brosura-title{
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;

  z-index: 2;
  display: block;

  color: #fff;
  text-align: center;

  font-size: 22px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;

  text-shadow: 0 6px 22px rgba(0,0,0,.55);
  pointer-events: none;
}

/* CTA */
.brosure .brosura-item::after{
  content:"Pročitaj više";
  position:absolute;
  left:50%;
  top:52%;
  transform: translate(-50%,-50%) translateY(10px);
  z-index: 3;

  opacity: 0;
  pointer-events:none;

  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(8px);

  color:#fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing:.02em;
  text-transform: uppercase;

  transition: opacity .25s ease, transform .35s ease;
}
.brosure .brosura-item:hover::after{
  opacity: 1;
  transform: translate(-50%,-50%) translateY(0);
}

/* =========================================================
   TABLET + MOBILE: ugasi absolute + napravi horizontal scroll
   ========================================================= */

@media (max-width: 991px){

  /* ugasi virenje da se layout ne raspadne */
  .o-projektu .brosure1{
    position: relative !important;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 5;
  }

  /* vrati normalan padding na sekciji */
  .o-projektu{
    padding-bottom: 40px !important;
  }

  /* pretvori u slider */
  .brosure{
    display: flex !important;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;

    padding: 18px 18px 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none; /* Firefox */
  }
  .brosure::-webkit-scrollbar{
    display: none;         /* Chrome/Safari/Edge */
  }

  /* kartice manje, prilagođene */
  .brosure .brosura-item{
    flex: 0 0 auto;
    width: 280px;
    height: 260px;
    scroll-snap-align: start;
  }

  .brosure .brosura-title{
    font-size: 18px;
    bottom: 18px;
    left: 16px;
    right: 16px;
  }
}

@media (max-width: 576px){
  .brosure .brosura-item{
    width: 240px;
    height: 240px;
  }
  .brosure .brosura-item::after{
    font-size: 10px;
    padding: 9px 10px;
  }
}


/* PROFILI */

.blogkreativni-laboratoriji .article-body .fields-container,
.blogprofili .article-list .fields-container {
	
	display: none;
}

.blogkreativni-laboratoriji .article-intro-image img,
.blogprofili .article-list .article-intro-image img {
  display: block;
  max-width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 18px !important;
  width: 100%;
}
.article-list .article .article-header h2,
.blogkreativni-laboratoriji .article-header h2,
.blogprofili .article-list .article-header h2 {
font-weight: bold;
  text-align: left;
  font-size: 1.2rem;
}
.article-list .article .article-header h2::after,
.blogprofili .article-list .article-header h2::after {
  content: "";
  display: block;
  width: 70px;
  height: 6px;
  border-radius: 999px;
  background: #3fa2db;
  margin-top: 14px;
}


.blogkreativni-laboratoriji .category-name{
  position: absolute;
  top: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: bold;
  margin-top: 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: auto;              /* ključ */
  white-space: nowrap;      /* da ne lomi u 2 reda */
}

.article-details.profili .category-name {
  position: relative;
  top: 20px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: bold;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  white-space: nowrap;
  color: white;
}



.category-name.cat-umjetnik-ca {
	
	background: #1b2138;
}

.cat-kreativni-poduzetnik-obrtnik {
	
	background: #ff930b;
	
	
}

.cat-udruge {
	
	background: #8bc9ae;
	
}



.blogprofili .article-list .category-name {
  position: absolute;
  top: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: bold;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  white-space: nowrap;
}

.blogkreativni-laboratoriji .article-list .category-name a,
.blogprofili .article-list .category-name a {
	
	color: white;
}
.blogprofili .article-list .article .article-intro-image,
.blogkreativni-laboratoriji .article-list .article .article-intro-image,
.blogkreativni-laboratoriji .article-list .article,
.blogprofili .article-list .article {
	
	border: 0;
}

/* =========================
   BASE
========================= */
.article-details.profili{
  --left-col: 320px;
  --gap: 24px;
  --radius-lg: 16px;
  --radius-md: 14px;
  --border: #e6e8ee;
  --border-soft: #edf0f5;
  --shadow-lg: 0 6px 18px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.04);
}

/* =========================
   TOP LAYOUT (2 STUPCA)
========================= */
.article-details.profili .profile-top{
  display:grid;
  grid-template-columns: var(--left-col) minmax(0, 1fr);
  gap: var(--gap);
  align-items:stretch; /* KLJUČ */
  margin-bottom:18px;
}

/* =========================
   HEADER (DESNO IZNAD FIELDSA)
========================= */
.article-details.profili .profile-top-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;

  margin: 0;
  padding: 8px 0;

  margin-left: calc(var(--left-col) + var(--gap));
  width: calc(100% - (var(--left-col) + var(--gap)));
}
.article-details.profili .profile-info-center{
  display:flex;
  justify-content:center;
}

.article-details.profili .article-info{
  opacity:.8;
  font-size:14px;
}

.article-details.profili .profile-right-header{
  text-align:left; 
  margin-bottom:50px;
}

.article-details.profili .profile-right-header .article-header h1{
  margin:0;
  line-height:1.15;
  font-weight: 800;
}

.article-details.profili .profile-right-header .article-header h1::after {
  content: "";
  display: block;
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: #3fa2db;
  margin-top: 14px;
}

.article-details.profili .profile-right-header .article-info{
  display:flex;
  justify-content:flex-start;
  margin-top:6px;
}


/* =========================
   LEFT SIDE (SLIKA – POPUNJAVA VISINU)
========================= */
.article-details.profili .profile-avatar-card{
  display:flex;
  flex-direction:column;
  height:100%;          /* KLJUČ */
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
}

.article-details.profili .profile-avatar{
  flex:1;               /* KLJUČ */
  width:100%;
  overflow:hidden;
  border-radius: var(--radius-lg);
}

.article-details.profili .profile-avatar img{
  width:100%;
  height:100%;          /* KLJUČ */
  object-fit:cover;
  display:block;
  border-radius: var(--radius-lg);
}

/* =========================
   RIGHT SIDE (FIELDS)
========================= */
.article-details.profili .profile-details-card{
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
}

.article-details.profili .profile-details-head{
  display:none;
}

.article-details.profili .profile-details-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:18px;
}

.article-details.profili .detail-row{
  padding:16px;
  border:1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background:#fff;
  box-shadow: var(--shadow-md);
}

.article-details.profili .detail-label{
  font-size:12px;
  opacity:.7;
  margin-bottom:8px;
}

.article-details.profili .detail-value{
  font-weight:600;
  line-height:1.35;
}

/* =========================
   SOCIAL
========================= */
.article-details.profili .profile-social-card{
  padding:16px 18px;
  margin-bottom:18px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* =========================
   BELOW
========================= */
.article-details.profili .profile-below-block{
  padding:16px 18px;
  margin-bottom:14px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.article-details.profili .profile-social-icons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.article-details.profili .social-icon{
  width:44px;
  height:44px;
  border-radius:9999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:1px solid #e6e8ee;
  background:#fff;
}

.article-details.profili .social-icon i{
  font-size:18px;
}

/* boje “kao prave” */
.article-details.profili .social-icon.facebook{ background:#1877F2; border-color:#1877F2; color:#fff; }
.article-details.profili .social-icon.youtube{ background:#FF0000; border-color:#FF0000; color:#fff; }
.article-details.profili .social-icon.linkedin{ background:#0A66C2; border-color:#0A66C2; color:#fff; }
.article-details.profili .social-icon.x{ background:#000; border-color:#000; color:#fff; }
.article-details.profili .social-icon.tiktok{ background:#111; border-color:#111; color:#fff; }
.article-details.profili .social-icon.web{ background:#2F80ED; border-color:#2F80ED; color:#fff; }

/* Instagram “gradient” */
.article-details.profili .social-icon.instagram{
  border:none;
  color:#fff;
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}



/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px){
  .article-details.profili .profile-top{
    grid-template-columns: 1fr;
  }

  .article-details.profili .profile-top-header{
    margin-left:0;
    width:100%;
  }

  .article-details.profili .profile-avatar-card{
    height:auto;
  }

  .article-details.profili .profile-avatar{
    flex:none;
  }

  .article-details.profili .profile-avatar img{
    height:auto;
  }
}


.profili .tf-gallery-wrapper .gallery-items .item img {
  width: var(--image-width, auto);
  border-radius: 16px;

}

/* wrapper videa */
.article-details.profili .profile-below-block .tf-video-embed-wrapper{
  width:100%;
  max-width: 640px;
  margin: 0 auto;
  border-radius: 12px;
  overflow:hidden;
  background:transparent;
}

/* iframe */
.article-details.profili .profile-below-block .tf-video-embed-wrapper iframe{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  display:block;
  border:0;
  border-radius:12px;
}

.article-details.profili .profile-below-block .tf-video{
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
}



.profile-below-block .below-label {
	
	font-weight: bold;
	padding-bottom: 15px;
}


/* PROFILI */

/* kreativni laboratoriji */

/* =========================
   KREATIVNI LABORATORIJI – BASE
========================= */
.article-details.kreativni-laboratoriji{
  --left-col: 360px;
  --gap: 24px;
  --radius-lg: 16px;
  --radius-md: 14px;
  --border: #e6e8ee;
  --border-soft: #edf0f5;
  --shadow-lg: 0 6px 18px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.04);
}

/* =========================
   TOP LAYOUT (2 STUPCA)
========================= */
.article-details.kreativni-laboratoriji .kl-top{
  display:grid;
  grid-template-columns: var(--left-col) minmax(0, 1fr);
  gap: var(--gap);
  align-items:stretch;
  margin-bottom:18px;
}

/* =========================
   LEFT SIDE (COVER/SLIKA)
========================= */
.article-details.kreativni-laboratoriji .kl-avatar-card{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
}

.article-details.kreativni-laboratoriji .kl-avatar{
  flex:1;
  width:100%;
  overflow:hidden;
  border-radius: var(--radius-lg);
}

.article-details.kreativni-laboratoriji .kl-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius: var(--radius-lg);
}

/* =========================
   RIGHT HEADER (NASLOV + KATEGORIJA + LEAD)
========================= */
.article-details.kreativni-laboratoriji .kl-details-card{
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
}

.article-details.kreativni-laboratoriji .kl-right-header{
  text-align:left;
  margin-bottom:32px;
}

.article-details.kreativni-laboratoriji .kl-right-header .article-header h1{
  margin:0;
  line-height:1.15;
  font-weight: 800;
}

.article-details.kreativni-laboratoriji .kl-right-header .article-header h1::after {
  content: "";
  display: block;
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: #3fa2db;
  margin-top: 14px;
}

.article-details.kreativni-laboratoriji .kl-right-header .article-info{
  display:flex;
  justify-content:flex-start;
  margin-top:8px;
}

/* bedž kategorije (kao u profilu) */

.article-details.kreativni-laboratoriji .article-info .category-name{

  background: #ff930b;
  color: #fff;
  padding: 6px 12px;
  border-radius: 30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.article-details.kreativni-laboratoriji .article-info > span {
position: relative;
  top: 20px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: bold;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  white-space: nowrap;
  color: white;
  font-size: 1rem;
}




/* ako ti category-name dolazi kao link */
.article-details.kreativni-laboratoriji .article-info .category-name a{
  color:#fff !important;
  text-decoration:none !important;
}

/* lead (kratki sažetak) ako ga koristiš */
.article-details.kreativni-laboratoriji .kl-lead{
  max-width: 720px;
  margin: 14px auto 0;
  font-size: 15px;
  line-height: 1.55;
  opacity: .85;
}

/* =========================
   GRID FIELDOVI (DESNO)
========================= */
.article-details.kreativni-laboratoriji .kl-details-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:18px;
}

.article-details.kreativni-laboratoriji .detail-row{
  padding:16px;
  border:1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background:#fff;
  box-shadow: var(--shadow-md);
}

/* da social kartica “sjedne” lijepo */
.article-details.kreativni-laboratoriji .detail-row.detail-social{
  grid-column: 1 / -1;
}

/* label + value */
.blogkreativni-laboratoriji .category-desc .fields-container .field-label,
.article-details.kreativni-laboratoriji .detail-label{
  font-size: 12px;
  margin-bottom: 8px;
  font-weight: 800;
  color: #3fa2db;
}

.article-details.kreativni-laboratoriji .detail-value{
  font-weight:600;
  line-height:1.35;
  word-break: break-word;
}

/* =========================
   SOCIAL IKONE
========================= */
.article-details.kreativni-laboratoriji .kl-social-icons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.article-details.kreativni-laboratoriji .social-icon{
  width:44px;
  height:44px;
  border-radius:9999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:1px solid #e6e8ee;
  background:#fff;
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}

.article-details.kreativni-laboratoriji .social-icon:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.article-details.kreativni-laboratoriji .social-icon i{
  font-size:18px;
}

/* boje “kao prave” */
.article-details.kreativni-laboratoriji .social-icon.facebook{ background:#1877F2; border-color:#1877F2; color:#fff; }
.article-details.kreativni-laboratoriji .social-icon.youtube{ background:#FF0000; border-color:#FF0000; color:#fff; }
.article-details.kreativni-laboratoriji .social-icon.linkedin{ background:#0A66C2; border-color:#0A66C2; color:#fff; }
.article-details.kreativni-laboratoriji .social-icon.x{ background:#000; border-color:#000; color:#fff; }
.article-details.kreativni-laboratoriji .social-icon.tiktok{ background:#111; border-color:#111; color:#fff; }
.article-details.kreativni-laboratoriji .social-icon.web{ background:#2F80ED; border-color:#2F80ED; color:#fff; }

/* Instagram “gradient” */
.article-details.kreativni-laboratoriji .social-icon.instagram{
  border:none;
  color:#fff;
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* =========================
   BELOW BLOKOVI (BIO/GALERIJA/VIDEO/PROMO)
========================= */
.article-details.kreativni-laboratoriji .kl-below-block{
  padding:16px 18px;
  margin-bottom:14px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* naslov bloka */
.article-details.kreativni-laboratoriji .kl-below-block .below-label{
  font-weight:700;
  padding-bottom: 12px;
}

/* sadržaj bloka */
.article-details.kreativni-laboratoriji .kl-below-block .below-value{
  line-height: 1.65;
}

/* =========================
   GALERIJA (TF/NRF widget) – da bude uredna
========================= */
.article-details.kreativni-laboratoriji .tf-gallery-wrapper .gallery-items{
  gap: 12px;
}

.article-details.kreativni-laboratoriji .tf-gallery-wrapper .gallery-items .item img{
  width: var(--image-width, auto);
  border-radius: 16px;
  display:block;
}

/* =========================
   VIDEO (TF video embed)
========================= */
.article-details.kreativni-laboratoriji .kl-below-block .tf-video-embed-wrapper{
  width:100%;
  max-width: 640px;
  margin: 0 auto;
  border-radius: 12px;
  overflow:hidden;
  background:transparent;
}

.article-details.kreativni-laboratoriji .kl-below-block .tf-video-embed-wrapper iframe{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  display:block;
  border:0;
  border-radius:12px;
}

.article-details.kreativni-laboratoriji .kl-below-block .tf-video{
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
}

/* =========================
   DEFAULT JOOMLA STVARI – sakrij ako ti se provuku
   (samo unutar kreativni-laboratoriji)
========================= */
.article-details.kreativni-laboratoriji figure.item-image,
.article-details.kreativni-laboratoriji ul.fields-container{
  display:none !important;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px){
  .article-details.kreativni-laboratoriji .kl-top{
    grid-template-columns: 1fr;
  }

  .article-details.kreativni-laboratoriji .kl-avatar-card{
    height:auto;
  }

  .article-details.kreativni-laboratoriji .kl-avatar{
    flex:none;
  }

  .article-details.kreativni-laboratoriji .kl-avatar img{
    height:auto;
  }

  .article-details.kreativni-laboratoriji .kl-details-grid{
    grid-template-columns: 1fr;
  }

  .article-details.kreativni-laboratoriji .detail-row.detail-social{
    grid-column: auto;
  }
}



/* kreativni laboratoriji */

/* =========================
   FILTER BAR (CLEAN)
========================= */
.socrat-filterbar{
  margin: 0 0 24px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* sakrij naslov "Filtriraj" */
.socrat-filterbar .filter-title{
  display:none !important;
}

/* row */
.socrat-filterbar .filter-row{
  display:flex;
  gap: 18px;
  align-items:flex-end;
  flex-wrap:wrap;
}

/* control wrapper */
.socrat-filterbar .filter-control{
  display:flex;
  flex-direction:column;
  gap: 7px;
  min-width: 210px;
}

/* label */
.socrat-filterbar .filter-label{
  font-size: 12px;
  opacity: .75;
  padding-left: 2px;
}

/* select + input */
.socrat-filterbar .filter-select,
.socrat-filterbar .filter-input{
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid #e6e8ee;
  background: #fff;
  font-size: 15px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.socrat-filterbar .filter-select:hover,
.socrat-filterbar .filter-input:hover{
  border-color:#d8dbe3;
}

.socrat-filterbar .filter-select:focus,
.socrat-filterbar .filter-input:focus{
  border-color: #ff930b;
  box-shadow: 0 0 0 3px rgba(255,147,11,.18);
}

/* search grows */
.socrat-filterbar .filter-search{
  flex: 1;
  min-width: 280px;
}

/* reset button */
.socrat-filterbar .filter-clear{
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid #e6e8ee;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}

.socrat-filterbar .filter-clear:hover{
  background: #ff930b;
  border-color: #ff930b;
  color:#fff;
  box-shadow: 0 6px 14px rgba(255,147,11,.25);
}

/* =========================
   META (Prikazano: X / Y) - CENTAR, JEDAN RED, BEZ POZADINE
========================= */
.socrat-filterbar .filter-meta{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  align-items:center;

  font-size: 13px;
  font-weight: 600;
  color: rgba(0,0,0,.65);

  white-space: nowrap; /* KLJUČNO: sve u jednom redu */
}


/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px){
  .socrat-filterbar{
    padding: 16px;
  }

  .socrat-filterbar .filter-row{
    gap: 12px;
  }

  .socrat-filterbar .filter-control{
    min-width: 100%;
  }

  .socrat-filterbar .filter-search{
    min-width: 100%;
  }

  .socrat-filterbar .filter-clear{
    width: 100%;
    border-radius: 14px;
  }

  .socrat-filterbar .filter-meta::before{
    margin: 12px 0 10px;
  }
}


/* =========================
   KREATIVNI LABORATORIJI - HEADER + OPIS
========================= */
.blogprofili > h1,
.blogkreativni-laboratoriji > h1{
  margin: 0 0 14px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* wrapper opisa */
.blogprofili .category-desc,
.blogkreativni-laboratoriji .category-desc{
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

/* tekst opisa - kao “lead” */
.blogprofili .category-desc p,
.blogkreativni-laboratoriji .category-desc p{
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.75;
  color: rgba(0,0,0,.78);
}

/* lagani “accent” ispod naslova */
.blogkreativni-laboratoriji > h1::after{
  content:"";
  display:block;
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: #3fa2db;
  margin-top: 14px;
}

/* malo zraka prije filtera */
.blogkreativni-laboratoriji .socrat-filterbar{
  margin-top: 18px;
}

/* RESPONSIVE */
@media (max-width: 900px){
  .blogkreativni-laboratoriji .category-desc p{
    font-size: 16px;
    line-height: 1.7;
  }
}


@media (max-width: 991px){
	
	#sp-header #sp-menu {
		
		display: none;
	}
}

/* =========================================
   ISTRAŽITE RUTE – FINAL (DESKTOP GRID + PERFECT RESPONSIVE)
   Radi i kao SP Page Builder SECTION i kao MODULE
   + CTA/uvod nikad “uzastopno”
   ========================================= */

/* SCOPE: sekcija na stranici ILI wrapper modula */
:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute){
  overflow: hidden;
}

/* =========================
   LAYOUT RESET (SPPB/Bootstrap override)
   ========================= */

/* ubij bootstrap width/flex ograničenja na columnima */
:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
.sppb-row > [class*="sppb-row-column"]{
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* container centar samo u ovom bloku */
:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute) .sppb-row-container{
  width: 100% !important;
  max-width: 1230px !important;   /* po potrebi: 1200–1600 */
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================
   DESKTOP GRID (4 kolone)
   ========================= */

:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute) .sppb-row{
  display: grid !important;
  align-items: center;
  justify-content: center;
  gap: 22px;

  grid-template-columns:
    clamp(70px, 10vw, 170px)        /* ghost L */
    clamp(180px, 22vw, 340px)       /* glavna slika */
    minmax(360px, 620px)            /* kartica */
    clamp(90px, 12vw, 240px);       /* ghost R */
}

/* =========================
   SLIKE (desktop)
   ========================= */

:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
.rute-slika1,
:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
.rute-slika2,
:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
.rute-slika3{
  border-radius: 28px;
  overflow: hidden;
}

:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
.rute-slika1 img,
:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
.rute-slika2 img,
:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
.rute-slika3 img{
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 28px;
}

/* ghost efekti */
:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute) .rute-slika1{
  opacity: .22;
  filter: saturate(.9);
}
:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute) .rute-slika3{
  opacity: .32;
  filter: saturate(.9);
}

/* =========================
   KARTICA (desktop equal-height)
   ========================= */

:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute) .rute-text{
  height: 520px;
  display: flex;
  width: 100%;
  min-width: 360px !important;
}

:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
.rute-text .sppb-addon-content{
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  background: #fff;
  border-radius: 32px;
  padding: 34px;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);

  color: #111;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.01em;

  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;

  /* KLJUČ: uvod + CTA vertikalno (ne “uzastopno”) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;

  /* ako tekst pređe visinu, scroll unutar */
  overflow: auto;
}

/* CTA uvijek u svoj red i na dno */
:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
.rute-text .rute-cta{
  width: 100%;
  margin-top: auto;
}

/* (opcionalno) finiji scrollbar */
:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
.rute-text .sppb-addon-content::-webkit-scrollbar{
  width: 6px;
}
:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
.rute-text .sppb-addon-content::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 10px;
}

/* =========================
   TIPOGRAFIJA (sigurno, da h2/p ne divljaju u EN)
   ========================= */
:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
.rute-uvod{
  width: 100%;
  max-width: 100%;
  margin: 0;
}

:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
.rute-uvod h2{
  margin: 0;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #111;
}

:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
.rute-uvod p{
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #444;
}

/* =========================
   CTA BUTTON – FINAL FIX
   ========================= */

:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
.rute-text .rute-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 16px 34px;
  border-radius: 999px;

  background: #8cccaf;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;

  transition: all .25s ease;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);

  white-space: normal;
  line-height: 1.2;
}

:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
.rute-text .rute-btn:hover{
  background: #3ea0da;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0,0,0,.24);
}

/* =========================
   NASLOV + TEKST FIX
   ========================= */

:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
.rute-uvod h2{
  text-transform: uppercase;        /* vrati uppercase */
  letter-spacing: 0.04em;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 22px 0;               /* razmak ispod naslova */
}

:is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
.rute-uvod p{
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}



/* =========================
   TABLET <=1200px (stara logika: sakrij slika2 kolonu)
   ghost L | kartica | ghost R
   ========================= */
@media (max-width: 1200px){

  /* sakrij cijelu drugu SPPB kolonu (slika2) */
  :is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
  .sppb-row > [class*="sppb-row-column"]:nth-child(2){
    display: none !important;
  }

  /* 3 kolone */
  :is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute) .sppb-row{
    grid-template-columns:
      clamp(70px, 12vw, 170px)
      minmax(320px, 1fr)
      clamp(90px, 12vw, 200px);
    gap: 18px;
  }

  /* prisili raspored (jer su sad 1,3,4) */
  :is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
  .sppb-row > [class*="sppb-row-column"]:nth-child(1){
    grid-column: 1;
    grid-row: 1;
  }
  :is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
  .sppb-row > [class*="sppb-row-column"]:nth-child(3){
    grid-column: 2;
    grid-row: 1;
  }
  :is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
  .sppb-row > [class*="sppb-row-column"]:nth-child(4){
    grid-column: 3;
    grid-row: 1;
  }

  /* kartica na tabletu auto visina */
  :is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute) .rute-text{
    height: auto;
    min-width: 0 !important;
    display: block;
  }

  :is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
  .rute-text .sppb-addon-content{
    height: auto;
    overflow: visible;
    font-size: 20px;
    padding: 28px;
  }

  /* slike malo niže */
  :is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
  .rute-slika1 img,
  :is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
  .rute-slika2 img,
  :is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
  .rute-slika3 img{
    height: 480px;
  }
}

/* =========================
   MOB <=768px (stara logika: makni ghostove, ostaje kartica)
   ========================= */
@media (max-width: 768px){

  /* makni ghost L i ghost R */
  :is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
  .sppb-row > [class*="sppb-row-column"]:nth-child(1),
  :is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
  .sppb-row > [class*="sppb-row-column"]:nth-child(4){
    display: none !important;
  }

  /* jedna kolona */
  :is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute) .sppb-row{
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
  }

  /* container padding na mobu */
  :is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute) .sppb-row-container{
    max-width: 560px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* kartica fluidna */
  :is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute) .rute-text{
    height: auto;
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  :is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
  .rute-text .sppb-addon-content{
    height: auto;
    display: block;
    overflow: visible;
    padding: 22px;
    border-radius: 26px;
    box-shadow: 0 14px 30px rgba(0,0,0,.10);
  }

  /* button centar i full širina */
  :is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
  .rute-text .rute-cta{
    text-align: center;
  }

  :is(.sppb-section.istražite-rute, .mod-sppagebuilder.istražite-rute)
  .rute-text .rute-btn{
    width: 100%;
    max-width: 320px;
  }
}






.lang-wrapper{
  position: relative;
  display: inline-block;
}

/* PROZIRNI PILL (glass) */
.lang-trigger{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 10px 18px;
  border-radius: 999px;

  /* PROZIRNO, a ne skroz bijelo */
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: #fff;
  cursor:pointer;
  user-select:none;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.lang-ico{
  font-size: 18px;
  line-height: 1;
}

.lang-current{
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .04em;
  min-width: 22px;
  text-align:center;
  font-weight: 600;
}

/* strelica */
.lang-arrow{
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255,255,255,0.85);
  border-bottom: 2px solid rgba(255,255,255,0.85);
  transform: rotate(45deg);
  transition: transform .22s ease;
  margin-left: 2px;
}

/* DROPDOWN */
.lang-dropdown{
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 8px;                 /* vizualni razmak */

  min-width: 100px;
  padding: 6px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);

  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
}

/* 👇 HOVER "MOST" da ne pukne hover dok ideš mišem prema dolje */
.lang-wrapper::after{
  content:"";
  position:absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 14px;      /* mora biti >= margin-top */
  /* transparentno, samo hvata hover */
}

/* items */
.lang-dropdown a{
  display:block;
  padding: 10px 14px;
  border-radius: 14px;
  color: #fff;
  text-decoration:none;
  font-size: 14px;
  white-space: nowrap;
}

.lang-dropdown a:hover{
  background: rgba(255,255,255,0.10);
}

/* OPEN (hover radi stabilno zbog mosta) */
.lang-wrapper:hover .lang-dropdown{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.lang-wrapper:hover .lang-arrow{
  transform: rotate(225deg);
}


.header-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

/* ICON-ONLY BUTTON */
.header-icon{
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  line-height: 1;
  color: #fff;            /* BIJELE IKONICE */
}

/* SVG ikonice */
.header-icon svg{
  width: 22px;            /* MANJE */
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* hover – suptilno */
.header-icon:hover{
  opacity: .75;
}

#sp-main-body {
  padding: 0px 0;
}

.com-content-category-blog > h1::after,
.blog > h1::after,
.blogprofili > h1::after {
  content: "";
  display: block;
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: #3fa2db;
  margin-top: 14px;
}

/* =========================================================
   HERO + H1 NA SLICI (STALNO ISTI LOOK NA SVIM REZOLUCIJAMA)
   - H1 uvijek lijevo (kao desktop), nikad centar
   - razmak ispod H1 uvijek isti (title-gap)
   ========================================================= */

/* --- TVOJ ROOT (NE DIRAM) --- */
:root{
  --hero-height: 320px;
  --hero-pull: 100px;
  --overlay: .45;

  --title-up: 95px;     /* kako si stavio */
  --title-gap: 22px;     /* kako si stavio */
}

/* HERO modul */
#sp-title .sp-module.point-header1{
  position: relative;
  margin-top: calc(-1 * var(--hero-pull));
  z-index: 1;
}

#sp-title .sp-module.point-header1 img{
  display: block;
  width: 100%;
  height: var(--hero-height) !important;
  object-fit: cover;
}

/* overlay */
#sp-title .sp-module.point-header1::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,var(--overlay));
  pointer-events:none;
  z-index:2;
}

/* pusti da ništa ne reže elemente */
.com-content-category-blog,
.com-content-category-blog .container,
.com-content-category-blog .container-fluid{
  position: relative;
  z-index: 5;
  overflow: visible !important;
}

/* 🔥 KLJUČ: NEMA CENTRIRANJA NA WRAPPERU (mob često ubije) */
.com-content-category-blog{
  text-align: left !important;
}

/* H1 label (uvijek lijevo, nikad centar) */

.com-content-category-blog > h1{
  display: inline-block;
  background: #fff !important;
  padding: 18px 26px !important;
  border-radius: 18px;
  box-shadow: none !important;

  position: relative;
  transform: translateY(calc(-1 * var(--title-up))) !important;

  /* NEMA auto centriranja */
  margin: 0 !important;
  left: 0 !important;
  right: auto !important;

  /* makni bilo kakav max-width koji ga zna centrirat */
  max-width: none !important;
  width: auto !important;

  font-weight: 800;
  line-height: 1.05;
  z-index: 10;
  font-size: clamp(34px, 4vw, 56px);
}

/* razmak do teksta ispod – stalno isti */
.com-content-category-blog > h1 + .category-desc{
  margin-top: calc(-1 * var(--title-up) + var(--title-gap)) !important;
}

/* ako nekad nema category-desc, povuci prvi sljedeći blok */
.com-content-category-blog > h1 + .socrat-filterbar,
.com-content-category-blog > h1 + .article-list{
  margin-top: calc(-1 * var(--title-up) + var(--title-gap)) !important;
}

/* =========================================================
   MOBILE FIX: template zna stavit centriranje na h1 ili page-header
   pa ga ovdje pregazimo još jače (da bude kao desktop)
   ========================================================= */
@media (max-width: 991px){
  .com-content-category-blog,
  .com-content-category-blog .page-header,
  .com-content-category-blog header{
    text-align: left !important;
  }

  .com-content-category-blog > h1{
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    width: auto !important;
  }
}

/* =========================================================
   SOCRAT FOOTER (SP Page Builder) – .point-footer
   - CTA centriran + velika rupa ispod CTA (ostaje)
   - 4 kolone u redu s velikom rupom između 2 i 3 (2+2)
========================================================= */

#sp-footer{
  background:#0b0b0b;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.06);
}

#sp-footer a{
  color: rgba(255,255,255,.82);
  text-decoration:none;
}
#sp-footer a:hover{ color:#fff; }

#sp-footer .container,
#sp-footer .container-inner{
  width:100%;
}

/* sekcija */
#sp-footer .point-footer{

  padding: 80px 0;
}

/* širina sadržaja */
#sp-footer .point-footer .sppb-row-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 22px;
}

/* =========================================================
   CTA (gore) – tvoj addon: .footer-uvod
========================================================= */
#sp-footer .point-footer .footer-uvod{
  text-align:center;
}

#sp-footer .point-footer .footer-uvod .sppb-addon-title{
  margin:0;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:.2px;
}

#sp-footer .point-footer .footer-uvod .sppb-addon-content{
  text-align:center;
}

/* CTA “gumb” (trenutno je <p>) */
#sp-footer .point-footer .footer-uvod .sppb-addon-content p{
  margin: 22px auto 0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 650;
}
#sp-footer .point-footer .footer-uvod .sppb-addon-content p::after{
  content:"↗";
  font-size: 14px;
  opacity:.95;
}

/* =========================================================
   VELIKA RUPA ispod CTA – (kao na slici)
   SP ti već ima margin-bottom:150px inline na wrapperu.
   Ovdje samo osiguramo da ne “pojede” netko drugi.
========================================================= */
#sp-footer #sppb-addon-wrapper-72fc854c-609a-45f2-93bc-fee106bc1b72{
  margin-bottom: 100px !important; /* NAMJERNO ostaje rupa */
}

/* =========================================================
   DONJI DIO – 4 kolone + velika rupa između 2 i 3
   Kolone su:
   1) logo (wrap-id-6d4f...)
   2) kontakt (wrap-id-f6de...)
   3) linkovi (wrap-id-cd1a...)
   4) linkovi (wrap-id-0392...)
========================================================= */

/* obavezno ugasi gap da 4x kolone ne pucaju */
#sp-footer .point-footer .sppb-row{
  gap: 0 !important;
  column-gap: 0 !important;
  align-items: flex-start;
}

/* Desktop: 4 kolone u jednom redu */
/* Desktop: 4 kolone u jednom redu + velika rupa između 2 i 3 */
@media (min-width: 992px){

  /* koliko velika je srednja rupa (između 2 i 3) */
  #sp-footer .point-footer{
    --mid-gap: clamp(70px, 8vw, 190px);
  }

  /* širina svake kolone = (100% - srednja rupa) / 4  */
  #sp-footer .point-footer #column-wrap-id-6d4fb4c9-2f37-4e78-9e49-121a3f94f0e8,
  #sp-footer .point-footer #column-wrap-id-f6de2f02-d0f2-45e6-a5d6-c31843a80e94,
  #sp-footer .point-footer #column-wrap-id-cd1aee68-f8f2-4888-9cee-643529e020ae,
  #sp-footer .point-footer #column-wrap-id-039246d1-7e4d-4817-9630-978e8a6660f6{
    flex: 0 0 calc((100% - var(--mid-gap)) / 4) !important;
    max-width: calc((100% - var(--mid-gap)) / 4) !important;
    box-sizing: border-box;
  }

  /* velika rupa počinje na 3. koloni */
  #sp-footer .point-footer #column-wrap-id-cd1aee68-f8f2-4888-9cee-643529e020ae{
    margin-left: var(--mid-gap) !important;
  }

  /* mali razmak unutar kolona (NE utječe na širinu) */
  #sp-footer .point-footer .sppb-row > .sppb-row-column > .sppb-column{
    padding-left: 22px;
    padding-right: 22px;
    box-sizing: border-box;
  }
}


/* Tablet: i dalje 2+2 feeling, ali malo manja rupa */
@media (min-width: 768px) and (max-width: 991.98px){
  #sp-footer .point-footer .sppb-row > .sppb-row-column{
    padding-left: 18px;
    padding-right: 18px;
    box-sizing: border-box;
  }
  #sp-footer .point-footer #column-wrap-id-cd1aee68-f8f2-4888-9cee-643529e020ae{
    margin-left: clamp(40px, 6vw, 120px) !important;
  }
}

/* Naslovi u footeru (npr. “Kontakt”) */
#sp-footer .point-footer h3.sppb-addon-title{
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  font-weight: 800;
}

/* Tekst i paragrafi */
#sp-footer .point-footer p{
  margin: 0 0 8px;
  color: rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.65;
}

/* Liste linkova */
#sp-footer .point-footer ul{
  margin:0;
  padding:0;
  list-style:none;
}
#sp-footer .point-footer ul li{
  margin: 0 0 10px;
}
#sp-footer .point-footer ul li a{
  display:inline-block;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
}
#sp-footer .point-footer ul li a:hover{
  color:#fff;
}

/* Logo blok (tvoja slika je već 100px u inline CSS-u) */
#sp-footer .point-footer .sppb-addon-single-image{
  margin-bottom: 14px;
}

/* “Projekt SOCRAT” tekst ispod loga */
#sp-footer #sppb-addon-355ece90-e83c-403e-8e0d-84c3a2fd3e0f p{
  margin-top: 2px;
  color: rgba(255,255,255,.78);
  font-weight: 650;
  letter-spacing: .02em;
}

/* =========================================================
   MOBILE – sve u centar, jedna ispod druge
========================================================= */
@media (max-width: 767.98px){
  #sp-footer .point-footer{
    padding: 60px 0;
  }

  /* na mobu nema “srednje rupe” */
  #sp-footer .point-footer #column-wrap-id-cd1aee68-f8f2-4888-9cee-643529e020ae{
    margin-left: 0 !important;
  }

  #sp-footer .point-footer .sppb-row{
    text-align:center;
  }

  /* centriraj logo */
  #sp-footer .point-footer .sppb-addon-single-image-container{
    display:flex;
    justify-content:center;
  }

  /* malo više zraka između blokova */
  #sp-footer .point-footer .sppb-row > .sppb-row-column{
    padding: 14px 0;
  }
}




.blognovosti .createdby,
.blognovosti .category-name,
.blognovosti .article-introtext {
	
	display: none; 
}

.blognovosti .article-info > span + span::before {
	
	display: none; 
}

.blognovosti .published{
  position: absolute;
  top: 20px;
  background: #3fa2db;
  padding: 5px;
    padding-right: 5px;
    padding-left: 5px;
  border-radius: 16px;
  color: white;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: bold;
}

.blognovosti img{
  border-radius: 18px !important;
  max-width: 100%;
  height: 300px;
  object-fit: cover;
}
.novosti .article-details .article-header h1,
.blognovosti .article-list .article .article-header h2 {
	
	font-weight: 800;
  text-align: left;
  font-size: 1.3rem;
  margin-bottom: 30px;
}

.novosti .article-details .article-header h1 {
	
	font-size: 1.8rem;
}

.blognovosti .article-list .article .article-header h2::after{
  content: "";
  display: block;
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: #3fa2db;
  margin-top: 14px;
}

.article-list .article{
	
	border: 0;
}

.novosti .article-details .article-header h1::after {
  content: "";
  display: block;
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: #3fa2db;
  margin-top: 14px;
}

.novosti .article-details {
  position: relative;
  width: 900px;
  margin: auto;
}

.article-details.novosti {
	
	display: flex;
	flex-direction: column;
}

.article-details.novosti .article-full-image {
	
	order: 2;
}

.article-details.novosti .article-info {
	
	order: 2;
}

.article-details.novosti .article-header {
	
	order: 1;
}

.article-details.novosti div[itemprop="articleBody"] {
	
	order: 4;
}

.article-details.novosti .article-info > span + span::before {
	
	display: none;
}

.article-details.novosti .article-info {
	
	display: flex;
  justify-content: center;
}


.article-details.novosti .cat-novosti{
  background: #3fa2db;
  color: white;
  padding: 5px;
    padding-right: 5px;
    padding-left: 5px;
  border-radius: 16px;
  padding-left: 10px;
  padding-right: 10px;
}

.article-details.novosti .cat-novosti a{
  color: white;
  font-weight: bold;
}

.article-details.novosti .published{
  background: #8ac8ad;
  color: white;
  padding: 5px;
    padding-right: 5px;
    padding-left: 5px;
  padding-right: 5px;
  padding-left: 5px;
  border-radius: 16px;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: bold;
  margin-left: 10px;
}

.article-details.novosti div[itemprop="articleBody"] {
  text-align: justify;
  font-size: 0.9rem;
  padding-bottom: 30px;
}

.article-details.novosti .article-full-image img {
  display: inline-block;
  border-radius: 30px;
}

.sadrzaj .article-header > h1 {
  display: inline-block;
  background: #fff !important;
  padding: 18px 26px !important;
  border-radius: 18px;
  box-shadow: none !important;
  position: relative;
  transform: translateY(calc(-1 * var(--title-up))) !important;
  margin: 0 !important;
  left: 0 !important;
  right: auto !important;
  max-width: none !important;
  width: auto !important;
  font-weight: 800;
  line-height: 1.05;
  z-index: 10;
}

.sadrzaj .article-header > h1::after {
  content: "";
  display: block;
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: #3fa2db;
  margin-top: 14px;
}

.sadrzaj .article-info {
	
	display: none;
}

.sadrzaj div[itemprop="articleBody"] { 

	margin-top: -70px;
	padding-bottom: 50px;
}

#sp-footer .container-inner {
	
	padding-bottom: 0px !important;
}

.point-copyright {
	
	border-top: 1px solid #666;
}

.point-footer-cookie {
  display: flex;
  justify-content: flex-end;
  text-transform: uppercase;
}
.point-footer-cookie p {
padding-right: 20px;
  padding-left: 20px;
}

@media (max-width: 575px) {
  .header-has-modules .container-inner > .row {
    flex-wrap: nowrap !important;
  }
}


.pocetna-socrat-h1 h1 {
	
	font-weight: 800;
  font-size: 4rem;
}

.promo {
  color: white;
  font-size: 1.5rem;
  font-weight: 800;
}

/* =========================================================
   FOOTER REVEAL + BIJELA POZADINA ZA CIJELI SADRŽAJ (rupe/margine)
========================================================= */

:root{
  --reveal-h: 660px;     /* desktop: visina footera */
  --reveal-h-m: 820px;   /* mobile: visina footera */
}

/* 1) Footer je iza */
#sp-footer{
  position: fixed;
  left:0; right:0; bottom:0;
  z-index: 0;
}

/* 2) Daj skrol prostora do kraja */
body{
  padding-bottom: var(--reveal-h);
}

/* 3) OVO JE KLJUČ:
      Parent koji nosi SVE blokove mora biti bijel i iznad footera,
      da se footer NE vidi kroz margine/praznine. */
#sp-body,
#sp-wrapper,
#sp-main-body,
#sp-page-body{
  position: relative;
  z-index: 2;
  background: #fff !important;     /* <-- ovo rješava “vidim footer kroz rupe” */
}

/* 4) Reveal efekt:
      sadržaj “završi” prije dna (margin-bottom), pa se footer otkrije na kraju */
#sp-body,
#sp-wrapper{
  margin-bottom: var(--reveal-h);
}

/* 5) Shadow na dnu sadržaja (bolji efekt) */
#sp-body::after,
#sp-wrapper::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 90px;
  pointer-events:none;
  box-shadow: 0 35px 75px rgba(0,0,0,.55);
}

@media (max-width: 767.98px){
	
	.point-copyright p {
		
		text-align: center;
	}
	
	.point-copyright {
		margin-top: -30px !Important;
  border-top: 1px solid #666;
}
	
	.point-footer-cookie {
  display: flex;
  justify-content: center;
  text-transform: uppercase;
}
  body{
    padding-bottom: clamp(900px, 120vw, 1200px);
  }

  #sp-body,
  #sp-wrapper{
    margin-bottom: clamp(900px, 120vw, 1200px);
  }
}



.point-header1 p {
	
	margin-bottom: 0px;
}

#sp-main-body {
	
	padding-top: 30px;
	padding-bottom: 30px;
}


/* =========================================
   FADE EFFECT – body “leži” iznad footera
========================================= */

#sp-body::before,
#sp-wrapper::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:140px;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(0,0,0,0.25) 45%,
    rgba(0,0,0,0.65) 100%
  );
}



/* =========================================================
   POINT HEADER – Interreg logo (gore desno) + bijeli blur badge
   Bez ID-eva (future-proof)
   ========================================================= */

/* 1) Header referenca */
.point-header{
  position: relative;
  overflow: hidden;
}

/* 2) Kontrole (jedno mjesto za štimanje) */
:root{
  --point-header-content-pad: 300px;  /* koliko ti header "gura" content dolje */
  --interreg-offset-from-top: 110px;  /* gdje želiš logo unutar hero-a */
  --interreg-right: 70px;             /* desni razmak */
}

/* 3) Interreg logo pozicija (izvlači ga iz content padding okvira) */
.point-header .interreg-badge{
  position: absolute !important;

  /* Umjesto top:-190px (stabilnije): */
  top: calc(var(--point-header-content-pad) * -1 + var(--interreg-offset-from-top));

  right: var(--interreg-right);
  left: auto;
  transform: none;

  z-index: 1000;
  pointer-events: none;
}

/* 4) Bijeli blur badge (da se slika bolje vidi i logo bude čitljiv) */
.point-header .interreg-badge .sppb-addon-content{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 16px;
  border-radius: 35px;

  background: rgba(255,255,255,0.25);


  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 10px 26px rgba(0,0,0,0.16),
    inset 0 0 0 1px rgba(255,255,255,0.35);
}

/* 5) Sam logo (responsivno) */
.point-header .interreg-badge img{
  display: block;
  width: clamp(180px, 18vw, 260px);
  height: auto;
}

/* 6) Tablet */
@media (max-width: 992px){
  :root{
    --interreg-right: 20px;
    --interreg-offset-from-top: 100px;
  }

  .point-header .interreg-badge .sppb-addon-content{
    padding: 10px 12px;
    border-radius: 12px;
  }

  .point-header .interreg-badge img{
    width: clamp(170px, 26vw, 230px);
  }
}

/* 7) Mobitel */
@media (max-width: 768px){
  :root{
    --interreg-right: 14px;
    --interreg-offset-from-top: 90px;
  }

  .point-header .interreg-badge img{
    width: 180px;
  }
}


.sp-megamenu-parent > li.active > a::after {
  content: "";
  display: block;
  width: 60%;
  height: 4px;
  border-radius: 999px;
  background: #3fa2db;
  margin-top: -11px;
}


/* =====================================================
   EXTRA SMALL DEVICES (<576px) – CENTRIRAN LOGO
   ===================================================== */
@media (max-width: 575.98px){

  .point-header .interreg-badge{
    position: relative !important;
    top: auto;
    right: auto;
    left: auto;

    display: flex;
    justify-content: center;   /* TOČNO U SREDINI */
    align-items: center;

    margin-top: 16px;          /* ispod mobilnog headera */
    margin-bottom: 28px;       /* da ne završi u sredini ekrana */
    padding: 0 16px;
  }

  .point-header .interreg-badge .sppb-addon-content{
    padding: 10px 12px;
    border-radius: 12px;
  }

  .point-header .interreg-badge img{
    width: 170px;
  }
}


/* kartica mora biti relative da bi absolute radio */
.blogkreativni-laboratoriji .labs-child-card{
  position: relative;
  display: block;
  overflow: hidden;
}

/* field kao badge preko slike */
.blogkreativni-laboratoriji .labs-child-field {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 10px;
  margin-left: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  white-space: nowrap;
  z-index: 2;
  background: #1b2138;
  color: white;
}

/* da slika ne preklopi badge */
.blogkreativni-laboratoriji .labs-child-media{
  position: relative;
}

.blogkreativni-laboratoriji .labs-child-media img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 18px !important;
}
a.labs-child-card{
	
	color: #252525;
	
}

h3.labs-child-title {
	margin-top: 20px;
	font-weight: bold;
  text-align: left;
  font-size: 1.2rem;
}

h3.labs-child-title::after {
  content: "";
  display: block;
  width: 70px;
  height: 6px;
  border-radius: 999px;
  background: #3fa2db;
  margin-top: 14px;
}

.blogkreativni-laboratoriji .cat-children > h3{
  display:none;
}

/* =========================================================
   LABS podkategorija – category extra fields layout
   - 2 kartice u redu (tematski-fokus + regija)
   - o-laboratoriju ide ispod full width
   ========================================================= */

.blogkreativni-laboratoriji .category-desc .fields-container{
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* default: kartice */
.blogkreativni-laboratoriji .category-desc .fields-container .field-entry{
  flex: 1 1 calc(50% - 9px);
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* label gore, value ispod */


.blogkreativni-laboratoriji .category-desc .fields-container .field-value{
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}

/* O laboratoriju = full width i normalniji tekst */
.blogkreativni-laboratoriji .category-desc .fields-container .field-entry.o-laboratoriju{
  flex: 0 0 100%;
}


/* mob: sve u jedan stupac */
@media (max-width: 768px){
  .blogkreativni-laboratoriji .category-desc .fields-container .field-entry{
    flex-basis: 100%;
  }
}



.is-regija-zadar {
	
	background: #1b2138 !important;
	color: white;
}

.is-regija-istra {
	
	background: #ff930b !important;
	color: white;
}

.is-regija-kvarner {
	
	background: #b4cb1f !important;
	color: white;
}

.is-regija-veneto {
	
	background: #ef4f91 !important;
	color: white;
}

.is-regija-puglia {
	
	background: #6f5cff !important;
	color: white;
}

.blogkreativni-laboratoriji .labs-children .row {
  row-gap: 40px;   /* vertikalni razmak između redova */
}

/* =========================
   PARTNERI – CATEGORY BLOG (NEW)
   Lead + Grid, veći logo na leadu,
   2 botuna u footeru (🌐 + Pročitaj više)
========================= */

:root{
  --partner-gap: 24px;
  --partner-radius: 20px;

  --partner-shadow: 0 10px 30px rgba(0,0,0,.06);
  --partner-shadow-hover: 0 16px 44px rgba(0,0,0,.08);

  --partner-btn-bg: #0e1a29;

  /* lead */
  --lead-logo-col: 260px;     /* širina kolone za logo */
  --lead-logo-h: 160px;       /* max visina loga */
}

/* Category intro */
.blogpartneri .category-desc{
  margin: 0 auto 30px;
  font-size: 0.9rem;
}

/* Lead wrapper */
.blogpartneri .partneri-lead{

  margin: 0 auto 24px;
}

/* Grid */
.blogpartneri .partneri-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--partner-gap);
  align-items: stretch;
}

/* Card base */
.blogpartneri .partner-card{
  background: #fff;
  border-radius: var(--partner-radius);
  padding: 22px 20px;
  box-shadow: var(--partner-shadow);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}

.blogpartneri .partner-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--partner-shadow-hover);
}

/* Lead card = horizontal grid (logo veći, content uži) */
.blogpartneri .partner-card.is-lead{
  padding: 30px 28px;
  display: grid;
  grid-template-columns: var(--lead-logo-col) 1fr;
  gap: 28px;
  align-items: center;
}

/* Logo */
.blogpartneri .partner-logo{
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.blogpartneri .partner-logo img{
  max-height: 74px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Lead logo block */
.blogpartneri .partner-card.is-lead .partner-logo{
  height: auto;
  margin: 0;
  justify-content: center;
  background: rgba(0,0,0,.03);
  border-radius: 16px;
  padding: 20px;
}

.blogpartneri .partner-card.is-lead .partner-logo img{
  max-height: var(--lead-logo-h);
  max-width: 100%;
}

/* Content wrapper */
.blogpartneri .partner-content{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Title */
.blogpartneri .partner-title{
  font-size: 18px;
  line-height: 1.2;
  margin: 6px 0 10px;
}

.blogpartneri .partner-title a{
  text-decoration: none;
}

.blogpartneri .partner-card.is-lead .partner-title{
  font-size: 24px;
  margin: 0 0 12px;
}

/* Desc clamp */
.blogpartneri .partner-desc{
  font-size: 14px;
  line-height: 1.65;
  color: rgba(0,0,0,.72);
  margin-bottom: 18px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.blogpartneri .partner-card.is-lead .partner-desc{
  font-size: 15px;
  -webkit-line-clamp: 4; /* lead: malo više “težine”, ali ne predugo */
}

/* Footer (2 buttons in a row) */
.blogpartneri .partner-footer{
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap; /* držimo u jednom redu koliko god možemo */
}

/* Web icon button */
.blogpartneri .partner-btn-web{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--partner-btn-bg);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  transition: transform .2s ease, opacity .2s ease;
  flex: 0 0 auto;
}

.blogpartneri .partner-btn-web:hover{
  transform: translateY(-2px);
  opacity: .92;
}

/* Read more button (kompaktno da stane uz globus) */
.blogpartneri .partner-readmore{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0,0,0,.85);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  white-space: nowrap;
  flex: 1 1 auto;         /* neka se stisne */
  min-width: 0;
  text-align: center;
}

.blogpartneri .partner-readmore:hover{
  background: #f7f7f7;
  border-color: rgba(0,0,0,.2);
  transform: translateY(-1px);
}

.partner-card.is-lead .partner-readmore {
	
	flex: none;
}

.blogpartneri .partner-title a {
  text-decoration: none;
  color: #0e1a29;
  font-weight: bold;
}

.blogpartneri .partner-title::after{
  content: "";
  display: block;
  width: 40px;
  height: 6px;
  border-radius: 999px;
  background: #3fa2db;
  margin-top: 14px;
}

/* Responsive */
@media (max-width: 1200px){
  .blogpartneri .partneri-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px){
  .blogpartneri .partneri-grid{ grid-template-columns: repeat(2, 1fr); }
  :root{ --lead-logo-col: 220px; --lead-logo-h: 140px; }
}

@media (max-width: 768px){
  .blogpartneri .partner-card.is-lead{
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: left;
  }
  .blogpartneri .partner-card.is-lead .partner-logo{
    justify-content: center;
  }
}

@media (max-width: 576px){
  .blogpartneri .partneri-grid{ grid-template-columns: 1fr; }
  .blogpartneri .partner-card{ padding: 20px 18px; }
  .blogpartneri .partner-footer{ gap: 8px; }
}


.partneri {
	
	display: flex;
	flex-direction: column;
}

.partneri .article-details .article-header {
	
	order: 1;
}

.partneri .article-full-image {
	
	order: 2;
}

.partneri .fields-container {
	
	order: 3;
}

.partneri div[itemprop="articleBody"] {
	
	order: 4;
}

.partneri .article-info {
	
	display: none;
}
.article-partneri .page-header,
.pagenavigation {
	
	display: none;
}

/* =========================
   PARTNERI – ARTICLE VIEW
========================= */

.article-partneri .partner-hero{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items: start;
}

.article-partneri .partner-hero-media{
  background: rgba(0,0,0,.03);
  border-radius: 18px;
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.article-partneri .partner-hero-media img{
  max-width: 100%;
  max-height: 260px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.article-partneri .partner-name{
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 14px;
  font-weight: 800;
}

.article-partneri .partner-meta{
  margin: 0 0 18px;
}

.article-partneri .partner-web{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
}

.article-partneri .partner-web-ico{
  font-size: 18px;
}

.article-partneri .partner-web-label{
  font-weight: 700;
  color: rgba(0,0,0,.75);
}

.article-partneri .partner-web-text{
  color: rgba(0,0,0,.85);
}

.article-partneri .partner-body{
  color: rgba(0,0,0,.85);
  line-height: 1.75;
}

.article-partneri {
	
	padding-top: 50px;
	padding-bottom: 50px;
}

/* responsive */
@media (max-width: 900px){
  .article-partneri .partner-hero{
    grid-template-columns: 1fr;
  }
  .article-partneri .partner-hero-media img{
    max-height: 220px;
  }
}

/* NOVOSTI – limit naslova */
.point-novosti .sppb-addon-article-layout-content h3 a{
  display: -webkit-box;
  -webkit-line-clamp: 4;          /* broj redova */
  -webkit-box-orient: vertical;
  overflow: hidden;

  line-clamp: 4;
  text-overflow: ellipsis;
}

/* ================================
   FOOTER PARTNER LOGOS – 1 CLEAN ROW
   ================================ */

.footer-partners{
  background:#0b0b0b;
  padding:30px 20px;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;                /* manji razmak */
}

/* kartica */
.footer-partners a{
  display:flex;
  align-items:center;
  justify-content:center;

  padding:8px 12px;        /* manji padding */
  background:#fff;
  border-radius:10px;

  transition: transform .2s ease;
}

/* hover */
.footer-partners a:hover{
  transform: translateY(-2px);
}

/* logo */
.footer-partners img{
  height:48px;             /* SMANJENO da svi stanu */
  width:auto;
  max-width:140px;
  object-fit:contain;
  display:block;
}

.com-finder.finder h1 {
  display: inline-block;
  background: #fff !important;
  padding: 18px 26px !important;
  border-radius: 18px;
  box-shadow: none !important;
  position: relative;
  transform: translateY(calc(-1 * var(--title-up))) !important;
  margin: 0 !important;
  left: 0 !important;
  right: auto !important;
  max-width: none !important;
  width: auto !important;
  font-weight: 800;
  line-height: 1.05;
  z-index: 10;
  font-size: clamp(34px, 4vw, 56px);
}

.com-finder.finder h1::after{
  content: "";
  display: block;
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: #3fa2db;
  margin-top: 14px;
}

#search-form {
	
	  margin-top: -70px;
}

/* =========================================
   TRAŽILICA – lijepi layout (samo ova stranica)
   target: body.trazilica + com_finder
   ========================================= */

body.trazilica{
  /* mekani background da stranica ne izgleda prazno */
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(255,255,255,.25), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(12,18,29,.06), rgba(12,18,29,.02));
}

/* malo više “zraka” ispod hero slike */
body.trazilica #sp-main-body{
  padding-top: clamp(22px, 3vw, 44px);
  padding-bottom: clamp(54px, 6vw, 92px);
}

/* =========================================
   TRAŽILICA – samo forma centrirana
   ========================================= */

/* naslov ne diramo */
body.trazilica .com-finder.finder > h1{
  margin-top: -20px !important;
}

/* centriramo samo search formu */
body.trazilica #search-form.com-finder__form{
  max-width: 920px;
  margin: 0 auto;
}

/* kartica oko forme */
body.trazilica #search-form.com-finder__form{
  position: relative;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 26px;
  padding: clamp(18px, 3vw, 28px);
  box-shadow: 0 18px 50px rgba(15,23,42,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  margin-top: -50px;
}

/* dekor (svjetlo gore lijevo) */
body.trazilica #search-form.com-finder__form::before{
  content:"";
  position:absolute;
  inset: -120px auto auto -140px;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 65%);
  pointer-events:none;
}

/* fieldset – očisti default */
body.trazilica .com-finder__search.word{
  border: 0;
  padding: 0;
  margin: 0;
}

/* label malo suptilnije */
body.trazilica .com-finder__search.word label{
  display: block;
  font-weight: 800;
  opacity: .72;
  margin: 0 0 10px 0;
}

/* input + button kao “search bar” */
body.trazilica .com-finder__search.word .form-inline{
  display: grid;
  gap: 12px;
}

/* input-group */
body.trazilica .com-finder__search.word .input-group{
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}

/* input */
body.trazilica input.js-finder-search-query{
  border: 0 !important;
  box-shadow: none !important;
  height: 58px;
  padding: 0 16px;
  font-size: 16px;
}

body.trazilica input.js-finder-search-query:focus{
  outline: none !important;
}

/* button */
body.trazilica .com-finder__search.word .btn.btn-primary{
  border: 0;
  height: 58px;
  padding: 0 18px;
  font-weight: 900;
  letter-spacing: .2px;
  border-left: 1px solid rgba(15,23,42,.10);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* hover/focus state (bez mijenjanja boje branda drastično) */
body.trazilica .com-finder__search.word .btn.btn-primary:hover{
  filter: brightness(0.98);
}

body.trazilica #search-form.com-finder__form:focus-within{
  border-color: rgba(15,23,42,.22);
  box-shadow: 0 22px 70px rgba(15,23,42,.16);
}

/* mobilno: button ispod inputa (da ne bude stisnuto) */
@media (max-width: 575.98px){
  body.trazilica .com-finder__search.word .input-group{
    display: grid;
    border-radius: 18px;
  }

  body.trazilica .com-finder__search.word .btn.btn-primary{
    width: 100%;
    border-left: 0;
    border-top: 1px solid rgba(15,23,42,.10);
    justify-content: center;
  }
}

/* opcionalno: makni mali “prazni” razmak koji ti Helix zna ubacit */
body.trazilica #sp-component .sp-column{
  padding-top: 0;
}

/* FIX: button "Traži" skroz desno + input full width */
body.trazilica .com-finder__search.word .input-group{
  display: flex;
  align-items: stretch;
}

body.trazilica .com-finder__search.word .input-group .awesomplete{
  flex: 1 1 auto;
  min-width: 0;
  width: 1%;
}

body.trazilica .com-finder__search.word .input-group .awesomplete > input{
  width: 100%;
}

body.trazilica .com-finder__search.word .input-group .btn.btn-primary{
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 130px; /* po želji 120-160 */
}

/* =========================================
   TRAŽILICA – REZULTATI (cards + badges)
   scope: body.trazilica #search-results
   ========================================= */

body.trazilica #search-results.com-finder__results{
  max-width: 920px;
  margin: 26px auto 0;
}

/* lista bez default stilova */
body.trazilica #search-result-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

/* kartica rezultata */
body.trazilica .result__item{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: 0 14px 36px rgba(15,23,42,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

body.trazilica .result__item:hover{
  transform: translateY(-2px);
  border-color: rgba(15,23,42,.18);
  box-shadow: 0 20px 55px rgba(15,23,42,.14);
}

/* title */
body.trazilica .result__title{
  margin: 0;
}

body.trazilica a.result__title-link{
  text-decoration: none;
  color: inherit;
  display: grid;
  gap: 8px;
}

/* glavni tekst */
body.trazilica .result__title-text{
  font-weight: 950;
  letter-spacing: .1px;
  line-height: 1.15;
  font-size: clamp(18px, 2vw, 22px);
}

/* URL (cite) kao sekundarni tekst */
body.trazilica .result__title-url{
  display: block;
  font-style: normal;
  opacity: .65;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  word-break: break-word;
}

/* mark highlight */
body.trazilica #search-results mark{
  background: rgba(56, 189, 248, .25);
  padding: .08em .22em;
  border-radius: 8px;
}

/* taxonomy badges */
body.trazilica .result__taxonomy{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.trazilica .result__taxonomy-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.65);
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
}

/* label unutar taxonomy (Tip/Autor/Kategorija) */
body.trazilica .result__taxonomy-item > span{
  opacity: .65;
  font-weight: 900;
}

/* malo “naglašavanje” po tipu (optional, suptilno) */
body.trazilica .result__taxonomy--Type{
  background: rgba(15,23,42,.06);
}

body.trazilica .result__taxonomy--Category{
  background: rgba(59,130,246,.08);
}

body.trazilica .result__taxonomy--Author{
  background: rgba(16,185,129,.08);
}

/* pagination/counter */
body.trazilica .search-pagination{
  max-width: 920px;
  margin: 14px auto 0;
  display: grid;
  gap: 10px;
}

body.trazilica .search-pages-counter{
  opacity: .7;
  font-weight: 800;
  text-align: right;
}

/* ako ikad dođe pagination */
body.trazilica .com-finder__pagination{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* mobilno */
@media (max-width: 575.98px){
  body.trazilica .result__item{
    padding: 16px 14px 14px;
    border-radius: 18px;
  }
  body.trazilica .search-pages-counter{
    text-align: left;
  }
}
.result__taxonomy-item + .result__taxonomy-item::before,
body.trazilica .result__taxonomy--Type,
body.trazilica .result__taxonomy--Author{
  display: none !important;
}

/* =========================================
   TRAŽILICA – NO RESULTS stanje
   ========================================= */

body.trazilica #search-query-explained{
  max-width: 920px;
  margin: 26px auto 14px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.18);
  font-weight: 800;
}

body.trazilica #search-query-explained a{
  font-weight: 900;
  text-decoration: none;
}

body.trazilica #search-query-explained a:hover{
  text-decoration: underline;
}


/* Glavna empty kartica */
body.trazilica #search-result-empty{
  max-width: 920px;
  margin: 0 auto 10px;
  padding: 36px 24px;
  text-align: center;

  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(15,23,42,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Naslov */
body.trazilica #search-result-empty h2{
  font-weight: 950;
  font-size: clamp(22px, 2.4vw, 28px);
  margin-bottom: 12px;
}

/* Tekst */
body.trazilica #search-result-empty p{
  opacity: .7;
  font-weight: 700;
  margin: 0;
}


/* Malo prostora dolje */
body.trazilica #search-results{
  margin-bottom: 40px;
}


/* Mobile fine-tuning */
@media (max-width: 575.98px){
  body.trazilica #search-result-empty{
    padding: 28px 18px;
    border-radius: 18px;
  }
}


/* =========================================
   KONTAKT – BAForms (glass card kao Tražilica)
   scope: body.kontakt
   ========================================= */

/* lagani background kao na tražilici (samo kontakt) */
body.kontakt{
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(255,255,255,.25), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(12,18,29,.06), rgba(12,18,29,.02));
}

body.kontakt #sp-main-body{
  padding-top: clamp(22px, 3vw, 44px);
  padding-bottom: clamp(54px, 6vw, 92px);
}

/* H1 ne diramo – samo mali razmak */
body.kontakt .article-details.kontakt .article-header{
  margin-bottom: -50px;
}

/* centriraj wrapper forme */
body.kontakt .com-baforms-wrapper{
  max-width: 920px;
  margin: 0 auto;
}

/* kartica oko forme */
body.kontakt .com-baforms-wrapper form.ba-form-1{
  position: relative;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 26px;
  padding: clamp(18px, 3vw, 28px);
  box-shadow: 0 18px 50px rgba(15,23,42,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

/* dekor svjetlo gore lijevo */
body.kontakt .com-baforms-wrapper form.ba-form-1::before{
  content:"";
  position:absolute;
  inset: -120px auto auto -140px;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 65%);
  pointer-events:none;
}

/* layout polja – čist vertikalni stack */
body.kontakt .ba-page-items,
body.kontakt .ba-form-row,
body.kontakt .ba-form-column-wrapper,
body.kontakt .ba-form-column{
  width: 100%;
}

body.kontakt .ba-form-field-item{
  margin: 0 0 14px 0;
}

/* label */
body.kontakt .ba-field-label-wrapper{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

body.kontakt .ba-input-label-wrapper{
  font-weight: 900;
  opacity: .72;
}

body.kontakt .required-star{
  font-weight: 900;
  opacity: .75;
}

/* input/textarea look */
body.kontakt .ba-field-container input,
body.kontakt .ba-field-container textarea{
  width: 100%;
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
  border-radius: 18px;
  padding: 14px 14px;
  font-size: 16px;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  outline: none;
  padding-left: 20px !important;
}

/* textarea veća i ugodnija */
body.kontakt .ba-field-container textarea{
  min-height: 160px;
  resize: vertical;
}

/* focus state */
body.kontakt .ba-field-container input:focus,
body.kontakt .ba-field-container textarea:focus{
  border-color: rgba(15,23,42,.22);
  box-shadow: 0 14px 30px rgba(15,23,42,.12);
}

/* submit area */
body.kontakt .ba-form-submit-field{
  margin-top: 6px;
}

body.kontakt .ba-form-submit-wrapper{
  background: transparent !important;
  padding: 0 !important;
}

/* submit button (BAForms je <a>) */
body.kontakt a.ba-form-submit-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;
  min-height: 58px;

  border-radius: 18px;
  border: 0 !important;

  font-weight: 950;
  letter-spacing: .2px;
  text-decoration: none;

  box-shadow: 0 14px 34px rgba(15,23,42,.14);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* hover */
body.kontakt a.ba-form-submit-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 45px rgba(15,23,42,.18);
  filter: brightness(.98);
}

/* makni eventualne čudne margine oko forme */
body.kontakt .article-details.kontakt [itemprop="articleBody"] > p{
  margin: 0;
}

/* mobile */
@media (max-width: 575.98px){
  body.kontakt .com-baforms-wrapper form.ba-form-1{
    border-radius: 18px;
    padding: 18px 14px;
  }
}

.kontakt .article-details .article-header h1 {
  display: inline-block;
  background: #fff !important;
  padding: 18px 26px !important;
  border-radius: 18px;
  box-shadow: none !important;
  position: relative;
  transform: translateY(calc(-1 * var(--title-up))) !important;
  margin: 0 !important;
  left: 0 !important;
  right: auto !important;
  max-width: none !important;
  width: auto !important;
  font-weight: 800;
  line-height: 1.05;
  z-index: 10;
  font-size: clamp(34px, 4vw, 56px);
  margin-top: -10px !important;
}

.kontakt .article-details .article-header h1::after{
  content: "";
  display: block;
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: #3fa2db;
  margin-top: 14px;
}

/* =========================================
   SOCRAT – mod_languages (FINAL, stable)
   - button glass pill (globe + HR + arrow)
   - dropdown same width as button
   ========================================= */

/* wrapper */
.mod-languages__select.btn-group{
  position: relative;
  display: inline-block;
}

/* ---------- BUTTON (glass pill) ---------- */
.mod-languages__select.btn-group > .btn.dropdown-toggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  position: relative;
  padding: 12px 18px 12px 52px;   /* L: globus */
  border-radius: 999px !important;

  background-color: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;

  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* makni flagove (ti si ih makao, ali nek ostane sigurnosno) */
.mod-languages__select .btn.dropdown-toggle img,
.mod-languages__select .dropdown-menu img{
  display: none !important;
}

/* ---------- GLOBUS (uvijek lijevo) ---------- */
.mod-languages__select.btn-group > .btn.dropdown-toggle::before{
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  opacity: .95;

  background: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'>\
  <circle cx='12' cy='12' r='10'/>\
  <line x1='2' y1='12' x2='22' y2='12'/>\
  <path d='M12 2a15 15 0 010 20a15 15 0 010-20z'/>\
  </svg>") center/contain no-repeat;
}

/* ---------- STRELICA (bootstrap caret override) ---------- */
/* NE gasimo ::after, nego ga koristimo kao našu strelicu */
.mod-languages__select.btn-group > .btn.dropdown-toggle::after{
  content: "" !important;
  display: inline-block !important;

  width: 8px;
  height: 8px;
  margin-left: 10px;

  border-right: 2px solid rgba(255,255,255,0.85);
  border-bottom: 2px solid rgba(255,255,255,0.85);

  transform: rotate(45deg);
  transition: transform .2s ease;

  /* makni bootstrap “caret” border hack */
  border-top: 0 !important;
  border-left: 0 !important;
  vertical-align: middle;
}

/* rotacija kad je otvoreno */
.mod-languages__select.btn-group > .btn.dropdown-toggle[aria-expanded="true"]::after{
  transform: rotate(225deg);
}

/* focus */
.mod-languages__select.btn-group > .btn.dropdown-toggle:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12),
              0 10px 24px rgba(0,0,0,.18) !important;
}

/* ---------- DROPDOWN (ista širina kao gumb) ---------- */
.mod-languages__select.btn-group > .dropdown-menu.lang-block{
  /* KLJUČ: pobij min-width i prisili width = button */
  min-width: 0 !important;
  width: 100% !important;

  /* pošto ti popper stavlja bottom-end, držimo ga poravnat desno uz gumb */
  left: auto !important;
  right: 0 !important;

  margin-top: 10px !important;
  padding: 10px !important;
  border-radius: 22px !important;

  background: rgba(15, 23, 42, 0.92) !important;
  border: 0 !important;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 18px 50px rgba(0,0,0,.55) !important;
  overflow: hidden;
  z-index: 9999;
}

/* makni bootstrap list spacing */
.mod-languages__select .dropdown-menu.lang-block{
  list-style: none;
}
.mod-languages__select .dropdown-menu.lang-block li{
  margin: 0;
  padding: 0;
}

/* dropdown linkovi */
.mod-languages__select .dropdown-menu.lang-block a{
  display: block;
  padding: 12px 14px;
  border-radius: 14px;

  color: #fff !important;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;

  background: transparent !important;
}

/* hover/active */
.mod-languages__select .dropdown-menu.lang-block a:hover{
  background: rgba(255,255,255,0.10) !important;
  border-radius: 30px;
}
.mod-languages__select .dropdown-menu.lang-block .lang-active > a{
  background: rgba(255,255,255,0.14) !important;
  border-radius: 30px;
}


div.mod-languages ul li.lang-active {
	
	border-radius: 30px;
}

div.mod-languages .btn-group {
	
	justify-content: flex-end;
}

#menu-right .sp-module:first-child {
  border-right: 0;
}

#sp-header {
	
	box-shadow: none;
}

/* kontejner itema */
.profile-item-wrap{
  position: relative;
}

/* slika (figure/div) nek bude referenca za overlay */
.profile-item-wrap .article-intro-image{
  position: relative;
  overflow: hidden;               /* da badge ne izlazi van ako ne želiš */
  border-radius: 14px;            /* uskladi s tvojim card lookom */
}

/* makni float probleme (po potrebi) */
.profile-item-wrap .article-intro-image.float-left{
  float: none !important;
}

/* badge preko slike, gore lijevo */
.profile-item-wrap .profile-region-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .2px;

  background: rgba(0,0,0,.65);
  color: #fff;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* da badge ne blokira klik na sliku/link */
.profile-item-wrap .profile-region-badge{
  pointer-events: none;
}

/* malo finiji hover na slici (opcionalno) */
.profile-item-wrap .article-intro-image img{
  display: block;
  width: 100%;
  height: auto;
}

/* ako želiš da badge bude uvijek iznad i kad nema slike (fallback) */
.profile-item-wrap:not(:has(.article-intro-image)) .profile-region-badge{
  position: static;
  display: inline-flex;
  margin: 0 0 10px 0;
}

.alert.alert-info {
	
	display: none;
}

/* =====================================================
   KREATIVNI LABORATORIJI – META BAR (BADGE + SHARE)
   ===================================================== */

.kreativni-laboratoriji .kl-meta-bar{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:16px; /* razmak od plave linije */
}

/* ===== CATEGORY BADGE ===== */

.kreativni-laboratoriji .kl-meta-bar .category-name{
  display:inline-flex;
  align-items:center;
  height:36px;                 /* ista visina kao share */
  padding:0 18px;
  background:#ff8c00;          /* tvoja narančasta */
  color:#fff;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  line-height:1;
  white-space:nowrap;
}

/* ===== SHARE CONTAINER ===== */

.kreativni-laboratoriji .kl-share{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:36px;                 /* ista visina */
  padding:0 14px;
  border:1px solid rgba(0,0,0,.08);
  background:#ffffff;
  border-radius:999px;
}

/* Share tekst */
.kreativni-laboratoriji .kl-share-label{
  font-size:12px;
  font-weight:500;
  opacity:.65;
  letter-spacing:.3px;
  text-transform:uppercase;
}

/* ===== SHARE ICON BUTTONS ===== */

.kreativni-laboratoriji .kl-share-btn{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;              /* pravi krug */
  background:#f4f4f4;
  border:1px solid rgba(0,0,0,.08);
  text-decoration:none;
  transition:all .15s ease;
  font-size:14px;
}

/* Hover efekt */
.kreativni-laboratoriji .kl-share-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

/* Facebook boja */
.kreativni-laboratoriji .kl-share-btn.is-fb{
  color:#1877f2;
}

/* X boja */
.kreativni-laboratoriji .kl-share-btn.is-x{
  color:#111;
}

/* Malo jači hover po brandu */
.kreativni-laboratoriji .kl-share-btn.is-fb:hover{
  background:#e9f2ff;
}

.kreativni-laboratoriji .kl-share-btn.is-x:hover{
  background:#f0f0f0;
}

/* =====================================================
   NEWS & EVENTS – ARTICLE (article-detailsnovosti)
   ===================================================== */

/* ---------- TITLE ---------- */
.article-detailsnovosti .article-header h1{
  font-size: 1.8rem;
  font-weight: 800;
  text-align: left;
  margin: 0;
}

.article-detailsnovosti .article-header h1::after{
  content: "";
  display: block;
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: #3fa2db;
  margin-top: 14px;
}

/* ---------- IMAGE (spacing) ---------- */
.article-detailsnovosti .article-full-image{
  margin: 18px 0 0;
}

.article-detailsnovosti .article-full-image img{
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px; /* ako ne želiš radius, stavi 0 */
}

/* ---------- INFO BAR under image ---------- */
.article-detailsnovosti .article-info{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 10px; /* odmah ispod slike */
}

/* CATEGORY “cloud” (blue) */
.article-detailsnovosti .article-info .category-name{
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #3fa2db;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.article-detailsnovosti .article-info .category-name a{
  color: #fff;
  text-decoration: none;
}

.article-detailsnovosti .article-info .category-name a:hover{
  opacity: .92;
}

/* DATE “cloud” (green) */
.article-detailsnovosti .article-info .published{
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #8cccaf;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.article-detailsnovosti .article-info .published time{
  color: inherit;
}

/* ---------- SHARE (right side) ---------- */
.article-detailsnovosti .article-info .inline-share{
  margin-left: auto;               /* gurni desno */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;                    /* ista visina kao oblaci */
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}

/* Share label */
.article-detailsnovosti .inline-share-label{
  font-size: 12px;
  font-weight: 600;
  opacity: .65;
  text-transform: uppercase;
  letter-spacing: .3px;
  line-height: 1;
}

/* Icon circles */
.article-detailsnovosti .inline-share-btn{
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f4f4f4;
  border: 1px solid rgba(0,0,0,.08);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  font-size: 13px;
}

.article-detailsnovosti .inline-share-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* brand colors */
.article-detailsnovosti .inline-share-btn.is-fb{ color: #1877f2; }
.article-detailsnovosti .inline-share-btn.is-x{  color: #111; }

.article-detailsnovosti .inline-share-btn.is-fb:hover{ background: #e9f2ff; }
.article-detailsnovosti .inline-share-btn.is-x:hover{  background: #f0f0f0; }

/* ---------- MOBILE: share goes to new line nicely ---------- */
@media (max-width: 640px){
  .article-detailsnovosti .article-info .inline-share{
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
}


.article-info > span + span::before {
	
	  display: none;
}

.article-detailsnovosti {
	
	max-width: 900px;
	margin: auto;
}

.category-attachments{
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.12);
}

.category-attachments .fields-container{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.category-attachments .field-label{ display:none !important; }
.category-attachments .field-entry{ margin:0; }

/* CARD */
.category-attachments a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  color: #1f1f1f;
  transition: all .15s ease;
  margin-bottom: 10px;
}

.category-attachments a:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.25);
}

/* ICON BOX */
.category-attachments a::before{
  content:"";
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.15);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px 30px;
  box-sizing: border-box;
}

/* =========================
   FILE TYPES – FIXED
========================= */

/* PDF */
.category-attachments a[href*=".pdf"]::before{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' preserveAspectRatio='none'>\
<path d='M18 6h20l10 10v42a4 4 0 0 1-4 4H18a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z' fill='%23fff' stroke='%23d7d7d7' stroke-width='2'/>\
<path d='M38 6l10 10H38z' fill='%23f1f1f1' stroke='%23d7d7d7' stroke-width='2'/>\
<rect x='18' y='36' width='28' height='16' rx='4' fill='%23d32f2f'/>\
<text x='32' y='48' text-anchor='middle' font-family='Arial' font-size='12' font-weight='700' fill='white'>PDF</text>\
</svg>");
}

/* DOC */
.category-attachments a[href*=".doc"]::before,
.category-attachments a[href*=".docx"]::before{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' preserveAspectRatio='none'>\
<path d='M18 6h20l10 10v42a4 4 0 0 1-4 4H18a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z' fill='%23fff' stroke='%23d7d7d7' stroke-width='2'/>\
<path d='M38 6l10 10H38z' fill='%23f1f1f1' stroke='%23d7d7d7' stroke-width='2'/>\
<rect x='18' y='36' width='28' height='16' rx='4' fill='%231565c0'/>\
<text x='32' y='48' text-anchor='middle' font-family='Arial' font-size='12' font-weight='700' fill='white'>DOC</text>\
</svg>");
}

/* XLS */
.category-attachments a[href*=".xls"]::before,
.category-attachments a[href*=".xlsx"]::before,
.category-attachments a[href*=".csv"]::before,
.category-attachments a[href*=".gxlsx"]::before{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' preserveAspectRatio='none'>\
<path d='M18 6h20l10 10v42a4 4 0 0 1-4 4H18a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z' fill='%23fff' stroke='%23d7d7d7' stroke-width='2'/>\
<path d='M38 6l10 10H38z' fill='%23f1f1f1' stroke='%23d7d7d7' stroke-width='2'/>\
<rect x='18' y='36' width='28' height='16' rx='4' fill='%232e7d32'/>\
<text x='32' y='48' text-anchor='middle' font-family='Arial' font-size='12' font-weight='700' fill='white'>XLS</text>\
</svg>");
}

/* PPT */
.category-attachments a[href*=".ppt"]::before,
.category-attachments a[href*=".pptx"]::before{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' preserveAspectRatio='none'>\
<path d='M18 6h20l10 10v42a4 4 0 0 1-4 4H18a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z' fill='%23fff' stroke='%23d7d7d7' stroke-width='2'/>\
<path d='M38 6l10 10H38z' fill='%23f1f1f1' stroke='%23d7d7d7' stroke-width='2'/>\
<rect x='18' y='36' width='28' height='16' rx='4' fill='%23ef6c00'/>\
<text x='32' y='48' text-anchor='middle' font-family='Arial' font-size='12' font-weight='700' fill='white'>PPT</text>\
</svg>");
}

/* ZIP */
.category-attachments a[href*=".zip"]::before,
.category-attachments a[href*=".rar"]::before,
.category-attachments a[href*=".7z"]::before{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' preserveAspectRatio='none'>\
<path d='M18 6h20l10 10v42a4 4 0 0 1-4 4H18a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z' fill='%23fff' stroke='%23d7d7d7' stroke-width='2'/>\
<path d='M38 6l10 10H38z' fill='%23f1f1f1' stroke='%23d7d7d7' stroke-width='2'/>\
<rect x='18' y='36' width='28' height='16' rx='4' fill='%235d4037'/>\
<text x='32' y='48' text-anchor='middle' font-family='Arial' font-size='12' font-weight='700' fill='white'>ZIP</text>\
</svg>");
}

/* IMG */
.category-attachments a[href*=".jpg"]::before,
.category-attachments a[href*=".jpeg"]::before,
.category-attachments a[href*=".png"]::before,
.category-attachments a[href*=".webp"]::before,
.category-attachments a[href*=".gif"]::before{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' preserveAspectRatio='none'>\
<path d='M18 6h20l10 10v42a4 4 0 0 1-4 4H18a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z' fill='%23fff' stroke='%23d7d7d7' stroke-width='2'/>\
<path d='M38 6l10 10H38z' fill='%23f1f1f1' stroke='%23d7d7d7' stroke-width='2'/>\
<rect x='18' y='36' width='28' height='16' rx='4' fill='%236a1b9a'/>\
<text x='32' y='48' text-anchor='middle' font-family='Arial' font-size='12' font-weight='700' fill='white'>IMG</text>\
</svg>");
}



/* =========================================================
   FOOTER REVEAL – LANDSCAPE FIX (small viewport height)
   Kad je ekran nizak (mob landscape), reveal se gasi jer nema mjesta
========================================================= */
@media (max-width: 992px) and (max-height: 520px){

  /* vrati footer u normalan flow (da se može scrollat do kraja) */
  #sp-footer{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1 !important;
  }

  /* makni "lažni" prostor za reveal */
  body{
    padding-bottom: 0 !important;
  }

  #sp-body,
  #sp-wrapper{
    margin-bottom: 0 !important;
  }

  /* makni fade/shadow koji si dodao za reveal */
  #sp-body::after,
  #sp-wrapper::after,
  #sp-body::before,
  #sp-wrapper::before{
    content: none !important;
  }
}

/* =========================
   OFFCANVAS - BIG LINKS + BOTTOM MODULE ZONE
========================= */

/* panel */
.offcanvas-menu{
  background: #0c0f12;
  color: #fff;
}

/* header */
.offcanvas-menu > .d-flex{
  padding: 18px 18px 10px !important;
}

/* close X (ako si ostavio burger, ovo neće smetat) */
.offcanvas-menu .close-offcanvas{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  text-decoration: none;
  opacity: .9;
}
.offcanvas-menu .close-offcanvas:hover{ opacity: 1; }

/* inner as column so bottom can stick to bottom */
.offcanvas-menu .offcanvas-inner{
  padding: 10px 22px 22px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 70px);
}

/* makni default menu styling */
.offcanvas-menu ul.mod-menu,
.offcanvas-menu .sp-module ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.offcanvas-menu ul.mod-menu.nav,
.offcanvas-menu .nav-pills{
  background: transparent !important;
}

/* only top-level items */
.offcanvas-menu ul.mod-menu > li{
  margin: 0;
  padding: 0;
}

/* big links like sample */
.offcanvas-menu ul.mod-menu > li > a{
  display: inline-block;
  padding: 12px 0;
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.05;
}

/* subtle hover */
.offcanvas-menu ul.mod-menu > li > a:hover{
  opacity: .82;
}

/* IMPORTANT: if Joomla/Helix outputs <span class="nav-header"> or separators */
.offcanvas-menu ul.mod-menu .nav-header{
  display: block;
  padding: 12px 0;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.05;
}

/* if there are any nested ULs by accident, hide them */
.offcanvas-menu ul.mod-menu ul{
  display: none !important;
}

/* =========================
   BOTTOM MODULE ZONE
========================= */

.offcanvas-menu .offcanvas-bottom{
  margin-top: 30px;            /* gurne na dno */
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* default spacing between modules inside bottom zone */
.offcanvas-menu .offcanvas-bottom .sp-module{
  margin: 0;
}
.offcanvas-menu .offcanvas-bottom .sp-module + .sp-module{
  margin-top: 12px;
}

/* --- ICON ROW helper (ako u modu imaš wrapper klasu) --- */
.offcanvas-menu .offcanvas-bottom .oc-icons{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* generic “icon button look” for links/buttons inside bottom */
.offcanvas-menu .offcanvas-bottom a,
.offcanvas-menu .offcanvas-bottom button{
  color: rgba(255,255,255,.9);
}

.offcanvas-menu .offcanvas-bottom .oc-icon,
.offcanvas-menu .offcanvas-bottom a.oc-icon,
.offcanvas-menu .offcanvas-bottom button.oc-icon{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  text-decoration: none;
  border: 0;
}

.offcanvas-menu .offcanvas-bottom .oc-icon:hover,
.offcanvas-menu .offcanvas-bottom a.oc-icon:hover,
.offcanvas-menu .offcanvas-bottom button.oc-icon:hover{
  background: rgba(255,255,255,.12);
}

/* language switcher: ukloni default liste i napravi uredno */
.offcanvas-menu .offcanvas-bottom .mod-languages ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.offcanvas-menu .offcanvas-bottom .mod-languages a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255,255,255,.9) !important;
}

.offcanvas-menu .offcanvas-bottom .mod-languages a:hover{
  background: rgba(255,255,255,.12);
}

.offcanvas-menu .offcanvas-bottom .mod-languages .lang-active a{
  background: rgba(255,255,255,.18);
  color: #fff !important;
}


/* ===================================
   OFFCANVAS – RESET SP PAGE BUILDER
=================================== */

/* makni grid i kolone */
.offcanvas-menu .sp-page-builder,
.offcanvas-menu .sppb-section,
.offcanvas-menu .sppb-row-container,
.offcanvas-menu .sppb-row,
.offcanvas-menu .sppb-row-column,
.offcanvas-menu .sppb-column,
.offcanvas-menu .sppb-column-addons{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* makni paddinge koje builder ubacuje */
.offcanvas-menu .sppb-section{
  padding: 0 !important;
  margin: 0 !important;
}

/* složi sve vertikalno */
.offcanvas-menu .sppb-row{
  display: flex !important;
  flex-direction: column !important;
  gap: 20px;
}

/* ===================================
   IKONE (mail + search)
=================================== */

.offcanvas-menu .header-actions{
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  margin-top: 20px;
}

.offcanvas-menu .header-icon{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  transition: 0.3s ease;
}

.offcanvas-menu .header-icon svg{
  width: 20px;
  height: 20px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
}

.offcanvas-menu .header-icon:hover{
  background: rgba(255,255,255,0.15);
}

/* ===================================
   LANGUAGE SWITCHER – DARK PILL STYLE
=================================== */

.offcanvas-menu .mod-languages{
  margin-top: 10px;
}

.offcanvas-menu .mod-languages__select{
  width: 100%;
}

.offcanvas-menu .mod-languages .btn{
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 14px;
  height: 48px;
  font-weight: 600;
  letter-spacing: .05em;
  color: #fff;
}

.offcanvas-menu .mod-languages .btn:hover{
  background: rgba(255,255,255,0.15);
}

.offcanvas-menu .mod-languages .dropdown-menu{
  background: #11161b;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
}

.offcanvas-menu .mod-languages .dropdown-menu a{
  color: #fff !important;
  padding: 10px 16px;
}

.offcanvas-menu .mod-languages .dropdown-menu a:hover{
  background: rgba(255,255,255,0.08);
}

/* ===================================
   OFFCANVAS: FIX LANGUAGE DROPDOWN AUTO-OPEN
=================================== */

/* 1) Nikad ne prikazuj dropdown otvoren po defaultu u offcanvasu */
.offcanvas-menu .mod-languages .dropdown-menu{
  display: none;
}

/* 2) Prikaži ga samo kad Bootstrap stavi .show */
.offcanvas-menu .mod-languages .dropdown-menu.show{
  display: block;
}

/* 3) Ako negdje ostane class "show" zalijepljen, ali button nije expanded -> sakrij */
.offcanvas-menu .mod-languages .btn[aria-expanded="false"] + .dropdown-menu{
  display: none !important;
}

/* 4) Onemogući focus/hover auto-open osjećaj */
.offcanvas-menu .mod-languages .btn:focus{
  box-shadow: none !important;
}

/* ===================================
   OFFCANVAS: STYLE DROPDOWN (clean)
=================================== */

.offcanvas-menu .mod-languages{
  margin-top: 16px;
  width: 100%;
}

.offcanvas-menu .mod-languages__select.btn-group{
  width: 100%;
}

.offcanvas-menu .mod-languages .btn{
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.offcanvas-menu .mod-languages .btn:hover{
  background: rgba(255,255,255,.12) !important;
}

/* dropdown lista */
.offcanvas-menu .mod-languages .dropdown-menu{
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  background: #11161b;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
}

.offcanvas-menu .mod-languages .dropdown-menu li + li{
  margin-top: 4px;
}

.offcanvas-menu .mod-languages .dropdown-menu a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,.9) !important;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .04em;
}

.offcanvas-menu .mod-languages .dropdown-menu a:hover{
  background: rgba(255,255,255,.08);
}

.offcanvas-menu .mod-languages .lang-active a{
  background: rgba(255,255,255,.14);
  color: #fff !important;
}



/* =====================================
   OFFCANVAS RIGHT - FULLSCREEN + CORRECT OPEN/CLOSE
   (bez pogađanja širine u px)
===================================== */

/* fullscreen panel */
body.ltr.offcanvs-position-right .offcanvas-menu{
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  top: 0 !important;
}

/* CLOSED: samo kad NIJE otvoren (nema open klasu na body/html) */
body.ltr.offcanvs-position-right:not(.offcanvas-open):not(.off-canvas-open):not(.offcanvas-active):not(.offcanvas-show) .offcanvas-menu{
  right: -100vw !important;   /* umjesto -300px */
}

/* OPEN: kad je otvoren (body/html open klase) */
body.ltr.offcanvs-position-right.offcanvas-open .offcanvas-menu,
body.ltr.offcanvs-position-right.off-canvas-open .offcanvas-menu,
body.ltr.offcanvs-position-right.offcanvas-active .offcanvas-menu,
body.ltr.offcanvs-position-right.offcanvas-show .offcanvas-menu,
html.offcanvas-open body.ltr.offcanvs-position-right .offcanvas-menu{
  right: 0 !important;
}

.offcanvas-menu .offcanvas-inner ul.menu > li > a {
	
	font-size: 23px;
	line-height: 23px;
}

/* =========================================================
   OFFCANVAS: KILL GLOBAL .landing-btn CARD STYLE
   (da nema duplih okvira + da nema slider efekta)
========================================================= */

/* wrapper (.landing-btn) = potpuno neutralan u offcanvasu */
.offcanvas-menu .offcanvas-bottom .landing-btn{
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  border-radius: 0 !important;
  position: static !important;
  scroll-snap-align: none !important;
  transition: none !important;
}

/* sigurnosno: nema pseudo okvira ni na wrapperu */
.offcanvas-menu .offcanvas-bottom .landing-btn::before,
.offcanvas-menu .offcanvas-bottom .landing-btn::after{
  content: none !important;
  display: none !important;
}

/* container grid (da ne bude flex/scroll) */
.offcanvas-menu .offcanvas-bottom .landing-buttons{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 10px !important;
  overflow: hidden !important;
  scroll-snap-type: none !important;
}

/* a = jedini botun */
.offcanvas-menu .offcanvas-bottom .landing-btn a{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  height: 40px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;

  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* focus/active bez “ringova” */
.offcanvas-menu .offcanvas-bottom .landing-btn a:focus,
.offcanvas-menu .offcanvas-bottom .landing-btn a:focus-visible,
.offcanvas-menu .offcanvas-bottom .landing-btn a:active{
  outline: none !important;
  box-shadow: none !important;
}

/* dot + tekst malo manji */
.offcanvas-menu .offcanvas-bottom .landing-icon{
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: var(--btn-color) !important;
}

.offcanvas-menu .offcanvas-bottom .landing-label{
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #fff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* =========================================================
   OFFCANVAS: IKONE + LANGUAGE U ISTI RED (SPPB 2 COLUMNS FIX)
========================================================= */

/* 1) container -> grid sa 2 stupca: lijevo ikone, desno language */
.offcanvas-menu .offcanvas-bottom .sppb-row-container{
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  column-gap: 14px !important;
}

/* 2) oba column-wrap elementa neka budu normalni grid itemi (bez 41/58%) */
.offcanvas-menu .offcanvas-bottom .sppb-row-container > .sppb-row{
  display: contents !important; /* izbaci middle wrapper iz layouta */
}

.offcanvas-menu .offcanvas-bottom .sppb-row-container > .sppb-row > [id^="column-wrap-id-"]{
  max-width: 100% !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

/* 3) ikone u jednom redu */
.offcanvas-menu .offcanvas-bottom .header-actions{
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

/* 4) language u istom redu, poravnaj desno */
.offcanvas-menu .offcanvas-bottom .mod-languages{
  justify-self: end !important;
  width: auto !important;
}

.offcanvas-menu .offcanvas-bottom .mod-languages__select.btn-group{
  width: auto !important;
  display: inline-flex !important;
}
.offcanvas-menu .mod-languages__select.btn-group > .btn.dropdown-toggle::before {
  content: "";
  position: absolute;
  left: 10px;
}

/* 6) button dimenzije da stane u taj red */
.offcanvas-menu .offcanvas-bottom .mod-languages .btn{
  height: 54px !important;         /* match icon box */
  min-width: 120px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: none !important;
}
.burger-icon > span,
.offcanvas-active .burger-icon > span {
	
	background: #fff;
}
.burger-icon > span {

height: 3px;
border-radius: 3px;
}

.burger-icon {
  width: 30px;
}

/* =========================================================
   FOOTER PARTNERS – horizontal scroll na mobitelu
========================================================= */

/* desktop/tablet: normalno u redu, može wrap */
.footer-partners{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-partners a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-partners img{
  height: 44px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

/* mobitel: jedan red + horizontalni scroll */
@media (max-width: 992px){
  .footer-partners{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    /* da ne lijepi uz rub */
    padding: 6px 14px 10px;
    margin: 0 -14px; /* ako želiš da scroll ide full širinu sekcije */
  }

  .footer-partners a{
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .footer-partners img{
    height: 38px;          /* malo manje na mobu */
    max-width: 150px;
  }

  /* skini scrollbar vizualno (opcionalno) */
  .footer-partners::-webkit-scrollbar{ height: 6px; }
  .footer-partners::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.22); border-radius: 999px; }
  .footer-partners::-webkit-scrollbar-track{ background: transparent; }
}
.rute .fields-container,
#Locationsubmit,
.rute .article-introtext,
.controls .inputbox {
    
    display: none !important;
}

/* Intro/body block (map / modules / content) */
.article-details.rute .kl-intro{
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
}

/* Clear floats from map/plugins */
.article-details.rute .kl-intro::after{
  content:"";
  display:block;
  clear:both;
}

/* Mobile fixes for map module */
@media (max-width: 768px){
  .article-details.rute .kl-intro{
    padding: 14px;
  }

  .article-details.rute .kl-intro .mmlmap{
    width: 100% !important;
    float: none !important;
  }

  .article-details.rute .kl-intro #Locationsearch,
  .article-details.rute .kl-intro .locationmodule{
    width: 100% !important;
    float: none !important;
  }

  .article-details.rute .kl-intro .map_canvas,
  .article-details.rute .kl-intro [id^="map_canvas_"]{
    width: 100% !important;
    height: 340px !important;
  }
}


/* =========================
   RUTE – MAP BLOCK (INTRO)
========================= */
.article-details.rute .kl-intro{
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  position: relative;
}

/* lagani "accent" gore da izgleda kao sekcija */
.article-details.rute .kl-intro::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:12px;
  height:4px;
  border-radius:99px;
  background: linear-gradient(90deg, rgba(41,128,185,.9), rgba(41,128,185,0));
  pointer-events:none;
}

/* očisti floatove koje mapa plugin ubacuje */
.article-details.rute .kl-intro::after{
  content:"";
  display:block;
  clear:both;
}

/* map canvas: rounded + clean */
.article-details.rute .kl-intro .map_canvas,
.article-details.rute .kl-intro [id^="map_canvas_"]{
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* location search area: ne zauzimaj prostor gore kao "toolbar" */
.article-details.rute .kl-intro #Locationsearch.locationmodule{
  position: relative;
  margin: 0 0 12px 0;
}

/* sakrij SEARCH inpute/submit ako ti ne trebaju (ostavljam opcionalno) */
/*
.article-details.rute .kl-intro #Locationsubmit,
.article-details.rute .kl-intro input[name="searchzip"],
.article-details.rute .kl-intro .twitter-typeahead{
  display:none !important;
}
*/

/* =========================
   GELOCATE ME – PRO overlay
========================= */

/* parent form kao anchor */
.article-details.rute .kl-intro form[id^="map-location_"]{
  position: relative;
}

/* target samo button koji zove geolocate */
.article-details.rute .kl-intro button.resultbtn[onclick*="useGeocode"]{
  position: absolute !important;
  left: 50% !important;
  top: 14px !important;
  transform: translateX(-50%) !important;
  z-index: 999 !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 12px 18px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;

  border: 1px solid rgba(255,255,255,.55) !important;
  background: rgba(255,255,255,.82) !important;
  color: #0b2a3d !important;

  box-shadow: 0 12px 26px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.article-details.rute .kl-intro button.resultbtn[onclick*="useGeocode"]:hover{
  transform: translateX(-50%) translateY(-1px) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.22) !important;
  background: rgba(255,255,255,.92) !important;
}

.article-details.rute .kl-intro button.resultbtn[onclick*="useGeocode"] i{
  font-size: 16px !important;
}

/* =========================
   SEPARATION: MAP -> GALLERY
========================= */

/* napravi vidljiv razmak između intro mape i prvog field carda (galerije) */
.article-details.rute .kl-intro + .kl-below-block{
  margin-top: 22px;
}

/* naglasi galeriju kao odvojeni card (ako već nema) */
.article-details.rute .kl-below-block{
  border-radius: 18px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 18px;
}

/* label galerije malo jači */
.article-details.rute .kl-below-block .below-label{
  font-weight: 800;
  margin-bottom: 12px;
}

/* mobile */
@media (max-width: 768px){
  .article-details.rute .kl-intro{
    padding: 14px;
    border-radius: 16px;
  }

  .article-details.rute .kl-intro button.resultbtn[onclick*="useGeocode"]{
    top: 10px !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
  }

  .article-details.rute .kl-intro .map_canvas,
  .article-details.rute .kl-intro [id^="map_canvas_"]{
    border-radius: 14px !important;
  }
}

/* Sakrij eventualni stray text node na vrhu article body */
.article-details .kl-intro > p:first-child {
  display: none !important;
}

.kl-below-block .below-value { overflow: visible !important; }
.kl-below-block .mmlmap { overflow: visible !important; }

.mmlmap { min-height:450px !important; }
.map_canvas { min-height:450px !important; height: 570px !important; }


.article-list ul.fields-container {
    
    display: none;
}

.kl-channel-card{
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:14px 16px;
}
.kl-channel-title{font-weight:700;margin-bottom:6px;}
.kl-channel-link{display:inline-block;}
.kl-video-ratio{position:relative;width:100%;padding-top:56.25%;}
.kl-video-ratio iframe{position:absolute;inset:0;width:100%;height:100%;}

.contact-wrap{
  display:flex;
  justify-content:center;
  margin: 24px 0 18px;
}

.contact-card{
  width: min(860px, 100%);
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contact-chip{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  text-decoration:none;
  background: rgba(74,143,226,.06);
  border: 1px solid rgba(74,143,226,.15);
  transition: all .2s ease;
  color: #152238;
}

.contact-chip:hover{
  transform: translateY(-2px);
  background: rgba(74,143,226,.12);
  border-color: rgba(74,143,226,.3);
  box-shadow: 0 12px 25px rgba(74,143,226,.2);
}

.chip-icon{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, #4a8fe2, #2f6fd6);
  color:#fff;
  font-size:18px;
  flex-shrink:0;
}

.chip-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.chip-label{
  font-size: 12px;
  font-weight: 700;
  opacity:.7;
  letter-spacing:.03em;
  text-transform: uppercase;
}

.chip-value{
  font-size: 16px;
  font-weight: 700;
}

@media (max-width: 768px){
  .contact-card{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ARTICLE: manual fields block (Gallery + Attachments)
========================================================= */
.article-detailsnovosti .fields-container{
  display:none !important; /* sakrij auto-render koji se pojavi gore */
}

.article-detailsnovosti .article-extra-fields{
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(0,0,0,.12);
  display: grid;
  gap: 22px;
}

.article-detailsnovosti .article-field__title{
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.article-detailsnovosti .article-field__value{
  display: block;
}

/* =========================================================
   Gallery (tvoj ACF / tf-gallery-wrapper output)
========================================================= */
.article-detailsnovosti .tf-gallery-wrapper .gallery-items.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.article-detailsnovosti .tf-gallery-wrapper figure.item{
  margin: 0;
}

.article-detailsnovosti .tf-gallery-wrapper figure.item a{
  display: block;
  border-radius: 12px;
  overflow: hidden;
}

.article-detailsnovosti .tf-gallery-wrapper figure.item img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .2s ease;
}

.article-detailsnovosti .tf-gallery-wrapper figure.item a:hover img{
  transform: scale(1.03);
}

/* =========================================================
   ATTACHMENTS – CARD STYLE (ARTICLE LAYOUT)
========================================================= */

.article-attachments a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  color: #1f1f1f;
  transition: all .15s ease;
  margin-bottom: 10px;
}

.article-attachments a:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.25);
}

/* =========================================================
   ICON BOX
========================================================= */

.article-attachments a::before{
  content:"";
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.15);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px 30px;
  box-sizing: border-box;
}

/* =========================================================
   FILE TYPES
========================================================= */

/* PDF */
.article-attachments a[href*=".pdf"]::before{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' preserveAspectRatio='none'>\
<path d='M18 6h20l10 10v42a4 4 0 0 1-4 4H18a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z' fill='%23fff' stroke='%23d7d7d7' stroke-width='2'/>\
<path d='M38 6l10 10H38z' fill='%23f1f1f1' stroke='%23d7d7d7' stroke-width='2'/>\
<rect x='18' y='36' width='28' height='16' rx='4' fill='%23d32f2f'/>\
<text x='32' y='48' text-anchor='middle' font-family='Arial' font-size='12' font-weight='700' fill='white'>PDF</text>\
</svg>");
}

/* DOC */
.article-attachments a[href*=".doc"]::before,
.article-attachments a[href*=".docx"]::before{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' preserveAspectRatio='none'>\
<path d='M18 6h20l10 10v42a4 4 0 0 1-4 4H18a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z' fill='%23fff' stroke='%23d7d7d7' stroke-width='2'/>\
<path d='M38 6l10 10H38z' fill='%23f1f1f1' stroke='%23d7d7d7' stroke-width='2'/>\
<rect x='18' y='36' width='28' height='16' rx='4' fill='%231565c0'/>\
<text x='32' y='48' text-anchor='middle' font-family='Arial' font-size='12' font-weight='700' fill='white'>DOC</text>\
</svg>");
}

/* XLS */
.article-attachments a[href*=".xls"]::before,
.article-attachments a[href*=".xlsx"]::before,
.article-attachments a[href*=".csv"]::before,
.article-attachments a[href*=".gxlsx"]::before{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' preserveAspectRatio='none'>\
<path d='M18 6h20l10 10v42a4 4 0 0 1-4 4H18a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z' fill='%23fff' stroke='%23d7d7d7' stroke-width='2'/>\
<path d='M38 6l10 10H38z' fill='%23f1f1f1' stroke='%23d7d7d7' stroke-width='2'/>\
<rect x='18' y='36' width='28' height='16' rx='4' fill='%232e7d32'/>\
<text x='32' y='48' text-anchor='middle' font-family='Arial' font-size='12' font-weight='700' fill='white'>XLS</text>\
</svg>");
}

/* PPT */
.article-attachments a[href*=".ppt"]::before,
.article-attachments a[href*=".pptx"]::before{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' preserveAspectRatio='none'>\
<path d='M18 6h20l10 10v42a4 4 0 0 1-4 4H18a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z' fill='%23fff' stroke='%23d7d7d7' stroke-width='2'/>\
<path d='M38 6l10 10H38z' fill='%23f1f1f1' stroke='%23d7d7d7' stroke-width='2'/>\
<rect x='18' y='36' width='28' height='16' rx='4' fill='%23ef6c00'/>\
<text x='32' y='48' text-anchor='middle' font-family='Arial' font-size='12' font-weight='700' fill='white'>PPT</text>\
</svg>");
}

/* ZIP */
.article-attachments a[href*=".zip"]::before,
.article-attachments a[href*=".rar"]::before,
.article-attachments a[href*=".7z"]::before{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' preserveAspectRatio='none'>\
<path d='M18 6h20l10 10v42a4 4 0 0 1-4 4H18a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z' fill='%23fff' stroke='%23d7d7d7' stroke-width='2'/>\
<path d='M38 6l10 10H38z' fill='%23f1f1f1' stroke='%23d7d7d7' stroke-width='2'/>\
<rect x='18' y='36' width='28' height='16' rx='4' fill='%235d4037'/>\
<text x='32' y='48' text-anchor='middle' font-family='Arial' font-size='12' font-weight='700' fill='white'>ZIP</text>\
</svg>");
}

/* IMG */
.article-attachments a[href*=".jpg"]::before,
.article-attachments a[href*=".jpeg"]::before,
.article-attachments a[href*=".png"]::before,
.article-attachments a[href*=".webp"]::before,
.article-attachments a[href*=".gif"]::before{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' preserveAspectRatio='none'>\
<path d='M18 6h20l10 10v42a4 4 0 0 1-4 4H18a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z' fill='%23fff' stroke='%23d7d7d7' stroke-width='2'/>\
<path d='M38 6l10 10H38z' fill='%23f1f1f1' stroke='%23d7d7d7' stroke-width='2'/>\
<rect x='18' y='36' width='28' height='16' rx='4' fill='%236a1b9a'/>\
<text x='32' y='48' text-anchor='middle' font-family='Arial' font-size='12' font-weight='700' fill='white'>IMG</text>\
</svg>");
}


.o-projektu img {
    
    border-radius: 30px !important;
}



.blogrute .article-intro-image img {
    
    border-radius: 18px !important;
}

.leaflet-popup-close-button,
.leaflet-popup-tip-container,
.leaflet-popup-content-wrapper {
    
    display: none !important;
}


/* =========================================
   SOCRAT – MyMapLocations / Location detail
   (NEW PHP layout: .mml-hero / .mml-hero-map / .mml-hero-info)
   OBRIŠI STARI CSS I STAVI OVAJ
========================================= */

#locationsearch.locationsearch{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 14px 48px;
  color: #111;
}

/* =========================
   FONT FIX (NE DIRAMO ICON SPANOVE)
   Forsiramo font samo na tekstualne elemente
========================= */
#locationsearch :is(h1,h2,h3,h4,h5,h6,p,li,ul,ol,small,strong,em,blockquote,pre,code,table,td,th,button,input,textarea,select,label){
  font-family: inherit !important;
}

/* =========================
   PRINT / BACK ICONS (SVG, da se nikad ne “izgube”)
========================= */
#locationsearch .cmml-toolbar a,
#locationsearch h1 .backbtn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

#locationsearch .cmml-toolbar{
  margin: 0 0 14px;
}
#locationsearch .cmml-toolbar a{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  font-weight: 800;
  color: #111;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#locationsearch .cmml-toolbar a:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.22);
}

/* Back button box */
#locationsearch h1.mml-title{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 900;
}
#locationsearch h1 .backbtn{
  width: 46px;
  height: 46px;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#locationsearch h1 .backbtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.22);
}

/* SVG ikonice umjesto font-ikonica */
#locationsearch .mml-print,
#locationsearch .mml-back{
  width: 18px;
  height: 18px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 18px 18px;
}

/* print */
#locationsearch .mml-print{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M6 9V2h12v7'/>\
<path d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/>\
<path d='M6 14h12v8H6z'/>\
</svg>");
}

/* back */
#locationsearch .mml-back{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M19 12H5'/>\
<path d='M12 19l-7-7 7-7'/>\
</svg>");
}

/* =========================
   HERO WRAPPER = JEDNA KARTICA (MAPA + INFO)
   OVO POPRAVLJA “TANKU KARTU”
========================= */
#locationsearch .mml-hero{
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 18px;

  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  box-shadow: 0 22px 48px rgba(0,0,0,.06);

  /* bitno da se ništa ne “stisne” */
  align-items: start;
}
#locationsearch .mml-hero-map,
#locationsearch .mml-hero-info{
  min-width: 0; /* ključ za grid shrink bug */
}

/* =========================
   MAPA (Lijevo)
========================= */
#locationsearch .mml-hero-map .mmlmap{
  width: 100% !important;
  float: none !important;
  position: relative !important;

  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
}

#locationsearch .mml-hero-map .mmlmap .map_canvas{
  width: 100% !important;
  height: 520px !important;
  float: none !important;
  position: relative !important;
}

/* =========================
   DESNI INFO
========================= */
#locationsearch .mml-hero-info{
  display: block;
}

/* slika */
#locationsearch .mmllogo{
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,.10);
  display: block;
  margin: 0 0 12px;
}

/* kontakt kartica */
#locationsearch .mml-contact-card{
  padding: 14px;
  border-radius: 20px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.10);
}

/* address row s pinom */
#locationsearch .mml-address{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
}

/* pin ikona (bolja nego prije, ne prekriva tekst) */
#locationsearch .mml-pin{
  width: 22px;
  height: 22px;
  margin-top: 2px;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M12 22s7-4.5 7-11a7 7 0 1 0-14 0c0 6.5 7 11 7 11z'/>\
<circle cx='12' cy='11' r='2.5'/>\
</svg>");
}

/* address text – normal wrap */
#locationsearch .locationaddress{
  display: block;
  line-height: 1.55;
  font-size: 14px;
  color: #111;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* telefon OBAVEZNO u novi red */
#locationsearch .locationaddress a[href^="tel:"]{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  font-weight: 900;
  text-decoration: none;
  color: #111;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#locationsearch .locationaddress a[href^="tel:"]::before{
  content:"";
  width: 18px;
  height: 18px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.12.86.3 1.7.54 2.5a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.58-1.06a2 2 0 0 1 2.11-.45c.8.24 1.64.42 2.5.54A2 2 0 0 1 22 16.92z'/>\
</svg>");
}
#locationsearch .locationaddress a[href^="tel:"]:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.22);
}

/* =========================
   DESCRIPTION
========================= */
#locationsearch .mml_description{
  margin-top: 18px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  box-shadow: 0 22px 48px rgba(0,0,0,.06);
}
#locationsearch .mml_description p:last-child{ margin-bottom: 0; }

/* =========================
   FIELDS BOTTOM (Gallery + Attachments)
========================= */
#locationsearch .mml-fields-bottom{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

#locationsearch .mml-field{
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  box-shadow: 0 22px 48px rgba(0,0,0,.06);
}

#locationsearch .field-label{
  display: block;
  font-weight: 900;
  margin-bottom: 10px;
}

/* Gallery grid */
#locationsearch .tf-gallery-wrapper{
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#locationsearch .tf-gallery-wrapper .gallery-items.grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
#locationsearch .tf-gallery-wrapper figure.item{ margin: 0 !important; }
#locationsearch .tf-gallery-wrapper figure.item img{
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease;
}
#locationsearch .tf-gallery-wrapper figure.item a:hover img{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
}

/* Attachments link */
#locationsearch .acfup-item a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  text-decoration: none;
  font-weight: 800;
  color: #111;
}
#locationsearch .acfup-item a:hover{
  box-shadow: 0 16px 34px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.22);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  #locationsearch h1.mml-title{ font-size: 26px; }

  #locationsearch .mml-hero{
    grid-template-columns: 1fr;
  }
  #locationsearch .mml-hero-map .mmlmap .map_canvas{
    height: 420px !important;
  }
}

@media (max-width: 520px){
  #locationsearch .mmllogo{ height: 220px; }
  #locationsearch .tf-gallery-wrapper .gallery-items.grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #locationsearch .tf-gallery-wrapper figure.item img{
    height: 170px;
  }
}

/* Landing sidebar category list */
.mml-landing #locationresult .resultbar { display:none; }

.mml-catlist{
  padding: 10px;
}

.mml-catlist-head{
  padding: 8px 6px 10px;
}

.mml-catlist-title{
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .2px;
}

.mml-catitem{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  text-decoration:none;
  color: inherit;
  margin-bottom: 10px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.mml-catitem:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.22);
}

.mml-catthumb{
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0,0,0,.12);
}

.mml-catthumb--ph{
  background: linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
}

.mml-catname{
  font-weight: 700;
  line-height: 1.2;
  font-size: 15px;
}

.mml-catchev{
  margin-left:auto;
  font-size: 22px;
  opacity: .5;
}

.rute .page-header h1{
    display: inline-block;
  background: #fff !important;
  padding: 18px 26px !important;
  border-radius: 18px;
  box-shadow: none !important;
  position: relative;
  transform: translateY(calc(-1 * var(--title-up))) !important;
  margin: 0 !important;
  left: 0 !important;
  right: auto !important;
  max-width: none !important;
  width: auto !important;
  font-weight: 800;
  line-height: 1.05;
  z-index: 10;
  font-size: clamp(34px, 4vw, 56px);
}

.rute .page-header h1::after {
  content: "";
  display: block;
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: #3fa2db;
  margin-top: 14px;
}


.rute #maps{
    
    margin-top: -50px;
}

/* MOB: makni fiksnu visinu sidebar liste i unutarnji scroll */
@media (max-width: 768px){
  #locationresult{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* ako plugin forsira scroll unutar resultpanela */
  #locationresult #resultpanel{
    height: auto !important;
    overflow: visible !important;
  }

  /* ako koristi mCustomScrollbar wrapper */
  #locationresult .mCustomScrollBox,
  #locationresult .mCSB_container{
    height: auto !important;
    max-height: none !important;
  }
}


[class^="mml-"], [class*=" mml-"] {
    
    font-family: inherit !Important;
}
.mml-back::before,
.mml-topbar {
    
    display: none;
}

.page-header {
  padding-bottom: 15px;
  pointer-events: none;
}


/* ============================
   LOCATION DETAIL: ADDRESS + PHONE (aligned)
   ============================ */

/* wrapper: 2 kolone (ikona 22px + tekst) */
#locationsearch .mml-address{
  display:grid;
  grid-template-columns:22px 1fr;
  column-gap:10px;
  align-items:start;
}

/* pin ikona (samo poravnanje) */
#locationsearch .mml-pin{
  top:0 !important;     /* poništi njihov top:1px */
  margin-top:2px;
  line-height:1;
}

/* blok s linijama adrese */
#locationsearch .mml-address-lines{
  display:block;
}

/* line spacing adrese */
#locationsearch .mml-address-line1,
#locationsearch .mml-address-line2{
  line-height:1.35;
}

/* PHONE ROW: ista 2-kolonska shema kao adresa */
#locationsearch .mml-address-lines .mml-phone-row{
  display:grid;
  grid-template-columns:22px 1fr;
  column-gap:10px;
  align-items:start;
  margin-top:8px;
  padding:0 !important;
    margin-left: -30px !important;
}

/* phone ikona */
#locationsearch .mml-phone{
  top:0 !important;
  margin-top:2px;
  line-height:1;
  width:22px;
  height:22px;
  background-repeat:no-repeat;
  background-size:22px 22px;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M22 16.92v3a2 2 0 0 1-2.18 2A19.86 19.86 0 0 1 3.08 4.18 2 2 0 0 1 5.06 2h3a2 2 0 0 1 2 1.72c.12.89.37 1.76.73 2.58a2 2 0 0 1-.45 2.11L9.09 9.91a16 16 0 0 0 6 6l1.5-1.5a2 2 0 0 1 2.11-.45c.82.36 1.69.61 2.58.73A2 2 0 0 1 22 16.92z'/>\
</svg>");
}

/* tekst telefona bez uvlaka */
#locationsearch .mml-address-lines .mml-phone-row .mml-contact-text{
  padding:0 !important;
  margin:0 !important;
  line-height:1.35;
}

/* link telefona */
#locationsearch .mml-address-lines .mml-phone-row a{
  font-weight:700;
  text-decoration:none;
}
#locationsearch .mml-address-lines .mml-phone-row a:hover{
  text-decoration:underline;
}

/* =========================================================
   MYMAPLOCATIONS – CLEAN SEARCH (LEFT) + LOCATE ME (TOP)
   ========================================================= */

/* sakrij filter */
#autosuggest button[onclick*="slidePlaintoogle"]{
  display:none !important;
}

/* -------- TOP "Locate me" gumb (centar iznad svega) ------- */
.mml-top-tools{
  width:100%;
  display:flex;
  justify-content:center;
  margin: 6px 0 18px;
}

.mml-top-tools .mml-geo-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  border-radius:999px;
  border:1px solid rgba(41,128,185,.35);
  background:#2980b9;
  color:#fff;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease;
}

.mml-top-tools .mml-geo-btn:hover{
  transform: translateY(-1px);
  box-shadow:0 16px 32px rgba(0,0,0,.16);
}

.mml-top-tools .mml-geo-btn svg{
  width:16px;
  height:16px;
  fill:#fff;
}

/* -------- LEFT SEARCH red (input + search ikona) ---------- */
#autosuggest{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  margin-bottom:8px;
}

/* KLJUČ: typeahead wrapper smije se smanjit (da ne pregazi gumb) */
#autosuggest .twitter-typeahead{
  flex: 1 1 auto !important;
  min-width: 0 !important;      /* NAJBITNIJE */
  max-width: 520px !important;
}

/* input */
#autosuggest input#searchinput{
  width:100% !important;
  box-sizing:border-box !important;
  border-radius:14px !important;
  border:1px solid rgba(0,0,0,.18) !important;
  padding:10px 14px !important;
  font-size:15px !important;
  background:#fff !important;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  transition: border-color .15s ease, box-shadow .15s ease;
}

#autosuggest input#searchinput:focus{
  outline:none !important;
  border-color:#2980b9 !important;
  box-shadow:0 10px 24px rgba(41,128,185,.16);
}

/* hint od typeahead-a sakrij */
#autosuggest .tt-hint{ opacity:0 !important; }

/* search ikona gumb (krug) */
#autosuggest button.submit{
  flex: 0 0 40px !important;
  width:40px !important;
  height:40px !important;
  padding:0 !important;
  margin-left:6px !important;
  border-radius:50% !important;
  border:1px solid rgba(0,0,0,.14) !important;
  background:#fff !important;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .15s ease, box-shadow .15s ease;
}

#autosuggest button.submit:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.10);
}

/* original geolocate gumb u redu sakrijemo (premještamo ga gore) */
#autosuggest button[onclick*="useGeocode"]{
  display:none !important;
}

/* tip ispod searcha */
.mml-search-tip{
  font-size:13px;
  color: rgba(0,0,0,.62);
  margin: 0 0 16px;
  line-height:1.35;
}

/* mobile */
@media (max-width:520px){
  .mml-top-tools{ justify-content:stretch; }
  .mml-top-tools .mml-geo-btn{ width:100%; justify-content:center; }

  #autosuggest{
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  #autosuggest .twitter-typeahead{
    max-width:none !important;
    width:100% !important;
  }

  #autosuggest button.submit{
    flex: 0 0 44px !important;
    width:44px !important;
    height:44px !important;
    margin-left:0 !important;
  }
}

/* =========================================================
   LOADER OVERLAY (Locating you…)
   ========================================================= */
.mml-geo-loading{
  position:fixed;
  inset:0;
  background:rgba(255,255,255,.72);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(2px);
}

.mml-geo-loading .box{
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  gap:12px;
  font:600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.mml-geo-loading .spinner{
  width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(0,0,0,.18);
  border-top-color: rgba(0,0,0,.65);
  animation:mmlspin .8s linear infinite;
}

@keyframes mmlspin { to { transform: rotate(360deg); } }

/* =========================================================
   MYMAPLOCATIONS – SIDEBAR RESULT CARD (FINAL CLEAN)
   ========================================================= */

#locationresult address{
  position:relative;
  display:block;
  padding:16px 16px 14px 74px;
  margin:0 0 14px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}

/* pin */
#locationresult address > a:first-child{
  position:absolute;
  left:16px;
  top:16px;
}

#locationresult address img.sidebar-icon{
  width:44px;
  height:44px;
  display:block;
}

/* =========================================================
   TITLE
   ========================================================= */

#locationresult .location-title{
  display:block;
  font-size:18px;
  font-weight:800;
  line-height:1.2;
  margin-bottom:8px;
}

#locationresult .location-title a{
  text-decoration:none;
  color:#1f1f1f;
}

/* underline like other page titles */

#locationresult .location-title::after{
  content:"";
  display:block;
  width:70px;
  height:6px;
  border-radius:999px;
  background:#3fa2db;
  margin-top:10px;
  margin-bottom:10px;
}

/* =========================================================
   ADDRESS
   ========================================================= */

#locationresult .locationaddress{
  font-size:14px;
  color:rgba(0,0,0,.72);
  line-height:1.4;
}

#locationresult .locationaddress br{
  display:block;
  margin:3px 0;
}

/* phone */

#locationresult .locationaddress a[href^="tel:"]{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  font-weight:700;
  color:#2980b9;
  text-decoration:none;
}

#locationresult .locationaddress a[href^="tel:"]::before{
  content:"📞";
}

/* =========================================================
   DISTANCE BADGE
   ========================================================= */

#locationresult .label.label-important.distance{
  position:absolute;
  top:16px;
  right:16px;
  padding:7px 12px;
  border-radius:999px;
  background:#2980b9;
  color:#fff;
  font-size:12px;
  font-weight:800;
  border:none;
}

/* change text style */

#locationresult .label.label-important.distance .distance{
  color:#fff !important;
}

/* add explanation text */

#locationresult .label.label-important.distance::after{
  content:" away";
  font-weight:600;
  opacity:.9;
}

/* =========================================================
   TOOL BUTTONS
   ========================================================= */

#locationresult .mytool{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(0,0,0,.08);
}

/* hide original icons */

#locationresult .routeicon,
#locationresult .detailsicon,
#locationresult .contacticon{
  display:none !important;
}

/* buttons */

#locationresult .mytool a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  color:#1f1f1f;
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  transition:all .15s ease;
}

#locationresult .mytool a:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.10);
}

/* primary route */

#locationresult .mytool a.route{
  background:#2980b9;
  border-color:#2980b9;
  color:#fff;
}

#locationresult .mytool a.route:hover{
  box-shadow:0 12px 26px rgba(41,128,185,.28);
}

/* icons */

#locationresult .mytool a.route::before{
  content:"↗";
}

#locationresult .mytool a[href*="/location/"]::before{
  content:"ℹ";
}

#locationresult .mytool a.contact-btn::before{
  content:"✉";
}

/* hide empty contact */

#locationresult .contact-btn[href="http://"]{
  display:none !important;
}

#locationresult .resultbar .locationaddress {
  margin-left: 0px;
  display: block;
}

/* =========================================================
   MYMAPLOCATIONS – MOBILE FIX (NEW)
   ========================================================= */
@media (max-width: 640px){

  /* 0) general: makni sva float/width s form i result kolona */
  .plainform,
  #locationresult.plain,
  .mmlmap{
    width:100% !important;
    float:none !important;
  }

  /* 1) Force card width (override their width:80%) */
  #locationresult #resulttop address,
  #locationresult address{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* 2) Premjesti TOOLBAR (Locate + Search) IZNAD mape */
  /* - parent of map and form is #maps, pa ćemo pozicionirat absolute unutar njega */
  #maps{
    position:relative;
  }

  /* stvori prostor gore da toolbar ne prekriva mapu */
  #maps{
    padding-top: 132px; /* visina toolbara */
  }

  /* Top tools + search block stavi gore i preko cijele širine */
  .mml-top-tools{
    position:absolute !important;
    top:10px;
    z-index:9999;
    margin:0 !important;
    display:flex !important;
    justify-content:center !important;
  }

  /* Locate me centar, normalna širina */
  .mml-top-tools .mml-geo-btn{
    width:100%;
    max-width: 150px;
    justify-content:center;
    padding:12px 18px !important;
    font-size:15px !important;
    border-radius: 16px !important;
  }

  /* Search row odmah ispod Locate me */
  #autosuggest{
    position:absolute !important;
    left:12px;
    right:12px;
    top:74px;                 /* ispod locate me */
    z-index:9999;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin:0 !important;
  }

  /* typeahead wrapper mora se moći smanjiti */
  #autosuggest .twitter-typeahead{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  /* input full width i kompaktniji */
  #autosuggest input#searchinput{
    width:100% !important;
    padding:12px 14px !important;
    font-size:15px !important;
    border-radius:16px !important;
  }

  /* search button (ikona) malo veći i u ravnini */
  #autosuggest button.submit{
    flex: 0 0 46px !important;
    width:46px !important;
    height:46px !important;
    margin-left:0 !important;
    border-radius: 16px !important; /* kvadrat sa zaobljenjem, izgleda modernije */
  }

  /* original geolocate u redu je već sakriven (ostaje) */
  #autosuggest button[onclick*="useGeocode"]{ display:none !important; }

  /* 3) Map canvas full width ispod toolbara */
  .mmlmap .map_canvas{
    width:100% !important;
    height: 300px !important; /* po želji 280-340 */
    display:block !important;
  }

  /* 4) Tip tekst ispod mape (NE u sred toolbara) */
  .mml-search-tip{
    margin: 10px 12px 14px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* 5) Kartice kompaktnije na mobu */
  #locationresult address{
    padding:14px 14px 12px 66px !important;
    border-radius:16px !important;
  }

  #locationresult address > a:first-child{
    left:14px !important;
    top:14px !important;
  }

  #locationresult img.sidebar-icon{
    width:38px !important;
    height:38px !important;
  }

  #locationresult .location-title{
    font-size:16px !important;
  }

  #locationresult .location-title::after{
    width:52px !important;
    height:5px !important;
    margin-top:8px !important;
    margin-bottom:8px !important;
  }

  /* distance badge manji i desno */
  #locationresult .label.label-important.distance{
    top:12px !important;
    right:12px !important;
    padding:6px 10px !important;
    font-size:11px !important;
    max-width: 58%;
    white-space:nowrap;
  }

  /* gumbi: dva po redu */
  #locationresult .mytool{
    gap:8px !important;
  }

  #locationresult .mytool a{
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
    justify-content:center;
    padding:10px 12px !important;
    font-size:13px !important;
  }
}
@media (max-width:640px){
    
    .rute #maps {
  margin-top: -100px;
}

  /* search mora biti u jednom redu */
  #autosuggest{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:10px;
  }

  /* search input */
  #autosuggest .twitter-typeahead{
    flex:1 1 auto !important;
    min-width:0 !important;
  }

  /* search icon */
  #autosuggest button.submit{
    flex:0 0 46px !important;
    width:46px !important;
    height:46px !important;
  }

  /* TIP odmah ispod searchboxa */
  .mml-search-tip{
    position:absolute;
    top:124px;
    left:14px;
    right:14px;
    margin:0 !important;
    font-size:13px;
  }

  /* malo povećaj prostor iznad karte */
  #maps{
    padding-top:170px !important;
  }

}


.footer-contact{
  display:flex;
  flex-direction:column;
  gap:12px;
  color:#fff;
  font-size:15px;
}

.contact-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.contact-row i{
  width:22px;
  text-align:center;
  color:#fff;
  opacity:0.85;
}

.contact-row a{
  color:#fff;
  text-decoration:none;
}

.contact-row a:hover{
  text-decoration:underline;
}

/* SOCIAL */
.social-icons{
  display:flex;
  gap:12px;
  margin-top:8px;
}

.social-icons a{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  color:#fff;
  font-size:18px;
  transition:all .25s ease;
}

.social-icons a:hover{
  transform:translateY(-3px);
}

.social-icons a.instagram:hover{
  background:linear-gradient(135deg,#f58529,#e1306c,#833ab4);
  border-color:transparent;
}

.social-icons a.facebook:hover{
  background:#1877f2;
  border-color:transparent;
}