/* =============================================================================
   GREBEN BOAT TOURS — YachtKit-inspired Homepage (v2.0)
   ---------------------------------------------------------------------
   Potpun rewrite naslovne u stilu Tokomoo YachtKit Elementor kit-a.
   Target-uje POSTOJEĆE klase (.home-hero, .home-featured, .home-usp, .home-stats,
   .home-about, .home-newsletter) i agresivno ih preuredjuje.

   Reference: https://templatekit.tokomoo.com/yachtkit/
   ============================================================================= */

/* =============================================================================
   0. Brand tokens override
   ============================================================================= */
:root {
    --yk-primary: #0F1E3A;
    --yk-primary-dk: #0A1428;
    /* Svjetlija plava varijanta — medium navy iz logotipa (talasi mora,
       između deep navy GREBEN slova i highlight-a). Koristi se za naslove
       na naslovnoj strani — diferencijacija od tamne primary varijante. */
    --yk-primary-light: #2E5B8C;
    --yk-secondary: #C9A871;
    --yk-secondary-dk: #B58F58;
    --yk-cream: #FAF7F2;
    --yk-white: #FFFFFF;
    --yk-text: #1B2A48;
    --yk-text-muted: #5A6478;
    --yk-text-soft: #8A93A6;
    --yk-border: #E7E3DC;
    --yk-divider: rgba(15, 30, 58, 0.08);
    --yk-shadow-sm: 0 1px 3px rgba(15, 30, 58, 0.06);
    --yk-shadow-md: 0 8px 24px rgba(15, 30, 58, 0.10);
    --yk-shadow-lg: 0 24px 56px rgba(15, 30, 58, 0.16);
    --yk-shadow-xl: 0 32px 72px rgba(15, 30, 58, 0.22);
    /* Unifikovana tipografija — IBM Plex Sans za sve elemente sajta.
       Ranije su display (h1-h6) i body koristili različite fontove
       (Cormorant Garamond + Inter); sad oba tokena dijele isti font tako
       da svi `var(--yk-font-display)` i `var(--yk-font-body)` pozivi
       automatski naslijeđuju jedinstvenu tipografiju. Tokene zadržavamo
       (umjesto da ih spojimo) radi backward-compat sa postojećim CSS-om. */
    --yk-font-display: 'IBM Plex Sans', -apple-system, system-ui, sans-serif;
    --yk-font-body: 'IBM Plex Sans', -apple-system, system-ui, sans-serif;
    --yk-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================================================
   1. Base typography refinement
   ============================================================================= */
body {
    font-family: var(--yk-font-body);
    color: var(--yk-text);
    background: var(--yk-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    margin: 0 !important;
}
main#main { margin: 0 !important; padding: 0 !important; }
/* Eliminiši prazninu između newsletter i footer */
.home-newsletter { margin-bottom: 0 !important; }
.site-footer { margin-top: 0 !important; }
p { line-height: 1.7; }

/* Universal eyebrow class — small uppercase tag iznad svakog h2 */
.eyebrow,
.section-eyebrow {
    display: inline-block;
    font-family: var(--yk-font-body);
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase;
    color: var(--yk-secondary) !important;
    padding: 0 32px;
    position: relative;
    margin-bottom: 1rem;
}
.eyebrow::before,
.eyebrow::after,
.section-eyebrow::before,
.section-eyebrow::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}
.eyebrow::before, .section-eyebrow::before { left: 0; }
.eyebrow::after,  .section-eyebrow::after  { right: 0; }

/* =============================================================================
   2. HEADER — clean v3 (2026-05-13)
   ---------------------------------------------------------------------
   Filozofija: SVE animacije se rade preko GPU-accelerated svojstava
   (transform, opacity, background) — NIKAD preko layout properties (height,
   width, padding). Tako nema layout shift, nema reflow, nema treperenja.

   Inner visina je KONSTANTNA. Logo se vizualno skuplja kroz transform:scale()
   koji ne mijenja layout. Background i shadow se animira kroz opacity
   tranzicije koje composit-or sam optimizuje.

   Stanje: header[data-scroll="top"] (default) ili [data-scroll="scrolled"].
   ============================================================================= */
.site-topbar {
    background: var(--yk-primary) !important;
    color: rgba(255,255,255,0.85) !important;
    border-bottom: 0;
    padding: 0.5rem 0;
    font-size: 0.82rem;
}
.site-topbar a { color: rgba(255,255,255,0.85) !important; }
.site-topbar a:hover { color: var(--yk-secondary) !important; }

/* Header — bijeli static na SVIM stranama (uključujući home). */
.site-header {
    position: static;
    z-index: 50;
    background: #ffffff;
    border-bottom: 1px solid var(--yk-divider);
    overflow: visible;
}
.site-header > .container,
.site-header__inner { overflow: visible; }

/* Inner — fiksna visina za konzistentan logo padding */
.site-header__inner {
    height: 120px;
    position: relative;
}
@media (max-width: 767.98px) {
    .site-header__inner { height: 88px; }
}

/* Logo container — flex centered */
.site-header__logo {
    position: relative;
    z-index: 10;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

/* Logo image — krupan unutar bijelog header-a, suptilni navy drop-shadow */
.site-header__logo img {
    height: 100px;   /* 120 inner − 10+10 padding */
    width: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 14px rgba(15, 30, 58, 0.18))
            drop-shadow(0 1px 3px rgba(15, 30, 58, 0.10));
}
@media (max-width: 767.98px) {
    .site-header__logo img { height: 70px; }   /* 88 inner − 9+9 */
}

/* Navigation — clean uppercase */
.site-nav__list a,
.site-nav__link {
    font-family: var(--yk-font-body) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    color: var(--yk-text) !important;
    transition: color 0.2s ease;
    position: relative;
}
.site-nav__list a:hover,
.site-nav__link:hover,
.site-nav__list a.is-active,
.site-nav__link.is-active {
    color: var(--yk-secondary) !important;
}
.site-nav__list a.is-active::after,
.site-nav__link.is-active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 1px;
    background: var(--yk-secondary);
}

/* Header CTA button (Rezerviši turu) */
.site-header__cta {
    background: var(--yk-primary) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 0.85rem 1.5rem !important;
    border-radius: 999px !important;
    font-family: var(--yk-font-body) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    transition: all 0.25s var(--yk-ease);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.site-header__cta:hover {
    background: var(--yk-secondary) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(201, 168, 113, 0.4);
}

/* =============================================================================
   3. HERO — full-bleed slika, content lijevo, gradient overlay
   ============================================================================= */
.home-hero {
    position: relative;
    min-height: clamp(620px, 90vh, 880px);
    color: #fff;
    overflow: hidden;
    margin-bottom: 0 !important;
}
.home-hero__swiper { position: absolute; inset: 0; z-index: 1; }
.home-hero__slide {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Slide background WRAPPER — Ken Burns efekat (zoom-in od daleka ka blizu).
   Premješten iz .swiper-slide jer Swiper postavi transform na .swiper-slide
   za sliding, pa bi se tu kolidiralo. Ovaj wrapper je dijete koje slobodno
   skalira/pomera bez konflikta.

   2026-05-14: animacija krene od najudaljenije tačke (scale 1) i polako
   zoom-in-uje ka scale 1.18 — bez `alternate`, uvijek forward. Default
   state (slajdovi koji nisu aktivni) je scale 1 da naredni slajd kreće
   od istog početka. Aktivan slajd dobija `is-active` ponašanje preko
   `.swiper-slide-active` selektora — animacija startuje svaki put. */
.home-hero__slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    /* 2026-05-14: prikaz krece od DNA slike — background-position-y = 100%
       gura vidljivi viewport ka donjem dijelu slike (kao da kamera gleda
       u dno). Cover crop iseca samo gornji dio. */
    background-position: 50% 100%;
    background-repeat: no-repeat;
    transform: none;
}
/* 2026-05-14: animacija isključena — slika je fixna (bez Ken Burns/pan). */
.home-hero__swiper .swiper-slide-active .home-hero__slide-bg {
    animation: none;
    transform: none;
}
/* Backward compat — Ken Burns keyframe ostavljen za reaktivaciju ako
   neko želi stari zoom-in efekat. */
@keyframes ykKenBurnsZoomIn {
    0% {
        transform: scale(1) translate(0, 0);
    }
    100% {
        transform: scale(1.18) translate(-1.2%, 1%);
    }
}

/* Reduced motion — zaustavi Ken Burns */
@media (prefers-reduced-motion: reduce) {
    .home-hero__slide-bg,
    .home-hero__swiper .swiper-slide-active .home-hero__slide-bg {
        animation: none;
        transform: scale(1);
    }
}

.home-hero__content {
    position: relative;
    z-index: 5;
    min-height: clamp(620px, 90vh, 880px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start !important;
    text-align: left !important;
    max-width: 1240px;
    padding: 0 2rem;
    margin: 0 auto;
}
.home-hero__eyebrow {
    color: var(--yk-secondary) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    padding-left: 0;
    background: none;
}
.home-hero__eyebrow::before {
    content: '';
    display: inline-block;
    width: 36px;
    height: 1px;
    background: var(--yk-secondary);
    vertical-align: middle;
    margin-right: 14px;
    opacity: 0.8;
}
.home-hero__title {
    font-family: var(--yk-font-display) !important;
    font-size: clamp(2.75rem, 6vw, 5.25rem) !important;
    font-weight: 500 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em;
    color: #fff !important;
    margin-bottom: 1.5rem;
    max-width: 720px;
    text-shadow: 0 4px 32px rgba(0,0,0,0.35);
}
.home-hero__title em,
.home-hero__title i {
    font-style: italic;
    color: var(--yk-secondary);
}
.home-hero__subtitle {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem) !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.92);
    max-width: 580px;
    margin-bottom: 2.5rem;
    font-weight: 400;
    text-shadow: 0 2px 14px rgba(0,0,0,0.30);
}
.home-hero__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.home-hero__actions .btn,
.home-hero__actions .btn-primary,
.home-hero__actions .btn-ghost,
.home-hero__actions .btn-link {
    padding: 1.05rem 2.25rem !important;
    border-radius: 999px !important;
    font-family: var(--yk-font-body) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    border-width: 1px !important;
    transition: all 0.3s var(--yk-ease);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.home-hero__actions .btn-primary {
    background: var(--yk-secondary) !important;
    border: 1px solid var(--yk-secondary) !important;
    color: var(--yk-primary) !important;
}
.home-hero__actions .btn-primary:hover {
    background: #fff !important;
    border-color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.25);
}
.home-hero__actions .btn-ghost,
.home-hero__actions .btn-link {
    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.55) !important;
    color: #fff !important;
    backdrop-filter: blur(10px);
}
.home-hero__actions .btn-ghost:hover,
.home-hero__actions .btn-link:hover {
    background: rgba(255,255,255,0.95) !important;
    color: var(--yk-primary) !important;
    border-color: #fff !important;
}

/* Swiper pagination — bottom right, small dashes */
.home-hero .swiper-pagination {
    bottom: 40px !important;
    text-align: right;
    padding-right: max(2rem, calc((100vw - 1240px) / 2 + 2rem));
    z-index: 6 !important;
}
.home-hero .swiper-pagination-bullet {
    width: 28px !important;
    height: 2px !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,0.4) !important;
    opacity: 1 !important;
    margin: 0 4px !important;
    transition: all 0.3s var(--yk-ease);
}
.home-hero .swiper-pagination-bullet-active {
    background: var(--yk-secondary) !important;
    width: 48px !important;
}

/* Swiper nav arrows — visible, subtle */
.home-hero .swiper-button-prev,
.home-hero .swiper-button-next {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50%;
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.35);
    backdrop-filter: blur(10px);
    color: #fff !important;
    transition: all 0.3s var(--yk-ease);
    z-index: 6;
}
.home-hero .swiper-button-prev:hover,
.home-hero .swiper-button-next:hover {
    background: var(--yk-secondary) !important;
    border-color: var(--yk-secondary);
}
.home-hero .swiper-button-prev::after,
.home-hero .swiper-button-next::after {
    font-size: 1rem !important;
    font-weight: 700;
}

/* Scroll indicator chevron */
.home-hero__scroll {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 1.5rem;
    z-index: 6;
    animation: yk-bounce 2.4s var(--yk-ease) infinite;
}
@keyframes yk-bounce {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
    50%      { transform: translate(-50%, 8px); opacity: 1; }
}

/* =============================================================================
   4. STATS — full-bleed photo bg sa navy overlay, bijela kartica iznad (isti
   fazon kao USP sekcija)
   ============================================================================= */
.home-stats {
    position: relative;
    padding: clamp(4rem, 8vw, 7rem) 0 !important;
    margin: 0 !important;
    background:
        linear-gradient(180deg, rgba(15, 30, 58, 0.72) 0%, rgba(26, 45, 82, 0.78) 100%),
        url('/files/images/boatrip.webp') center / cover no-repeat !important;
    z-index: 10;
    overflow: hidden;
}
.home-stats::before, .home-stats::after { content: none !important; }
.home-stats > .container {
    background: #fff;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.10),
        0 16px 40px rgba(0, 0, 0, 0.22),
        0 32px 80px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(201, 168, 113, 0.25);
    border-radius: 8px;
    padding: 2.75rem 2.5rem !important;
    max-width: 1140px !important;
    position: relative;
    z-index: 1;
}
/* Gold gradient top edge na kartici — premium "rim" akcent */
.home-stats > .container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201, 168, 113, 0.40) 20%,
        var(--yk-secondary) 50%,
        rgba(201, 168, 113, 0.40) 80%,
        transparent 100%);
    border-radius: 8px 8px 0 0;
    pointer-events: none;
}
/* Section header iznad stats grid-a (eyebrow + h2). Render unutar bijele
   kartice — admin postavi title/eyebrow kroz CMS edit Stats stranice. */
.home-stats .section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.home-stats .section-header .eyebrow {
    color: var(--yk-secondary) !important;
}
.home-stats .section-header h2 {
    font-family: var(--yk-font-display) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    color: var(--yk-primary-light) !important;
    margin: 0.5rem 0 0;
    letter-spacing: -0.01em;
}
.home-stats__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
    align-items: center;
}
@media (max-width: 767.98px) {
    .home-stats__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem 1rem !important; }
}
.home-stats__item {
    text-align: center;
    padding: 0 1rem;
    border-right: 1px solid var(--yk-divider);
    position: relative;
}
.home-stats__item:last-child { border-right: 0; }
@media (max-width: 767.98px) {
    .home-stats__item:nth-child(2n) { border-right: 0; }
}
.home-stats__item h3 {
    font-family: var(--yk-font-display) !important;
    font-size: clamp(2.25rem, 4vw, 3.25rem) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: var(--yk-primary) !important;
    margin: 0 0 0.5rem !important;
}
.home-stats__item h3 [data-counter],
.home-stats__item h3 > span {
    /* Svjetlija plava iz logotipa — medium navy iz talasa mora (između deep
       navy GREBEN slova i svjetlih highlight-a). Distinktan od primary
       (#0F1E3A) ali i dalje u istoj plavoj familiji. Koristi --yk-primary-light
       token koji je shared sa naslovima naslovne strane. */
    color: var(--yk-primary-light);
}
.home-stats__item p {
    font-size: 0.78rem !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--yk-text-muted);
    font-weight: 500;
    margin: 0 !important;
    line-height: 1.4;
}
.home-stats__icon { display: none; } /* sakri ikone, brojevi pričaju */

/* =============================================================================
   5. FEATURED TOURS — premium "Naše ture" — KARTICE DOMINIRAJU
   ============================================================================= */
.home-featured {
    padding: clamp(5rem, 9vw, 8rem) 0 clamp(6rem, 11vw, 10rem) !important;
    background:
        linear-gradient(180deg, #fbfcfd 0%, #f3f5f8 100%) !important;
    position: relative;
    overflow: hidden;
}
/* Vrlo suptilna decorative linija — gold separator iza naslova */
.home-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 168, 113, 0.40), transparent);
    pointer-events: none;
}
.home-featured > .container { position: relative; z-index: 1; }
.home-featured .container > .section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.home-featured .section-header h2,
.home-featured .container > .section-header h2 {
    font-family: var(--yk-font-display) !important;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem) !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    color: var(--yk-primary-light);
    margin: 0.5rem 0 1rem;
    letter-spacing: -0.01em;
}
.home-featured .section-header .lead,
.home-featured .container > .section-header .lead {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--yk-text-muted);
    max-width: 560px;
    margin: 0 auto;
}
.home-featured__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(1.5rem, 3vw, 2.5rem) !important;
    justify-content: center !important;
    max-width: 1200px;
    margin: 0 auto;
}
@media (max-width: 767.98px) {
    .home-featured__grid {
        grid-template-columns: 1fr !important;
        max-width: 460px;
    }
}

/* TOUR CARD — atraktivna premium kartica (kompaktna) */
.tr-tour-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(15, 30, 58, 0.06);
    box-shadow:
        0 1px 3px rgba(15, 30, 58, 0.05),
        0 8px 20px rgba(15, 30, 58, 0.08);
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
/* Gold top accent bar — animira se na hover */
.tr-tour-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--yk-secondary), #e0c89a);
    z-index: 3;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 12px 12px 0 0;
}
.tr-tour-card:hover::before { width: 100%; }
.tr-tour-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.tr-tour-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 2px 6px rgba(15, 30, 58, 0.06),
        0 14px 32px rgba(15, 30, 58, 0.14),
        0 0 0 1px rgba(201, 168, 113, 0.22);
    border-color: rgba(201, 168, 113, 0.25);
}
.tr-tour-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
}
.tr-tour-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.tr-tour-card:hover .tr-tour-card__media img { transform: scale(1.08); }

/* Suptilan dark gradient donji 35% slike */
.tr-tour-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 65%,
        rgba(15, 30, 58, 0.30) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Discount pill — gold gradient sa drop-shadow */
.tr-tour-card__discount-badge,
.tr-pill {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: linear-gradient(135deg, #d9b97f, #b08d52);
    color: #fff;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(201, 168, 113, 0.40);
}

.tr-tour-card__body {
    padding: 1.5rem 1.5rem 1.25rem;
    background: #fff;
}
.tr-tour-card__title {
    font-family: var(--yk-font-display) !important;
    /* 2026-05-14: smanjeno sa 1.35rem na 1.1rem — naslov ture u kartici
       je sad kompaktniji, balansiraniji sa price/meta blokom. */
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--bc-primary) !important;
    margin: 0 0 0.6rem !important;
    letter-spacing: -0.005em;
    transition: color 0.3s var(--yk-ease);
}
.tr-tour-card:hover .tr-tour-card__title { color: var(--bc-primary-dk) !important; }
/* Homepage tour kartice — isti deep navy iz logotipa (2026-05-14:
   unified preko --bc-primary; ne koristimo više svjetliju nyansu). */
.home-featured .tr-tour-card__title { color: var(--bc-primary) !important; }
.home-featured .tr-tour-card:hover .tr-tour-card__title { color: var(--bc-primary-dk) !important; }
.tr-tour-card__meta {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--yk-text-muted);
    margin-bottom: 0.85rem;
    font-weight: 500;
}
.tr-tour-card__meta i {
    color: var(--yk-secondary);
    margin-right: 5px;
    font-size: 0.95rem;
}
.tr-tour-card__excerpt {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--yk-text-muted);
    margin-bottom: 1.25rem;
}
.tr-tour-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(15, 30, 58, 0.08);
    gap: 0.75rem;
}
.tr-tour-card__price {
    font-family: var(--yk-font-display) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: var(--yk-primary);
    letter-spacing: -0.015em;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
}
.tr-tour-card__price::before {
    content: 'od';
    font-family: var(--yk-font-body);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--yk-text-muted);
    align-self: center;
}

/* CTA — premium pill button (gold outline → solid na hover) */
.tr-tour-card__cta {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--yk-primary);
    background: transparent;
    border: 1.5px solid var(--yk-secondary);
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.35s var(--yk-ease);
    white-space: nowrap;
}
.tr-tour-card:hover .tr-tour-card__cta {
    background: var(--yk-secondary);
    color: #fff;
    box-shadow: 0 6px 14px rgba(201, 168, 113, 0.35);
}
.tr-tour-card__cta i {
    transition: transform 0.35s var(--yk-ease);
    font-size: 0.8rem;
}
.tr-tour-card:hover .tr-tour-card__cta i { transform: translateX(3px); }

/* Featured archive CTA — sakriveno na home (korisnik želi clean grid) */
.home-featured__cta {
    display: none;
}
.home-featured__cta .btn,
.home-featured__cta .btn-secondary,
.home-featured__cta .btn-lg {
    border: 1px solid var(--yk-primary) !important;
    background: transparent !important;
    color: var(--yk-primary) !important;
    font-family: var(--yk-font-body) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    padding: 1.05rem 2.5rem !important;
    border-radius: 999px !important;
    transition: all 0.3s var(--yk-ease);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.home-featured__cta .btn:hover {
    background: var(--yk-primary) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15, 30, 58, 0.25);
}

