/* srdjan 2026-09-25 - Poppins s vlastitog poslužitelja (bez Google Fontsa) */
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/poppins-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/poppins-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* =======================================================================
   Nautilus Cavtat — statička inačica
   srdjan 2026-09-25. Zamjenjuje Joomla Helix predložak (bio 127 CSS datoteka).
   Izgled i sadržaj su preneseni 1:1 s Joomla inačice.
   ======================================================================= */

:root{
  --tekst:#252525; --tekst-tiho:#666; --crna:#1a1a1a;
  --podnozje:#171717; --linija:#e6e6e6; --plava:#2563eb; --narancasta:#ec430f; --plava-tamna:#1d4ed8;
  --omot:1320px; --razmak:clamp(48px,6vw,80px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* srdjan - izvornik koristi system-ui posvuda, a Poppins SAMO unutar klizača kategorija.
   Globalni Poppins je dizao visinu redaka (h1 84px umjesto 67px) pa se raspored razilazio. */
body{
  margin:0; background:#fff; color:var(--tekst);
  font:400 16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif;
  overflow-wrap:break-word;
}
/* srdjan - Helix poništava gornji razmak naslova; preglednička zadana vrijednost (0.67em)
   pomicala je sadržaj za 21px na stranicama koje same ne zadaju margin-top */
h1,h2,h3,h4,h5,h6{margin-top:0; line-height:1.2}
p{margin:0 0 16px}   /* isto kao Helix; preglednička zadana vrijednost (1em) razmicala je hero */
.kat-klizac{font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
img,picture,svg,iframe{max-width:100%}
img{height:auto}
picture{display:contents}
picture>source{display:none}   /* inače <source> zauzme ćeliju u gridu */
a{color:inherit}

.omot{max-width:var(--omot); margin-inline:auto; padding-inline:16px}

.preskoci{position:absolute;left:-9999px;top:0;background:#fff;color:var(--crna);padding:10px 16px;z-index:100}
.preskoci:focus{left:8px;top:8px}

/* ——— zaglavlje ——— */
.zaglavlje{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--linija)}
.zaglavlje-red{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px}
.zaglavlje{margin-bottom:16px}   /* izvornik ima 16px razmaka između zaglavlja i sadržaja */
.marka{display:inline-flex; align-items:center; flex:0 0 auto}
.marka img{height:55px; width:auto; display:block}   /* kao u izvorniku: 266×55 px */
.izbornik li:first-child a{color:var(--narancasta)}  /* "Nautilus Cavtat" je u izvorniku narančast */
.izbornik ul{display:flex; gap:22px; align-items:center; list-style:none; margin:0; padding:0}
.izbornik a{
  text-decoration:none; font-size:14px; font-weight:400; color:var(--crna);
  padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap;
}
.izbornik a:hover,.izbornik a[aria-current=page]{border-bottom-color:var(--plava)}

.izbornik-gumb{display:none; width:42px; height:42px; border:0; background:none; cursor:pointer; padding:9px}
.izbornik-gumb span{display:block; height:2px; background:var(--crna); border-radius:2px; transition:.25s}
.izbornik-gumb span+span{margin-top:5px}
.izbornik-gumb[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.izbornik-gumb[aria-expanded=true] span:nth-child(2){opacity:0}
.izbornik-gumb[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:900px){
  .izbornik-gumb{display:block}
  .izbornik{
    position:absolute; inset:60px 0 auto; background:#fff; border-bottom:1px solid var(--linija);
    display:none; box-shadow:0 12px 24px rgba(0,0,0,.08);
  }
  .izbornik.otvoren{display:block}
  .izbornik ul{flex-direction:column; gap:0; padding:8px 16px 16px}
  .izbornik a{display:block; padding:12px 0; border-bottom:1px solid var(--linija)}
  .izbornik a:hover,.izbornik a[aria-current=page]{border-bottom-color:var(--linija); color:var(--plava)}
}

/* ——— podnožje ——— */
.podnozje{background:var(--podnozje); color:#fff; padding:30px 0}
.podnozje p{margin:0; font-size:14px; color:#fff}
.podnozje a{color:#fff}

/* ——— okvir sadržaja ——— */
/* srdjan - bez vlastitog razmaka: blokovi sadržaja (.about-nautilus, .uvjeti-wrapper …)
   već nose svoj padding iz izvornog CSS-a, pa bi se razmak zbrajao */
/* razmak iznad/ispod sadržaja preuzet s izvornika (SPPB sekcija): 75px 0,
   osim Politike privatnosti koja ima 8px 0 75px */
.sekcija{padding:75px 0}
.sekcija--naslovnica{padding:0 0 75px}   /* hero je priljubljen uz zaglavlje */
.str-privatnost .sekcija{padding:8px 0 75px}
.sekcija-uska{max-width:900px; margin-inline:auto}

/* ——— hero (doslovno s Joomla inačice) ——— */
.hero-slider {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 500px;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.hero-title {
    color: #fff;
    font-size: 3.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin: 0 0 15px 0;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

.hero-subtitle {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 300;
    max-width: 700px;
    line-height: 1.6;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

.hero-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.hero-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.hero-dot:hover {
    background: rgba(255,255,255,0.8);
}

.hero-dot.active {
    background: #fff;
    border-color: #c41e3a;
}

.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.hero-nav:hover {
    background: rgba(255,255,255,0.4);
}

.hero-nav svg {
    width: 24px;
    height: 24px;
    fill: #fff;
}

.hero-nav.prev {
    left: 20px;
}

.hero-nav.next {
    right: 20px;
}

@media (max-width: 768px) {
    .hero-slider {
        height: 60vh;
        min-height: 400px;
    }
    
    .hero-title {
        font-size: 2rem;
        letter-spacing: 2px;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        padding: 0 20px;
    }
    
    .hero-nav {
        width: 40px;
        height: 40px;
    }
    
    .hero-nav.prev {
        left: 10px;
    }
    
    .hero-nav.next {
        right: 10px;
    }
}

/* ——— klizač kategorija: u Joomli tri puta kopiran isti kod, ovdje jedan ——— */
.kat-klizac {
    width: 100%;
    font-family: 'Poppins', sans-serif;
}

.kat-naslov {
    text-align: center;
    margin-bottom: 20px;
}

.kat-naslov h2 {
    font-size: 2.5rem;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.kat-naslov p {
    color: #666;
    font-size: 1.1rem;
    font-weight: 300;
}

.kk-container {
    position: relative;
    overflow: hidden;
}

.kk-track {
    display: flex;
    transition: transform 0.5s ease;
}

.kk-item {
    min-width: calc(100% / 4);
    padding: 15px;
    box-sizing: border-box;
}

.kk-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kk-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(37, 99, 235, 0.15);
}

.kk-card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kk-card-image img {
    max-width: 90%;
    max-height: 180px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.kk-card:hover .kk-card-image img {
    transform: scale(1.05);
}

.kk-card-content {
    padding: 20px;
    text-align: center;
}

.kk-card-content h3 {
    font-size: 1rem;
    color: #1a1a1a;
    margin: 0;
    font-weight: 500;
}

.kk-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background: #2563eb;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.kk-nav:hover {
    background: #1d4ed8;
    transform: translateY(-50%) scale(1.1);
}

.kk-nav svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

.kk-nav.prev {
    left: 10px;
}

.kk-nav.next {
    right: 10px;
}

.kk-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.kk-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
}

.kk-dot:hover {
    background: #bbb;
}

.kk-dot.active {
    background: #2563eb;
    transform: scale(1.2);
}

/* Responsive */
@media (max-width: 1024px) {
    .kk-item {
        min-width: calc(100% / 3);
    }
}

@media (max-width: 768px) {
    .kk-item {
        min-width: calc(100% / 2);
    }
    
    .kat-naslov h2 {
        font-size: 2rem;
    }
    
    .kk-nav {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 480px) {
    .kk-item {
        min-width: 100%;
    }
    
    .kk-card-image {
        height: 180px;
    }
}

/* ——— o-nama (doslovno s Joomla inačice) ——— */
.about-nautilus {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: 'Poppins', sans-serif;
}

.about-header {
    text-align: center;
    margin-bottom: 50px;
}

.about-header h2 {
    font-size: 2.5rem;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.about-header .since {
    color: #2563eb;
    font-size: 1.1rem;
    font-weight: 500;
}

.about-intro {
    text-align: center;
    font-size: 1.2rem;
    color: #555;
    line-height: 1.9;
    max-width: 900px;
    margin: 0 auto 50px;
    font-weight: 300;
}

.about-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 3rem;
    font-weight: 600;
    color: #2563eb;
    line-height: 1;
}

.stat-label {
    font-size: 0.95rem;
    color: #666;
    margin-top: 8px;
    font-weight: 400;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.about-card {
    background: #f8fafc;
    padding: 30px;
    border-radius: 12px;
    border-left: 4px solid #2563eb;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.1);
}

.about-card h3 {
    font-size: 1.1rem;
    color: #1a1a1a;
    margin: 0 0 15px 0;
    font-weight: 600;
}

.about-card p {
    color: #666;
    line-height: 1.8;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 300;
}

.about-cta {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
}

.about-cta h3 {
    font-size: 1.4rem;
    margin: 0 0 15px 0;
    font-weight: 600;
}

.about-cta p {
    margin: 0;
    opacity: 0.95;
    line-height: 1.8;
    font-weight: 300;
}

.about-cta .location {
    margin-top: 20px;
    font-weight: 500;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .about-nautilus {
        padding: 40px 15px;
    }
    
    .about-header h2 {
        font-size: 2rem;
    }
    
    .about-intro {
        font-size: 1.05rem;
    }
    
    .about-stats {
        gap: 30px;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .about-cta {
        padding: 30px 20px;
    }
}

/* ——— uvjeti-poslovanja (doslovno s Joomla inačice) ——— */
.uvjeti-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: 'Poppins', sans-serif;
    color: #444;
    line-height: 1.8;
}

.uvjeti-wrapper h1 {
    font-size: 2rem;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 10px;
    font-weight: 600;
}

.uvjeti-wrapper .subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 40px;
    font-size: 0.95rem;
}

.uvjeti-wrapper h2 {
    font-size: 1.3rem;
    color: #2563eb;
    margin: 40px 0 15px 0;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
}

.uvjeti-wrapper h3 {
    font-size: 1.1rem;
    color: #1a1a1a;
    margin: 25px 0 10px 0;
    font-weight: 500;
}

.uvjeti-wrapper p {
    margin: 0 0 15px 0;
    font-size: 0.95rem;
    font-weight: 300;
}

.uvjeti-wrapper ul {
    margin: 15px 0;
    padding-left: 20px;
}

.uvjeti-wrapper li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    font-weight: 300;
}

.uvjeti-info-box {
    background: #f8fafc;
    border-left: 4px solid #2563eb;
    padding: 20px 25px;
    border-radius: 0 8px 8px 0;
    margin: 25px 0;
}

.uvjeti-info-box p {
    margin: 5px 0;
}

.uvjeti-info-box strong {
    color: #1a1a1a;
    font-weight: 500;
}

.uvjeti-highlight {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    padding: 20px 25px;
    border-radius: 8px;
    margin: 25px 0;
}

.uvjeti-highlight p {
    margin: 5px 0;
    color: #fff;
}

.uvjeti-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.uvjeti-table th,
.uvjeti-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.95rem;
}

.uvjeti-table th {
    background: #f8fafc;
    font-weight: 500;
    color: #1a1a1a;
}

.uvjeti-contact {
    background: #f8fafc;
    padding: 30px;
    border-radius: 12px;
    margin-top: 40px;
    text-align: center;
}

.uvjeti-contact h3 {
    color: #2563eb;
    margin-top: 0;
}

.uvjeti-images {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 50px;
    justify-content: center;
}

.uvjeti-images img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.uvjeti-images figure {
    margin: 0;
    text-align: center;
}

.uvjeti-images figcaption {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #666;
    font-weight: 400;
}

@media (max-width: 768px) {
    .uvjeti-wrapper {
        padding: 40px 15px;
    }
    
    .uvjeti-wrapper h1 {
        font-size: 1.6rem;
    }
    
    .uvjeti-wrapper h2 {
        font-size: 1.15rem;
    }
    
    .uvjeti-images {
        flex-direction: column;
    }
}

/* ——— kontakt (doslovno s Joomla inačice) ——— */
.kontakt-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: 'Poppins', sans-serif;
}

.kontakt-header {
    text-align: center;
    margin-bottom: 50px;
}

.kontakt-header h2 {
    font-size: 2.5rem;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.kontakt-header p {
    color: #666;
    font-size: 1.1rem;
    font-weight: 300;
}

.kontakt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.kontakt-card {
    background: #f8fafc;
    padding: 35px 30px;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kontakt-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(37, 99, 235, 0.12);
}

.kontakt-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.kontakt-icon svg {
    width: 32px;
    height: 32px;
    fill: #fff;
}

.kontakt-card h3 {
    font-size: 1.1rem;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.kontakt-card p {
    color: #666;
    font-size: 0.95rem;
    margin: 0;
    font-weight: 300;
    line-height: 1.7;
}

.kontakt-card a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.kontakt-card a:hover {
    color: #1d4ed8;
}

.kontakt-map {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 50px;
}

.kontakt-map iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
}

.kontakt-cta {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
}

.kontakt-cta h3 {
    font-size: 1.5rem;
    margin: 0 0 15px 0;
    font-weight: 600;
}

.kontakt-cta p {
    margin: 0 0 25px 0;
    opacity: 0.95;
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.7;
}

.kontakt-cta .radno-vrijeme {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .kontakt-wrapper {
        padding: 40px 15px;
    }
    
    .kontakt-header h2 {
        font-size: 2rem;
    }
    
    .kontakt-map iframe {
        height: 300px;
    }
    
    .kontakt-cta {
        padding: 30px 20px;
    }
}

/* ——— politika-privatnosti (doslovno s Joomla inačice) ——— */
.privatnost-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: 'Poppins', sans-serif;
    color: #444;
    line-height: 1.8;
}

.privatnost-wrapper h1 {
    font-size: 2rem;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 10px;
    font-weight: 600;
}

.privatnost-wrapper .subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 40px;
    font-size: 0.95rem;
}

.privatnost-wrapper h2 {
    font-size: 1.3rem;
    color: #2563eb;
    margin: 40px 0 15px 0;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
}

.privatnost-wrapper h3 {
    font-size: 1.1rem;
    color: #1a1a1a;
    margin: 25px 0 10px 0;
    font-weight: 500;
}

.privatnost-wrapper p {
    margin: 0 0 15px 0;
    font-size: 0.95rem;
    font-weight: 300;
}

.privatnost-wrapper ul {
    margin: 15px 0;
    padding-left: 20px;
}

.privatnost-wrapper li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    font-weight: 300;
}

.privatnost-info-box {
    background: #f8fafc;
    border-left: 4px solid #2563eb;
    padding: 20px 25px;
    border-radius: 0 8px 8px 0;
    margin: 25px 0;
}

.privatnost-info-box p {
    margin: 5px 0;
}

.privatnost-info-box strong {
    color: #1a1a1a;
    font-weight: 500;
}

.privatnost-contact {
    background: #f8fafc;
    padding: 30px;
    border-radius: 12px;
    margin-top: 40px;
    text-align: center;
}

.privatnost-contact h3 {
    color: #2563eb;
    margin-top: 0;
}

@media (max-width: 768px) {
    .privatnost-wrapper {
        padding: 40px 15px;
    }
    
    .privatnost-wrapper h1 {
        font-size: 1.6rem;
    }
    
    .privatnost-wrapper h2 {
        font-size: 1.15rem;
    }
}

/* ——— obrazac-za-raskid-ugovora (doslovno s Joomla inačice) ——— */
.raskid-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: 'Poppins', sans-serif;
    color: #444;
    line-height: 1.8;
}

.raskid-wrapper h1 {
    font-size: 1.8rem;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 10px;
    font-weight: 600;
}

.raskid-wrapper .subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 40px;
    font-size: 0.95rem;
}

.raskid-info {
    background: #f8fafc;
    border-left: 4px solid #2563eb;
    padding: 20px 25px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 30px;
}

.raskid-info h3 {
    color: #2563eb;
    margin: 0 0 10px 0;
    font-size: 1rem;
    font-weight: 600;
}

.raskid-info p {
    margin: 5px 0;
    font-size: 0.9rem;
    font-weight: 300;
}

.raskid-form {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 30px;
}

.raskid-form h2 {
    font-size: 1.3rem;
    color: #1a1a1a;
    margin: 0 0 30px 0;
    font-weight: 600;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 2px solid #2563eb;
}

.form-section {
    margin-bottom: 25px;
}

.form-section label {
    display: block;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.form-line {
    border-bottom: 1px solid #ccc;
    min-height: 30px;
    margin-bottom: 5px;
}

.form-line-short {
    border-bottom: 1px solid #ccc;
    min-height: 30px;
    width: 200px;
    display: inline-block;
}

.form-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.form-row .form-section {
    flex: 1;
    min-width: 200px;
}

.checkbox-section {
    background: #f8fafc;
    padding: 20px;
    border-radius: 8px;
    margin: 25px 0;
}

.checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.checkbox-item input[type="checkbox"] {
    margin-top: 5px;
    width: 18px;
    height: 18px;
}

.checkbox-item label {
    font-size: 0.9rem;
    font-weight: 300;
}

.signature-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #e5e7eb;
}

.signature-row {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.signature-box {
    flex: 1;
    min-width: 200px;
}

.signature-box label {
    display: block;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.signature-line {
    border-bottom: 1px solid #1a1a1a;
    min-height: 60px;
}

.raskid-instructions {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    padding: 30px;
    border-radius: 12px;
    margin-top: 30px;
}

.raskid-instructions h3 {
    margin: 0 0 15px 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.raskid-instructions p {
    margin: 10px 0;
    font-size: 0.9rem;
    font-weight: 300;
    opacity: 0.95;
}

.raskid-instructions strong {
    font-weight: 500;
}

.print-btn {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 30px auto;
    padding: 15px 30px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
}

.print-btn:hover {
    background: #1d4ed8;
}

@media print {
    .print-btn {
        display: none;
    }
    
    .raskid-wrapper {
        padding: 20px;
    }
    
    .raskid-form {
        border: 1px solid #000;
    }
}

@media (max-width: 768px) {
    .raskid-wrapper {
        padding: 40px 15px;
    }
    
    .raskid-form {
        padding: 25px 20px;
    }
    
    .raskid-wrapper h1 {
        font-size: 1.5rem;
    }
    
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .signature-row {
        flex-direction: column;
        gap: 30px;
    }
}

/* ——— pravne poveznice (u Joomli sekcija #sp-bottom): tamna podloga, popis jedno ispod drugog ——— */
.pravne{background:var(--podnozje); color:#fff; padding:60px 0 30px}   /* izvornik: bez razmaka iznad */
.pravne ul{list-style:none; margin:0; padding:0}
.pravne li{display:block}
.pravne a{display:inline-block; font-size:14px; line-height:22.4px; color:#a2a2a2; text-decoration:none}
.pravne a:hover{color:#fff}

/* ——— usklađivanje razmaka s izvornikom (izmjereno, ne procijenjeno) ——— */
.kat-klizac--uska{max-width:1200px; margin:0 auto; padding:20px}  /* Lavanda je u izvorniku uža */
.pravne .omot{min-height:90px}                /* izvornik: #sp-bottom sadržaj je 90px */

/* srdjan - uz upisane width/height atribute slike moraju ostati skalabilne.
   :where() drži specifičnost na nuli — inače je ovo pravilo gazilo
   .hero-slide img{height:100%} pa se slika u heroju nije razvlačila. */
:where(img[width][height]){max-width:100%; height:auto}

/* ——— točkice klizača ———
   srdjan 2026-09-25 - moj JS ih crta kao <button> radi pristupačnosti (tipkovnica, čitači
   ekrana), a preglednik im tad nametne vlastiti izgled: border 2px outset, padding i veću
   širinu. Zato su izgledale kao sive 3D pilule umjesto kao točke. Ovdje se taj izgled poništava
   i vraća onaj iz izvornika: 12px krug, #ddd, aktivna plava i malo uvećana. */
.kk-dot{
  -webkit-appearance:none; appearance:none;
  width:12px; height:12px; padding:0; border:0; margin:0;
  border-radius:50%; background:#ddd; cursor:pointer; font:inherit;
  flex:0 0 auto; line-height:0;
  transition:background .3s ease, transform .3s ease;
}
.kk-dot:hover{background:#bbb}
.kk-dot.active{background:var(--plava); transform:scale(1.2)}
.kk-dot:focus-visible{outline:2px solid var(--plava); outline-offset:3px}

/* na mobitelu se prikazuje po jedna kartica pa točkica zna biti 12 — neka se lijepo prelome */
.kk-dots{flex-wrap:wrap; gap:10px; padding-inline:16px}

/* klizač u kojem sve stane: bez strelica i točkica (vidi kk-bez-klizanja u site.js) */
.kat-klizac.kk-bez-klizanja .kk-nav,
.kat-klizac.kk-bez-klizanja .kk-dots{display:none}