/* ============================================
   CSS VARIJABLE — SEMANTIČKI TOKENI
   ============================================ */
:root {
    /* Boje */
    --color-background:        hsl(40, 33%, 98%);       /* #FBF9F4 — topla off-white */
    --color-foreground:        hsl(155, 35%, 10%);      /* #15281E — tamno-zelena */
    --color-primary:           hsl(148, 50%, 18%);      /* #174A2D — šumska zelena */
    --color-primary-fg:        hsl(40, 33%, 98%);       /* #FBF9F4 — tekst na zelenoj poz. */
    --color-accent:            hsl(165, 55%, 42%);      /* #30AB87 — akcent zelena */
    --color-cta:               hsl(142, 70%, 38%);      /* #1FA851 — CTA dugme */
    --color-muted:             hsl(155, 12%, 38%);      /* #566660 — muted tekst */
    --color-destructive:       hsl(0, 70%, 45%);        /* #C42626 — greške */

    /* Navbar */
    --navbar-height:           72px;
    --navbar-bg-scroll:        hsl(155, 30%, 12%);      /* tamno-zelena kada scrolluje */
    --navbar-bg-transparent:   rgba(0, 0, 0, 0.18);     /* providna na vrhu */

    /* Tipografija */
    --font-display:            'Fraunces', Georgia, serif;
    --font-body:               'Inter', system-ui, sans-serif;

    /* Tranzicije */
    --transition-fast:         0.2s ease;
    --transition-med:          0.35s ease;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--navbar-height);
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    font-feature-settings: 'cv11', 'ss01';
    background-color: var(--color-background);
    color: var(--color-foreground);
    line-height: 1.625;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--navbar-height);
    background: transparent;
    transition: background var(--transition-med), box-shadow var(--transition-med), backdrop-filter var(--transition-med);
}

/* Navbar kada korisnik scrolla — bijela pozadina sa tamnim tekstom */
.navbar.is-scrolled,
.navbar.is-menu-open {
    background: rgba(251, 249, 244, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Tekst i linkovi postaju tamni kad je navbar bijeli */
.navbar.is-scrolled .navbar__logo-text,
.navbar.is-menu-open .navbar__logo-text {
    color: var(--color-foreground);
}

.navbar.is-scrolled .navbar__link,
.navbar.is-menu-open .navbar__link {
    color: rgba(21, 40, 30, 0.75);
}

.navbar.is-scrolled .navbar__link:hover,
.navbar.is-menu-open .navbar__link:hover {
    color: var(--color-foreground);
    background: rgba(0, 0, 0, 0.05);
}

.navbar.is-scrolled .lang-switch,
.navbar.is-menu-open .lang-switch {
    border-color: rgba(21, 40, 30, 0.3);
}

.navbar.is-scrolled .lang-switch__btn,
.navbar.is-menu-open .lang-switch__btn {
    color: rgba(21, 40, 30, 0.55);
}

.navbar.is-scrolled .lang-switch__btn--active,
.navbar.is-menu-open .lang-switch__btn--active {
    color: var(--color-foreground);
}

.navbar.is-scrolled .lang-switch__sep,
.navbar.is-menu-open .lang-switch__sep {
    color: rgba(21, 40, 30, 0.25);
}

.navbar.is-scrolled .hamburger__line,
.navbar.is-menu-open .hamburger__line {
    background: var(--color-foreground);
}

.navbar__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* --- Logo --- */
.navbar__logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    text-decoration: none;
}

.navbar__logo-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 50%;
}

.navbar__logo-text {
    font-family: var(--font-display);
    font-size: 1.125rem;        /* text-lg */
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-primary-fg);
    white-space: nowrap;
}

/* --- Navigacija (desktop) --- */
.navbar__nav {
    flex: 1;
    display: flex;
    justify-content: center;
    text-transform: uppercase;
}

.navbar__list {
    display: flex;
    align-items: center;
    gap: 0.15rem;        /* smanjeno sa 0.25rem */
}
 
.navbar__link {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;          
    color: rgba(251, 249, 244, 0.95);
    padding: 0.35rem 0.65rem;   /* smanjeno sa 0.4rem 0.75rem */
    border-radius: 6px;
    transition: color var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
    text-transform: uppercase;
}
 
.navbar__link:hover {
    color: var(--color-primary-fg);
    background: rgba(255, 255, 255, 0.08);
}

/* --- Akcije (desna strana) --- */
.navbar__actions {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-shrink: 0;
}

/* --- Language Switch --- */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid rgba(251, 249, 244, 0.4);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    background: transparent;
}

.lang-switch__btn {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(251, 249, 244, 0.55);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0.25rem;
    transition: color var(--transition-fast);
    letter-spacing: 0.04em;
}

.lang-switch__btn:hover {
    color: var(--color-primary-fg);
}

.lang-switch__btn--active {
    color: var(--color-primary-fg);
}

.lang-switch__sep {
    color: rgba(251, 249, 244, 0.3);
    font-size: 0.75rem;
    padding: 0 0.2rem;
    user-select: none;
}