/* =============================================================================
   6. USP / Naša ponuda — full-bleed photo bg sa overlay, bijele kartice sa
   soft gold blob iza outline ikona (po screenshot uzoru klijenta)
   ============================================================================= */
.home-usp {
    padding: clamp(5rem, 10vw, 9rem) 0 !important;
    background:
        linear-gradient(180deg, rgba(15, 30, 58, 0.72) 0%, rgba(26, 45, 82, 0.78) 100%),
        url('/files/images/svetistefan.webp') center / cover no-repeat !important;
    background-attachment: scroll;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.home-usp::before, .home-usp::after { content: none !important; }
.home-usp > .container { position: relative; z-index: 1; }
.home-usp .section-header {
    max-width: 720px;
    margin: 0 auto clamp(3rem, 5vw, 4.5rem);
    text-align: center;
}
.home-usp .section-header__eyebrow,
.home-usp .eyebrow {
    color: var(--yk-secondary) !important;
}
.home-usp .lead,
.home-usp .section-header p {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 1.0625rem;
    line-height: 1.7;
}
.home-usp h2 {
    color: #fff !important;
    font-family: var(--yk-font-display) !important;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem) !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    margin: 0.5rem 0 1rem;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
/* Naslov accent — gold "em" tags ako postoje */
.home-usp h2 em,
.home-usp h2 i { color: var(--yk-secondary); }
.home-usp__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: clamp(2rem, 4vw, 3.5rem) !important;
    max-width: 1200px;
    margin: 0 auto;
}
@media (max-width: 991.98px) {
    .home-usp__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 575.98px) {
    .home-usp__grid { grid-template-columns: 1fr !important; }
}
.home-usp__item {
    text-align: center;
    padding: 2.5rem 1.75rem !important;
    background: #fff;
    border: 1px solid rgba(15, 30, 58, 0.06);
    border-radius: 8px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.10),
        0 12px 32px rgba(0, 0, 0, 0.12);
    transition: all 0.4s var(--yk-ease);
    position: relative;
}
.home-usp__item:hover {
    transform: translateY(-8px);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.14),
        0 24px 48px rgba(0, 0, 0, 0.18);
}
/* Soft gold blob iza ikone — kao u screenshot-u */
.home-usp__icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-bottom: 1.5rem !important;
    position: relative;
    padding: 0 !important;
}
/* Soft yellow/gold circle iza ikone */
.home-usp__icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(201, 168, 113, 0.22) 0%,
        rgba(201, 168, 113, 0.12) 60%,
        transparent 100%);
    z-index: 0;
    transition: all 0.4s var(--yk-ease);
}
.home-usp__item:hover .home-usp__icon::before {
    width: 88px;
    height: 88px;
    background: radial-gradient(circle,
        rgba(201, 168, 113, 0.32) 0%,
        rgba(201, 168, 113, 0.16) 60%,
        transparent 100%);
}
/* Outline plava (navy) ikona — kao u screenshot-u */
.home-usp__icon i {
    color: var(--yk-primary) !important;
    font-size: 2.4rem !important;
    position: relative;
    z-index: 1;
    transition: all 0.4s var(--yk-ease);
}
.home-usp__icon svg {
    width: 44px;
    height: 44px;
    stroke: var(--yk-primary);
    fill: none;
    stroke-width: 1.6;
    position: relative;
    z-index: 1;
}
.home-usp__item:hover .home-usp__icon i {
    transform: scale(1.08);
    color: #1a2d52 !important;
}
.home-usp__item h3 {
    font-family: var(--yk-font-display) !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    color: var(--yk-primary-light) !important;
    margin: 0 0 0.85rem !important;
    line-height: 1.3;
    letter-spacing: -0.005em;
}
.home-usp__item p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--yk-text-muted);
    margin: 0;
}

/* Connector dotted line između kartica (samo desktop) */
@media (min-width: 992px) {
    .home-usp__grid { position: relative; }
    .home-usp__item:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -2.5rem;
        width: 2.5rem;
        height: 1px;
        border-top: 2px dotted rgba(255, 255, 255, 0.40);
        z-index: 0;
        transform: translateY(-50%);
        pointer-events: none;
    }
}

/* =============================================================================
   7. ABOUT teaser — editorial 2-col (image lijevo, text desno)
   ============================================================================= */
.home-about {
    padding: clamp(5rem, 10vw, 9rem) 0 !important;
    background: var(--yk-white) !important;
    position: relative;
}
.home-about__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
    max-width: 1240px;
    margin: 0 auto;
}
@media (max-width: 991.98px) {
    .home-about__grid { grid-template-columns: 1fr; gap: 3rem; }
}
.home-about__visual {
    position: relative;
}
.home-about__visual img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: var(--yk-shadow-lg);
    display: block;
}
.home-about__badge {
    position: absolute;
    bottom: -32px;
    right: -24px;
    background: var(--yk-secondary);
    color: var(--yk-primary);
    padding: 1.5rem 2rem;
    border-radius: 4px;
    box-shadow: var(--yk-shadow-md);
    font-family: var(--yk-font-display);
    font-size: 1.15rem;
    font-weight: 600;
    max-width: 240px;
    line-height: 1.3;
}
.home-about__badge-label { display: block; }
@media (max-width: 991.98px) {
    .home-about__badge { right: 1rem; bottom: -24px; padding: 1rem 1.25rem; font-size: 1rem; max-width: 200px; }
}

.home-about__text { padding: 0; }
.home-about__text .eyebrow { margin-bottom: 1rem; }
.home-about h2 {
    font-family: var(--yk-font-display) !important;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem) !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    color: var(--yk-primary-light);
    margin: 0 0 1.5rem !important;
    letter-spacing: -0.01em;
}
.home-about .lead {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--yk-text-muted);
    margin: 0 0 1.75rem;
    /* #050 — Line-clamp na 7 linija (≈ 24 reda × 0.5 visine teksta).
       Industry pattern (Booking, Airbnb): teaser truncate sa CTA "Saznaj više"
       koja vodi na full /o-nama. Tako uravnoteženje sa slikom lijevo ostaje
       konzistentno bez obzira na dužinu CMS teksta. */
    display: -webkit-box;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Mobile: dozvoli više teksta jer slika nije bočno; 10 linija */
@media (max-width: 991.98px) {
    .home-about .lead {
        -webkit-line-clamp: 10;
        line-clamp: 10;
    }
}
.home-about__features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1.5rem;
}
@media (max-width: 575.98px) {
    .home-about__features { grid-template-columns: 1fr; }
}
.home-about__features li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.95rem;
    color: var(--yk-text);
    font-weight: 500;
}
.home-about__features i {
    color: var(--yk-secondary);
    font-size: 1.15rem;
}
.home-about .btn,
.home-about .btn-primary {
    background: var(--yk-primary) !important;
    border: 1px solid var(--yk-primary) !important;
    color: #fff !important;
    padding: 1.05rem 2.25rem !important;
    border-radius: 999px !important;
    font-family: var(--yk-font-body) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    transition: all 0.3s var(--yk-ease);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.home-about .btn:hover {
    background: var(--yk-secondary) !important;
    border-color: var(--yk-secondary) !important;
    color: var(--yk-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(201, 168, 113, 0.35);
}

/* =============================================================================
   7b. TESTIMONIALS — premium carousel sa decorativnim citat ornamentom
   ============================================================================= */
.home-testimonials {
    padding: clamp(5rem, 9vw, 8rem) 0 !important;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201, 168, 113, 0.08), transparent 60%),
        linear-gradient(180deg, #fbfaf6 0%, #f5f1e8 100%) !important;
    position: relative;
    overflow: hidden;
}
/* Veliki decorativan kvota mark u pozadini */
.home-testimonials::before {
    content: '"';
    position: absolute;
    top: -3rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, serif;
    font-size: 22rem;
    line-height: 1;
    color: rgba(201, 168, 113, 0.12);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.home-testimonials > .container {
    position: relative;
    z-index: 1;
    max-width: 1100px !important;
}
.home-testimonials .section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(3rem, 5vw, 4.5rem);
}
.home-testimonials .section-header .eyebrow {
    color: var(--yk-secondary) !important;
}
.home-testimonials .section-header h2 {
    font-family: var(--yk-font-display) !important;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem) !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    color: var(--yk-primary-light) !important;
    margin: 0.5rem 0 1rem;
}

/* Equal-height slide-ovi — Swiper default svi slide imaju implicit height
   po najvišem, ali samo ako .swiper-slide ima `height: auto` (default je
   100% koje stretch-uje na container, ne na sibling). Sa display: flex
   kartica unutar slide postaje flex child i može popuniti cijelu visinu. */
.home-testimonials .swiper-slide {
    height: auto;
    display: flex;
}

/* Testimonial kartice — flat (bez shadow-a), gold accent na hover-u */
.home-testimonials .testimonial-card {
    background: #fff;
    border: 1px solid rgba(15, 30, 58, 0.08);
    border-radius: 12px;
    padding: 2.5rem 2rem !important;
    box-shadow: none;
    transition: transform 0.4s var(--yk-ease), border-color 0.4s var(--yk-ease);
    position: relative;
    margin: 1rem 0.5rem;
    /* Equal height: kartica popunjava cijeli slide po visini, sadržaj se
       raspoređuje vertikalno tako da author block uvijek bude prikvačen
       na dno bez obzira na dužinu citata. */
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.home-testimonials .testimonial-card:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 168, 113, 0.45);
}

/* Rating zvijezde — gold */
.home-testimonials .testimonial-card__rating {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 1.25rem;
}
.home-testimonials .testimonial-card__rating i {
    color: var(--yk-secondary) !important;
    font-size: 1rem;
}

/* Citat */
.home-testimonials .testimonial-card__quote {
    font-family: var(--yk-font-display) !important;
    font-size: 1.15rem;
    line-height: 1.6;
    font-style: italic;
    color: var(--yk-text);
    margin: 0 0 1.75rem;
    position: relative;
    /* Citat zauzima sav available vertical space → author block uvijek
       prikvačen na dno kartice. Bez ovoga, kartice imaju equal height
       ali author "pluta" u sredini sa praznim prostorom ispod. */
    flex: 1 1 auto;
}

/* Author block */
.home-testimonials .testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(15, 30, 58, 0.08);
}
.home-testimonials .testimonial-card__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--yk-secondary);
    box-shadow: 0 4px 10px rgba(201, 168, 113, 0.25);
    flex-shrink: 0;
}
.home-testimonials .testimonial-card__name {
    font-family: var(--yk-font-display) !important;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--yk-primary) !important;
    line-height: 1.2;
}
.home-testimonials .testimonial-card__meta {
    font-size: 0.85rem;
    color: var(--yk-text-muted);
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.home-testimonials .testimonial-card__meta i {
    color: var(--yk-secondary);
    font-size: 0.9rem;
}

/* Language badge — Booking/Airbnb pattern; prikazuje se ispod imena/ture
   kada je recenzija originalno pisana na jeziku različitom od trenutnog
   locale-a (npr. "Recenzija na engleskom"). */
.home-testimonials .testimonial-card__lang {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--yk-text-muted);
    background: rgba(15, 30, 58, 0.04);
    border: 1px solid rgba(15, 30, 58, 0.08);
    border-radius: 999px;
    line-height: 1.4;
}
.home-testimonials .testimonial-card__lang i {
    color: var(--yk-secondary);
    font-size: 0.85rem;
}

/* Swiper pagination */
.home-testimonials .swiper-pagination {
    position: static !important;
    margin-top: 2rem !important;
    text-align: center;
}
.home-testimonials .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--yk-primary);
    opacity: 0.25;
    transition: all 0.3s var(--yk-ease);
}
.home-testimonials .swiper-pagination-bullet-active {
    background: var(--yk-secondary);
    opacity: 1;
    width: 32px;
    border-radius: 999px;
}

/* =============================================================================
   8. NEWSLETTER CTA — bijela kartica preko cream background
   ============================================================================= */
.home-newsletter {
    padding: clamp(3.5rem, 6vw, 5rem) 0 clamp(3rem, 5vw, 4rem) !important;
    background:
        radial-gradient(ellipse 60% 80% at 20% 0%, rgba(201, 168, 113, 0.18), transparent 55%),
        radial-gradient(ellipse 60% 80% at 80% 100%, rgba(15, 30, 58, 0.08), transparent 55%),
        linear-gradient(180deg, #FAF7F2 0%, #F5F1E8 60%, #EDE5D6 100%) !important;
    position: relative;
    overflow: hidden;
}
/* Decorativan gold blob top-left */
.home-newsletter::before {
    content: '';
    position: absolute;
    top: -180px;
    left: -180px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 168, 113, 0.25), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}
/* Decorativan navy blob bottom-right */
.home-newsletter::after {
    content: '';
    position: absolute;
    bottom: -200px;
    right: -200px;
    width: 540px;
    height: 540px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15, 30, 58, 0.12), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}
.home-newsletter > .container { position: relative; z-index: 1; }
.home-newsletter__inner {
    background: #fff;
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
    border-radius: 6px;
    box-shadow: var(--yk-shadow-lg);
    text-align: center;
    position: relative;
}
.home-newsletter__inner::before {
    content: '\2693'; /* anchor unicode */
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--yk-secondary);
    color: var(--yk-primary);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 8px 20px rgba(201, 168, 113, 0.4);
}
.home-newsletter h2 {
    font-family: var(--yk-font-display) !important;
    font-size: clamp(1.85rem, 3.5vw, 2.5rem) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: var(--yk-primary-light);
    margin: 0.5rem 0 1rem !important;
}
.home-newsletter p {
    font-size: 1rem;
    color: var(--yk-text-muted);
    margin: 0 auto 2rem;
    max-width: 480px;
    line-height: 1.65;
}
.home-newsletter__form {
    display: flex;
    gap: 0.6rem;
    max-width: 480px;
    margin: 0 auto;
}
.home-newsletter__input {
    flex: 1;
    background: var(--yk-cream);
    border: 1px solid var(--yk-border);
    color: var(--yk-text);
    padding: 1rem 1.25rem;
    border-radius: 999px;
    font-family: var(--yk-font-body);
    font-size: 0.95rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.home-newsletter__input::placeholder { color: var(--yk-text-soft); }
.home-newsletter__input:focus {
    outline: none;
    border-color: var(--yk-secondary);
    background: #fff;
}
.home-newsletter__btn {
    background: var(--yk-primary);
    border: 1px solid var(--yk-primary);
    color: #fff;
    padding: 1rem 1.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.25s var(--yk-ease);
    white-space: nowrap;
}
.home-newsletter__btn:hover {
    background: var(--yk-secondary);
    border-color: var(--yk-secondary);
    color: var(--yk-primary);
}
@media (max-width: 575.98px) {
    .home-newsletter__form { flex-direction: column; }
}

/* =============================================================================
   9. FOOTER — navy sa kolonama
   ============================================================================= */
.site-footer {
    background: var(--yk-primary-dk) !important;
    color: rgba(255, 255, 255, 0.78);
    padding: clamp(4rem, 6vw, 5rem) 0 2rem !important;
}
.site-footer a {
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.2s ease;
}
.site-footer a:hover { color: var(--yk-secondary); }
.site-footer h3, .site-footer h4 {
    color: #fff;
    font-family: var(--yk-font-display);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}
.site-footer__brand-logo img {
    background: rgba(255,255,255,0.95) !important;
    border-radius: 12px;
    padding: 10px 14px;
    /* 2026-05-14: logo footer-a uvećan za 50% (64px → 96px) — više je
       prepoznatljiv u dnu i bolje balansira sa kontakt info blokom. */
    height: 96px !important;
    width: auto !important;
}
.site-footer__tagline {
    color: rgba(255,255,255,0.65);
    line-height: 1.7;
    margin-top: 1.25rem;
}

/* =============================================================================
   10. Reveal animation polish
   ============================================================================= */
.reveal, .reveal-stagger {
    will-change: transform, opacity;
}

/* =============================================================================
   11. Container width consistency
   ============================================================================= */
.home-featured > .container,
.home-usp > .container,
.home-about > .container,
.home-newsletter > .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 2rem;
}
@media (max-width: 575.98px) {
    .home-featured > .container,
    .home-usp > .container,
    .home-about > .container,
    .home-newsletter > .container { padding: 0 1.25rem; }
}

/* =============================================================================
   12. Section divider — suptilna gold linija između sekcija (opcionalno)
   ============================================================================= */
.home-stats + .home-featured,
.home-featured + .home-usp,
.home-usp + .home-about,
.home-about + .home-newsletter {
    border-top: 0;
}

/* =============================================================================
   13. Premium polish za unutrasnje strane (Tour Detail, CMS Pages)
   ============================================================================= */
/* Tour detail — Booking widget premium look */
.td-booking-widget {
    background: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08),
        0 16px 40px rgba(0, 0, 0, 0.16),
        0 0 0 1px rgba(201, 168, 113, 0.25) !important;
    /* #083 v3 (2026-05-24): top: 0 !important — widget se lijepi za sam vrh
       viewport-a bez ikakve šupljine iznad. Prethodno hard-coded 90px je
       pravio veliki razmak iznad widget-a u sticky mode-u. !important je
       potreban jer greben-polish.css se učitava nakon tour-detail.css i ovaj
       selektor ima i ostala !important pravila u istom bloku. */
    position: sticky !important;
    top: 0 !important;
    /* #112 (2026-05-27): max-height + internal scroll. Hourly always-available
       ture renderuju 16-slot time picker (06:00-22:00) što čini widget visim
       od viewport-a i sakriva "Rezerviši" CTA na dnu. Industry pattern
       (Booking, Klook, GetYourGuide): sticky widget je ograničen na visinu
       viewport-a i scroll-uje INTERNO, tako da CTA ostaje uvijek dostupan.
       100svh handluje mobile browser chrome dynamic-resize (Safari iOS); 
       dva calc-a za fallback ako svh nije podržan. */
    max-height: calc(100vh - 1rem);
    max-height: calc(100svh - 1rem);
    overflow-y: auto;
    overflow-x: hidden;
    /* Suptilan scrollbar — tanak gold accent koji se ukomponuje u premium look. */
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 168, 113, 0.45) transparent;
}
.td-booking-widget::-webkit-scrollbar { width: 6px; }
.td-booking-widget::-webkit-scrollbar-track { background: transparent; }
.td-booking-widget::-webkit-scrollbar-thumb {
    background: rgba(201, 168, 113, 0.45);
    border-radius: 3px;
}
.td-booking-widget::-webkit-scrollbar-thumb:hover {
    background: rgba(201, 168, 113, 0.75);
}
/* #067 (2026-05-20): Range suzeno na TABLET only (768-991px) jer prethodna
   `max-width: 991px` definicija je sa !important prekidala mobile sheet pattern
   definisan u tour-detail.css (<768px → position: fixed + transform). Sa
   `max-width: 991px` greben-polish.css je vraćao widget na position: static
   na MOBILE-u, pa je widget plutao kao normalni blok u DOM-u i ulijetao ispod
   sekcija (slične ture itd.). Industry standard mobile sheet pattern
   (Booking, GetYourGuide) zahtjeva fixed positioning ispod 768px. */
@media (min-width: 768px) and (max-width: 991px) {
    /* Tablet single-column: widget ide kao normalni blok ispod content-a.
       Mobile (<768px) ima sheet mode (override ispod). */
    .td-booking-widget {
        position: static !important;
        top: auto !important;
    }
}
@media (max-width: 767.98px) {
    /* #067 (2026-05-20): Mobile sheet pattern — re-deklariše position: fixed
       sa !important da pobijedi base `position: sticky !important` deklaraciju
       iznad (linija 1510). Bez ovoga widget se stripuje iz fixed pattern-a
       definisanog u tour-detail.css (linija 2214) i pluta u DOM flow-u.
       Industry pattern (Booking, GetYourGuide): mobile booking widget mora
       biti fixed sheet sa transform animation. */
    .td-booking-widget {
        position: fixed !important;
        top: auto !important;
        inset: 0 !important;
        border-radius: var(--tr-radius-xl, 1rem) var(--tr-radius-xl, 1rem) 0 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}
/* Gold rim accent na vrhu booking widgeta */
.td-booking-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201, 168, 113, 0.40) 20%,
        var(--yk-secondary) 50%,
        rgba(201, 168, 113, 0.40) 80%,
        transparent 100%);
    z-index: 10;
    pointer-events: none;
}
.td-booking-widget:hover {
    transform: translateY(-4px);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.10),
        0 24px 48px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(201, 168, 113, 0.35) !important;
}
/* Tipografija u booking widgetu */
.td-booking-widget__price strong {
    font-family: var(--yk-font-display);
    color: var(--yk-primary);
    font-size: 2.2rem !important;
}

/* Date picker modal — "Izaberi datum polaska" naslov + "Maj 2026." month label.
   Problem: <h4 class="td-cal-modal__title"> element nasleđuje globalni
   `h1-h6 { color: var(--bc-text) }` iz site.css, što daje tamno-plavu boju
   na orange header pozadini (loš kontrast, neusklađen brand). Fix:
   - bijela boja !important (override h4 base color)
   - veći font-size (paritet sa drugim title-ima)
   - IBM Plex Sans font-family (sve naslove na sajtu koristi isti font) */
.td-cal-modal__title {
    color: #fff !important;
    font-family: var(--yk-font-display) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
}
.td-cal-modal__month-label {
    color: #fff !important;
    font-family: var(--yk-font-display) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
}

/* Tour Detail hero gallery (premium okvir) */
.td-hero-gallery {
    padding: clamp(1rem, 3vw, 2rem) 0 0;
    background: transparent !important;
}
.td-hero-gallery .swiper {
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 30, 58, 0.15);
    overflow: hidden;
}

/* =============================================================================
   CMS Page Hero — premium cover image with multi-stop overlay
   -----------------------------------------------------------------------------
   Industry reference: Booking.com / Viator / GetYourGuide hero pattern —
   cover image with subtle scale/saturate, 3-stop vertical gradient (lighter
   top so image "breathes", darker bottom for text contrast) plus radial
   vignette for focus on the title. Falls back to default blue gradient when
   admin hasn't set a cover (no .page-hero--image class on the section).
   ============================================================================= */
/* Unified hero height for all CMS pages (cover or no-cover variant).
   FIXED height (not min-height) + flex centering guarantees identical
   pixel height regardless of how many lines of eyebrow / title / subtitle
   the page renders. Padding-block is zeroed so the box can't grow from
   internal padding; flex centering vertically aligns content inside the
   fixed box. Industry pattern: Booking.com / Airbnb / GetYourGuide all
   pin hero to a fixed height for predictable downstream layout.
   Excludes home page (uses its own .home-hero markup). */
.page-hero {
    height: clamp(280px, 34vw, 360px) !important;
    padding-block: 0 !important;
    display: flex;
    align-items: center;
}
.page-hero__inner {
    width: 100%;
}
.page-hero--image {
    background-attachment: scroll !important;
}
.page-hero--image::before {
    /* Cover image — slightly scaled + saturated for premium feel.
       transform-origin: center bottom keeps the focal point anchored when
       padding-block scales between mobile and desktop. */
    background: var(--bc-bg-image, none) center/cover no-repeat !important;
    transform: scale(1.04);
    transform-origin: center;
    filter: saturate(1.08) brightness(0.92);
    will-change: transform;
}
.page-hero--image::after {
    /* Two layers stacked: vertical gradient for top→bottom contrast +
       radial vignette to draw the eye to the headline. */
    background:
        radial-gradient(ellipse at 50% 45%,
            rgba(15, 30, 58, 0.18) 0%,
            rgba(15, 30, 58, 0.55) 70%,
            rgba(15, 30, 58, 0.72) 100%),
        linear-gradient(180deg,
            rgba(15, 30, 58, 0.35) 0%,
            rgba(15, 30, 58, 0.62) 55%,
            rgba(15, 30, 58, 0.86) 100%) !important;
}
.page-hero__title {
    font-family: var(--yk-font-display) !important;
    font-size: clamp(3rem, 6vw, 4.5rem) !important;
    font-weight: 500 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
    letter-spacing: -0.01em;
}
.page-hero__subtitle {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
    max-width: 720px;
    margin-inline: auto;
}
.page-hero__eyebrow {
    color: var(--yk-secondary) !important;
    font-family: var(--yk-font-body);
    font-weight: 600 !important;
    letter-spacing: 0.28em !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* CMS stranice sadržaj — premium container */
.page-body .container > .prose,
.page-body > .container {
    background: #fff;
    padding: clamp(2rem, 5vw, 4rem);
    border-radius: 8px;
    box-shadow:
        0 4px 12px rgba(15, 30, 58, 0.06),
        0 24px 48px rgba(15, 30, 58, 0.08);
    margin-top: -6rem;
    position: relative;
    z-index: 10;
}
.page-body .container > .prose {
    max-width: 800px !important;
    margin-inline: auto;
}

/* =============================================================================
   13b. CMS body prose — standardna veličina fonta za full-width strane
   =============================================================================
   Sve CMS strane sa full-width .prose container-om (galerija, legal,
   testimonials, faq, team, blog, kontakt, page-default) koriste manji body
   font (16px = --bc-fs-base) jer je optimalna line-length 65-75 znakova/linija
   u 800px-wide container-u — 18px na toj širini probija comfort reading limit
   (industry std: max 75 znakova/linija; npr. Medium, Substack).

   About strana NIJE u listi — njen `.prose` je unutar 2-col grid-a
   (`.about-story__grid`), tekst kolona je ~450-550px, pa 18px (default `.prose`)
   tu daje optimalan 55-60 znakova/linija (premium feel u uskoj koloni). */
.gallery-page .prose,
.legal-page .prose,
.testimonials-page .prose,
.team-page .prose,
.faq-page .prose,
.blog-page .prose,
.blog-detail .prose,
.page-body .prose,
.contact-section .prose,
.contact-suite .prose {
    font-size: var(--bc-fs-base); /* 16px — uniformni standard za wide prose */
}

/* =============================================================================
   14. Tours archive — sakri filtere, centriraj grid
   ============================================================================= */
.tr-filter-bar { display: none !important; }

.tr-grid-section {
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem) !important;
}
.tr-grid-section > .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
}
.tr-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(1.5rem, 3vw, 2.5rem) !important;
    justify-content: center !important;
    margin: 0 auto !important;
}
@media (max-width: 768px) {
    .tr-grid { grid-template-columns: 1fr !important; max-width: 460px; }
}

/* =============================================================================
   13. Reduced motion respect
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .tr-tour-card:hover,
    .home-usp__item:hover { transform: none !important; }
}

/* =============================================================================
   13. CTA banner — full-bleed call-to-action iznad footera
   ----------------------------------------------------------------------------
   Background slika (page.cover) sa dark navy overlay-om + naslov + opis +
   2 dugmeta (orange primary + white ghost). Stil match-uje "Spremni za
   avanturu" pattern iz Submarine/Viator-style sites.
   ============================================================================= */
.home-cta-banner {
    position: relative;
    padding: clamp(3rem, 6vw, 5rem) 0 !important;
    margin: 0 !important;
    /* 2026-05-14: Premium fix — koristimo background-color fallback + size/
       position/repeat odvojeno (NE shorthand), tako da inline style sa
       `background-image: url(...)` u partial-u ne resetuje overlay. */
    background-color: var(--bc-primary, #0F2547);
    background-size: cover;
    /* 2026-05-14: balansirano — pola nebo, pola more (horizont blizu
       sredine kadra). background-position-y = 60%. */
    background-position: 50% 60%;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    overflow: hidden;
    /* Min-height da banner ima dovoljno prostora za content + cijela slika
       (sa cover-om) — centriranje po visini ima vizuelnog smisla. */
    min-height: clamp(320px, 42vh, 460px);
    display: flex;
    align-items: center;
}
/* Overlay preko ::before — radi i kad inline `background-image` postoji.
   Polu-transparentni navy → tekst je čitljiv, slika prosvjetli kroz njega. */
.home-cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(15, 37, 71, 0.55) 0%,
        rgba(15, 37, 71, 0.70) 100%
    );
    pointer-events: none;
    z-index: 0;
}
.home-cta-banner--has-image::before {
    /* Sa slikom — malo jači overlay na dnu radi kontrasta CTA dugmadi */
    background: linear-gradient(
        180deg,
        rgba(15, 37, 71, 0.45) 0%,
        rgba(15, 37, 71, 0.55) 50%,
        rgba(15, 37, 71, 0.70) 100%
    );
}
.home-cta-banner__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1.5rem;
    /* Vertical centriranje content-a unutar min-height-a */
    width: 100%;
}
.home-cta-banner__eyebrow {
    color: var(--yk-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}
.home-cta-banner__title {
    color: #fff !important;
    font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin: 0 0 0.85rem !important;
}
.home-cta-banner__desc {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 auto 1.75rem;
    max-width: 580px;
}
.home-cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}
.home-cta-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.2;
    text-decoration: none;
    transition: background 0.2s var(--yk-ease), transform 0.2s var(--yk-ease),
                box-shadow 0.2s var(--yk-ease), border-color 0.2s var(--yk-ease);
    border: 1px solid transparent;
    white-space: nowrap;
}
.home-cta-banner__btn i { font-size: 1.05rem; }
.home-cta-banner__btn:active { transform: scale(0.97); }

.home-cta-banner__btn--primary {
    background: #ff6b35;
    color: #fff;
    box-shadow: 0 6px 18px rgba(255, 107, 53, 0.40);
}
.home-cta-banner__btn--primary:hover {
    background: #ed5826;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(255, 107, 53, 0.50);
}

.home-cta-banner__btn--ghost {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.home-cta-banner__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.20);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.85);
    transform: translateY(-1px);
}

@media (max-width: 575.98px) {
    .home-cta-banner__inner { padding: 0 1rem; }
    .home-cta-banner__title { font-size: 1.5rem !important; }
    .home-cta-banner__desc { font-size: 0.9rem; }
    .home-cta-banner__actions { flex-direction: column; align-items: stretch; }
    .home-cta-banner__btn { justify-content: center; }
}


/* =============================================================================
   13b. TOUR DETAIL — Scroll-stack premium layout (Faza 9.1)
   ---------------------------------------------------------------------
   Replace-uje tab-based UX iz starije Faze 8.3. Nova struktura:
   - Hero gallery 2-col split (1 main + 2x2 thumbs sa "Pregled svih +N")
   - Scroll-stack sekcije: Highlights, Opis, Plan puta, Uključeno, Extras,
     Važne informacije + Preporuke, Mjesto polaska, Recenzije
   - Svaka sekcija renderuje SAMO ako admin ima content u tom polju
     (logika u detail.php; CSS samo style-uje)
   ============================================================================= */

/* ---- Hero gallery 2-col grid ---- */
.td-hero-gallery {
    padding: clamp(1rem, 3vw, 2rem) 0 0;
    background: transparent;
}
.td-hero-gallery .container { max-width: 1180px; }
/* EKSPLICITAN HEIGHT preko grid-template-rows umjesto aspect-ratio —
   `aspect-ratio` na grid kontejneru NE daje grid cell-ovima eksplicitnu
   computed visinu, pa children sa `height: 100%` resolve-uju kao auto
   (kvirk percentage height propagation). Direktan height na grid je
   industry standard pattern (Booking, Airbnb, GetYourGuide).
   clamp() daje fluid responsive height: min 380px (mobile/tablet),
   ideal 48vw (proporcionalno viewport-u), max 560px (desktop). */
.td-gallery-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    grid-template-rows: clamp(380px, 44vw, 500px);
    gap: 0.5rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 30, 58, 0.10);
    align-items: stretch;
}
/* Eksplicitan stretch na direktnim children (main + thumbs container) —
   garantuje punu visinu grid row-a bez obzira na intrinsic content sizing. */
.td-gallery-grid > .td-gallery-main,
.td-gallery-grid > .td-gallery-thumbs {
    align-self: stretch;
    height: 100%;
    min-height: 0;
}
/* Adaptive layout zavisno od broja slika u galeriji (atribut iz PHP-a:
   data-count="N" gdje je N ukupan broj heroSlides). Sprečava prazne kolone
   za ture sa <3 slike i optimizuje height per layout. */
.td-gallery-grid[data-count="1"] {
    grid-template-columns: 1fr;
    grid-template-rows: clamp(340px, 40vw, 460px);
}
.td-gallery-grid[data-count="2"] {
    grid-template-columns: 1fr 1fr; /* 50/50 split za 1 main + 1 thumb */
    grid-template-rows: clamp(340px, 40vw, 460px);
}
/* Image fill — uvijek centered cover. `object-position: center` osigurava
   da portrait/landscape slike izgledaju razumno centrirano umjesto top-cropped.
   Background-color daje neutralan fallback ako se slika ne učita. */
.td-gallery-main,
.td-gallery-thumb {
    background-color: var(--yk-cream, #FAF7F2);
}
.td-gallery-main img {
    object-position: center center;
}
/* Thumbs (vertikalni stack desno) — zumiranje 1.7× sa transform-origin
   bottom-center. Razlog: originalne slike u galeriji često imaju 70-90%
   neba u gornjem dijelu (aerial/landscape pejzaži), pa `object-position: bottom`
   nije dovoljan — i dalje se vidi nebo. Scale 1.7× + origin 50% 100% potpuno
   "izbacuje" gornji dio slike izvan okvira i prikazuje samo donji srednji dio
   (more, čamci, paluba, ljudi). Tradeoff: piksel detalji se gube ~70% jer je
   slika uvećana, ali tema je čitljiva što je važnije. Industry pattern (Booking
   "Featured photo" thumbnails sa pametnim crop-om). */
.td-gallery-thumbs > .td-gallery-thumb img {
    object-position: center bottom !important;
    transform: scale(1.7) !important;
    transform-origin: 50% 100% !important;
}
/* Hover state — zadržava jak zoom, dodaje suptilan extra scale za feedback. */
.td-gallery-thumbs > .td-gallery-thumb:hover img {
    transform: scale(1.78) !important;
}
.td-gallery-main,
.td-gallery-thumb {
    /* `position: relative !important` je defensive — rating badge unutar
       glavne slike je `position: absolute` i mora se sigurno pozicionirati
       relativno na ovaj `<a>` element. Bilo koji global override (npr.
       Bootstrap reset, mobile-polish, ili browser default) može da pokvari
       to ako nije sa !important. */
    position: relative !important;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--yk-cream);
    cursor: zoom-in;
    text-decoration: none;
    /* min-height: 0 sprečava flex/grid intrinsic min-content sizing
       (default min-height: auto bi prouzrokovao da grid cell postane min-content
       od slike, što ostavlja prazninu ispod). */
    min-height: 0;
}
/* Absolute positioning sprečava CSS percentage-height propagation kvirk —
   `img { height: 100% }` na <a> roditelju ne radi pouzdano u svim
   browserima jer percentage heights zahtijevaju da parent ima eksplicitnu
   non-percentage visinu. `position: absolute; inset: 0` direktno postavlja
   img u sve 4 ivice <a>-a (koji je `position: relative`), garantovano
   popunjavajući cijelu grid cell bez praznina. Industry standard pattern
   (Booking, Airbnb, GetYourGuide). */
.td-gallery-main img,
.td-gallery-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s var(--yk-ease);
}
.td-gallery-main:hover img,
.td-gallery-thumb:hover img {
    transform: scale(1.04);
}
/* Smooth gradient overlay na donjoj 1/3 glavne slike — daje suptilan
   tamniji premaz koji čini rating badge i "Pogledaj sve fotografije"
   čitkim na bilo kojoj slici (svjetla nebo, taman more, bijeli brod...).
   Industry pattern (Montenegro Submarine, GetYourGuide, Booking).
   Pseudo-element ::after je INSIDE <a class="td-gallery-main"> ali
   `pointer-events: none` osigurava da klik prolazi do <a>-a koji otvara
   fancybox. Z-index 1 stavlja overlay iznad slike (z-index: auto) ali
   ispod badge-a (z-index: 3) i view-all dugmeta. */
.td-gallery-main::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.05) 35%,
        rgba(0, 0, 0, 0.35) 100%
    );
    z-index: 1;
    /* Soft transition na hover — overlay malo intenzivniji da naglasi
       interaktivnost klika na sliku. */
    transition: opacity 0.25s var(--yk-ease);
}
.td-gallery-main:hover::after {
    opacity: 0.85;
}
/* 2 thumb-a stack-ovana vertikalno — eksplicitan CSS Grid sa 2 row-a
   `1fr 1fr` garantuje matematički EGZAKTNO 50/50 split visine. Flex
   `flex: 1 1 0` zavisi od korektno propagirane parent visine i može
   da fallback-uje na intrinsic content sizing ako parent ima implicit
   min-height: auto, što je razlog zašto je flex pravio razlike u
   visini između lijeve main slike i desnog stuba. Grid `1fr 1fr` ne
   ima taj problem — fr unit je strict proportional split. DOM order
   je natural (prva thumb = gornja, druga = donja). */
.td-gallery-thumbs {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.5rem;
    height: 100%;
    min-height: 0;
}
.td-gallery-thumbs .td-gallery-thumb {
    /* Eksplicitan stretch na grid cell-u — sprečava da slika sa specifičnim
       intrinsic ratio nametne vlastitu visinu thumbnail kontejneru. */
    align-self: stretch;
    justify-self: stretch;
    height: 100%;
    min-height: 0;
}
/* Rating badge u donjem-lijevom uglu glavne slike — frosted glass /
   glassmorphism effect (paritet sa Montenegro Submarine i premium
   booking platforms: Apple, Airbnb, GetYourGuide). Polu-prozirna bijela
   podloga sa `backdrop-filter: blur()` zamućuje sliku iza badge-a što
   daje atraktivan premium look + bolji kontrast za tekst.
   Position: absolute relativno na .td-gallery-main (koji je position: relative). */
.td-gallery-rating {
    /* !important na pozicioniranje — defensive za scenario gdje user
       gleda preko browser cache-a sa starom verzijom CSS-a koja nije
       imala ove rules. Sa !important, čak i ako se nešto override-uje
       (mobile-polish, generic span, itd.), badge će uvijek biti
       absolute pozicioniran u donjem-lijevom uglu glavne slike.
       2026-05-17: 1.25rem (20px) umjesto 0.85rem — daje više vidljivog
       buffer-a od ivice slike, sigurno UNUTAR glavne slike čak i kad
       se grid container slučajno raspada na manju visinu. */
    position: absolute !important;
    bottom: 1.25rem !important;
    left: 1.25rem !important;
    z-index: 3 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    /* Frosted glass: polu-prozirna bijela + blur backdrop. Fallback na
       solid bijelu (96% alpha) za browsere bez backdrop-filter podrške. */
    background: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    color: var(--yk-primary, #0F1E3A);
    font-family: var(--yk-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    text-decoration: none;
    /* Suptilan border + shadow daje "lebdeći" glassmorphism efekat. */
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 4px 16px rgba(15, 30, 58, 0.20),
                0 0 0 0.5px rgba(15, 30, 58, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    /* Pointer-events: none zato što badge je INSIDE <a class="td-gallery-main">
       koji otvara fancybox — ne želimo da klik na badge stoji u načinu klika
       na sliku. Cijeli main link otvara lightbox uniformno. */
    pointer-events: none;
    user-select: none;
    line-height: 1.2;
    white-space: nowrap;
}
/* Fallback za browsere bez backdrop-filter podrške — koristi solidnu
   bijelu podlogu da tekst ostane čitljiv. @supports detekcija prikazana
   ovde inverted: ako NEMA backdrop-filter, koristi solid background. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .td-gallery-rating {
        background: rgba(255, 255, 255, 0.96);
    }
}
.td-gallery-rating .bi-star-fill {
    color: var(--bc-secondary, #C9A871);
    font-size: 0.95rem;
    line-height: 1;
}
.td-gallery-rating strong {
    font-weight: 700;
    color: var(--yk-primary, #0F1E3A);
}
.td-gallery-rating-sep {
    color: rgba(15, 30, 58, 0.4);
    margin: 0 0.1rem;
}

/* Floating "Pogledaj sve fotografije (N)" button — dolje-desno u gallery
   grid-u (paritet sa reference image-om: GetYourGuide-style overlay btn).
   White pill button sa shadow-om, hover effect podiže ga blago. */
.td-gallery-viewall {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: var(--yk-primary);
    font-family: var(--yk-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.65rem 1.1rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(15, 30, 58, 0.18),
                0 0 0 1px rgba(15, 30, 58, 0.04);
    transition: transform 0.18s var(--yk-ease),
                box-shadow 0.18s var(--yk-ease);
}
.td-gallery-viewall:hover {
    color: var(--yk-primary);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 30, 58, 0.25),
                0 0 0 1px rgba(15, 30, 58, 0.06);
}
.td-gallery-viewall i {
    font-size: 1.05rem;
    color: var(--yk-primary);
}
/* Hidden links za Fancybox (slike preko prikazane 3) */
.td-gallery-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Mobile: stack u single column sa thumbs u 2-col grid ispod glavne slike */
@media (max-width: 767.98px) {
    .td-gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        aspect-ratio: auto;
        border-radius: 10px;
    }
    .td-gallery-main {
        aspect-ratio: 16 / 10;
    }
    .td-gallery-thumbs {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        gap: 0.4rem;
        height: auto;
    }
    .td-gallery-thumb {
        aspect-ratio: 16 / 10;
    }
    /* Rating badge — manji pill na mobile (font 0.78rem umjesto 0.85),
       tighter padding, blizu donje ivice slike. Skraćen "+ recenzija"
       text se ne prikazuje (samo ★ broj · count) — UX best-practice za
       small screen kad svaki pixel je dragocjen. */
    .td-gallery-rating {
        bottom: 0.6rem;
        left: 0.6rem;
        font-size: 0.78rem;
        padding: 0.35rem 0.7rem;
        gap: 0.3rem;
    }
    .td-gallery-rating .bi-star-fill {
        font-size: 0.85rem;
    }
    /* Lakši gradient overlay na mobile (slika je već fokus pažnje, ne
       treba previše tamnjenje). */
    .td-gallery-main::after {
        height: 40%;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.30) 100%
        );
    }
    .td-gallery-viewall {
        bottom: 0.6rem;
        right: 0.6rem;
        font-size: 0.82rem;
        padding: 0.5rem 0.9rem;
    }
}