/* --- CTA Dugme --- */
.btn-rezervacija {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-cta);
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1.375rem;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 2px 12px rgba(31, 168, 81, 0.35);
}

.btn-rezervacija:hover {
    background: hsl(142, 70%, 32%);
    box-shadow: 0 4px 20px rgba(31, 168, 81, 0.45);
    transform: translateY(-1px);
}

.btn-rezervacija:active {
    transform: translateY(0);
}

.btn-rezervacija--full {
    width: 100%;
    padding: 1rem;
    border-radius: 999px;
    font-size: 1rem;
}

/* --- Hamburger --- */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background var(--transition-fast);
}

.hamburger:hover {
    background: rgba(255, 255, 255, 0.1);
}

.hamburger__line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-primary-fg);
    border-radius: 2px;
    transition: transform var(--transition-med), opacity var(--transition-med);
}

/* ============================================
   MOBILNI MENI — full screen, header unutra
   ============================================ */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    background: var(--color-background);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-med);
    overflow-y: auto;
}

.mobile-menu.is-open {
    transform: translateX(0);
}

/* Header mobilnog menija — logo + BS/EN + X */
.mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    height: var(--navbar-height);
    background: rgba(251, 249, 244, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.mobile-menu__header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Lang switch u mobilnom meniju — tamna verzija na bijeloj pozadini */
.mobile-menu .lang-switch {
    border-color: rgba(21, 40, 30, 0.3);
}

.mobile-menu .lang-switch__btn {
    color: rgba(21, 40, 30, 0.55);
}

.mobile-menu .lang-switch__btn--active {
    color: var(--color-foreground);
}

.mobile-menu .lang-switch__sep {
    color: rgba(21, 40, 30, 0.25);
}

/* Logo tekst u mobilnom meniju headeru — taman */
.mobile-menu .navbar__logo-text {
    color: var(--color-foreground);
}

/* Zatvori dugme — taman border na bijeloj pozadini */
.close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 1.375rem;
    line-height: 1;
    color: var(--color-foreground);
    background: none;
    border: 1.5px solid rgba(21, 40, 30, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.close-btn:hover {
    background: rgba(21, 40, 30, 0.06);
}

/* Lista linkova mobilnog menija */
.mobile-menu__list {
    flex: 1;
    padding: 0.5rem 0;
}

.mobile-menu__list li {
    border-bottom: 1px solid hsl(155, 15%, 90%);
}

.mobile-menu__link {
    display: block;
    padding: 1.1rem 1.5rem;
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-foreground);
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.mobile-menu__link:hover {
    color: var(--color-primary);
    padding-left: 2rem;
}

/* Footer mobilnog menija */
.mobile-menu__footer {
    padding: 1.25rem 1.5rem 2rem;
    border-top: 1px solid hsl(155, 15%, 88%);
    flex-shrink: 0;
}

/* ============================================
   OVERLAY
   ============================================ */
.mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-med);
}

.mobile-overlay.is-visible {
    opacity: 1;
    pointer-events: all;
}

/* ============================================
   HERO SEKCIJA
   ============================================ */

/* CSS varijable specifične za hero */
:root {
    --gradient-hero-top:    hsl(148, 50%, 8%, 0.55);
    --gradient-hero-bottom: hsl(148, 50%, 12%, 0.75);
    --shadow-elevated:      0 8px 32px rgba(23, 74, 45, 0.28), 0 2px 8px rgba(0,0,0,0.12);
}

.hero {
    position: relative;
    height: 100svh;          /* tačno cijela visina viewporta */
    min-height: 600px;       /* minimum za mali ekran */
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin-top: calc(-1 * var(--navbar-height)); /* ide ispod navbara od vrha */
}

/* --- Pozadinska slika --- */
.hero__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* --- Tamnozeleni gradient voal --- */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        var(--gradient-hero-top) 0%,
        var(--gradient-hero-bottom) 100%
    );
}

/* --- Bottom fade prema pozadini stranice --- */
.hero__bottom-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 96px;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--color-background) 100%
    );
}

/* --- Container teksta --- */
.hero__container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 8rem 2.5rem 7rem;
}

/* --- Sadržaj — lijevo poravnan unutar centriranog containera --- */
.hero__content {
    max-width: 660px;
    margin-left: 10%;   /* dodatni pomak udesno da prati razmak sa originala */
    text-align: left;
    animation: heroFadeUp 0.8s ease-out both;
}

/* --- Eyebrow --- */
.hero__eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;         /* text-xs */
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(251, 249, 244, 0.80);
    margin-bottom: 1rem;
}

/* --- H1 naslov --- */
.hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 6vw, 4.5rem); /* text-5xl → text-7xl */
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: #ffffff;
    margin-bottom: 1.25rem;
}

/* --- Podnaslov --- */
.hero__subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2vw, 1.25rem);   /* text-lg → text-xl */
    font-weight: 400;
    line-height: 1.625;
    color: rgba(251, 249, 244, 0.90);
    max-width: 600px;
    margin-bottom: 2.25rem;
}