/* ---- Generička sekcija ---- */
.td-section {
    background: #fff;
    border-radius: 12px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(15, 30, 58, 0.04),
                0 8px 24px rgba(15, 30, 58, 0.06);
    border: 1px solid rgba(15, 30, 58, 0.04);
}
.td-section__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}
.td-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.10);
    color: #ff6b35;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.td-section__head h2 {
    margin: 0;
    font-family: var(--yk-font-display);
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    font-weight: 600;
    color: var(--yk-primary-light);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.td-section__body {
    color: var(--yk-text);
    line-height: 1.7;
}
.td-section__body p:last-child { margin-bottom: 0; }

/* Rich text override unutar sekcija — paritet sa CMS rich text styling */
.td-section__body.td-rich h3,
.td-section__body .td-rich h3,
.td-section__body.td-rich h4,
.td-section__body .td-rich h4 {
    font-family: var(--yk-font-display);
    color: var(--yk-primary-light);
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.td-section__body.td-rich ul,
.td-section__body .td-rich ul {
    list-style: none;
    padding-left: 0;
}
.td-section__body.td-rich ul li,
.td-section__body .td-rich ul li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.65rem;
    line-height: 1.6;
}
.td-section__body.td-rich ul li::before,
.td-section__body .td-rich ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff6b35;
}

/* Uključeno / Nije uključeno - 2-col grid */
.td-section--included .td-included-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 767.98px) {
    .td-section--included .td-included-grid { grid-template-columns: 1fr; }
}
.td-included-col {
    background: var(--yk-cream);
    border-radius: 10px;
    padding: 1.25rem;
}
.td-included-col h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
    font-size: 1.05rem;
    font-weight: 600;
    font-family: var(--yk-font-display);
}
.td-included-col--yes h4 { color: #1f9d55; }
.td-included-col--no  h4 { color: #c8102e; }
.td-included-col .td-rich ul li::before {
    background: currentColor;
}
.td-included-col--yes .td-rich ul li::before {
    width: 16px;
    height: 16px;
    border-radius: 0;
    background: transparent;
    top: 0.35rem;
    /* Bootstrap Icons check-circle-fill kao bg image. Najjednostavnije:
       inline SVG sa zelenom bojom. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231f9d55'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.02L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
.td-included-col--no .td-rich ul li::before {
    width: 16px;
    height: 16px;
    border-radius: 0;
    background: transparent;
    top: 0.35rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c8102e'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Info grid (Važne informacije + Preporuke) - 2-col side-by-side */
.td-section--info-grid {
    background: transparent;
    padding: 0;
    box-shadow: none;
    border: 0;
}
.td-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 767.98px) {
    .td-info-grid { grid-template-columns: 1fr; }
}
.td-info-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(15, 30, 58, 0.04),
                0 8px 24px rgba(15, 30, 58, 0.06);
    border: 1px solid rgba(15, 30, 58, 0.04);
}
.td-info-card__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
}
.td-info-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1rem;
    flex-shrink: 0;
}
.td-info-card--important .td-info-card__icon {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}
.td-info-card--bring .td-info-card__icon {
    background: rgba(31, 157, 85, 0.12);
    color: #1f9d55;
}
.td-info-card__head h3 {
    margin: 0;
    font-family: var(--yk-font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--yk-primary-light);
}
.td-info-card__body {
    color: var(--yk-text);
    line-height: 1.65;
    font-size: 0.95rem;
}

/* Mjesto polaska - address block + map */
.td-section--meeting .td-address-block {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    background: var(--yk-cream);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin: 1rem 0;
}
.td-section--meeting .td-address-block i {
    color: #ff6b35;
    font-size: 1.1rem;
    margin-top: 0.15rem;
}
.td-section--meeting .td-address-block strong { margin-right: 0.35rem; }
.td-section--meeting .td-map {
    border-radius: 10px;
    overflow: hidden;
    margin-top: 1rem;
    min-height: 320px;
    background: var(--yk-cream);
}

/* Itinerary - numerisani dani */
.td-section--itinerary .td-itinerary-day { margin-bottom: 1.5rem; }
.td-section--itinerary .td-itinerary-day:last-child { margin-bottom: 0; }
/* Single-day itinerary — bez "Dan 1" badge-a (PHP guard za 1-day ture).
   Kad je samo jedan dan, ne treba margin-bottom (nema sledećeg dana),
   ne treba border-left (cijela sekcija je jedan timeline). */
.td-section--itinerary .td-itinerary--single-day .td-itinerary-day {
    margin-bottom: 0;
    border-left: none;
    padding-left: 0;
}
.td-section--itinerary .td-itinerary-day-badge {
    display: inline-block;
    background: rgba(255, 107, 53, 0.12);
    color: #ff6b35;
    padding: 0.25rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}
.td-section--itinerary .td-itinerary-item {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
    border-left: 2px solid rgba(255, 107, 53, 0.18);
}
.td-section--itinerary .td-itinerary-item::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 0.4rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff6b35;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15);
}
.td-section--itinerary .td-itinerary-item h5 {
    font-family: var(--yk-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--yk-primary-light);
    margin: 0 0 0.35rem;
}
.td-section--itinerary .td-itinerary-item .td-time {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--yk-text-muted);
    background: var(--yk-cream);
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    margin-bottom: 0.35rem;
}
.td-section--itinerary .td-itinerary-img {
    border-radius: 8px;
    margin-top: 0.65rem;
    max-width: 100%;
    height: auto;
}

/* Reviews - paritet sa drugim sekcijama */
.td-section--reviews .td-reviews-header {
    background: var(--yk-cream);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

/* =============================================================================
   14. GLOBAL FONT FAMILY OVERRIDE — IBM Plex Sans svuda
   ----------------------------------------------------------------------------
   Korisnikov zahtjev: jedan font za cijeli sajt. Ovaj blok je poslednji u
   greben-polish.css (final override layer) i koristi !important da preplavi:
     - Bootstrap default body font
     - Form elements koji default-no koriste system font (input/select/textarea)
     - Bilo koji legacy hardcoded font-family u starim CSS fajlovima

   Eksplicitno pokriva sve elemente iz korisnikovog zahtjeva:
   body, h1-h6, p, a, button, plus input/select/textarea radi konzistentnosti.
   ============================================================================= */
html,
body,
h1, h2, h3, h4, h5, h6,
p, a, span, div, li,
button, input, select, textarea,
.btn, .form-control, .form-select,
.bc-display, .yk-display {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}
/* Bootstrap Icons (i.bi-*) MORAJU zadržati svoj icon font — ne forsiramo ga.
   Bootstrap Icons koristi `font-family: bootstrap-icons` na `i[class^="bi-"]`. */
i[class*="bi-"],
[class*="bi-"]::before {
    font-family: bootstrap-icons !important;
}

/* =============================================================================
   Contact Suite — Premium kontakt strana redizajn
   -----------------------------------------------------------------------------
   Layout: hero (postojeći partial) → trust badges (4-up) → 2-col info+form
   → premium map card sa side-bar adresa info-om.
   Tokeni: koristi --bc-* iz brand.css (navy primary + gold secondary + cream).
   ============================================================================= */
.contact-suite {
    padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(3rem, 6vw, 6rem);
    background:
        radial-gradient(circle at 0% 0%, rgba(201, 168, 113, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(15, 37, 71, 0.04) 0%, transparent 50%),
        var(--bc-bg-soft);
}

/* ---- Intro prose (optional CMS text) ---------------------------------------- */
.contact-suite__intro {
    max-width: var(--bc-container-narrow);
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
    color: var(--bc-text-muted);
    font-size: var(--bc-fs-md);
    line-height: var(--bc-lh-relaxed);
}

/* ---- Trust badges row (4-up grid iznad info+form) -------------------------- */
.contact-suite__trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--bc-space-4);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.contact-suite__trust-card {
    display: flex;
    align-items: flex-start;
    gap: var(--bc-space-3);
    padding: var(--bc-space-4) var(--bc-space-4);
    background: #FFFFFF;
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius-lg);
    box-shadow: var(--bc-shadow-1);
    transition: transform var(--bc-transition-base),
                box-shadow var(--bc-transition-base),
                border-color var(--bc-transition-base);
}
.contact-suite__trust-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--bc-shadow-3);
    border-color: var(--bc-secondary);
}
.contact-suite__trust-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--bc-gradient-sunset);
    color: #FFFFFF;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(201, 168, 113, 0.35);
}
.contact-suite__trust-title {
    font-size: var(--bc-fs-base);
    font-weight: 700;
    color: var(--bc-primary);
    margin-bottom: 2px;
    letter-spacing: -0.01em;
}
.contact-suite__trust-text {
    font-size: var(--bc-fs-sm);
    color: var(--bc-text-muted);
    line-height: 1.45;
}
@media (max-width: 991.98px) {
    .contact-suite__trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .contact-suite__trust { grid-template-columns: 1fr; gap: var(--bc-space-3); }
}

/* ---- Main grid: info aside + form section ---------------------------------- */
.contact-suite__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: stretch;
}
@media (max-width: 991.98px) {
    .contact-suite__grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Eyebrow (gold uppercase kicker) -------------------------------------- */
.contact-suite__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--bc-secondary-dk);
    margin-bottom: 12px;
}
.contact-suite__eyebrow::before {
    content: "";
    width: 24px;
    height: 1.5px;
    background: var(--bc-gradient-sunset);
    border-radius: 2px;
}
.contact-suite__eyebrow--on-soft {
    color: var(--bc-secondary-dk);
}

/* ---- H2 — shared za info i form ------------------------------------------- */
.contact-suite__h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    color: var(--bc-primary);
    margin: 0 0 10px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* ---- LEFT: Premium info kartica ------------------------------------------- */
.contact-suite__info {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAF7F2 100%);
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius-xl);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: var(--bc-shadow-2);
    position: relative;
    overflow: hidden;
}
/* Decorative gold ribbon u uglu kartice — premium accent */
.contact-suite__info::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--bc-gradient-sunset);
}
.contact-suite__info-head {
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.contact-suite__info-lead {
    color: var(--bc-text-muted);
    font-size: var(--bc-fs-base);
    line-height: 1.55;
    margin: 0;
}

/* Info rows — strict list, no Bootstrap padding */
.contact-suite__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.contact-suite__row {
    display: flex;
    align-items: flex-start;
    gap: var(--bc-space-3);
    padding: 14px var(--bc-space-3);
    border-radius: var(--bc-radius-md);
    transition: background var(--bc-transition-fast);
}
.contact-suite__row:hover { background: rgba(201, 168, 113, 0.08); }

.contact-suite__row-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.05rem;
    background: var(--bc-primary-soft);
    color: var(--bc-primary);
}
.contact-suite__row-icon[data-tone="primary"] {
    background: var(--bc-primary);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(15, 37, 71, 0.25);
}
.contact-suite__row-icon[data-tone="gold"] {
    background: var(--bc-gradient-sunset);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(201, 168, 113, 0.35);
}
.contact-suite__row-icon[data-tone="wa"] {
    background: #25D366;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.30);
}
.contact-suite__row-icon[data-tone="navy"] {
    background: var(--bc-primary-soft);
    color: var(--bc-primary);
}
.contact-suite__row-icon[data-tone="sand"] {
    background: var(--bc-sand);
    color: var(--bc-primary);
}

.contact-suite__row-body {
    flex: 1;
    min-width: 0;
}
.contact-suite__row-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--bc-text-muted);
    margin-bottom: 4px;
}
.contact-suite__row-value {
    display: inline-block;
    color: var(--bc-primary);
    font-size: var(--bc-fs-base);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
    transition: color var(--bc-transition-fast);
    word-break: break-word;
}
.contact-suite__row-value:hover { color: var(--bc-secondary-dk); }
.contact-suite__row-value--multi { white-space: pre-line; font-weight: 500; }
.contact-suite__row-value--soft { font-weight: 500; color: var(--bc-text); }

/* Quick action chips — ispod info rows */
.contact-suite__quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--bc-space-5);
    padding-top: var(--bc-space-5);
    border-top: 1px dashed var(--bc-border);
}
.contact-suite__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--bc-radius-pill);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--bc-transition-fast),
                box-shadow var(--bc-transition-fast),
                background var(--bc-transition-fast);
    border: 1px solid transparent;
}
.contact-suite__chip i { font-size: 1rem; }
.contact-suite__chip--primary {
    background: var(--bc-primary);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(15, 37, 71, 0.25);
}
.contact-suite__chip--primary:hover {
    background: var(--bc-primary-dk);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 37, 71, 0.35);
    color: #FFFFFF;
}
.contact-suite__chip--wa {
    background: #25D366;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.30);
}
.contact-suite__chip--wa:hover {
    background: #1FB955;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(37, 211, 102, 0.40);
    color: #FFFFFF;
}
.contact-suite__chip--ghost {
    background: #FFFFFF;
    color: var(--bc-primary);
    border-color: var(--bc-border);
}
.contact-suite__chip--ghost:hover {
    border-color: var(--bc-secondary);
    color: var(--bc-secondary-dk);
    transform: translateY(-2px);
    box-shadow: var(--bc-shadow-2);
}

/* Social block */
.contact-suite__social {
    margin-top: var(--bc-space-4);
    padding-top: var(--bc-space-4);
    border-top: 1px dashed var(--bc-border);
}
.contact-suite__social-icons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.contact-suite__social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--bc-border);
    color: var(--bc-primary);
    text-decoration: none;
    transition: all var(--bc-transition-fast);
}
.contact-suite__social-icons a:hover {
    background: var(--bc-primary);
    color: #FFFFFF;
    border-color: var(--bc-primary);
    transform: translateY(-2px);
    box-shadow: var(--bc-shadow-2);
}

/* ---- RIGHT: Premium forma ------------------------------------------------- */
.contact-suite__form {
    background: #FFFFFF;
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius-xl);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: var(--bc-shadow-2);
    position: relative;
    overflow: hidden;
}
.contact-suite__form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--bc-gradient-sea);
}
.contact-suite__form-head {
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.contact-suite__form-lead {
    color: var(--bc-text-muted);
    margin: 0;
    font-size: var(--bc-fs-base);
    line-height: 1.55;
}

.contact-suite__form-body {
    display: flex;
    flex-direction: column;
    gap: var(--bc-space-4);
}
.contact-suite__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bc-space-4);
}
@media (max-width: 575.98px) {
    .contact-suite__form-row { grid-template-columns: 1fr; }
}

.contact-suite__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.contact-suite__field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bc-primary);
    letter-spacing: 0.02em;
}
.contact-suite__field label span[aria-hidden] {
    color: var(--bc-coral);
    margin-left: 2px;
}
.contact-suite__field input,
.contact-suite__field textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--bc-bg-soft);
    border: 1.5px solid transparent;
    border-radius: var(--bc-radius-md);
    font-family: var(--bc-font-body);
    font-size: var(--bc-fs-base);
    color: var(--bc-text);
    transition: border-color var(--bc-transition-fast),
                background var(--bc-transition-fast),
                box-shadow var(--bc-transition-fast);
    resize: vertical;
}
.contact-suite__field input::placeholder,
.contact-suite__field textarea::placeholder {
    color: var(--bc-text-faint);
}
.contact-suite__field input:hover,
.contact-suite__field textarea:hover {
    background: #FFFFFF;
    border-color: var(--bc-border);
}
.contact-suite__field input:focus,
.contact-suite__field textarea:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--bc-secondary);
    box-shadow: var(--bc-shadow-glow);
}
.contact-suite__field textarea {
    min-height: 140px;
    line-height: 1.55;
}

/* Honeypot — hidden from real users */
.contact-suite__honeypot {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none !important;
}

/* Premium submit CTA — full-width gradient sa hover lift */
.contact-suite__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 24px;
    width: 100%;
    background: var(--bc-gradient-sunset);
    color: #FFFFFF;
    border: none;
    border-radius: var(--bc-radius-md);
    font-family: var(--bc-font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform var(--bc-transition-base),
                box-shadow var(--bc-transition-base),
                filter var(--bc-transition-fast);
    box-shadow: 0 8px 20px rgba(201, 168, 113, 0.35);
    margin-top: var(--bc-space-2);
}
.contact-suite__submit i { font-size: 1.05rem; transition: transform var(--bc-transition-base); }
.contact-suite__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(201, 168, 113, 0.45);
    filter: brightness(1.04);
}
.contact-suite__submit:hover i { transform: translateX(4px); }
.contact-suite__submit:active { transform: translateY(0); }
.contact-suite__submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.contact-suite__privacy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: var(--bc-text-muted);
    text-align: center;
}
.contact-suite__privacy i { font-size: 0.92rem; color: var(--bc-secondary-dk); }

/* ---- Premium map card ----------------------------------------------------- */
.contact-suite__map-card {
    margin-top: clamp(2rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: 320px 1fr;
    background: #FFFFFF;
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius-xl);
    box-shadow: var(--bc-shadow-2);
    overflow: hidden;
    min-height: 360px;
}
@media (max-width: 767.98px) {
    .contact-suite__map-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }
}
.contact-suite__map-aside {
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--bc-gradient-sea);
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}
.contact-suite__map-aside .contact-suite__eyebrow {
    color: var(--bc-secondary);
}
.contact-suite__map-aside .contact-suite__eyebrow::before {
    background: var(--bc-secondary);
}
.contact-suite__map-title {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    letter-spacing: -0.01em;
}
.contact-suite__map-addr {
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--bc-fs-base);
    line-height: 1.5;
    margin: 0;
    white-space: pre-line;
}
.contact-suite__map-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.10);
    color: #FFFFFF;
    border: 1px solid rgba(201, 168, 113, 0.45);
    border-radius: var(--bc-radius-pill);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
    margin-top: 8px;
    transition: background var(--bc-transition-fast), border-color var(--bc-transition-fast);
}
.contact-suite__map-link:hover {
    background: var(--bc-secondary);
    border-color: var(--bc-secondary);
    color: var(--bc-primary);
}
.contact-suite__map-link i:last-child { font-size: 0.8rem; }

.contact-suite__map-frame {
    min-height: 320px;
}
.contact-suite__map-frame iframe {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
    display: block;
}

/* Legacy fallback — ako se contact.php cache-uje sa starim markup-om,
   ne lomi se. Sakrij stari layout. */
.contact-suite + .contact-section { display: none; }

/* =============================================================================
   Reviews — premium industry-standard UX (Viator / GetYourGuide pattern)
   -----------------------------------------------------------------------------
   Komponente:
     .td-reviews-summary           — wrapper grid (big avg | distribution | CTA)
     .td-reviews-summary__primary  — left: big numeric avg + stars + label + count
     .td-reviews-summary__distribution — middle: 5★…1★ horizontal bar chart
     .td-reviews-summary__cta      — right: write-review button + hint
     .td-reviews-empty-state       — centered empty state sa CTA
     .td-review-item               — pojedinačna kartica recenzije
     .td-review-item__verified     — green "verified guest" badge
   ============================================================================= */
.td-reviews-summary {
    display: grid;
    /* 2026-05-14: 3-col grid pravi overlap kad CTA dugme bude šire od svoje
       kolone i "krade" pixel-e middle distribution koloni. Refaktor u 2-col:
       lijevo big avg, desno distribution + CTA u istoj koloni naslagani
       vertikalno (sub-grid). Sprečava overlap garantovano. */
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: center;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
    background: linear-gradient(180deg, #FFFFFF 0%, var(--bc-bg-soft, #FAF7F2) 100%);
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius-xl);
    box-shadow: var(--bc-shadow-2);
    position: relative;
    overflow: hidden;
}
.td-reviews-summary::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--bc-gradient-sunset);
}
@media (max-width: 991.98px) {
    .td-reviews-summary {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }
    .td-reviews-summary__primary {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }
}

/* ---- LEFT: big avg + stars + label + count -------------------------------- */
.td-reviews-summary__primary {
    display: flex;
    align-items: center;
    gap: 16px;
}
.td-reviews-summary__num {
    font-size: clamp(2.75rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--bc-primary);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.td-reviews-summary__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.td-reviews-summary__stars {
    display: inline-flex;
    gap: 2px;
    color: var(--bc-secondary, #C9A871);
    font-size: 1.05rem;
    line-height: 1;
}
.td-reviews-summary__stars i { font-size: 1.05rem; }
.td-reviews-summary__stars .td-stars,
.td-reviews-summary__stars span { color: inherit; }
.td-reviews-summary__label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bc-secondary-dk, #A88955);
    letter-spacing: -0.005em;
}
.td-reviews-summary__count {
    font-size: 0.825rem;
    color: var(--bc-text-muted);
}

/* ---- RIGHT WRAPPER: distribution + CTA stack (2026-05-14 refactor) -------- */
.td-reviews-summary__right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    align-items: center;
    gap: clamp(1rem, 2vw, 1.75rem);
    min-width: 0;
}
@media (max-width: 767.98px) {
    .td-reviews-summary__right {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ---- Distribution bars (5→1) ---------------------------------------------- */
.td-reviews-summary__distribution {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.td-reviews-dist-row {
    display: grid;
    grid-template-columns: 36px 1fr 30px;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}
.td-reviews-dist-row__label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
    color: var(--bc-text);
    font-variant-numeric: tabular-nums;
}
.td-reviews-dist-row__label i {
    font-size: 0.78rem;
    color: var(--bc-secondary);
}
.td-reviews-dist-row__bar {
    position: relative;
    height: 8px;
    background: var(--bc-border);
    border-radius: 4px;
    overflow: hidden;
}
.td-reviews-dist-row__fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--bc-gradient-sunset);
    border-radius: inherit;
    transition: width 0.6s var(--bc-ease-out);
    /* Minimum 1px width za rendering kad pct=0 (vidi se thin sliver) */
    min-width: 0;
}
.td-reviews-dist-row__cnt {
    text-align: right;
    color: var(--bc-text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
}

/* ---- RIGHT: write-review CTA + hint --------------------------------------- */
.td-reviews-summary__cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
.td-reviews-write-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bc-gradient-sunset);
    color: #FFFFFF;
    border: none;
    border-radius: var(--bc-radius-md);
    font-family: var(--bc-font-body);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(201, 168, 113, 0.30);
    transition: transform var(--bc-transition-base),
                box-shadow var(--bc-transition-base),
                filter var(--bc-transition-fast);
    text-decoration: none;
    white-space: nowrap;
}
.td-reviews-write-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(201, 168, 113, 0.40);
    filter: brightness(1.04);
    color: #FFFFFF;
}
.td-reviews-write-btn:active { transform: translateY(0); }
.td-reviews-write-btn--center { align-self: center; margin-top: 0.5rem; }
.td-reviews-summary__cta-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--bc-text-muted);
    margin: 0;
    text-align: center;
    justify-content: center;
}
.td-reviews-summary__cta-hint i { color: var(--bc-success, #2E7D5B); font-size: 0.85rem; }

/* ---- Empty state — pozivajući za prvog ocjenjivača ------------------------ */
.td-reviews-empty-state {
    text-align: center;
    padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--bc-bg-soft, #FAF7F2) 100%);
    border: 2px dashed var(--bc-border);
    border-radius: var(--bc-radius-xl);
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.td-reviews-empty-state > i {
    display: block;
    font-size: 3rem;
    color: var(--bc-secondary);
    margin-bottom: 1rem;
    line-height: 1;
}
.td-reviews-empty-state h3 {
    margin: 0 0 8px;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    color: var(--bc-primary);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.td-reviews-empty-state p {
    color: var(--bc-text-muted);
    margin: 0 auto 1.25rem;
    max-width: 460px;
    line-height: 1.55;
}

/* ---- Reviews list — pojedinačne kartice ---------------------------------- */
.td-reviews-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.td-review-item {
    background: #FFFFFF;
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius-lg);
    padding: clamp(1rem, 2vw, 1.25rem);
    box-shadow: var(--bc-shadow-1);
    transition: border-color var(--bc-transition-fast), box-shadow var(--bc-transition-fast);
}
.td-review-item:hover {
    border-color: rgba(201, 168, 113, 0.40);
    box-shadow: var(--bc-shadow-2);
}
.td-review-item__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.td-review-item__author {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.td-review-item__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bc-gradient-sea);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(15, 37, 71, 0.25);
}
.td-review-item__meta { min-width: 0; }
.td-review-item__name {
    display: block;
    color: var(--bc-primary);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 2px;
}
.td-review-item__rating {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.td-review-item__rating .td-stars {
    color: var(--bc-secondary);
    display: inline-flex;
    gap: 2px;
    font-size: 0.92rem;
}
.td-review-item__date {
    font-size: 0.78rem;
    color: var(--bc-text-muted);
}
.td-review-item__title {
    margin: 6px 0 6px;
    font-size: 1rem;
    color: var(--bc-primary);
    font-weight: 700;
}
.td-review-item__body {
    color: var(--bc-text);
    margin: 0;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Verified booking badge — industry-standard pattern (Viator/GetYourGuide)
   pokazuje koji review-i dolaze od stvarno rezervisanih gostiju. */
.td-review-item__verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: var(--bc-success-soft, #DBEDE4);
    color: var(--bc-success, #2E7D5B);
    border-radius: var(--bc-radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}
.td-review-item__verified i { font-size: 0.85rem; }

/* "Load more" dugme — minimalist outline pattern */
.td-reviews-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: clamp(1rem, 2vw, 1.5rem) auto 0;
    padding: 11px 22px;
    background: #FFFFFF;
    color: var(--bc-primary);
    border: 1.5px solid var(--bc-border);
    border-radius: var(--bc-radius-pill);
    font-family: var(--bc-font-body);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--bc-transition-fast),
                background var(--bc-transition-fast),
                transform var(--bc-transition-fast);
    width: max-content;
    align-self: center;
}
.td-reviews-load-more {
    /* Center horizontally in flex/grid parents */
    display: flex;
}
.td-reviews-load-more:hover {
    border-color: var(--bc-secondary);
    background: var(--bc-secondary-soft);
    color: var(--bc-secondary-dk);
    transform: translateY(-1px);
}

/* =============================================================================
   Write Review Modal — Premium redesign (2026-05-14)
   -----------------------------------------------------------------------------
   Bootstrap .modal layer-uje overlay+positioning; mi nadogradimo unutrašnjost.
   Markup: hero header (gradient + ikona) → scrollable body → sticky footer.
   ============================================================================= */

/* Dialog — modern wider + scrollable */
.td-review-modal.modal { padding: 1rem 0; }
.td-review-modal .modal-dialog {
    max-width: 560px;
    margin: 0 auto;
    padding: 16px;
}
.td-review-modal .modal-content,
.td-review-modal__content {
    background: #FFFFFF;
    border: 0;
    border-radius: var(--bc-radius-2xl);
    box-shadow: 0 24px 64px rgba(15, 30, 58, 0.30),
                0 8px 24px rgba(15, 30, 58, 0.12);
    overflow: hidden;
    /* Ne resetujemo padding — form ima sopstvene sekcije */
    padding: 0;
    /* 2026-05-14: layout fix — content je flex container, form ispod
       takođe flex column. To garantuje da footer ostane uvijek vidljiv
       na dnu (body skroluje, hero+footer fiksni). Modal-dialog-scrollable
       Bootstrap-a setuje max-height na content; ovde delegiramo skrolling
       na __body umjesto na cijeli content. */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3.5rem);
}
.td-review-modal .modal-dialog {
    max-height: calc(100vh - 3.5rem);
}
.td-review-modal__content form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}
.td-review-modal__hero,
.td-review-modal__footer { flex-shrink: 0; }
.td-review-modal__body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

/* Hero header — gradient sea + gold accent ring + ikona */
.td-review-modal__hero {
    position: relative;
    text-align: center;
    padding: clamp(28px, 4vw, 40px) clamp(20px, 4vw, 32px) clamp(24px, 3vw, 28px);
    background: var(--bc-gradient-sea);
    color: #FFFFFF;
    overflow: hidden;
}
.td-review-modal__hero::before {
    content: "";
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 168, 113, 0.32) 0%, transparent 70%);
    pointer-events: none;
}
.td-review-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--bc-transition-fast);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.td-review-modal__close:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: rotate(90deg);
}
.td-review-modal__close i { font-size: 1rem; }
.td-review-modal__hero-icon {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--bc-gradient-sunset);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 10px 28px rgba(201, 168, 113, 0.50),
                0 0 0 6px rgba(255, 255, 255, 0.10);
}
.td-review-modal__hero-title {
    position: relative;
    font-size: clamp(1.35rem, 2.5vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    color: #FFFFFF;
}
.td-review-modal__hero-subtitle {
    position: relative;
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.94rem;
    line-height: 1.45;
}

/* Body — flex layout, scrollable */
.td-review-modal__body {
    padding: clamp(20px, 3vw, 28px) clamp(20px, 4vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: #FFFFFF;
}
.td-review-modal__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}
.td-review-modal__field--rating {
    align-items: center;
    text-align: center;
    padding: 16px 0;
    background: var(--bc-bg-soft);
    border-radius: var(--bc-radius-lg);
    border: 1px solid var(--bc-border);
}
.td-review-modal__label {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--bc-primary);
    letter-spacing: 0.01em;
    margin: 0 0 2px;
    padding: 0;
}
.td-review-modal__req { color: var(--bc-coral); margin-left: 2px; }
.td-review-modal__opt { color: var(--bc-text-faint); font-weight: 500; margin-left: 4px; }

/* Stars row */
.td-review-modal__stars {
    margin: 8px 0 0 !important;
    gap: 4px !important;
}
.td-review-modal__rating-hint {
    margin-top: 10px;
    display: inline-block;
    padding: 4px 14px;
    background: #FFFFFF;
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius-pill);
    color: var(--bc-secondary-dk);
    font-size: 0.82rem;
    font-weight: 600;
    min-width: 140px;
    transition: all var(--bc-transition-fast);
}
.td-review-modal__rating-hint.is-active {
    background: var(--bc-gradient-sunset);
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(201, 168, 113, 0.40);
}

/* Form grid (2-col name + email) */
.td-review-modal__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 14px;
}
@media (max-width: 575.98px) {
    .td-review-modal__grid { grid-template-columns: 1fr; }
}

/* Input wrapper sa icon prefix */
.td-review-modal__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.td-review-modal__input-wrap > i {
    position: absolute;
    left: 14px;
    color: var(--bc-text-faint);
    font-size: 0.95rem;
    pointer-events: none;
    transition: color var(--bc-transition-fast);
}
.td-review-modal__input-wrap input {
    width: 100%;
    padding: 11px 14px 11px 40px;
    background: #FFFFFF;
    border: 1.5px solid var(--bc-border);
    border-radius: var(--bc-radius-md);
    font-family: var(--bc-font-body);
    font-size: 0.94rem;
    color: var(--bc-text);
    transition: all var(--bc-transition-fast);
}
.td-review-modal__input-wrap input:focus {
    outline: none;
    border-color: var(--bc-secondary);
    box-shadow: 0 0 0 4px rgba(201, 168, 113, 0.18);
}
.td-review-modal__input-wrap input:focus + i,
.td-review-modal__input-wrap input:not(:placeholder-shown) ~ i,
.td-review-modal__input-wrap:focus-within > i { color: var(--bc-secondary-dk); }

/* Textarea (body) */
.td-review-modal__field textarea {
    width: 100%;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1.5px solid var(--bc-border);
    border-radius: var(--bc-radius-md);
    font-family: var(--bc-font-body);
    font-size: 0.94rem;
    color: var(--bc-text);
    line-height: 1.55;
    min-height: 120px;
    resize: vertical;
    transition: all var(--bc-transition-fast);
}
.td-review-modal__field textarea:focus {
    outline: none;
    border-color: var(--bc-secondary);
    box-shadow: 0 0 0 4px rgba(201, 168, 113, 0.18);
}
.td-review-modal__field textarea::placeholder,
.td-review-modal__input-wrap input::placeholder { color: var(--bc-text-faint); }

/* Help (small text — privacy hint, char counter) */
.td-review-modal__help {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bc-text-muted);
    font-size: 0.78rem;
    margin-top: 4px;
}
.td-review-modal__help i { color: var(--bc-success); font-size: 0.8rem; }
.td-review-modal__help--counter {
    align-self: flex-end;
    font-variant-numeric: tabular-nums;
    color: var(--bc-text-faint);
}

/* Captcha container — min-height to avoid CLS */
.td-review-modal__captcha:not(:empty) { min-height: 78px; margin-top: 4px; }

/* Alerts (success / error) */
/* #088 (2026-05-24): `.td-review-modal__alert { display: flex }` ima veću CSS
   specifičnost od user-agent `[hidden] { display: none }` default-a, pa su
   success/error banneri ostajali vidljivi i kad je markup imao `hidden` atribut.
   Eksplicitan `[hidden]` override + `:empty` defensive rule da prazan alert
   container nikad ne pravi crveni/zeleni placeholder na ekranu prije submit-a. */
.td-review-modal__alert[hidden],
.td-review-modal__alert:empty {
    display: none !important;
}
.td-review-modal__alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--bc-radius-md);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-top: 4px;
}
.td-review-modal__alert i { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; }
.td-review-modal__alert--success {
    background: var(--bc-success-soft);
    border: 1px solid var(--bc-success);
    color: #1F5C42;
}
.td-review-modal__alert--success i { color: var(--bc-success); }
.td-review-modal__alert--error {
    background: var(--bc-danger-soft);
    border: 1px solid var(--bc-danger);
    color: #7A2424;
    font-weight: 600;
}

/* Footer — sticky bottom sa cancel + submit */
.td-review-modal__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 16px clamp(20px, 4vw, 32px) clamp(18px, 3vw, 22px);
    background: var(--bc-bg-soft);
    border-top: 1px solid var(--bc-border);
}
.td-review-modal__btn {
    appearance: none;
    border: none;
    padding: 11px 22px;
    border-radius: var(--bc-radius-pill);
    font-family: var(--bc-font-body);
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--bc-transition-fast);
}
.td-review-modal__btn--ghost {
    background: #FFFFFF;
    color: var(--bc-text-muted);
    border: 1.5px solid var(--bc-border);
}
.td-review-modal__btn--ghost:hover {
    border-color: var(--bc-primary);
    color: var(--bc-primary);
}
.td-review-modal__btn--primary {
    background: var(--bc-gradient-sunset);
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(201, 168, 113, 0.40);
}
.td-review-modal__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(201, 168, 113, 0.55);
    filter: brightness(1.05);
}
.td-review-modal__btn--primary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* Rating input — premium large stars (override base) */
.td-rating-input {
    display: inline-flex;
    gap: 6px;
    margin: 6px 0;
}
.td-rating-input [data-rating] {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px;
    color: var(--bc-border);
    font-size: 2rem;
    line-height: 1;
    transition: color var(--bc-transition-fast), transform var(--bc-transition-fast);
}
.td-rating-input [data-rating]:hover,
.td-rating-input [data-rating].active {
    color: var(--bc-secondary);
    transform: scale(1.15);
}
.td-rating-input [data-rating] i { font-size: inherit; }