/* --- CTA red dugmadi --- */
.hero__cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* --- Primarno dugme (bijelo, tamnozeleni tekst) --- */
.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-fg);
    border-radius: 999px;
    padding: 1rem 1.75rem;
    text-decoration: none;
    box-shadow: var(--shadow-elevated);
    transition:
        background var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast),
        gap var(--transition-fast);
    white-space: nowrap;
}

.btn-hero-primary:hover {
    background: hsl(40, 20%, 95%);
    box-shadow: 0 12px 40px rgba(23, 74, 45, 0.32);
    transform: translateY(-2px);
    gap: 0.75rem;
}

.btn-hero-primary:active {
    transform: translateY(0);
}

.btn-hero-primary__icon {
    display: inline-block;
    font-size: 1.1rem;
    line-height: 1;
    transition: transform var(--transition-fast);
}

.btn-hero-primary:hover .btn-hero-primary__icon {
    transform: translateY(2px);
}

/* --- Sekundarno dugme (text-only) --- */
.btn-hero-secondary {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: rgba(251, 249, 244, 0.95);
    text-decoration: none;
    padding: 1rem 0.25rem;
    position: relative;
    transition: color var(--transition-fast);
}

.btn-hero-secondary::after {
    content: '';
    position: absolute;
    bottom: 0.85rem;
    left: 0;
    width: 0;
    height: 1px;
    background: rgba(251, 249, 244, 0.95);
    transition: width var(--transition-med);
}

.btn-hero-secondary:hover::after {
    width: 100%;
}

/* ============================================
   WHATSAPP FLOATING DUGME
   ============================================ */
.whatsapp-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 900;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.whatsapp-btn:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 8px 28px rgba(37, 211, 102, 0.5);
}

/* ============================================
   ANIMACIJA — fade in up (hero content)
   ============================================ */
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RUTE SEKCIJA — style
   Dodati u assets/css/style.css
   ============================================ */

/* ---- Sekcija wrapper ---- */
.rute {
    background: var(--color-background);
    padding: 6rem 0 8rem;
}

.rute__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

/* ---- Header ---- */
.rute__header {
    max-width: 672px; /* max-w-2xl */
    margin-bottom: 3rem;
}

.rute__eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.rute__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-foreground);
}

/* ---- Grid kartica ---- */
.rute__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* ============================================
   KARTICA RUTE
   ============================================ */
.route-card {
    background: #ffffff;
    border: 1px solid hsl(155, 15%, 88%);
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(21, 40, 30, 0.06), 0 1px 3px rgba(0,0,0,0.04);
    transition: transform var(--transition-med), box-shadow var(--transition-med);
    cursor: default;
}

.route-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(21, 40, 30, 0.12), 0 2px 8px rgba(0,0,0,0.06);
}

/* ---- Carousel dio kartice ---- */
.route-card__carousel {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: hsl(155, 15%, 88%);
}

/* R1 / R2 badge */
.route-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-foreground);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    letter-spacing: 0.04em;
    backdrop-filter: blur(4px);
}

/* ---- Carousel ---- */
.carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.carousel__track {
    display: flex;
    height: 100%;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.carousel__slide {
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden;
}

.carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Carousel strelice */
.carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(4px);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-foreground);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.carousel__btn:hover {
    background: #ffffff;
    transform: translateY(-50%) scale(1.08);
}

.carousel__btn--prev { left: 0.75rem; }
.carousel__btn--next { right: 0.75rem; }

/* ---- Body kartice ---- */
.route-card__body {
    padding: 1.75rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0;
}

.route-card__title {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-foreground);
    margin-bottom: 0.25rem;
}

.route-card__tagline {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 0.875rem;
}

.route-card__desc {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-muted);
    flex: 1;
    margin-bottom: 1.25rem;
}

/* Meta tagovi */
.route-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    white-space: nowrap;
}

.meta-pill--neutral {
    background: hsl(155, 10%, 93%);
    color: var(--color-foreground);
}

.meta-pill--green {
    background: hsl(148, 50%, 18%, 0.1);
    color: var(--color-primary);
}

/* Dugmad u kartici */
.route-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.btn-route-secondary {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-foreground);
    background: var(--color-background);
    border: 1.5px solid hsl(155, 15%, 82%);
    border-radius: 999px;
    padding: 0.875rem 1.5rem;
    cursor: pointer;
    text-align: center;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

.btn-route-secondary:hover {
    background: hsl(155, 10%, 93%);
    border-color: hsl(155, 15%, 72%);
}

.btn-route-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-primary-fg);
    background: var(--color-primary);
    border: none;
    border-radius: 999px;
    padding: 0.875rem 1.5rem;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: background var(--transition-fast), transform var(--transition-fast);
    white-space: nowrap;
}

.btn-route-primary:hover {
    background: hsl(148, 50%, 14%);
    transform: translateY(-1px);
}

.btn-route-primary--large {
    padding: 0.9375rem 2rem;
    font-size: 1rem;
}

/* ============================================
   MODAL RUTE
   ============================================ */
.route-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-med);
    overflow-y: auto;
}

.route-modal.is-open {
    opacity: 1;
    pointer-events: all;
}

.route-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 0;
}

.route-modal__panel {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border-radius: 1.25rem;
    width: 100%;
    max-width: 760px;
    margin: 2rem auto;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.25);
    transform: translateY(20px);
    transition: transform var(--transition-med);
}

.route-modal.is-open .route-modal__panel {
    transform: translateY(0);
}

/* Carousel u modalu */
.route-modal__carousel {
    position: relative;
    aspect-ratio: 16 / 9;
    background: hsl(155, 15%, 88%);
    overflow: hidden;
}

.route-modal__carousel .carousel,
.route-modal__carousel .carousel__track,
.route-modal__carousel .carousel__slide {
    height: 100%;
}

/* Zatvori dugme */
.route-modal__close {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    z-index: 20;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-foreground);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.route-modal__close:hover {
    background: #ffffff;
    transform: scale(1.08);
}

/* Sadržaj modala */
.route-modal__content {
    padding: 2rem 2.25rem 2.5rem;
}

.route-modal__eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.route-modal__title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-foreground);
    margin-bottom: 1.5rem;
}

/* Meta grid u modalu (3 kolone) */
.route-modal__meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
    margin-bottom: 1.75rem;
}

.modal-meta-item {
    background: hsl(155, 10%, 95%);
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.modal-meta-item__label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.modal-meta-item__value {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-foreground);
}

/* Tekst paragraphi */
.route-modal__text {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-foreground);
    margin-bottom: 1rem;
}

/* Sekcije (Tok avanture, itd.) */
.route-modal__section {
    margin: 1.75rem 0 1.25rem;
}

.route-modal__section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin-bottom: 1rem;
}

/* Itinerar lista */
.route-modal__itinerary {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.route-modal__itinerary li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-foreground);
    padding-left: 0.25rem;
}

.route-modal__itinerary li::before {
    content: '';
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    margin-top: 0.35rem;
}

.route-modal__itinerary li strong {
    font-weight: 700;
    margin-right: 0.25rem;
}

/* Dvije kolone u modalu */
.route-modal__two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.75rem 0;
}

.route-modal__col .route-modal__section-title {
    margin-bottom: 0.875rem;
}

/* Checklist */
.route-modal__checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.route-modal__checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-foreground);
}

.route-modal__checklist li::before {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1.5px solid hsl(155, 15%, 75%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23174A2D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
    margin-top: 0.15rem;
}

/* CTA u modalu */
.route-modal__cta {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid hsl(155, 15%, 90%);
}

/* ============================================
   SKIPERI SEKCIJA — style
   Dodati na kraj assets/css/style.css
   ============================================ */

.skiperi {
    background: var(--color-background);
    padding: 6rem 0 7rem;
}

.skiperi__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

/* ---- Header ---- */
.skiperi__header {
    margin-bottom: 3.5rem;
}

.skiperi__eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.skiperi__title {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 3.5vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-foreground);
    margin-bottom: 0.875rem;
}

.skiperi__lead {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-muted);
    line-height: 1.6;
}

/* ---- Grid — 3 kolone na desktopu ---- */
.skiperi__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

/* ============================================
   KARTICA SKIPERA
   ============================================ */
.skiper-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Slika */
.skiper-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 0.875rem;
    margin-bottom: 1.5rem;
    background: hsl(155, 15%, 88%);
}

.skiper-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.5s ease;
}

.skiper-card:hover .skiper-card__img {
    transform: scale(1.03);
}

/* Badge uloga — pri dnu slike */
.skiper-card__badge {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-foreground);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.5rem 1.125rem;
    border-radius: 4px;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Tekst ispod slike */
.skiper-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.skiper-card__name {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-foreground);
    margin-bottom: 0.5rem;
}

/* Zelena linija ispod imena */
.skiper-card__divider {
    display: block;
    width: 2rem;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
    margin: 0 auto 0.875rem;
}

.skiper-card__bio {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-muted);
    max-width: 280px;
}

/* ============================================
   GALERIJA SEKCIJA — style
   ============================================ */

.galerija {
    background: hsl(155, 20%, 94%, 0.4);
    padding: 6rem 0 8rem;
}

.galerija__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

/* ---- Header ---- */
.galerija__header {
    max-width: 672px;
    margin-bottom: 3rem;
}

.galerija__eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.galerija__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-foreground);
    margin-bottom: 0.875rem;
}

.galerija__lead {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.65;
    color: rgba(21, 40, 30, 0.70);
    max-width: 520px;
}

/* ============================================
   SLIDER — strelice POTPUNO van viewporta
   ============================================ */

/* Outer wrap — širi od containera da strelice stanu van */
.galerija__slider-outer {
    position: relative;
    /* horizontalni prostor za strelice (44px + 12px gap) s obje strane */
    padding: 0 56px;
}

/* Strelice — apsolutno na rubovima outer wrappera */
.galerija__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid hsl(155, 15%, 85%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-foreground);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: background var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast), box-shadow var(--transition-fast);
}

.galerija__arrow--prev { left: 0; }
.galerija__arrow--next { right: 0; }

.galerija__arrow:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(23, 74, 45, 0.25);
}