/* Mobile: full-screen modal — bolji UX na malim ekranima */
@media (max-width: 575.98px) {
    .td-review-modal .modal-dialog {
        margin: 0;
        max-width: 100%;
        padding: 0;
        height: 100vh;
        height: 100dvh;
    }
    .td-review-modal__content {
        border-radius: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .td-review-modal__content form {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
    .td-review-modal__body { flex: 1; overflow-y: auto; }
    .td-review-modal__footer { position: sticky; bottom: 0; }
}

/* Backward compat — sakrij legacy summary header (.td-reviews-header) ako se
   stari markup cache-uje. Bumpu cache versije osigurava da se ne pojavi. */
.td-reviews .td-reviews-header { display: none !important; }

/* =============================================================================
   Time picker — vremena polazaka za selected datum (booking widget desno)
   -----------------------------------------------------------------------------
   Renderuje tour-calendar.js renderTimePicker() ispod date strip-a.
   3 stanja: hidden (no departures), single (read-only badge), multi (pill row).
   ============================================================================= */
.td-time-picker {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--bc-bg-soft, #FAF7F2);
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius-md);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.td-time-picker__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--bc-text-muted);
}
.td-time-picker__label i { color: var(--bc-secondary-dk, #A88955); font-size: 0.92rem; }
.td-time-picker__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Pill (button/span) — single ili multi options */
.td-time-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #FFFFFF;
    color: var(--bc-primary);
    border: 1.5px solid var(--bc-border);
    border-radius: var(--bc-radius-pill);
    font-family: var(--bc-font-body);
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color var(--bc-transition-fast),
                background var(--bc-transition-fast),
                color var(--bc-transition-fast),
                transform var(--bc-transition-fast);
    line-height: 1;
}
.td-time-pill i { font-size: 0.95rem; color: var(--bc-secondary-dk, #A88955); }
.td-time-pill__time { letter-spacing: 0.01em; }
.td-time-pill__badge {
    margin-left: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(184, 58, 58, 0.10);
    color: var(--bc-danger, #B83A3A);
}

/* Hover state — primjenjuje se SAMO na neizabrane pillove. Selected pill
   (.is-selected) je već u svom finalnom premium state-u i ne treba dodatno
   highlight-anje (vidi `.td-time-pill.is-selected:hover` override ispod). */
.td-time-pill:hover:not(:disabled):not(.is-selected) {
    border-color: var(--bc-secondary-dk, #A88955);
    background: var(--bc-secondary-soft, #F4ECDB);
    color: var(--bc-primary, #0F2547);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(168, 137, 85, 0.20);
}
.td-time-pill:hover:not(:disabled):not(.is-selected) i { color: var(--bc-secondary-dk, #A88955); }
/* Selected state — deep navy gradient + gold ring + WCAG-OK bijeli tekst.
   2026-05-14: prethodno korišten light sunset gradient (#C9A871→#A88955) je
   imao premali kontrast sa #FFFFFF tekstom (4.1:1, ispod WCAG AA threshold 4.5).
   Navy gradient daje 8.5:1 kontrast — pristupačno + premium look. */
.td-time-pill.is-selected {
    background: var(--bc-gradient-sea);
    border-color: var(--bc-secondary, #C9A871);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(15, 30, 58, 0.35),
                0 0 0 3px rgba(201, 168, 113, 0.30);
    font-weight: 700;
    cursor: default;
}
.td-time-pill.is-selected i { color: var(--bc-secondary, #C9A871); }
/* Disable hover effects na selected pill — statičan ostaje. */
.td-time-pill.is-selected:hover {
    transform: none;
    background: var(--bc-gradient-sea);
    border-color: var(--bc-secondary, #C9A871);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(15, 30, 58, 0.35),
                0 0 0 3px rgba(201, 168, 113, 0.30);
}
.td-time-pill.is-selected:hover i { color: var(--bc-secondary, #C9A871); }
.td-time-pill.is-single {
    cursor: default;
    pointer-events: none;
}
.td-time-pill.is-low:not(.is-selected) {
    border-color: var(--bc-warning, #B8862A);
    background: var(--bc-warning-soft, #F7ECCC);
    color: var(--bc-warning, #B8862A);
}
.td-time-pill.is-low:not(.is-selected) i { color: inherit; }
.td-time-pill.is-soldout,
.td-time-pill.is-cancelled,
.td-time-pill.is-disabled {
    cursor: not-allowed;
    background: var(--bc-bg-soft);
    color: var(--bc-text-faint);
    border-color: var(--bc-border);
    opacity: 0.65;
    text-decoration: line-through;
}
.td-time-pill.is-soldout i,
.td-time-pill.is-cancelled i,
.td-time-pill.is-disabled i { color: var(--bc-text-faint); }

/* =============================================================================
   Tour Booking v2 (2026-05-14) — Premium 2-step + 2-col layout
   ----------------------------------------------------------------------------
   Layout:
     [urgency banner]
     [grid: LEFT=stepper+form  |  RIGHT=order summary aside]
     [sticky footer: back / total / next|submit]
   Sve unutar `.td-bk2` namespace-a — ne kvari postojeći `.td-booking-section`.
   ============================================================================= */

.td-bk2.td-booking-section {
    background: var(--bc-bg-soft);
    padding: 24px 0 120px;
}
.td-bk2__container {
    max-width: var(--bc-container-base);
    margin: 0 auto;
    padding: 0 16px;
}

/* Close (back to offer) — top left */
.td-bk2-close {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--bc-text-muted);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 6px 4px;
    margin: 0 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: color var(--bc-transition-fast);
}
.td-bk2-close:hover { color: var(--bc-primary); }
.td-bk2-close i { font-size: 1rem; }

/* Urgency banner */
.td-bk2-urgency {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(90deg, #FFF4DA 0%, #FFE9C2 100%);
    border: 1px solid #F0CB7C;
    border-radius: var(--bc-radius-lg);
    color: #8A5A0F;
    font-weight: 600;
    font-size: 0.93rem;
    margin-bottom: 18px;
    box-shadow: var(--bc-shadow-1);
}
.td-bk2-urgency i { color: #C28A1A; font-size: 1.1rem; }

/* 2-col grid */
.td-bk2-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}
@media (max-width: 991.98px) {
    .td-bk2-grid { grid-template-columns: 1fr; }
}

/* LEFT: main column */
.td-bk2-main { min-width: 0; }

/* Stepper pills (2 koraka, gold accent) */
.td-bk2-stepper {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}
.td-bk2-stepper__step {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    background: #FFFFFF;
    border: 1.5px solid var(--bc-border);
    border-radius: var(--bc-radius-pill);
    color: var(--bc-text-muted);
    font-weight: 600;
    font-size: 0.92rem;
    transition: all var(--bc-transition-base);
}
.td-bk2-stepper__step.active {
    border-color: var(--bc-secondary);
    background: var(--bc-secondary-soft);
    color: var(--bc-primary);
}
.td-bk2-stepper__step.completed {
    border-color: var(--bc-success);
    background: var(--bc-success-soft);
    color: var(--bc-success);
}
.td-bk2-stepper__num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bc-primary-soft);
    color: var(--bc-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.td-bk2-stepper__step.active .td-bk2-stepper__num {
    background: var(--bc-gradient-sunset);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(201, 168, 113, 0.45);
}
.td-bk2-stepper__step.completed .td-bk2-stepper__num {
    background: var(--bc-success);
    color: #FFFFFF;
}
.td-bk2-stepper__connector {
    flex: 0 0 28px;
    height: 2px;
    background: var(--bc-border);
    border-radius: 1px;
}

/* Form root */
.td-bk2-form { display: block; }

/* Step card — bijela kartica sa premium shadow + radius */
.td-bk2-card {
    background: #FFFFFF;
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius-2xl);
    box-shadow: var(--bc-shadow-2);
    padding: clamp(20px, 3vw, 32px);
    margin-bottom: 16px;
}
.td-bk2-card__header { margin-bottom: 20px; }
.td-bk2-card__title {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 700;
    color: var(--bc-primary);
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}
.td-bk2-card__lead {
    margin: 0;
    color: var(--bc-text-muted);
    font-size: 0.94rem;
    line-height: 1.5;
}

/* Form grid */
.td-bk2-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}
.td-bk2-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.td-bk2-field--full { grid-column: 1 / -1; }
.td-bk2-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bc-primary);
    letter-spacing: 0.01em;
}
.td-bk2-req { color: var(--bc-coral); margin-left: 2px; }
.td-bk2-help {
    color: var(--bc-text-faint);
    font-size: 0.78rem;
    margin-top: 2px;
}
.td-bk2-field input,
.td-bk2-field select,
.td-bk2-field textarea {
    appearance: none;
    width: 100%;
    padding: 11px 14px;
    background: #FFFFFF;
    border: 1.5px solid var(--bc-border);
    border-radius: var(--bc-radius-md);
    font-family: var(--bc-font-body);
    font-size: 0.95rem;
    color: var(--bc-text);
    transition: all var(--bc-transition-fast);
}
.td-bk2-field textarea { min-height: 90px; resize: vertical; }
.td-bk2-field input:focus,
.td-bk2-field select:focus,
.td-bk2-field textarea:focus {
    outline: none;
    border-color: var(--bc-secondary);
    box-shadow: 0 0 0 4px rgba(201, 168, 113, 0.18);
}
.td-bk2-field input::placeholder,
.td-bk2-field textarea::placeholder {
    color: var(--bc-text-faint);
}
@media (max-width: 575.98px) {
    .td-bk2-form-grid { grid-template-columns: 1fr; }
}

/* Sub-section (participants) */
.td-bk2-section {
    background: var(--bc-bg-soft);
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius-lg);
    padding: 16px;
    margin-top: 18px;
}
.td-bk2-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bc-primary);
}
.td-bk2-section__title i { color: var(--bc-secondary); }
.td-bk2-section__help {
    margin: 0 0 12px;
    font-size: 0.84rem;
    color: var(--bc-text-muted);
}
.td-bk2-participants .td-participant-row {
    display: grid;
    grid-template-columns: minmax(80px, auto) 1fr 1fr;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--bc-border);
}
.td-bk2-participants .td-participant-row:last-child { border-bottom: none; }
.td-participant-num {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--bc-primary);
    font-weight: 600;
    font-size: 0.9rem;
}
.td-participant-type {
    color: var(--bc-text-muted);
    font-weight: 500;
    font-size: 0.78rem;
}
@media (max-width: 575.98px) {
    .td-bk2-participants .td-participant-row { grid-template-columns: 1fr; }
}

/* Collapsible (details element) — modern accordion */
.td-bk2-collapsible {
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius-lg);
    background: #FFFFFF;
    margin-top: 14px;
    overflow: hidden;
}
.td-bk2-collapsible[open] { border-color: var(--bc-secondary); }
.td-bk2-collapsible__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    color: var(--bc-primary);
    font-weight: 600;
    user-select: none;
}
.td-bk2-collapsible__summary::-webkit-details-marker { display: none; }
.td-bk2-collapsible__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bc-secondary-soft);
    color: var(--bc-secondary-dk);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.td-bk2-collapsible__title { flex: 1; }
.td-bk2-collapsible__chev {
    color: var(--bc-text-muted);
    transition: transform var(--bc-transition-base);
}
.td-bk2-collapsible[open] .td-bk2-collapsible__chev { transform: rotate(180deg); }
.td-bk2-collapsible__body {
    padding: 4px 16px 16px;
    border-top: 1px solid var(--bc-border);
}

/* Custom checkbox row (pickup, consent) */
.td-bk2-check-row { margin-top: 14px; }
.td-bk2-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 12px;
    background: var(--bc-bg-soft);
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius-md);
    transition: all var(--bc-transition-fast);
}
.td-bk2-check:hover { border-color: var(--bc-secondary); background: var(--bc-secondary-soft); }
.td-bk2-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.td-bk2-check__box {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 2px solid var(--bc-border);
    border-radius: 6px;
    background: #FFFFFF;
    position: relative;
    transition: all var(--bc-transition-fast);
}
.td-bk2-check input[type="checkbox"]:checked + .td-bk2-check__box {
    background: var(--bc-gradient-sunset);
    border-color: var(--bc-secondary-dk);
}
.td-bk2-check input[type="checkbox"]:checked + .td-bk2-check__box::after {
    content: '\f633'; /* bi-check */
    font-family: 'bootstrap-icons';
    color: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.95rem;
    line-height: 1;
}
.td-bk2-check__body {
    flex: 1;
    color: var(--bc-text);
    font-size: 0.92rem;
    line-height: 1.4;
}
.td-bk2-check__body strong { display: block; color: var(--bc-primary); margin-bottom: 2px; }
.td-bk2-check__body strong i { margin-right: 4px; color: var(--bc-secondary); }
.td-bk2-check__body small { display: block; color: var(--bc-text-muted); font-size: 0.83rem; margin-top: 2px; }
.td-bk2-pickup-addr {
    margin-top: 10px;
    padding-left: 34px;
}
.td-bk2-pickup-addr label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bc-primary);
    margin-bottom: 4px;
}
.td-bk2-pickup-addr input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--bc-border);
    border-radius: var(--bc-radius-md);
    font-family: var(--bc-font-body);
    font-size: 0.93rem;
}

/* Extras list (collapsible body) */
.td-bk2-extras {
    list-style: none;
    padding: 0;
    margin: 0;
}
.td-bk2-extra {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bc-divider);
}
.td-bk2-extra:last-child { border-bottom: none; }
.td-bk2-extra .td-extra-row__label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    cursor: pointer;
}
.td-bk2-extra .td-extra-row__label input[type="checkbox"] { margin-top: 4px; }
.td-bk2-extra strong { display: block; color: var(--bc-primary); font-size: 0.93rem; }
.td-bk2-extra small { display: block; color: var(--bc-text-muted); font-size: 0.83rem; margin-top: 2px; }
.td-bk2-extra .td-extra-row__qty {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.td-bk2-extra .td-extra-row__qty input[type="number"] {
    width: 60px;
    padding: 4px 8px;
    border: 1.5px solid var(--bc-border);
    border-radius: var(--bc-radius-sm);
    text-align: center;
    font-size: 0.9rem;
}
.td-bk2-extra .td-extra-row__price {
    color: var(--bc-secondary-dk);
    font-weight: 700;
    font-size: 0.9rem;
    min-width: 80px;
    text-align: right;
}

/* Promo code (inline input + button) */
.td-bk2-promo {
    display: flex;
    gap: 8px;
    align-items: center;
}
.td-bk2-promo input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid var(--bc-border);
    border-radius: var(--bc-radius-md);
    font-size: 0.93rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.td-bk2-promo__btn {
    padding: 10px 18px;
    background: var(--bc-primary);
    color: #FFFFFF;
    border: none;
    border-radius: var(--bc-radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--bc-transition-fast);
}
.td-bk2-promo__btn:hover { background: var(--bc-primary-dk); transform: translateY(-1px); }
.td-bk2-promo__btn:disabled { opacity: 0.5; cursor: wait; }

/* Promo code feedback (#041) — success (green) / error (red) ispod input-a */
.td-bk2-promo-feedback {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
}
.td-bk2-promo-feedback.is-success {
    background: rgba(34, 197, 94, 0.10);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.30);
}
.td-bk2-promo-feedback.is-error {
    background: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.30);
}

/* Payment method picker (radio cards) */
.td-bk2-pay-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}
@media (max-width: 575.98px) {
    .td-bk2-pay-methods { grid-template-columns: 1fr; }
}
.td-bk2-pay-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 2px solid var(--bc-border);
    border-radius: var(--bc-radius-lg);
    cursor: pointer;
    transition: all var(--bc-transition-fast);
    position: relative;
}
.td-bk2-pay-card:hover {
    border-color: var(--bc-secondary);
    box-shadow: var(--bc-shadow-1);
    transform: translateY(-1px);
}
.td-bk2-pay-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.td-bk2-pay-card.is-selected {
    border-color: var(--bc-secondary-dk);
    background: var(--bc-secondary-soft);
    box-shadow: 0 0 0 4px rgba(201, 168, 113, 0.18);
}
.td-bk2-pay-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--bc-primary-soft);
    color: var(--bc-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.td-bk2-pay-card.is-selected .td-bk2-pay-card__icon {
    background: var(--bc-gradient-sunset);
    color: #FFFFFF;
}
.td-bk2-pay-card__body { flex: 1; min-width: 0; }
.td-bk2-pay-card__title {
    display: block;
    color: var(--bc-primary);
    font-weight: 700;
    font-size: 0.96rem;
    line-height: 1.25;
    margin-bottom: 2px;
}
.td-bk2-pay-card__desc {
    display: block;
    color: var(--bc-text-muted);
    font-size: 0.83rem;
    line-height: 1.4;
}
.td-bk2-pay-card__check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--bc-border);
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    flex-shrink: 0;
    transition: all var(--bc-transition-fast);
}
.td-bk2-pay-card.is-selected .td-bk2-pay-card__check {
    border-color: var(--bc-secondary-dk);
    background: var(--bc-secondary-dk);
    color: #FFFFFF;
}
.td-bk2-pay-card__check i { font-size: 0.8rem; }

/* Per-method info reveal */
.td-bk2-pay-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    margin-top: 14px;
    background: var(--bc-primary-tint);
    border-left: 4px solid var(--bc-primary);
    border-radius: var(--bc-radius-md);
}
.td-bk2-pay-info[hidden] { display: none; }
.td-bk2-pay-info__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bc-primary);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.td-bk2-pay-info__body { flex: 1; min-width: 0; }
.td-bk2-pay-info__body strong {
    display: block;
    color: var(--bc-primary);
    font-size: 0.96rem;
    margin-bottom: 4px;
}
.td-bk2-pay-info__body p {
    margin: 0;
    color: var(--bc-text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}
.td-bk2-pay-info__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--bc-primary);
    font-size: 1rem;
    margin-bottom: 12px;
    width: 100%;
}
.td-bk2-pay-info--bank {
    flex-direction: column;
    border-left-color: var(--bc-secondary);
    background: var(--bc-secondary-soft);
    padding: 18px 20px;
}
.td-bk2-pay-info--bank .td-bk2-pay-info__heading i { color: var(--bc-secondary-dk); font-size: 1.2rem; }
.td-bk2-pay-info--arrival { border-left-color: var(--bc-success); background: var(--bc-success-soft); }
.td-bk2-pay-info--arrival .td-bk2-pay-info__icon { background: var(--bc-success); }
.td-bk2-pay-info__note {
    margin: 10px 0 0;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--bc-radius-sm);
    color: var(--bc-text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    display: flex;
    gap: 8px;
}
.td-bk2-pay-info__note i { color: var(--bc-info); flex-shrink: 0; margin-top: 2px; }

/* Bank details dl */
.td-bk2-bank-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 18px;
    margin: 0;
    width: 100%;
}
.td-bk2-bank-details dt {
    color: var(--bc-text-muted);
    font-size: 0.84rem;
    font-weight: 600;
}
.td-bk2-bank-details dd {
    margin: 0;
    color: var(--bc-primary);
    font-size: 0.92rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.td-bk2-bank-details dd code {
    color: var(--bc-primary);
    background: #FFFFFF;
    padding: 3px 8px;
    border-radius: var(--bc-radius-sm);
    font-family: var(--bc-font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    border: 1px solid var(--bc-border);
}

.td-bk2-copy {
    appearance: none;
    background: transparent;
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius-sm);
    width: 28px;
    height: 28px;
    color: var(--bc-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--bc-transition-fast);
}
.td-bk2-copy:hover { background: var(--bc-primary-soft); color: var(--bc-primary); border-color: var(--bc-primary-soft); }

/* Per-method fields (card_manual) */
.td-bk2-pay-fields {
    margin-top: 14px;
    padding: 18px;
    background: #FFFFFF;
    border: 1.5px solid var(--bc-border-strong);
    border-radius: var(--bc-radius-lg);
}
.td-bk2-pay-fields[hidden] { display: none; }
.td-bk2-pay-fields__warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bc-warning-soft);
    border: 1px solid #E5C57A;
    border-radius: var(--bc-radius-md);
    color: #7C5A0E;
    font-size: 0.86rem;
    line-height: 1.45;
    margin-bottom: 16px;
}
.td-bk2-pay-fields__warning i { color: var(--bc-warning); font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }

/* =============================================================================
   Post-trip review page — token-protected standalone view (2026-05-14).
   Industry standard pattern (Booking.com / Viator). Reuses .td-review-modal__*
   form styling unutar centriranog page container-a.
============================================================================= */
.td-review-page {
    background: linear-gradient(180deg, var(--bc-primary-tint) 0%, #F8F4ED 100%);
    min-height: 100vh;
    padding: clamp(40px, 6vw, 80px) 0;
}
.td-review-page__container {
    max-width: 720px;
    margin: 0 auto;
}
.td-review-page__hero {
    text-align: center;
    background: var(--bc-gradient-sea);
    color: #FFFFFF;
    border-radius: var(--bc-radius-xl) var(--bc-radius-xl) 0 0;
    padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 32px) clamp(28px, 4vw, 40px);
    position: relative;
    overflow: hidden;
}
.td-review-page__hero::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18) 0%, transparent 60%);
    pointer-events: none;
}
.td-review-page__hero-icon {
    position: relative;
    width: 80px; height: 80px;
    margin: 0 auto 18px;
    background: var(--bc-gradient-sunset);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #FFFFFF;
    font-size: 2.2rem;
    box-shadow: 0 12px 32px rgba(201, 168, 113, 0.55),
                0 0 0 8px rgba(255, 255, 255, 0.10);
}
.td-review-page__hero-title {
    position: relative;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    margin: 0 0 8px;
    color: #FFFFFF;
}
.td-review-page__hero-subtitle {
    position: relative;
    margin: 0 0 4px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
}
.td-review-page__hero-subtitle strong { color: #FFFFFF; }
.td-review-page__hero-bn {
    position: relative;
    margin: 12px 0 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--bc-radius-pill);
    font-size: 0.82rem;
    font-family: var(--bc-font-mono, monospace);
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.04em;
}
.td-review-page__verified-badge {
    background: var(--bc-success-soft);
    border: 1px solid #B5DDB7;
    border-radius: var(--bc-radius-md);
    padding: 12px 18px;
    margin: 0 0 0;
    display: flex; align-items: center; gap: 10px;
    color: #1F5429;
    font-size: 0.92rem;
    font-weight: 600;
}
.td-review-page__verified-badge i { color: var(--bc-success); font-size: 1.2rem; }
.td-review-page__card {
    background: #FFFFFF;
    box-shadow: 0 12px 32px rgba(15, 37, 71, 0.10);
}
.td-review-page__card--form {
    border-radius: 0 0 var(--bc-radius-xl) var(--bc-radius-xl);
    padding: clamp(24px, 4vw, 36px);
}
.td-review-page__card--success,
.td-review-page__card--error {
    border-radius: var(--bc-radius-xl);
    padding: clamp(40px, 6vw, 56px) clamp(24px, 4vw, 40px);
    text-align: center;
}
.td-review-page__icon {
    width: 80px; height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 2.4rem;
}
.td-review-page__icon--success {
    background: var(--bc-success-soft);
    color: var(--bc-success);
}
.td-review-page__icon--error {
    background: var(--bc-warning-soft);
    color: var(--bc-warning);
}
.td-review-page__title {
    font-size: clamp(1.4rem, 2.8vw, 1.8rem);
    font-weight: 800;
    color: var(--bc-primary);
    margin: 0 0 12px;
}
.td-review-page__lead {
    color: var(--bc-text);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 20px;
}
.td-review-page__small {
    color: var(--bc-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 24px;
}
.td-review-page__footer {
    margin-top: 24px;
    text-align: center;
}
.td-review-page__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px;
    border-radius: var(--bc-radius-pill);
    border: none;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--bc-transition-fast);
}
.td-review-page__btn--primary {
    background: var(--bc-gradient-sunset);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(201, 168, 113, 0.45);
    text-decoration: none;
}
.td-review-page__btn--primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(201, 168, 113, 0.55);
    color: #FFFFFF;
}
.td-review-page__btn--primary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Expiry MM/YY input group (Pattern B identifikator). Dvije male input-a +
   "/" separator, vizuelno grupisani u jedan field-like element. */
.td-bk2-card-expiry {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    width: auto;
    max-width: 220px;
    border: 1.5px solid var(--bc-border-strong);
    border-radius: var(--bc-radius-md);
    background: #FFFFFF;
    overflow: hidden;
    transition: all var(--bc-transition-fast);
}
.td-bk2-card-expiry:focus-within {
    border-color: var(--bc-secondary);
    box-shadow: 0 0 0 4px rgba(201, 168, 113, 0.18);
}
.td-bk2-card-expiry input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 11px 12px !important;
    font: inherit;
    text-align: center;
    width: 64px;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}
.td-bk2-card-expiry input:focus { outline: none !important; }
.td-bk2-card-expiry input + .td-bk2-card-expiry__sep { padding-left: 0; }
.td-bk2-card-expiry__sep {
    display: inline-flex;
    align-items: center;
    color: var(--bc-text-muted);
    font-weight: 600;
    user-select: none;
    padding: 0 2px;
}
/* Year input \u2014 2-cifrena godina (MM/GG format, npr. 27). Isti width kao
   mjesec da par "MM / YY" izgleda balansirano. */
.td-bk2-card-expiry input[name="payment_card_exp_year"] { width: 64px; }

/* #108 (2026-05-24): Single-input expiry pattern (Stripe Elements style) \u2014
   zamijenio dva odvojena MM i YY inputa. Korisnik kuca cifre, JS automatski
   stavlja " / " separator. Ograničena širina da je vizuelno jasno da nije
   full-text input nego mali "MM / YY" field. */
.td-bk2-card-expiry-input {
    max-width: 160px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    text-align: center;
}

.td-bk2-field__hint {
    color: var(--bc-text-muted);
    font-size: 0.78rem;
    margin-top: 4px;
    line-height: 1.35;
}

/* No-payment-method fallback */
.td-bk2-fallback {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bc-primary-tint);
    border: 1px dashed var(--bc-primary);
    border-radius: var(--bc-radius-lg);
    margin-top: 14px;
}
.td-bk2-fallback i { color: var(--bc-primary); font-size: 1.4rem; }
.td-bk2-fallback p { margin: 0; color: var(--bc-primary); font-size: 0.94rem; line-height: 1.5; }

/* Consent (T&C) */
.td-bk2-consent { margin-top: 18px; }
.td-bk2-consent a { color: var(--bc-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Invalid state \u2014 industry standard inline form validation. Crveno-tonirana
   pozadina + border + ikonica iznad da privuče pažnju. */
.td-bk2-consent.is-invalid {
    background: #FEF2F2;
    border: 1.5px solid #DC2626;
    border-radius: var(--bc-radius-md);
    padding: 12px 14px;
    margin-top: 18px;
    transition: background var(--bc-transition-fast), border-color var(--bc-transition-fast);
}
.td-bk2-consent.is-invalid .td-bk2-check__box {
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Inline error message ispod checkbox-a */
.td-bk2-field-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    background: #FEE2E2;
    border-radius: var(--bc-radius-sm, 6px);
    color: #991B1B;
    font-size: 0.88rem;
    line-height: 1.45;
    font-weight: 500;
}
.td-bk2-field-error i { color: #DC2626; font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.td-bk2-field-error.d-none { display: none; }

/* Shake animacija \u2014 pokrene se kad korisnik klikne submit a uslovi nisu
   prihva\u0107eni. Trifecta pažnje: vizuelni shake + boja + scroll-into-view. */
@keyframes td-bk2-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.td-bk2-consent--shake {
    animation: td-bk2-shake 0.42s cubic-bezier(.36, .07, .19, .97) both;
}

/* Captcha */
.td-bk2-captcha { margin-top: 14px; min-height: 78px; }

/* Error block — visible only when populated (text non-empty + .d-none gone). */
.td-bk2-error {
    margin-top: 14px;
    padding: 12px 16px;
    background: var(--bc-danger-soft);
    border: 1px solid var(--bc-danger);
    border-radius: var(--bc-radius-md);
    color: #7A2424;
    font-size: 0.92rem;
    font-weight: 600;
}
/* Defensive: ako je prazan ili ima `.d-none` klasu, NIKAD ne zauzima
   prostor — sprječava "crveni prazan okvir" bug kad JS clearError()
   ne stigne brže od CSS render-a. */
.td-bk2-error:empty,
.td-bk2-error.d-none {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

/* Consent inline button — vizuelno isto kao link, ali type="button" da ne
   submit-uje formu i otvara policy modal preko JS-a. */
.td-bk2-consent__link {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--bc-primary);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.td-bk2-consent__link:hover {
    color: var(--bc-secondary-dk, var(--bc-coral, #B0793C));
}
.td-bk2-consent__link:focus-visible {
    outline: 2px solid var(--bc-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* =============================================================================
   Policy modal (Uslovi / Privatnost) — premium centered dialog (2026-05-14)
   Otvaraju se kroz [data-role="td-open-terms|td-open-privacy"]; JS handler
   u tour-booking.js toggle-uje [hidden] + body scroll lock.
   ============================================================================= */
.td-policy-modal[hidden] { display: none !important; }
.td-policy-modal {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 4vw, 32px);
}
.td-policy-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 30, 62, 0.55);
    backdrop-filter: blur(2px);
    cursor: pointer;
}
.td-policy-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 32px);
    background: #FFFFFF;
    border-radius: var(--bc-radius-2xl, 18px);
    box-shadow: 0 24px 60px rgba(11, 30, 62, 0.32);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: tdPolicyIn 220ms ease-out;
}
@keyframes tdPolicyIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.td-policy-modal__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--bc-border);
}
.td-policy-modal__title {
    margin: 0;
    flex: 1;
    color: var(--bc-primary);
    font-size: 1.1rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.td-policy-modal__title i { color: var(--bc-secondary, var(--bc-coral, #B0793C)); }
.td-policy-modal__close {
    appearance: none;
    background: transparent;
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--bc-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 160ms ease;
}
.td-policy-modal__close:hover { background: rgba(11, 30, 62, 0.06); color: var(--bc-text); }
.td-policy-modal__body {
    padding: 20px 24px;
    overflow-y: auto;
    color: var(--bc-text);
    font-size: 0.95rem;
    line-height: 1.65;
}
.td-policy-modal__body p { margin: 0 0 12px; }
.td-policy-modal__body p:last-child { margin-bottom: 0; }
.td-policy-modal__body ul,
.td-policy-modal__body ol { margin: 0 0 12px 20px; padding: 0; }
.td-policy-modal__body strong { color: var(--bc-primary); }
.td-policy-modal__footer {
    padding: 16px 24px 22px;
    border-top: 1px solid var(--bc-border);
    display: flex;
    justify-content: flex-end;
}
.td-policy-modal__cta {
    appearance: none;
    background: var(--bc-primary);
    color: #FFFFFF;
    border: 0;
    padding: 10px 22px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease;
}
.td-policy-modal__cta:hover { background: var(--bc-primary-dk, #07142B); }

/* Body scroll lock when policy modal is open */
body.td-policy-open { overflow: hidden; }

/* =============================================================================
   RIGHT: Order summary aside
   ============================================================================= */
.td-bk2-summary {
    background: #FFFFFF;
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius-2xl);
    box-shadow: var(--bc-shadow-3);
    padding: 22px;
    position: sticky;
    top: 100px;
    align-self: start;
}
.td-bk2-summary__top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bc-border);
    margin-bottom: 14px;
}
.td-bk2-summary__cover {
    width: 64px;
    height: 64px;
    border-radius: var(--bc-radius-md);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    border: 1px solid var(--bc-border);
}
.td-bk2-summary__head { flex: 1; min-width: 0; }
.td-bk2-summary__tour {
    display: block;
    color: var(--bc-primary);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.td-bk2-summary__duration {
    display: inline-block;
    color: var(--bc-text-muted);
    font-size: 0.85rem;
    background: var(--bc-bg-soft);
    padding: 2px 8px;
    border-radius: var(--bc-radius-pill);
}

.td-bk2-summary__meta {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.td-bk2-summary__meta li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--bc-text);
    font-size: 0.92rem;
    font-weight: 500;
}
.td-bk2-summary__meta i {
    color: var(--bc-secondary-dk);
    font-size: 1rem;
    width: 18px;
    flex-shrink: 0;
}

.td-bk2-summary__breakdown {
    list-style: none;
    padding: 0;
    margin: 14px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.td-bk2-summary__breakdown:empty { display: none; }
.td-bk2-summary__breakdown li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    color: var(--bc-text-muted);
    font-size: 0.88rem;
}
.td-bk2-summary__breakdown li strong { color: var(--bc-text); font-weight: 600; }

/* 2026-05-14: Premium breakdown line — label iznad, sub ispod (umjesto
   inline collision "Odrasli2 × 40,00 €"). */
.td-bk2-summary__line-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.td-bk2-summary__line-label {
    color: var(--bc-text);
    font-weight: 600;
    line-height: 1.25;
}
.td-bk2-summary__line-sub {
    color: var(--bc-text-muted);
    font-size: 0.78rem;
    line-height: 1.2;
    font-weight: 500;
}
.td-bk2-summary__line-value {
    color: var(--bc-text);
    font-weight: 600;
    white-space: nowrap;
}

.td-bk2-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    color: var(--bc-text-muted);
    font-size: 0.92rem;
}
.td-bk2-summary__row strong { color: var(--bc-primary); font-weight: 700; }

/* Cijena row — supports inline "originalna cijena (strikethrough) →
   krajnja cijena" layout kad je discount aktivan. */
.td-bk2-summary__price-row {
    border-top: 1px dashed var(--bc-border);
    padding-top: 12px;
    margin-top: 6px;
}
.td-bk2-summary__price-stack {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    text-align: right;
}
.td-bk2-summary__price-original {
    color: var(--bc-text-muted) !important;
    font-weight: 600 !important;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    font-size: 0.88rem;
}
.td-bk2-summary__price-discounted,
.td-bk2-summary__price-plain {
    color: var(--bc-primary) !important;
    font-weight: 700 !important;
}

.td-bk2-summary__row--total {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--bc-primary);
    font-size: 1rem;
}
.td-bk2-summary__row--total strong {
    font-size: 1.4rem;
    color: var(--bc-primary);
    letter-spacing: -0.01em;
}

/* Avans (deposit) row — secondary accent (coral / gold) da se izdvaja
   od total-a, plus percent badge inline uz label. */
.td-bk2-summary__row--deposit {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed var(--bc-border);
    color: var(--bc-text);
}
.td-bk2-summary__row--deposit strong {
    color: var(--bc-secondary-dk, var(--bc-coral, #B0793C));
    font-size: 1.1rem;
    font-weight: 700;
}
.td-bk2-summary__deposit-label {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--bc-text);
    font-weight: 600;
}
.td-bk2-summary__deposit-percent {
    color: var(--bc-text-muted);
    font-size: 0.78rem;
    font-weight: 500;
}
.td-bk2-summary__deposit-balance {
    margin: 8px 0 0;
    padding: 8px 12px;
    background: rgba(11, 30, 62, 0.04);
    border-left: 3px solid var(--bc-secondary, var(--bc-coral, #B0793C));
    border-radius: 0 8px 8px 0;
    color: var(--bc-text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.td-bk2-summary__deposit-balance i {
    color: var(--bc-secondary-dk, var(--bc-coral, #B0793C));
    font-size: 0.95rem;
    margin-top: 1px;
    flex-shrink: 0;
}

.td-bk2-summary__discount { color: var(--bc-coral); font-weight: 700; }

.td-bk2-summary__trust {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--bc-border);
}
.td-bk2-summary__trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--bc-text-muted);
    font-size: 0.85rem;
}
.td-bk2-summary__trust i { color: var(--bc-success); font-size: 0.95rem; }

.td-bk2-summary__edit {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--bc-primary);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 12px 0 0;
    margin-top: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.td-bk2-summary__edit:hover { color: var(--bc-secondary-dk); }

@media (max-width: 991.98px) {
    .td-bk2-summary {
        position: static;
        margin-top: 16px;
    }
}

/* =============================================================================
   Sticky footer (Back / Total mobile / Next | Submit)
   ============================================================================= */
.td-bk2-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--bc-z-sticky);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin-top: 22px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius-2xl);
    box-shadow: var(--bc-shadow-3);
}
.td-bk2-footer__back,
.td-bk2-footer__next,
.td-bk2-footer__submit {
    appearance: none;
    border: none;
    border-radius: var(--bc-radius-pill);
    padding: 12px 22px;
    font-weight: 700;
    font-family: var(--bc-font-body);
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--bc-transition-fast);
}
/* 2026-05-14: Industry-standard step CTA visibility — koristimo native
   [hidden] atribut (a11y + screen reader friendly). Force-hide override
   nad gornjim `display: inline-flex` pravilom (ista specificity, kasnije
   pravilo bi pobjeđivalo, pa zato !important). */
.td-bk2-footer__back[hidden],
.td-bk2-footer__next[hidden],
.td-bk2-footer__submit[hidden] {
    display: none !important;
}
.td-bk2-footer__back {
    background: #FFFFFF;
    color: var(--bc-text-muted);
    border: 1.5px solid var(--bc-border);
}
.td-bk2-footer__back:hover:not(:disabled) {
    border-color: var(--bc-primary);
    color: var(--bc-primary);
}
.td-bk2-footer__back:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.td-bk2-footer__total {
    margin-left: auto;
    text-align: right;
    line-height: 1.1;
}
.td-bk2-footer__total[hidden] { display: none; }
.td-bk2-footer__total-label {
    display: block;
    color: var(--bc-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.td-bk2-footer__total-amount {
    display: block;
    color: var(--bc-primary);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.td-bk2-footer__next {
    margin-left: auto;
    background: var(--bc-primary);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(15, 37, 71, 0.30);
}
.td-bk2-footer__next:hover {
    background: var(--bc-primary-dk);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 37, 71, 0.40);
}
.td-bk2-footer__submit {
    background: var(--bc-gradient-sunset);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(201, 168, 113, 0.45);
}
.td-bk2-footer__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(201, 168, 113, 0.55);
    filter: brightness(1.05);
}
.td-bk2-footer__submit:disabled,
.td-bk2-footer__submit.disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* Footer total — desktop ima dovoljno mjesta, gura next/submit udesno; na
   mobile-u total stoji na drugoj liniji. */
@media (max-width: 575.98px) {
    .td-bk2-footer {
        flex-wrap: wrap;
        padding: 12px;
        gap: 10px;
    }
    .td-bk2-footer__back { order: 1; }
    .td-bk2-footer__total { order: 2; margin-left: auto; }
    .td-bk2-footer__next,
    .td-bk2-footer__submit { order: 3; width: 100%; justify-content: center; margin-left: 0; }
    .td-bk2-footer__back { padding: 10px 16px; font-size: 0.88rem; }
}
.td-time-pill:disabled { cursor: not-allowed; }

/* =============================================================================
   Booking Success — Premium thank-you page (2026-05-14)
   ============================================================================= */
.bk-success {
    background: var(--bc-bg-soft);
    min-height: 70vh;
    padding: clamp(2rem, 5vw, 5rem) 0 clamp(3rem, 6vw, 6rem);
}
.bk-success__container {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Breadcrumb */
.bk-success__crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--bc-text-muted);
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.bk-success__crumbs a {
    color: var(--bc-text-muted);
    text-decoration: none;
    transition: color var(--bc-transition-fast);
}
.bk-success__crumbs a:hover { color: var(--bc-primary); }
.bk-success__crumbs-current { color: var(--bc-primary); font-weight: 600; }

/* Hero — animirani check sa gold gradient ring */
.bk-success__hero {
    text-align: center;
    padding: 0 16px 24px;
}
.bk-success__check {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bk-success__check-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--bc-gradient-sunset);
    box-shadow: 0 12px 32px rgba(201, 168, 113, 0.45);
    animation: bkSuccessRing 0.6s var(--bc-ease-spring);
}
.bk-success__check i {
    position: relative;
    z-index: 1;
    color: #FFFFFF;
    font-size: 3rem;
    line-height: 1;
    animation: bkSuccessCheck 0.6s var(--bc-ease-spring) 0.15s both;
}
@keyframes bkSuccessRing {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
@keyframes bkSuccessCheck {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.bk-success__title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--bc-primary);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 12px;
}
.bk-success__subtitle {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    color: var(--bc-text-muted);
    line-height: 1.55;
    max-width: 560px;
    margin: 0 auto;
}

/* Card */
.bk-success__card {
    background: #FFFFFF;
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius-2xl);
    box-shadow: var(--bc-shadow-2);
    padding: clamp(20px, 3vw, 32px);
    margin-bottom: 16px;
}

/* Summary card */
.bk-success__summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--bc-border);
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.bk-success__summary-label {
    display: block;
    color: var(--bc-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.bk-success__summary-number {
    display: block;
    font-family: var(--bc-font-mono);
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    color: var(--bc-primary);
    letter-spacing: 0.02em;
}

/* Status badge */
.bk-success__badges { display: flex; gap: 8px; flex-wrap: wrap; }
.bk-success__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--bc-radius-pill);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}
.bk-success__badge i { font-size: 0.55rem; }
.bk-success__badge--confirmed { background: var(--bc-success-soft); color: var(--bc-success); }
.bk-success__badge--pending   { background: var(--bc-warning-soft); color: var(--bc-warning); }
.bk-success__badge--cancelled { background: var(--bc-danger-soft);  color: var(--bc-danger); }
.bk-success__badge--completed { background: var(--bc-primary-soft); color: var(--bc-primary); }

/* Details dl */
.bk-success__details {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}
.bk-success__detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--bc-divider);
}
.bk-success__detail-row:last-child { border-bottom: none; }
.bk-success__detail-row dt {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--bc-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}
.bk-success__detail-row dt i { color: var(--bc-secondary-dk); }
.bk-success__detail-row dd {
    margin: 0;
    color: var(--bc-primary);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: right;
}
.bk-success__detail-row--total {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 2px solid var(--bc-primary);
    border-bottom: none;
}
.bk-success__detail-row--total dt { font-size: 0.95rem; color: var(--bc-primary); font-weight: 700; }
.bk-success__detail-row--total dd strong {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    color: var(--bc-primary);
    letter-spacing: -0.01em;
}

/* Per-payment-method instruction card */
.bk-success__pay {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    border-left: 4px solid var(--bc-primary);
}
.bk-success__pay-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 1.5rem;
    flex-shrink: 0;
    background: var(--bc-primary);
}
.bk-success__pay-body { flex: 1; min-width: 0; }
.bk-success__pay-body h2 {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 700;
    color: var(--bc-primary);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.bk-success__pay-body p {
    margin: 0 0 8px;
    color: var(--bc-text-muted);
    line-height: 1.6;
    font-size: 0.94rem;
}
.bk-success__pay-body p:last-child { margin-bottom: 0; }

.bk-success__pay--card-online   { border-left-color: var(--bc-primary); }
.bk-success__pay--card-online   .bk-success__pay-icon { background: var(--bc-gradient-sea); }
.bk-success__pay--bank          { border-left-color: var(--bc-secondary); background: var(--bc-secondary-soft); }
.bk-success__pay--bank          .bk-success__pay-icon { background: var(--bc-gradient-sunset); }
.bk-success__pay--arrival       { border-left-color: var(--bc-success); background: var(--bc-success-soft); }
.bk-success__pay--arrival       .bk-success__pay-icon { background: var(--bc-success); }
.bk-success__pay--manual        { border-left-color: var(--bc-warning); background: var(--bc-warning-soft); }
.bk-success__pay--manual        .bk-success__pay-icon { background: var(--bc-warning); }

/* Bank details dl */
.bk-success__bank-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 22px;
    margin: 14px 0 0;
}
.bk-success__bank-dl dt {
    color: var(--bc-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}
.bk-success__bank-dl dd {
    margin: 0;
    color: var(--bc-primary);
    font-weight: 700;
}
.bk-success__bank-dl dd code {
    background: #FFFFFF;
    border: 1px solid var(--bc-border);
    padding: 3px 10px;
    border-radius: var(--bc-radius-sm);
    font-family: var(--bc-font-mono);
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    color: var(--bc-primary);
}
.bk-success__pay-note {
    margin: 14px 0 0;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--bc-radius-md);
    color: var(--bc-text);
    font-size: 0.88rem;
    line-height: 1.55;
    display: flex;
    gap: 10px;
}
.bk-success__pay-note i { color: var(--bc-info); flex-shrink: 0; margin-top: 3px; }

/* Steps timeline */
.bk-success__steps-title {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 700;
    color: var(--bc-primary);
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}
.bk-success__steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.bk-success__step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.bk-success__step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bc-gradient-sunset);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(201, 168, 113, 0.35);
}
.bk-success__step strong {
    display: block;
    color: var(--bc-primary);
    font-size: 0.98rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.bk-success__step p {
    margin: 0;
    color: var(--bc-text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

/* Not found / generic states */
.bk-success__notfound,
.bk-success__generic {
    text-align: center;
}
.bk-success__notfound i,
.bk-success__generic i {
    font-size: 2.5rem;
    color: var(--bc-secondary-dk);
    margin-bottom: 10px;
    display: block;
}
.bk-success__notfound i { color: var(--bc-warning); }
.bk-success__notfound h2,
.bk-success__generic h2 {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 700;
    color: var(--bc-primary);
    margin: 0 0 8px;
}
.bk-success__notfound p,
.bk-success__generic p {
    margin: 0;
    color: var(--bc-text-muted);
    line-height: 1.6;
    font-size: 0.95rem;
}
.bk-success__notfound code,
.bk-success__generic code {
    background: var(--bc-bg-soft);
    border: 1px solid var(--bc-border);
    padding: 2px 8px;
    border-radius: var(--bc-radius-sm);
    font-family: var(--bc-font-mono);
}

/* PDF download CTA \u2014 industry standard placement (Booking.com / Lufthansa).
   Gold-gradient highlight da privu\u010de pa\u017enju ka opciji preuzimanja. */
.bk-success__pdf {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, #FFF7E6 0%, #FFF1D6 100%);
    border: 1px solid #E5C57A;
    border-radius: var(--bc-radius-xl);
    padding: 22px 26px;
    margin: 24px 0 0;
    flex-wrap: wrap;
}
.bk-success__pdf-icon {
    flex-shrink: 0;
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bc-gradient-sunset);
    color: #FFFFFF;
    font-size: 1.6rem;
    box-shadow: 0 6px 16px rgba(201, 168, 113, 0.45);
}
.bk-success__pdf-body { flex: 1 1 250px; min-width: 0; }
.bk-success__pdf-body h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bc-primary);
    margin: 0 0 4px;
}
.bk-success__pdf-body p {
    margin: 0;
    color: #3F2F0E;
    font-size: 0.92rem;
    line-height: 1.5;
}
.bk-success__btn--gold {
    background: var(--bc-gradient-sunset);
    color: #FFFFFF;
    border: 0;
    box-shadow: 0 6px 16px rgba(201, 168, 113, 0.45);
}
.bk-success__btn--gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(201, 168, 113, 0.55);
    color: #FFFFFF;
}
@media (max-width: 640px) {
    .bk-success__pdf { flex-direction: column; align-items: flex-start; }
    .bk-success__pdf .bk-success__btn--gold { width: 100%; justify-content: center; }
}