/* Viewport — samo klipuje, bez extra prostora */
.galerija__viewport {
    overflow: hidden;
    border-radius: 0.25rem; /* mali radius da ne odsiječe uglove slika */
    touch-action: pan-y; /* mobilni: dozvoli vertikalni scroll, horizontalno preuzima JS */
}

/* Track */
.galerija__track {
    display: flex;
    gap: 12px;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Slide — tačno 1/3 širine viewporta, 4:5 portretni */
.galerija__slide {
    flex: 0 0 calc((100% - 2 * 12px) / 3);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 1rem;
    min-width: 0;
}

.galerija__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.7s ease;
    /* Sprječava layout shift dok se slika učitava */
    aspect-ratio: 4 / 5;
    background-color: hsl(155, 12%, 92%); /* placeholder boja */
}

.galerija__slide:hover img {
    transform: scale(1.05);
}

/* ============================================
   DOT INDIKATORI
   ============================================ */
.galerija__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.galerija__dot {
    height: 6px;
    width: 6px;
    border-radius: 999px;
    background: rgba(21, 40, 30, 0.25);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: width 0.3s ease, background 0.3s ease;
}

.galerija__dot.is-active {
    width: 32px;
    background: var(--color-primary);
}

/* ============================================
   RECENZIJE SEKCIJA — style
   Dodati na kraj assets/css/style.css
   ============================================ */

.recenzije {
    background: hsl(155, 12%, 96%, 0.3); /* bg-muted/30 */
    padding: 6rem 0 7rem;
}

.recenzije__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

/* ---- Header — centriran ---- */
.recenzije__header {
    text-align: center;
    max-width: 672px; /* max-w-2xl */
    margin: 0 auto 3.5rem;
}

.recenzije__eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.recenzije__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-foreground);
    margin-bottom: 0.875rem;
}

.recenzije__lead {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(21, 40, 30, 0.70);
    margin-bottom: 1.75rem;
}

/* ---- Google rating pill ---- */
.recenzije__rating-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #ffffff;
    border: 1.5px solid hsl(155, 15%, 88%);
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.recenzije__google-logo {
    flex-shrink: 0;
}

.recenzije__rating-score {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-foreground);
}

.recenzije__stars {
    display: flex;
    gap: 1px;
    color: #fbbc04;
    font-size: 0.9375rem;
    line-height: 1;
}

.recenzije__rating-text {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-muted);
    white-space: nowrap;
}

/* ============================================
   SLIDER
   ============================================ */
.recenzije__slider-outer {
    position: relative;
    margin-bottom: 2rem;
}

/* Strelice sa strane — skrivene, kontrole su ispod */
.recenzije__arrow {
    display: none;
}

/* Viewport */
.recenzije__viewport {
    overflow: hidden;
    touch-action: pan-y;
}

/* Track */
.recenzije__track {
    display: flex;
    gap: 1rem;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    align-items: stretch;
}

/* Kartica — 1/3 širine */
.review-card {
    flex: 0 0 calc((100% - 2 * 1rem) / 3);
    min-width: 0;
    background: #ffffff;
    border: 1.5px solid hsl(155, 15%, 90%);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    box-shadow: 0 2px 8px rgba(21, 40, 30, 0.05);
    transition: box-shadow var(--transition-med), transform var(--transition-med);
}

.review-card:hover {
    box-shadow: 0 8px 24px rgba(21, 40, 30, 0.10);
    transform: translateY(-2px);
}

/* Header kartice */
.review-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Avatar */
.review-card__avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.review-card__meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.review-card__name {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-card__date {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-muted);
}

.review-card__google {
    flex-shrink: 0;
    margin-left: auto;
}

/* Zvjezdice */
.review-card__stars {
    color: #fbbc04;
    font-size: 0.875rem;
    letter-spacing: 1px;
    line-height: 1;
}

/* Tekst recenzije */
.review-card__text {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgba(21, 40, 30, 0.80);
    flex: 1;
}

/* ============================================
   KONTROLE — strelice + dots u redu
   ============================================ */
.recenzije__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.recenzije__ctrl-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid hsl(155, 15%, 85%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-foreground);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: background var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast);
    flex-shrink: 0;
}

.recenzije__ctrl-arrow:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

/* Dots */
.recenzije__dots {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.recenzije__dot {
    height: 8px;
    width: 8px;
    border-radius: 999px;
    background: rgba(21, 40, 30, 0.25);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: width 0.3s ease, background 0.3s ease;
}

.recenzije__dot.is-active {
    width: 24px;
    background: var(--color-primary);
}

/* ============================================
   CTA — Google dugme
   ============================================ */
.recenzije__cta {
    display: flex;
    justify-content: center;
}

.recenzije__google-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-foreground);
    background: #ffffff;
    border: 1.5px solid hsl(155, 15%, 85%);
    border-radius: 999px;
    padding: 0.875rem 2rem;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: background var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast), box-shadow var(--transition-fast),
                transform var(--transition-fast);
}

.recenzije__google-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(23, 74, 45, 0.2);
    transform: translateY(-1px);
}