/* CTA dugmad */
.bk-success__cta {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
    flex-wrap: wrap;
}
.bk-success__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--bc-radius-pill);
    font-weight: 700;
    font-size: 0.93rem;
    text-decoration: none;
    transition: all var(--bc-transition-fast);
    border: 1.5px solid transparent;
}
.bk-success__btn--ghost {
    background: #FFFFFF;
    color: var(--bc-primary);
    border-color: var(--bc-border);
}
.bk-success__btn--ghost:hover {
    border-color: var(--bc-primary);
    background: var(--bc-primary-tint);
    transform: translateY(-1px);
    color: var(--bc-primary);
}
.bk-success__btn--primary {
    background: var(--bc-primary);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(15, 37, 71, 0.25);
}
.bk-success__btn--primary:hover {
    background: var(--bc-primary-dk);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 37, 71, 0.35);
    color: #FFFFFF;
}

@media (max-width: 575.98px) {
    .bk-success__pay { flex-direction: column; gap: 14px; }
    .bk-success__pay-icon { width: 48px; height: 48px; font-size: 1.25rem; }
    .bk-success__detail-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .bk-success__detail-row dd { text-align: left; }
    .bk-success__bank-dl { grid-template-columns: 1fr; gap: 4px 0; }
    .bk-success__bank-dl dd { padding-bottom: 8px; border-bottom: 1px dashed var(--bc-divider); margin-bottom: 4px; }
    .bk-success__cta { flex-direction: column; }
    .bk-success__btn { width: 100%; justify-content: center; }
}

/* =============================================================================
   No-animations override (2026-05-14)
   -----------------------------------------------------------------------------
   Kad body ima klasu `.no-animations` (npr. home stranica), isključuju se:
     - .reveal scroll-trigger animacije (force visible)
     - Hero Ken Burns zoom-in
     - Reveal-stagger entrance
     - Parallax transforms
   Hover/transition state-ovi na dugmadi/kartama ostaju netaknuti (oni su
   reakcija na user input, ne entrance-ovi).
   ============================================================================= */
body.no-animations .reveal,
body.no-animations .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
body.no-animations .home-hero__slide-bg,
body.no-animations .home-hero__swiper .swiper-slide-active .home-hero__slide-bg {
    animation: none !important;
    transform: none !important;
}
body.no-animations [data-parallax],
body.no-animations .parallax {
    transform: none !important;
}

/* =============================================================================
   Trust Strip — premium overlapping floating card (stats + badges)
   -----------------------------------------------------------------------------
   Industry reference: Booking.com / Viator / GetYourGuide hero-adjacent trust
   card. White floating card sits half-on-half-off the hero (margin-top
   negative for visual overlap), premium shadow lifts it off the page,
   two-row layout (animated stats + compact trust badges) split by a
   subtle hairline divider. Mobile: stack stats grid + horizontal scroll
   badges. Reveal animation hooks postojeću `.reveal` mehanizam.
   ============================================================================= */
.trust-strip {
    position: relative;
    z-index: 5;
    /* Section level breathing room — kad NIJE overlap varianta, padding
       postavlja vertical rhythm; kad jeste, padding ide kombinovano sa
       negative margin-top na __card. */
    padding-block: clamp(2rem, 4vw, 3rem) clamp(3.5rem, 6vw, 5rem);
}
.trust-strip--overlap {
    /* Top padding postavlja "rep" iznad kartice; negative margin-top na
       .trust-strip__card podiže karticu da preklapa hero za fixed iznos. */
    padding-top: 0;
    margin-top: clamp(-3rem, -5vw, -4rem);
}

/* Premium pozadinski gradient — 3-stop cream + radial spotlight iza kartice +
   subtle gold tint na dnu. Industry pattern (Apple Newsroom / Stripe homepage):
   micro-gradient sa 3-4 cream tone-a stvara depth bez vidljivog banding-a;
   radial highlight iza centralnog elementa imitira "spotlight" efekat
   (kao kad svjetlo padne na dokument na stolu).

   Pseudo-element rješenje: na overlap variantu, gradient počinje od overlap
   zone na dolje (inset top), tako da hero slika ostaje nesmetana iznad. Na
   non-overlap, pokriva cijelu sekciju. */
.trust-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        /* Layer 1: warm spotlight iza kartice (ispod cream-a) — daje
           kartici osjećaj da "lebdi" iznad osvijetljenog dijela. */
        radial-gradient(ellipse 70% 50% at 50% 55%,
            rgba(201, 168, 113, 0.05) 0%,
            rgba(201, 168, 113, 0) 60%),
        /* Layer 2: smooth 3-stop cream gradient — top transparent (hero
           prolazi), srednje warm cream, dno light cream (seamless prelaz
           na sledeću sekciju koja je takođe cream). */
        linear-gradient(180deg,
            rgba(250, 247, 242, 0)   0%,
            rgba(248, 244, 234, 0.5) 18%,
            #F6F1E6                   45%,
            #F8F3EA                   72%,
            #FAF7F2                  100%);
}
.trust-strip--overlap::before {
    /* Overlap variant: gradient počinje ispod overlap zone — gornji dio
       sekcije (gdje kartica preklapa hero) mora ostati providno da slika
       hero-a prolazi nesmetano. Inset top je proporcionalan negativnom
       margin-top-u kartice (clamp(-3rem, -5vw, -4rem) iz .trust-strip--overlap). */
    inset: clamp(3rem, 5vw, 4rem) 0 0 0;
}

.trust-strip__card {
    background: #fff;
    border-radius: 16px;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.25rem);
    /* Two-layer shadow: tight bottom shadow za "lift off page" feel +
       wider soft shadow za premium feel (Booking.com pattern). */
    box-shadow:
        0 4px 12px rgba(15, 30, 58, 0.06),
        0 24px 48px rgba(15, 30, 58, 0.12),
        0 1px 0 rgba(15, 30, 58, 0.04) inset;
    border: 1px solid rgba(15, 30, 58, 0.06);
    position: relative;
}

/* Stats row — animirane brojke sa SVG ikonom iznad i labelom ispod. */
.trust-strip__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: start;
}
.trust-strip__stat {
    text-align: center;
    padding: 0.25rem 0.5rem;
}
.trust-strip__stat-icon {
    color: var(--yk-primary, #0a5a73);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg,
        rgba(var(--yk-primary-rgb, 10, 90, 115), 0.08),
        rgba(var(--yk-secondary-rgb, 218, 165, 32), 0.08));
    border-radius: 50%;
    transition: transform 0.3s ease;
}
.trust-strip__stat:hover .trust-strip__stat-icon {
    transform: scale(1.08);
}
.trust-strip__stat-icon svg {
    display: block;
}
.trust-strip__stat-value,
.trust-strip__stat-value [data-counter],
.trust-strip__stat-value > span {
    font-family: var(--yk-font-display, 'Cormorant Garamond', serif);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 600;
    line-height: 1;
    /* Medium navy iz logotipa — boja talasa mora između deep navy GREBEN
       wordmark-a i highlight-a. Vidljivo plava (ne crna kao #0F1E3A).
       Match-uje --yk-primary-light koji se već koristi za naslove naslovne
       strane i home-stats counter — uniform brand boja za sve velike
       brojke na sajtu. !important da prebije globalne span/h3 selektore. */
    color: #2E5B8C !important;
    color: var(--yk-primary-light, #2E5B8C) !important;
    letter-spacing: -0.01em;
}
.trust-strip__stat-value {
    margin-bottom: 0.5rem;
}
.trust-strip__stat-label {
    font-family: var(--yk-font-body, 'Inter', sans-serif);
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(15, 30, 58, 0.62);
    letter-spacing: 0.01em;
    line-height: 1.3;
}

/* Hairline divider između stats i badges redova. */
.trust-strip__divider {
    height: 1px;
    background: linear-gradient(90deg,
        rgba(15, 30, 58, 0) 0%,
        rgba(15, 30, 58, 0.12) 50%,
        rgba(15, 30, 58, 0) 100%);
    margin: clamp(1.25rem, 3vw, 2rem) 0 clamp(1rem, 2.5vw, 1.5rem);
}

/* Badges row — kompaktnije, ikona + labela u liniji. */
.trust-strip__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: center;
}
.trust-strip__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(15, 30, 58, 0.82);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}
.trust-strip__badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--yk-secondary, #DAA520);
    flex-shrink: 0;
}
.trust-strip__badge-icon svg {
    display: block;
}
.trust-strip__badge-text {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.trust-strip__badge-text strong {
    color: var(--yk-primary, #0a5a73);
    font-weight: 700;
}

/* Mobile (≤640px): kompaktna varianta sa scroll-snap-om za badges.
   Stats prelaze na 2-column grid; badges idu u horizontalni scroll
   da se ne preliva van vidnog polja. */
@media (max-width: 640px) {
    .trust-strip--overlap {
        margin-top: clamp(-2rem, -4vw, -2.5rem);
    }
    .trust-strip__card {
        padding: 1.25rem 1rem;
        border-radius: 12px;
    }
    .trust-strip__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem 0.75rem;
    }
    .trust-strip__stat-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 0.5rem;
    }
    .trust-strip__stat-value {
        font-size: 1.65rem;
    }
    .trust-strip__stat-label {
        font-size: 0.78rem;
    }
    .trust-strip__badges {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1.25rem;
        padding-bottom: 0.25rem;
        margin: 0 -0.25rem;
        /* Hide scrollbar — premium feel */
        scrollbar-width: none;
    }
    .trust-strip__badges::-webkit-scrollbar { display: none; }
    .trust-strip__badge {
        scroll-snap-align: start;
        flex-shrink: 0;
        font-size: 0.85rem;
    }
}

/* Reduced motion: ukloni hover transformacije */
@media (prefers-reduced-motion: reduce) {
    .trust-strip__stat:hover .trust-strip__stat-icon {
        transform: none;
    }
    .trust-strip__stat-icon {
        transition: none;
    }
}

/* =============================================================================
   CMS body heading unification — navy plava (match home section h2)
   =============================================================================
   Home koristi var(--yk-primary-light) = #2E5B8C za sve section h2:
     .home-stats .section-header h2
     .home-featured .section-header h2
     .home-testimonials .section-header h2
   Sve OSTALE strane (CMS pages) trenutno koriste var(--bc-secondary) = gold
   za heading-e (kroz page.css). To pravi brand-inconsistency između home-a i
   ostatka sajta. Ovaj blok ujednačava — sve body heading-e na CMS pages koriste
   istu navy plavu kao home.

   NE dira:
   - .page-hero__title (#fff iznad hero image)
   - Home naslove (already navy)
   - .blog-card__title NA HOME-u (samo na /blog index) — diferenciramo
     .blog-page .blog-card__title (CMS) vs .home-blog .blog-card__title (home).
   ============================================================================= */

/* Generic CMS page body — page-default + bilo koja prose sekcija */
.page-body h1,
.page-body h2,
.page-body h3,
.page-body h4,
.page-body .prose h1,
.page-body .prose h2,
.page-body .prose h3,
.page-body .prose h4,
/* About page — story + values */
.about-story h1,
.about-story h2,
.about-story h3,
.about-story .prose h2,
.about-story .prose h3,
.about-values h1,
.about-values h2,
.about-values h3,
/* FAQ page */
.faq-page h1,
.faq-page h2,
.faq-page h3,
.faq-page .faq-question,
.faq-page details summary,
/* Team page */
.team-page h1,
.team-page h2,
.team-page h3,
.team-page .team-card__name,
/* Gallery page */
.gallery-page h1,
.gallery-page h2,
.gallery-page h3,
/* Blog index (CMS) — NE dira .home-blog */
.blog-page h1,
.blog-page h2,
.blog-page h3,
.blog-page .blog-card__title,
/* Blog detail */
.blog-detail__title,
.blog-detail h2,
.blog-detail h3,
.blog-detail .prose h2,
.blog-detail .prose h3,
.blog-detail .prose h4,
/* Testimonials CMS page */
.testimonials-page h1,
.testimonials-page h2,
.testimonials-page h3,
.testimonials-page .testimonial-card__name,
/* Legal pages */
.legal-page h1,
.legal-page h2,
.legal-page h3,
.legal-page .prose h2,
.legal-page .prose h3,
/* Contact section + premium suite */
.contact-section h2,
.contact-section h3,
.contact-suite__h2,
.contact-suite__form-head,
.contact-suite__info-head {
    color: var(--yk-primary-light) !important;  /* #2E5B8C — medium navy */
}

/* Hover state za clickable card title-ove na CMS stranama */
.blog-page .blog-card:hover .blog-card__title {
    color: var(--yk-primary) !important;        /* #0F1E3A — deep navy on hover */
}

/* =============================================================================
   Blog detail — premium share section
   =============================================================================
   Visual upgrade: brand-colored hover (Facebook plava, X crna, WhatsApp zelena,
   LinkedIn plava, Copy zlatna), elevated cards, single-line baseline alignment.

   Layout:
     .blog-detail__share           — top-level flex (label + list, baseline aligned)
     .blog-detail__share-label     — uppercase tracking eyebrow sa share ikonicom
     .blog-detail__share-list      — inline-flex list reset (pravi single line)
     .blog-detail__share-btn       — circular 42x42 sa platform brand color hover
   ============================================================================= */
.blog-detail__share {
    margin-top: clamp(2rem, 4vw, 3rem) !important;
    padding-top: clamp(1.25rem, 2.5vw, 1.75rem) !important;
    border-top: 1px solid var(--bc-border, #e5e7eb) !important;
    display: flex !important;
    align-items: center !important;     /* perfect vertical center sa ikonama */
    flex-wrap: wrap !important;
    gap: clamp(0.75rem, 2vw, 1.25rem) !important;
}

.blog-detail__share-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-family: var(--yk-font-display, inherit) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--yk-primary-light, #2E5B8C) !important;  /* navy match home heading */
    margin: 0 !important;
}
.blog-detail__share-label i {
    font-size: 1.0625rem !important;
    color: var(--yk-secondary, #C9A871) !important;       /* gold accent na share ikonici */
}

.blog-detail__share-list {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.blog-detail__share-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: var(--bc-bg-soft, #f7f7f5) !important;
    color: var(--yk-primary-light, #2E5B8C) !important;
    font-size: 1.0625rem !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    transition:
        transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
        background 250ms cubic-bezier(0.4, 0, 0.2, 1),
        color 250ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Per-platform brand color hover. Industry-standard share button pattern —
   social ikona uvijek dobija svoju brand boju na hover/focus za instant
   prepoznavanje (Booking, Airbnb, NYT slijede isti pattern). */
.blog-detail__share-btn[data-platform="facebook"]:hover,
.blog-detail__share-btn[data-platform="facebook"]:focus-visible {
    background: #1877F2 !important;       /* Facebook brand blue */
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(24, 119, 242, 0.35) !important;
}
.blog-detail__share-btn[data-platform="x"]:hover,
.blog-detail__share-btn[data-platform="x"]:focus-visible {
    background: #000 !important;          /* X brand black */
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
}
.blog-detail__share-btn[data-platform="whatsapp"]:hover,
.blog-detail__share-btn[data-platform="whatsapp"]:focus-visible {
    background: #25D366 !important;       /* WhatsApp brand green */
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35) !important;
}
.blog-detail__share-btn[data-platform="linkedin"]:hover,
.blog-detail__share-btn[data-platform="linkedin"]:focus-visible {
    background: #0A66C2 !important;       /* LinkedIn brand blue */
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(10, 102, 194, 0.35) !important;
}
.blog-detail__share-btn[data-platform="copy"]:hover,
.blog-detail__share-btn[data-platform="copy"]:focus-visible {
    background: var(--yk-secondary, #C9A871) !important;  /* gold accent */
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(201, 168, 113, 0.45) !important;
}
.blog-detail__share-btn[data-platform="copy"].is-copied {
    background: #10b981 !important;       /* green confirmation */
    color: #fff !important;
}

/* Reduced motion — disable lift transform, keep color transitions */
@media (prefers-reduced-motion: reduce) {
    .blog-detail__share-btn { transition: background 150ms ease, color 150ms ease !important; }
    .blog-detail__share-btn:hover,
    .blog-detail__share-btn:focus-visible { transform: none !important; }
}

/* =============================================================================
   FANCYBOX GALLERY — Premium smooth open/close + slide transitions.

   2026-05-17: User je prijavio "isjeckanu" animaciju popup galerije na tour
   detail strani. Root cause analysis:

   1. Default Fancybox open animacija je "zoom" sa CSS transformacijama bez
      GPU acceleration hint-a → browser radi paint na CPU = jerky frames.
   2. Slika dekompresija (full-size load) blokira main thread tokom open
      animacije → visible stutter dok image dekoduje.
   3. Carousel slide animacija (default) ne fade-uje između slika sa różnim
      aspect ratios → vizualno disonantan jump.

   Fix:
   - GPU acceleration: translate3d + will-change: transform na container/image
   - Smooth backdrop fade (cubic-bezier easing matchuje Apple HIG / Material)
   - Image rendering: backface-visibility + image-rendering: smooth
   - Carousel transition: fade umjesto slide (vidi site-animations.js config)
   - Reduced motion: disable transitions u potpunosti

   Industry benchmark: Booking.com property gallery, GetYourGuide tour photos,
   Viator activity images — sve koriste fade transitions sa GPU compositing.
   ============================================================================= */

.fancybox__container {
    /* GPU compositing layer — sprečava browser repaint pri svakoj frame
       od scale/translate animacije. Standard fix za smooth modal animations. */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}

.fancybox__backdrop {
    /* Smooth backdrop fade — default je instant; eased 250ms je pleasing. */
    transition: opacity 280ms cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.fancybox__slide {
    /* Sprečava izolovani repaint okvirne slike — promote na vlastiti layer. */
    will-change: opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.fancybox__content {
    /* GPU layer za content (image wrapper) tokom open/close. */
    will-change: opacity, transform;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.fancybox__image {
    /* Smooth image rendering — sprečava pixel-level jitter pri scale animaciji.
       image-rendering: auto je default ali eksplicitno ga postavljamo zbog
       child elementa nasledstva. */
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Custom fadeIn/fadeOut keyframes (Fancybox čita f-fadeIn/f-fadeOut klase). */
.f-fadeIn {
    animation: fxFadeIn 320ms cubic-bezier(0.4, 0.0, 0.2, 1) both;
}
.f-fadeOut {
    animation: fxFadeOut 220ms cubic-bezier(0.4, 0.0, 0.2, 1) both;
}
@keyframes fxFadeIn {
    from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.985); }
    to   { opacity: 1; transform: translate3d(0, 0, 0)   scale(1); }
}
@keyframes fxFadeOut {
    from { opacity: 1; transform: translate3d(0, 0, 0)   scale(1); }
    to   { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.985); }
}

/* Fancybox carousel slide-to-slide fade (override default sliding). */
.f-carousel__slide {
    transition: opacity 320ms cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

/* Buttons (close, prev, next, slideshow, thumbs) — smooth hover. */
.fancybox__button,
.f-button {
    transition: background-color 200ms ease, opacity 200ms ease, transform 200ms ease !important;
}
.fancybox__button:hover,
.f-button:hover {
    transform: scale(1.05);
}

/* Reduced motion — sve animacije off za korisnike sa prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    .fancybox__backdrop,
    .fancybox__slide,
    .fancybox__content,
    .f-carousel__slide,
    .fancybox__button,
    .f-button {
        transition: none !important;
        animation: none !important;
    }
    .f-fadeIn, .f-fadeOut { animation: none !important; }
}