.recenzije__google-btn:hover svg path {
    fill: #ffffff;
}

/* ============================================
   SMJEŠTAJ SEKCIJA — style
   Dodati na kraj assets/css/style.css
   ============================================ */

.smjestaj {
    background: hsl(155, 20%, 94%, 0.4); /* bg-secondary/40 */
    padding: 6rem 0 8rem;
}

.smjestaj__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2.5rem;
    overflow: hidden; /* sprečava horizontalni overflow */
}

/* ---- Header ---- */
.smjestaj__header {
    max-width: 672px;
    margin-bottom: 3rem;
}

.smjestaj__eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.smjestaj__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-foreground);
    margin-bottom: 0.875rem;
}

.smjestaj__lead {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: rgba(21, 40, 30, 0.70);
}

/* ============================================
   GRID — 3fr lijevo + 2fr desno
   ============================================ */
.smjestaj__grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
    align-items: start;
}

.smjestaj__left,
.smjestaj__right {
    min-width: 0; /* sprečava grid overflow */
}

/* ============================================
   LIJEVO — CAROUSEL
   ============================================ */
.smjestaj__left {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.smjestaj__carousel-wrap {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    background: hsl(155, 15%, 88%);
}

.smjestaj__carousel-wrap {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    background: hsl(155, 15%, 88%);
    aspect-ratio: 4 / 3;
}

.smjestaj__viewport {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

.smjestaj__track {
    display: flex;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    /* Track se proteže horizontalno — svaki slide je 100% širine viewporta */
}

.smjestaj__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    min-width: 0;
    flex-shrink: 0;
}

.smjestaj__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* Osiguraj da slika popuni slide */
    min-height: 100%;
}

/* Strelice unutar slike */
.smjestaj__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-foreground);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.smjestaj__arrow:hover {
    background: #ffffff;
    transform: translateY(-50%) scale(1.06);
}

.smjestaj__arrow--prev { left: 0.75rem; }
.smjestaj__arrow--next { right: 0.75rem; }

/* Opis ispod slike */
.smjestaj__img-caption {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgba(21, 40, 30, 0.75);
}

/* Pill značke */
.smjestaj__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.smjestaj__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-foreground);
    background: #ffffff;
    border: 1.5px solid hsl(155, 15%, 88%);
    border-radius: 999px;
    padding: 0.375rem 0.875rem;
    white-space: nowrap;
}

.smjestaj__pill svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

/* ============================================
   DESNO — KARTICA DETALJA
   ============================================ */
.smjestaj__card {
    background: #ffffff;
    border: 1.5px solid hsl(155, 15%, 90%);
    border-radius: 1.25rem;
    padding: 1.75rem;
    box-shadow: 0 4px 20px rgba(21, 40, 30, 0.07);
}

.smjestaj__card-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-foreground);
    margin-bottom: 1.25rem;
}

/* Lista pogodnosti */
.smjestaj__amenities {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-bottom: 1.5rem;
}

.smjestaj__amenity {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-foreground);
}

.smjestaj__amenity svg {
    flex-shrink: 0;
    color: var(--color-primary);
    margin-top: 0.125rem;
}

/* Separator */
.smjestaj__separator {
    height: 1px;
    background: hsl(155, 15%, 90%);
    margin-bottom: 1.5rem;
}

/* Kontakt */
.smjestaj__contact-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-foreground);
    margin-bottom: 0.375rem;
}

.smjestaj__contact-note {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-muted);
    margin-bottom: 1rem;
}

.smjestaj__contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
}

.smjestaj__contact-row:last-child {
    margin-bottom: 0;
}

/* Tel dugme — puno, tamnozeleno */
.smjestaj__btn-tel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary-fg);
    background: var(--color-primary);
    border: none;
    border-radius: 999px;
    padding: 0.75rem 1rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.smjestaj__btn-tel:hover {
    background: hsl(148, 50%, 14%);
    transform: translateY(-1px);
}

/* WhatsApp dugme — outlined */
.smjestaj__btn-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-foreground);
    background: #ffffff;
    border: 1.5px solid hsl(155, 15%, 82%);
    border-radius: 999px;
    padding: 0.75rem 1rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast);
}

.smjestaj__btn-wa:hover {
    background: hsl(155, 10%, 93%);
    border-color: hsl(155, 15%, 72%);
}

/* ============================================
   O NAMA SEKCIJA — style
   Dodati na kraj assets/css/style.css
   ============================================ */

.o-nama {
    background: var(--color-background);
    padding: 6rem 0 8rem;
}

.o-nama__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

/* ---- Grid — 2 kolone na desktopu ---- */
.o-nama__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.o-nama__left,
.o-nama__right {
    min-width: 0;
}

/* ============================================
   LIJEVO — Tekst + Kontakt
   ============================================ */
.o-nama__eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.o-nama__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-foreground);
    margin-bottom: 1.5rem;
}

.o-nama__body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-muted);
    max-width: 560px;
    margin-bottom: 2.5rem;
}

/* ---- Kontakt blok ---- */
.o-nama__contact {
    max-width: 480px;
    display: flex;
    flex-direction: column;
}

.o-nama__contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
}

.o-nama__contact-item--border {
    border-bottom: 1px solid hsl(155, 15%, 90%);
}

/* Ikona u krugu */
.o-nama__contact-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: hsl(155, 20%, 94%); /* bg-secondary */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.o-nama__contact-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.o-nama__contact-label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.o-nama__contact-value {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-foreground);
}

.o-nama__contact-link {
    text-decoration: none;
    transition: color var(--transition-fast);
}

.o-nama__contact-link:hover {
    color: var(--color-primary);
}

.o-nama__contact-link--break {
    word-break: break-all;
}

/* ============================================
   DESNO — Slika
   ============================================ */
.o-nama__right {
    display: flex;
    justify-content: flex-end;
}

.o-nama__img-wrap {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 4 / 5;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(21, 40, 30, 0.18), 0 4px 16px rgba(0,0,0,0.08);
    position: relative;
}

.o-nama__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* ============================================
   REZERVACIJA SEKCIJA — rezervacija.css
   Dodati u assets/css/ i linkati u index.html
   ============================================ */

.rezervacija-sekcija {
    background: var(--color-background);
    padding: 6rem 0 8rem;
}

.rezervacija-sekcija__container {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

/* ---- Header ---- */
.rezervacija-sekcija__header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.rezervacija-sekcija__eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.rezervacija-sekcija__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-foreground);
    margin-bottom: 0.75rem;
}

.rezervacija-sekcija__lead {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-muted);
    line-height: 1.6;
}

/* ============================================
   FORMA WRAPPER
   ============================================ */
.rez-form-wrap {
    background: #ffffff;
    border: 1.5px solid hsl(155, 15%, 90%);
    border-radius: 1.25rem;
    padding: 2.25rem;
    box-shadow: 0 4px 24px rgba(21, 40, 30, 0.07);
}

/* ---- Layout rows ---- */
.rez-row--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ---- Field ---- */
.rez-field {
    margin-bottom: 1.25rem;
}

.rez-field:last-of-type {
    margin-bottom: 0;
}

.rez-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-muted);
    margin-bottom: 0.5rem;
}

.rez-input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-foreground);
    background: #ffffff;
    border: 1.5px solid hsl(155, 15%, 85%);
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.rez-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(23, 74, 45, 0.1);
}

.rez-input::placeholder {
    color: hsl(155, 10%, 70%);
}

/* ---- Select ---- */
.rez-select-wrap {
    position: relative;
}

.rez-select {
    cursor: pointer;
    padding-right: 2.5rem;
}

.rez-select-arrow {
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-muted);
}

/* ---- Telefon ---- */
.rez-phone-wrap {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1.5px solid hsl(155, 15%, 85%);
    border-radius: 0.625rem;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rez-phone-wrap:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(23, 74, 45, 0.1);
}

.rez-phone-prefix {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 0.875rem;
    background: hsl(155, 10%, 96%);
    border-right: 1.5px solid hsl(155, 15%, 85%);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground);
    white-space: nowrap;
    flex-shrink: 0;
}

.rez-phone-flag {
    font-size: 1.125rem;
    line-height: 1;
}

.rez-input--phone {
    border: none;
    border-radius: 0;
    box-shadow: none !important;
    flex: 1;
}

.rez-input--phone:focus {
    border: none;
    box-shadow: none;
}

/* ---- Number input ---- */
input[type="number"].rez-input::-webkit-inner-spin-button,
input[type="number"].rez-input::-webkit-outer-spin-button {
    opacity: 1;
}

/* ---- Date ---- */
input[type="date"].rez-input {
    cursor: pointer;
}

/* ---- reCAPTCHA ---- */
.rez-captcha-wrap {
    display: flex;
    justify-content: center;
    margin: 1.25rem 0;
}

/* ---- Greške ---- */
.rez-errors {
    background: hsl(0, 70%, 97%);
    border: 1.5px solid hsl(0, 70%, 80%);
    border-radius: 0.625rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.rez-errors ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.rez-errors li {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: hsl(0, 70%, 38%);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.rez-errors li::before {
    content: '!';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: hsl(0, 70%, 45%);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
}

/* ---- Submit dugme ---- */
.rez-submit {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary-fg);
    background: var(--color-primary);
    border: none;
    border-radius: 999px;
    padding: 1rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 16px rgba(23, 74, 45, 0.2);
    margin-top: 0.5rem;
}

.rez-submit:hover {
    background: hsl(148, 50%, 14%);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(23, 74, 45, 0.28);
}

.rez-submit:active {
    transform: translateY(0);
}

.rez-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ============================================
   POTVRDA
   ============================================ */
.rez-confirmation {
    text-align: center;
    padding: 3rem 2rem;
    background: #ffffff;
    border: 1.5px solid hsl(148, 40%, 80%);
    border-radius: 1.25rem;
    box-shadow: 0 4px 24px rgba(21, 40, 30, 0.07);
}

.rez-confirmation__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.rez-confirmation__title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-foreground);
    margin-bottom: 0.75rem;
}

.rez-confirmation__text {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-muted);
    max-width: 480px;
    margin: 0 auto;
}

/* ============================================
   RESPONZIVNOST
   ============================================ */
@media (max-width: 940px) {
    .rezervacija-sekcija {
        padding: 4rem 0 5rem;
    }
    .rezervacija-sekcija__container {
        padding: 0 1.5rem;
    }
    .rez-form-wrap {
        padding: 1.75rem;
    }
}

@media (max-width: 600px) {
    .rezervacija-sekcija {
        padding: 3rem 0 4rem;
    }
    .rezervacija-sekcija__container {
        padding: 0 1.25rem;
    }
    .rez-row--2 {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .rez-form-wrap {
        padding: 1.25rem;
        border-radius: 1rem;
    }
    .rez-captcha-wrap {
        transform: scale(0.88);
        transform-origin: center;
    }
}

/* ============================================
   FOOTER — style
   Dodati na kraj assets/css/style.css
   ============================================ */

.footer {
    background: var(--color-primary);          /* tamnozelena brand boja */
    color: var(--color-primary-fg);            /* off-white tekst */
}

.footer__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

/* ============================================
   GORNJI DIO — 4-kolonska grid
   ============================================ */
.footer__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    padding: 4rem 0;
}

/* ---- Brand kolona ---- */
.footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    margin-bottom: 0.875rem;
}

.footer__logo-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.footer__logo-text {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-primary-fg);
}

.footer__tagline {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-style: italic;
    color: rgba(251, 249, 244, 0.70);
    margin-bottom: 1.5rem;
}

.footer__social-label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(251, 249, 244, 0.60);
    margin-bottom: 0.875rem;
}

/* Socijalne ikone */
.footer__social {
    display: flex;
    gap: 0.625rem;
}

.footer__social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(251, 249, 244, 0.25);
    color: var(--color-primary-fg);
    background: transparent;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.footer__social-btn:hover {
    background: rgba(251, 249, 244, 0.10);
    border-color: rgba(251, 249, 244, 0.50);
}

/* ---- Ostale kolone ---- */
.footer__col-title {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(251, 249, 244, 0.60);
    margin-bottom: 1.125rem;
}

.footer__links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.footer__link {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-primary-fg);
    text-decoration: none;
    opacity: 1;
    transition: opacity var(--transition-fast);
}

.footer__link:hover {
    opacity: 0.80;
}

/* ---- Adresa ---- */
.footer__address {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1.5rem;
}

.footer__address-line {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-primary-fg);
}

.footer__address-link {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-primary-fg);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.footer__address-link:hover {
    opacity: 0.80;
}

.footer__address-link--break {
    word-break: break-all;
}

/* ---- Language toggle ---- */
.footer__lang {
    margin-top: 0.25rem;
}

.footer__lang-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: transparent;
    border: 1px solid rgba(251, 249, 244, 0.30);
    border-radius: 999px;
    padding: 0.375rem 0.875rem;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.footer__lang-inner:hover {
    border-color: rgba(251, 249, 244, 0.55);
}

.footer__lang-btn {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(251, 249, 244, 0.50);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.footer__lang-btn--active {
    color: var(--color-primary-fg);
}

.footer__lang-sep {
    color: rgba(251, 249, 244, 0.30);
    font-size: 0.75rem;
}

/* ============================================
   DONJA TRAKA — Copyright
   ============================================ */
.footer__bottom {
    border-top: 1px solid rgba(251, 249, 244, 0.15);
    padding: 1.25rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.footer__copyright {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: rgba(251, 249, 244, 0.55);
}

.footer__made-by {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: rgba(251, 249, 244, 0.55);
}

.footer__made-by-link {
    color: rgba(251, 249, 244, 0.55);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer__made-by-link:hover {
    color: var(--color-primary-fg);
}
/* ============================================
   CIJENA PILL — meta-pill--price
   ============================================ */
.meta-pill--price {
    background: var(--color-primary);
    color: var(--color-primary-fg);
    gap: 0.5rem;
}

.meta-pill--price .price-old {
    font-weight: 400;
    opacity: 0.65;
    text-decoration: line-through;
    font-size: 0.75rem;
}

.meta-pill--price .price-new {
    font-weight: 700;
}
/* ============================================
   PRICE BOX — rezervacija forma
   ============================================ */
.rez-price-box {
    background: rgba(23, 74, 45, 0.05);
    border: 1.5px solid rgba(23, 74, 45, 0.18);
    border-radius: 0.875rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.rez-price-box__label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.875rem;
}

.rez-price-box__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}

.rez-price-box__detail {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-muted);
}

.rez-price-box__per {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-muted);
}

.rez-price-box__divider {
    height: 1px;
    background: rgba(23, 74, 45, 0.15);
    margin-bottom: 0.875rem;
}

.rez-price-box__total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.625rem;
}

.rez-price-box__total-label {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-foreground);
}

.rez-price-box__total-amount {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-primary);
    line-height: 1;
}

.rez-price-box__note {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-muted);
    line-height: 1.5;
    margin: 0;
}