/* =============================================================================
   Tour detail v8.3 — landing styles
   Self-contained, koristi iste theme variable kao tours-archive.css
   ============================================================================= */

:root {
    /* Orange paleta — match-uje modal kalendar header i screenshot booking
       widget-a. Prije je bila crvena (#c8102e) ali je vizuelno bila razrana
       sa orange modal-om. Sad svi elementi (selected pill, Više datuma,
       total cijena, Rezerviši CTA, active tab) dijele istu orange boju. */
    --td-color-primary:    #ff6b35;
    --td-color-primary-dk: #ed5826;
    --td-color-text:       #1a1f2c;
    --td-color-muted:      #6c7b8a;
    --td-color-bg:         #ffffff;
    --td-color-bg-soft:    #f7f8fa;
    --td-color-border:     #e7eaee;
    --td-color-success:    #1f9d55;
    --td-color-danger:     #c8102e;
    --td-color-warning:    #f59e0b;
    --td-shadow-sm:        0 1px 2px rgba(20, 25, 35, .06);
    --td-shadow-md:        0 4px 14px rgba(20, 25, 35, .10);
    --td-shadow-lg:        0 12px 30px rgba(20, 25, 35, .14);
    --td-radius-sm:        6px;
    --td-radius-md:        10px;
    --td-radius-lg:        16px;
    --td-spacing-1:        .25rem;
    --td-spacing-2:        .5rem;
    --td-spacing-3:        .75rem;
    --td-spacing-4:        1rem;
    --td-spacing-5:        1.5rem;
    --td-spacing-6:        2rem;

    /* =====================================================================
       Apple-inspired design tokens (Faza 8.5 E1).
       Univerzalni za tour modul (detail + archive); reuse-uju se preko
       CSS variable inheritance. Postojeći --td-* tokeni ostaju za backward
       kompatibilnost.
       ===================================================================== */

    /* Shadow tier — Apple HIG inspired (subtle → prominent → floating) */
    --tr-shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
    --tr-shadow-2: 0 4px 12px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
    --tr-shadow-3: 0 12px 28px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
    --tr-shadow-4: 0 24px 56px rgba(0,0,0,.14), 0 8px 16px rgba(0,0,0,.08);

    /* Radius scale */
    --tr-radius-sm:   4px;
    --tr-radius-md:   8px;
    --tr-radius-lg:   12px;
    --tr-radius-xl:   16px;
    --tr-radius-pill: 999px;

    /* Easing tokens — Apple-grade cubic-bezier */
    --tr-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --tr-ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
    --tr-ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
    --tr-ease-spring: cubic-bezier(0.5, 1.25, 0.75, 1.25);

    /* Font stacks — SF Pro fallback chain */
    --tr-font-system:  -apple-system, BlinkMacSystemFont, "SF Pro Text",  "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
    --tr-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display","Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;

    /* Frosted glass — koristi se na sticky widget + modal backdrop + FAB bar */
    --tr-frosted-bg:    rgba(255, 255, 255, .72);
    --tr-frosted-blur:  blur(20px) saturate(180%);
}

/* =============================================================================
   Layout root
   ============================================================================= */
.tour-detail {
    color: var(--td-color-text);
    background: var(--td-color-bg-soft);
    padding-bottom: 4rem;
}

.tour-detail .container { max-width: 1180px; }

/* =============================================================================
   Breadcrumb
   ============================================================================= */
.td-breadcrumb {
    background: var(--td-color-bg);
    border-bottom: 1px solid var(--td-color-border);
    padding: var(--td-spacing-3) 0;
    font-size: .9rem;
}
.td-breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--td-spacing-2);
    align-items: center;
}
.td-breadcrumb li { display: flex; align-items: center; }
.td-breadcrumb li + li::before {
    content: "›";
    margin: 0 var(--td-spacing-2);
    color: var(--td-color-muted);
}
.td-breadcrumb a { color: var(--td-color-muted); text-decoration: none; }
.td-breadcrumb a:hover { color: var(--td-color-primary); }
.td-breadcrumb li[aria-current="page"] {
    color: var(--td-color-text);
    font-weight: 600;
}

/* =============================================================================
   Hero gallery (Swiper)
   ============================================================================= */
.td-hero-gallery {
    background: #000;
    position: relative;
}
.td-hero-gallery .swiper {
    width: 100%;
    aspect-ratio: 16 / 7;
    max-height: 540px;
}
@media (max-width: 768px) {
    .td-hero-gallery .swiper { aspect-ratio: 4 / 3; max-height: none; }
}
.td-hero-gallery .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.td-hero-gallery .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.td-hero-gallery .swiper-slide a:hover img { transform: scale(1.02); }

.td-hero-gallery .swiper-pagination-bullet {
    background: rgba(255,255,255,.7);
    opacity: 1;
    width: 8px; height: 8px;
}
.td-hero-gallery .swiper-pagination-bullet-active {
    background: #fff;
    width: 22px;
    border-radius: 4px;
}
.td-hero-gallery .swiper-button-prev,
.td-hero-gallery .swiper-button-next {
    background: rgba(0,0,0,.45);
    color: #fff;
    width: 44px; height: 44px;
    border-radius: 50%;
    transition: background .2s ease;
}
.td-hero-gallery .swiper-button-prev:hover,
.td-hero-gallery .swiper-button-next:hover { background: rgba(0,0,0,.7); }
.td-hero-gallery .swiper-button-prev::after,
.td-hero-gallery .swiper-button-next::after { font-size: 18px; font-weight: 700; }

/* =============================================================================
   Main info row (eyebrow, title, subtitle, pills, rating)
   ============================================================================= */
.td-info-row {
    background: #fff;
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-lg);
    box-shadow: var(--td-shadow-sm);
    padding: var(--td-spacing-6);
    margin: -3rem 0 var(--td-spacing-5);
    position: relative;
    z-index: 2;
}
@media (max-width: 768px) {
    .td-info-row {
        margin-top: var(--td-spacing-4);
        padding: var(--td-spacing-4);
    }
}

.td-info-row__eyebrow {
    color: var(--td-color-muted);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: var(--td-spacing-2);
}
.td-eyebrow-cat { font-weight: 600; color: var(--td-color-primary); }
.td-eyebrow-sep { margin: 0 .5rem; color: var(--td-color-border); }
/* Rating badge inline u eyebrow — INLINE flow umjesto absolute pozicioniranja
   na slici (industry standard: Booking, GetYourGuide, Viator). Format:
   ★ 4,7 (3+ recenzija). Zlatna zvjezdica + bold ocjena + suptilan count. */
.td-eyebrow-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
    color: var(--td-color-text);
}
.td-eyebrow-rating .bi-star-fill {
    color: #C9A871;
    font-size: 0.95rem;
    line-height: 1;
}
.td-eyebrow-rating strong {
    font-weight: 700;
    color: var(--td-color-text);
}
.td-eyebrow-rating__count {
    color: var(--td-color-muted);
    font-weight: 500;
    margin-left: 0.15rem;
}

.td-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 var(--td-spacing-3);
    color: var(--td-color-text);
}

.td-subtitle {
    font-size: 1.1rem;
    color: var(--td-color-muted);
    line-height: 1.55;
    margin: 0 0 var(--td-spacing-4);
}

.td-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--td-spacing-2);
    margin-bottom: var(--td-spacing-3);
}
.td-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .8rem;
    background: var(--td-color-bg-soft);
    border: 1px solid var(--td-color-border);
    border-radius: 100px;
    font-size: .9rem;
    color: var(--td-color-text);
}
.td-pill i { color: var(--td-color-primary); }

.td-rating-row {
    display: flex;
    align-items: center;
    gap: var(--td-spacing-2);
    margin-top: var(--td-spacing-3);
    font-size: .95rem;
}
.td-stars i {
    color: var(--td-color-warning);
    font-size: 1rem;
    margin-right: .1rem;
}

/* =============================================================================
   Two-column layout
   ============================================================================= */
.td-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--td-spacing-6);
    align-items: flex-start;
}
@media (max-width: 991px) {
    .td-layout { grid-template-columns: 1fr; }
}

.td-main-col {
    background: #fff;
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-lg);
    box-shadow: var(--td-shadow-sm);
    overflow: hidden;
}

/* =============================================================================
   Tabs — premium scrollable tab bar sa sliding underline
   -----------------------------------------------------------------------------
   Bez Bootstrap zavisnosti: list-style reset + flex layout + custom scrollbar.
   Aktivan tab ima bold tekst, primary colored underline (3px), i subtle bg hover.
   Na mobile: horizontal scroll sa fade edges; tap-highlight-color removed.
   ============================================================================= */
.td-tabs,
.td-tabs.nav-tabs {
    /* Reset liste — detail view koristi <ul class="nav nav-tabs"> markup,
       ali frontend ne učitava Bootstrap CSS pa `.nav-tabs` nema efekta.
       Sami stilujemo kao horizontalni tab bar. */
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border: 0;
    border-bottom: 1px solid var(--td-color-border);
    background: var(--td-color-bg);
    position: relative;
    gap: 0;
    padding: 0 var(--td-spacing-5);

    /* Sliding fade indicators kad se može scroll-ovati horizontalno —
       vizuelni cue da ima još tabova ispred/iza. Trick sa mask-image. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.td-tabs::-webkit-scrollbar,
.td-tabs.nav-tabs::-webkit-scrollbar { display: none; }

.td-tabs .nav-item,
.td-tabs > li {
    list-style: none;  /* defensive reset — ni u jednom scenariju bullet */
    margin: 0;
    padding: 0;
    display: flex;
}

.td-tabs .nav-link {
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;

    font-family: var(--tr-font-display);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-decoration: none;

    color: var(--td-color-muted);
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 1.1rem 1.25rem 1rem;

    cursor: pointer;
    transition: color .2s var(--tr-ease-out),
                background-color .2s var(--tr-ease-out);
}

/* Sliding underline indicator — pseudo-element position gives smooth transition
   on tab change bez menjanja border-a (koji bi uzrokovao layout shift). */
.td-tabs .nav-link::after {
    content: "";
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: -1px;
    height: 3px;
    background: transparent;
    border-radius: 3px 3px 0 0;
    transition: background-color .25s var(--tr-ease-out),
                transform .25s var(--tr-ease-out);
    transform: scaleX(0);
    transform-origin: center;
}

.td-tabs .nav-link:hover {
    color: var(--td-color-text);
    background-color: rgba(255, 107, 53, .04);
}
.td-tabs .nav-link:hover::after {
    background-color: var(--td-color-border);
    transform: scaleX(.6);
}

.td-tabs .nav-link:focus-visible {
    outline: 2px solid var(--td-color-primary);
    outline-offset: -2px;
    color: var(--td-color-text);
}

.td-tabs .nav-link.active {
    color: var(--td-color-primary);
    font-weight: 700;
    background: transparent;
}
.td-tabs .nav-link.active::after {
    background-color: var(--td-color-primary);
    transform: scaleX(1);
}

/* Tab content — default hidden; JS i `.show.active` klase otvaraju aktivni. */
.td-tab-content { padding: var(--td-spacing-5); }
.td-tab-content > .tab-pane {
    display: none;
    opacity: 0;
    transition: opacity .2s var(--tr-ease-out);
}
.td-tab-content > .tab-pane.show.active {
    display: block;
    opacity: 1;
}

/* Mobile — kompaktniji tabovi */
@media (max-width: 767.98px) {
    .td-tabs,
    .td-tabs.nav-tabs {
        padding: 0 var(--td-spacing-3);
    }
    .td-tabs .nav-link {
        padding: .9rem .75rem .8rem;
        font-size: .875rem;
    }
    .td-tabs .nav-link::after {
        left: .75rem;
        right: .75rem;
    }
    .td-tab-content { padding: var(--td-spacing-4); }
}

.td-rich {
    line-height: 1.6;
    color: var(--td-color-text);
}
.td-rich h2, .td-rich h3, .td-rich h4 { margin-top: 1.5rem; }
.td-rich p { margin-bottom: 1rem; }
.td-rich ul, .td-rich ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.td-rich li { margin-bottom: .35rem; }
.td-rich img { max-width: 100%; height: auto; border-radius: var(--td-radius-md); }

.td-highlights-box {
    background: linear-gradient(135deg, #fff8e6, #fef0d0);
    border: 1px solid #f6deaa;
    border-radius: var(--td-radius-md);
    padding: var(--td-spacing-4);
    margin-bottom: var(--td-spacing-5);
}
.td-highlights-box h3 {
    margin: 0 0 var(--td-spacing-3);
    font-size: 1.1rem;
    color: #b87913;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.td-important-info-box {
    background: #fff7ed;
    border: 1px solid #ffe1c2;
    border-left: 4px solid var(--td-color-warning);
    border-radius: var(--td-radius-md);
    padding: var(--td-spacing-4);
    margin-top: var(--td-spacing-5);
}
.td-important-info-box h4 {
    margin: 0 0 var(--td-spacing-2);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #c87a04;
}

.td-long-desc { margin-bottom: var(--td-spacing-5); }

/* =============================================================================
   Itinerary
   ============================================================================= */
.td-itinerary {
    display: flex;
    flex-direction: column;
    gap: var(--td-spacing-5);
}
.td-itinerary-day {
    border-left: 3px solid var(--td-color-primary);
    padding-left: var(--td-spacing-4);
    position: relative;
}
.td-itinerary-day-badge {
    display: inline-block;
    background: var(--td-color-primary);
    color: #fff;
    padding: .25rem .75rem;
    border-radius: 100px;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.td-itinerary-items {
    display: flex;
    flex-direction: column;
    gap: var(--td-spacing-4);
    margin-top: var(--td-spacing-3);
}
.td-itinerary-item {
    background: var(--td-color-bg-soft);
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-md);
    padding: var(--td-spacing-4);
}
.td-itinerary-item .td-time {
    display: inline-block;
    color: var(--td-color-muted);
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .35rem;
}
.td-itinerary-item h5 {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
}
.td-itinerary-img {
    max-height: 200px;
    width: 100%;
    object-fit: cover;
    border-radius: var(--td-radius-md);
    margin-top: var(--td-spacing-3);
}

/* =============================================================================
   Included / Excluded
   ============================================================================= */
.td-included-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--td-spacing-5);
}
@media (max-width: 768px) {
    .td-included-grid { grid-template-columns: 1fr; }
}
.td-included-col {
    border-radius: var(--td-radius-md);
    padding: var(--td-spacing-4);
    border: 1px solid var(--td-color-border);
}
.td-included-col h4 {
    font-size: 1.05rem;
    margin: 0 0 var(--td-spacing-3);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.td-included-col--yes {
    background: #ecfdf5;
    border-color: #c8e9d0;
}
.td-included-col--yes h4 { color: var(--td-color-success); }
.td-included-col--no {
    background: #fef2f2;
    border-color: #fdcdcd;
}
.td-included-col--no h4 { color: var(--td-color-danger); }
.td-included-col .td-rich ul {
    list-style: none;
    padding-left: 0;
}
.td-included-col .td-rich li {
    padding-left: 1.5rem;
    position: relative;
}
.td-included-col--yes .td-rich li::before {
    content: "✓";
    color: var(--td-color-success);
    position: absolute;
    left: 0;
    font-weight: 700;
}
.td-included-col--no .td-rich li::before {
    content: "✗";
    color: var(--td-color-danger);
    position: absolute;
    left: 0;
    font-weight: 700;
}

/* =============================================================================
   Extras (Dodaci) — prezentacijska lista dostupnih addons-a
   ============================================================================= */
.td-extras-intro {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0 0 var(--td-spacing-4);
    padding: var(--td-spacing-3);
    background: var(--td-color-bg-soft);
    border-left: 3px solid var(--td-color-primary);
    border-radius: var(--td-radius-sm);
    font-size: .95rem;
}
.td-extras-intro i { color: var(--td-color-primary); flex-shrink: 0; margin-top: .15rem; }
.td-extras-public-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--td-spacing-3);
}
.td-extras-public-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--td-spacing-4);
    padding: var(--td-spacing-4);
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-md);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.td-extras-public-item:hover {
    border-color: var(--td-color-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.td-extras-public-item__body { flex: 1 1 auto; min-width: 0; }
.td-extras-public-item__name {
    font-size: 1.05rem;
    margin: 0 0 .35rem;
    font-weight: 600;
}
.td-extras-public-item__desc { margin: 0; }
.td-extras-public-item__price {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}
.td-extras-public-item__price strong {
    display: block;
    font-size: 1.15rem;
    color: var(--td-color-primary);
}
.td-extras-public-item__label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--td-color-muted);
}
@media (max-width: 576px) {
    .td-extras-public-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--td-spacing-2);
    }
    .td-extras-public-item__price { text-align: left; }
}

/* =============================================================================
   Meeting / Address / Map
   ============================================================================= */
.td-address-block {
    background: var(--td-color-bg-soft);
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-md);
    padding: var(--td-spacing-3);
    margin: var(--td-spacing-3) 0;
}
.td-map {
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-md);
    overflow: hidden;
    margin-top: var(--td-spacing-4);
    aspect-ratio: 16 / 9;
    background: var(--td-color-bg-soft);
}
.td-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* #051 — "Otvori u Google Maps" CTA — minimalan link ispod mape sa hover lift */
.td-map-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--td-spacing-3);
    padding: 0.625rem 1rem;
    background: var(--td-color-bg-soft);
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-md);
    color: var(--td-color-text);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all 0.2s ease;
}
.td-map-cta:hover {
    background: #fff;
    border-color: var(--td-color-primary);
    color: var(--td-color-primary);
    transform: translateY(-1px);
    box-shadow: var(--td-shadow-sm);
}
.td-map-cta i.bi-geo-alt-fill { color: #dc2626; }
.td-map-cta i.bi-arrow-up-right { font-size: 0.8125rem; opacity: 0.6; }

.td-requirements-box {
    margin-top: var(--td-spacing-5);
    background: var(--td-color-bg-soft);
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-md);
    padding: var(--td-spacing-4);
}
.td-requirements-box h4 {
    font-size: 1rem;
    margin: 0 0 var(--td-spacing-2);
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* =============================================================================
   Reviews tab
   ============================================================================= */
.td-reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--td-spacing-3);
    border-bottom: 1px solid var(--td-color-border);
    padding-bottom: var(--td-spacing-4);
    margin-bottom: var(--td-spacing-4);
}
.td-reviews-avg {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.td-reviews-avg-num {
    font-size: 1.75rem;
    color: var(--td-color-text);
}
.td-reviews-avg-label {
    color: var(--td-color-muted);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.td-reviews-write-btn {
    background: var(--td-color-primary);
    color: #fff;
    border: 0;
    border-radius: var(--td-radius-md);
    padding: .6rem 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: background .2s;
}
.td-reviews-write-btn:hover { background: var(--td-color-primary-dk); }

.td-reviews-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--td-spacing-4);
}
.td-review-item {
    background: var(--td-color-bg-soft);
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-md);
    padding: var(--td-spacing-4);
}
.td-review-item__author {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: var(--td-spacing-2);
}
.td-review-item__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--td-color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.td-review-item__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.td-review-item__title {
    margin: var(--td-spacing-2) 0 var(--td-spacing-1);
    font-size: 1.05rem;
}
.td-review-item__body {
    margin: 0;
    line-height: 1.55;
    color: var(--td-color-text);
}

.td-reviews-load-more {
    display: block;
    margin: var(--td-spacing-5) auto 0;
    background: transparent;
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-md);
    padding: .65rem 1.5rem;
    color: var(--td-color-text);
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.td-reviews-load-more:hover {
    background: var(--td-color-bg-soft);
    border-color: var(--td-color-text);
}

.td-reviews-empty {
    color: var(--td-color-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Rating input (1-5 stars in write review modal) */
.td-rating-input {
    display: inline-flex;
    gap: .25rem;
}
.td-rating-input__star {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0 .15rem;
    font-size: 1.6rem;
    color: var(--td-color-border);
    transition: color .15s;
}
.td-rating-input__star.active,
.td-rating-input__star:hover,
.td-rating-input__star.hovering {
    color: var(--td-color-warning);
}
.td-rating-input__star i.bi-star-fill { color: var(--td-color-warning); }

/* =============================================================================
   Booking widget (sticky right)
   ============================================================================= */
.td-booking-widget {
    background: #fff;
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-lg);
    /* E4 — refined shadow tier (Apple HIG card depth) */
    box-shadow: var(--tr-shadow-2, var(--td-shadow-md));
    padding: var(--td-spacing-5);
    position: sticky;
    /* #083 v2 (2026-05-24): top: 0 — widget se lijepi za sam vrh viewport-a
       bez ikakve šupljine iznad. Tour detail strana nema sticky site-header
       u trenutnoj implementaciji (header se scrolluje sa stranom), pa widget
       može da bude pripijen za top viewport-a. */
    top: 0;
    transition: box-shadow 0.3s var(--tr-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.td-booking-widget:hover {
    box-shadow: var(--tr-shadow-3, var(--td-shadow-lg));
}
@media (max-width: 991px) {
    .td-booking-widget {
        position: static;
        margin-top: var(--td-spacing-4);
    }
}

.td-booking-widget__price {
    border-bottom: 1px solid var(--td-color-border);
    padding-bottom: var(--td-spacing-4);
    margin-bottom: var(--td-spacing-4);
    text-align: left;
}
.td-price-prefix {
    color: var(--td-color-muted);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: block;
}
.td-price-amount {
    font-size: 2rem;
    font-weight: 800;
    color: var(--td-color-primary);
    display: inline-block;
}
.td-price-original {
    text-decoration: line-through;
    color: var(--td-color-muted);
    margin-right: .5rem;
    font-size: 1.1rem;
}
.td-price-discounted {
    font-size: 2rem;
    font-weight: 800;
    color: var(--td-color-primary);
}
.td-price-suffix {
    color: var(--td-color-muted);
    font-size: .9rem;
    margin-left: .35rem;
}

.td-calendar-wrap { margin-bottom: var(--td-spacing-4); }

/* #101 (2026-05-24): Custom booking note — prikazuje se na widget-u kad
   tura nema definisanih polazaka (umjesto calendar/time picker-a). Suptilan
   info banner sa kalendar ikonom i porukom "Termin po dogovoru". */
.td-custom-booking-note {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: var(--td-spacing-4);
    background: #FFF7E6;
    border: 1px solid #F0D080;
    border-radius: 8px;
    color: #6B4F0E;
    line-height: 1.4;
}
.td-custom-booking-note > i {
    color: #B58F4F;
    font-size: 1.2rem;
    line-height: 1.2;
    margin-top: 2px;
    flex-shrink: 0;
}
.td-custom-booking-note strong {
    display: block;
    color: #3F2F0E;
    font-size: 0.96rem;
    margin-bottom: 2px;
}
.td-custom-booking-note p {
    margin: 0;
    font-size: 0.86rem;
    color: #6B4F0E;
}

.td-calendar-label {
    display: block;
    margin-bottom: var(--td-spacing-2);
    font-weight: 600;
    color: var(--td-color-text);
    font-size: .9rem;
}

#td-calendar {
    position: relative; /* anchor za .td-cal-loading overlay (D2) */
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-md);
    padding: var(--td-spacing-3);
    background: var(--td-color-bg-soft);
    min-height: 240px;
}

.td-cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--td-spacing-3);
}
.td-cal-nav {
    background: transparent;
    border: 0;
    color: var(--td-color-text);
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: 50%;
    transition: background .2s;
}
.td-cal-nav:hover { background: rgba(0,0,0,.05); }
.td-cal-nav:disabled { opacity: .35; cursor: not-allowed; }
.td-cal-month-label {
    font-weight: 700;
    text-transform: capitalize;
}
.td-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
    font-size: .85rem;
}
.td-cal-dow {
    color: var(--td-color-muted);
    font-weight: 600;
    padding: 4px 0;
    text-transform: uppercase;
    font-size: .7rem;
}
.td-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    /* E4 — Apple micro-interaction: smooth bg + scale */
    transition: background 0.15s var(--tr-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                transform 0.12s var(--tr-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                border-color 0.15s linear;
    border: 1px solid transparent;
    background: transparent;
    color: var(--td-color-text);
}
/* E4 — clickable cells get subtle scale-up on hover, scale-down on active */
.td-cal-day.is-available:hover,
.td-cal-day.is-low:hover,
.td-cal-day.is-selected:hover {
    transform: scale(1.06);
}
.td-cal-day.is-available:active,
.td-cal-day.is-low:active {
    transform: scale(0.97);
}
.td-cal-day.is-blank { visibility: hidden; }
.td-cal-day.is-disabled {
    color: var(--td-color-muted);
    opacity: .4;
    cursor: not-allowed;
}
.td-cal-day.is-available {
    background: #e8f5ee;
    color: var(--td-color-success);
    font-weight: 600;
}
.td-cal-day.is-available:hover {
    background: #cfeadb;
    border-color: var(--td-color-success);
}
.td-cal-day.is-low {
    background: #fff7ed;
    color: #c87a04;
    font-weight: 600;
}
.td-cal-day.is-low:hover { background: #fde8c3; }
.td-cal-day.is-soldout {
    background: var(--td-color-bg-soft);
    color: var(--td-color-muted);
    text-decoration: line-through;
    cursor: not-allowed;
}
/* Cancelled — vizualno različito od soldout: niža opacity + line-through.
   Soldout = prodato (full house), cancelled = otkazano od strane operatora.
   Per Faza 8.5 promt, ekvivalentno .tr-calendar__day--cancelled BEM modifier-u. */
.td-cal-day.is-cancelled {
    opacity: 0.3;
    color: var(--td-color-muted);
    text-decoration: line-through;
    cursor: not-allowed;
    pointer-events: none;
    background: transparent;
}
/* #109 (2026-05-25): Blocked — admin je markirao datum kao nedostupan
   (flex_tour_blocked_dates) za hourly always-available ture. Vizuelno
   razlikujemo od cancelled (per-departure cancel) preko crveno-pastel
   bg + diagonal strikethrough. */
.td-cal-day.is-blocked {
    background: rgba(220, 38, 38, 0.08);
    color: rgba(220, 38, 38, 0.7);
    text-decoration: line-through;
    cursor: not-allowed;
    pointer-events: none;
    border-color: rgba(220, 38, 38, 0.2);
}
.td-cal-modal__body .td-cal-day.is-blocked {
    background: rgba(220, 38, 38, 0.08);
    color: rgba(220, 38, 38, 0.7);
    text-decoration: line-through;
    cursor: not-allowed;
}
/* Date strip varijanta */
.td-date-strip__day.is-blocked {
    background: rgba(220, 38, 38, 0.08);
    color: rgba(220, 38, 38, 0.7);
    text-decoration: line-through;
    cursor: not-allowed;
    pointer-events: none;
    border-color: rgba(220, 38, 38, 0.2);
}
.td-cal-day.is-selected {
    background: var(--td-color-primary);
    color: #fff;
    border-color: var(--td-color-primary-dk);
}

/* Loading overlay (D2) — absolute pozicionisan preko grid-a, semi-transparent.
   Kalendar grid ostaje "pod" overlay-em pa se ne pomjera (no layout shift). */
.td-cal-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .5rem;
    background: rgba(255, 255, 255, .82);
    border-radius: var(--td-radius-md);
    z-index: 5;
    pointer-events: auto; /* blokira klik na grid ispod */
    backdrop-filter: blur(1px);
}
.td-cal-loading__spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 107, 53, .2);
    border-top-color: var(--td-color-primary);
    border-radius: 50%;
    animation: tdCalSpin 0.8s linear infinite;
}
.td-cal-loading__msg {
    color: var(--td-color-muted);
    font-size: .85rem;
    font-weight: 600;
}
@keyframes tdCalSpin {
    to { transform: rotate(360deg); }
}

.td-calendar-empty {
    margin: var(--td-spacing-3) 0 0;
    color: var(--td-color-muted);
    background: var(--td-color-bg-soft);
    border: 1px dashed var(--td-color-border);
    border-radius: var(--td-radius-md);
    padding: var(--td-spacing-3);
    text-align: center;
    font-size: .9rem;
}

/* =============================================================================
   E2 — 7-day horizontal date strip (sidebar default view)
   Inspirisan VivioTours/GetYourGuide patternom: kompaktan strip 7 dana
   sa "Više datuma" pill ispod koji otvara full-month modal.
   ============================================================================= */
.td-date-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}
.td-date-strip__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.5rem 0.2rem;
    border: 1px solid var(--td-color-border);
    border-radius: 0.6rem;
    background: #fff;
    color: var(--td-color-text);
    font-family: inherit;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
    min-width: 0;
    /* 2026-05-25: clip "TODAY"/"TOMORROW" badge ako je širi od pill-a — bez
       ovog overflow-a, dugi engleski/ruski labeli su prelivali u susjedne
       pillove (grid 7-col → svaki pill je ~14% viewport-a, na 320-360px je
       to ispod ~50px za "TOMORROW" 8 karaktera × 0.6rem). */
    overflow: hidden;
}
.td-date-strip__day:hover:not(:disabled) {
    border-color: var(--td-color-primary);
    transform: translateY(-1px);
}
.td-date-strip__day:disabled,
.td-date-strip__day.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.td-date-strip__day.is-soldout,
.td-date-strip__day.is-cancelled {
    opacity: 0.5;
    text-decoration: line-through;
    cursor: not-allowed;
}
.td-date-strip__day.is-low {
    border-color: #f59e0b;
    background: #fff7ed;
}
.td-date-strip__day.is-selected {
    background: var(--td-color-primary);
    border-color: var(--td-color-primary);
    color: #fff;
}
.td-date-strip__day.is-selected .td-date-strip__dow,
.td-date-strip__day.is-selected .td-date-strip__month {
    color: rgba(255, 255, 255, 0.85);
}
.td-date-strip__badge {
    /* 2026-05-25: kompaktan eyebrow — sprečava overlap u 7-col grid-u na
       uskim ekranima. Dugi labeli ("TOMORROW", "ЗАВТРА", "TOMORROW") se
       odsijeku elipsom umjesto da prelivaju u susjedni pill. */
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--td-color-primary);
    line-height: 1;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}
.td-date-strip__day.is-selected .td-date-strip__badge { color: #fff; }

.td-date-strip__dow {
    font-size: 0.7rem;
    color: var(--td-color-muted);
    text-transform: uppercase;
    line-height: 1;
}
.td-date-strip__num {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
}
.td-date-strip__month {
    font-size: 0.65rem;
    color: var(--td-color-muted);
    text-transform: uppercase;
    line-height: 1;
}

/* "Više datuma" trigger — full-width ghost dugme sa orange dashed borderom */
.td-more-dates-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 1rem;
    border: 1px dashed var(--td-color-primary);
    border-radius: 0.6rem;
    background: transparent;
    color: var(--td-color-primary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background .15s ease, border-style .15s ease;
}
.td-more-dates-btn:hover {
    background: rgba(255, 140, 66, 0.08);
    border-style: solid;
}
.td-more-dates-btn i { font-size: 1rem; }

/* =============================================================================
   E2 — Full-month calendar MODAL (premium iOS-style)
   Position: fixed overlay sa backdrop-om. Otvara se klikom na "Više datuma".
   Layout match-uje screenshot (orange gradient header sa 2 reda, round day cells).
   ============================================================================= */
.td-cal-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.td-cal-modal[hidden] { display: none; }
.td-cal-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.td-cal-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: td-cal-modal-in .25s cubic-bezier(.2, .7, .3, 1);
}
@keyframes td-cal-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ---- Header — orange gradient sa 2 reda ---- */
.td-cal-modal__header {
    background: linear-gradient(180deg, #ff6b35 0%, #ed5826 100%);
    color: #fff;
    padding: 1.1rem 1.25rem 1.4rem;
}
.td-cal-modal__header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.td-cal-modal__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.td-cal-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
    padding: 0;
}
.td-cal-modal__close:hover { background: rgba(255, 255, 255, 0.35); }
.td-cal-modal__close:active { transform: scale(0.92); }

/* Month navigation row — < Maj 2026 > */
.td-cal-modal__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.td-cal-modal__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
    padding: 0;
}
.td-cal-modal__nav-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.35); }
.td-cal-modal__nav-btn:active:not(:disabled) { transform: scale(0.92); }
.td-cal-modal__nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.td-cal-modal__month-label {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    flex: 1;
    text-transform: capitalize;
    letter-spacing: 0.01em;
}

/* ---- Body — calendar grid sa round cells ---- */
.td-cal-modal__body {
    padding: 1.25rem 1rem 1rem;
}
.td-cal-modal__body #td-calendar { min-height: 280px; position: relative; }

/* Override grid + day cells SAMO unutar modal-a (stari sticky-sidebar style ostaje) */
.td-cal-modal__body .td-cal-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 0.45rem 0.25rem;
}
.td-cal-modal__body .td-cal-dow {
    color: #94a3b8;
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: capitalize;
    letter-spacing: 0;
    padding-bottom: 0.4rem;
}
.td-cal-modal__body .td-cal-day {
    aspect-ratio: 1;
    width: 100%;
    max-width: 44px;
    margin: 0 auto;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: #1f2937;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease, color .15s ease;
}
.td-cal-modal__body .td-cal-day.is-blank { visibility: hidden; }

/* Disabled (prošli/no departure) — light grey rounded background, faded text */
.td-cal-modal__body .td-cal-day.is-disabled {
    background: rgba(148, 163, 184, 0.10);
    color: rgba(148, 163, 184, 0.85);
    cursor: not-allowed;
    opacity: 1; /* override stari opacity 0.4 */
}
/* Available — clean text, hover light grey */
.td-cal-modal__body .td-cal-day.is-available {
    background: transparent;
    color: #1f2937;
    font-weight: 500;
}
.td-cal-modal__body .td-cal-day.is-available:hover {
    background: rgba(255, 107, 53, 0.10);
    transform: scale(1.05);
}
/* Low spots (last 1-3) — subtle orange tint */
.td-cal-modal__body .td-cal-day.is-low {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    font-weight: 600;
}
.td-cal-modal__body .td-cal-day.is-low:hover {
    background: rgba(245, 158, 11, 0.20);
}
/* Sold out — strikethrough, muted */
.td-cal-modal__body .td-cal-day.is-soldout {
    background: rgba(148, 163, 184, 0.08);
    color: #94a3b8;
    text-decoration: line-through;
    cursor: not-allowed;
}
/* Cancelled — totalno priglušeno, slično disabled */
.td-cal-modal__body .td-cal-day.is-cancelled {
    background: transparent;
    color: rgba(148, 163, 184, 0.55);
    text-decoration: line-through;
    cursor: not-allowed;
    opacity: 1;
}
/* Selected — orange filled circle sa glow shadow */
.td-cal-modal__body .td-cal-day.is-selected {
    background: #ff6b35;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.45),
                0 0 0 4px rgba(255, 107, 53, 0.15);
}
.td-cal-modal__body .td-cal-day.is-selected:hover {
    background: #ed5826;
    transform: scale(1.05);
}

/* ---- Footer — Danas (ghost) + Gotovo (primary) ---- */
.td-cal-modal__footer {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem 1.25rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.td-cal-modal__btn {
    flex: 1;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    border: 0;
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.td-cal-modal__btn:active { transform: scale(0.97); }
.td-cal-modal__btn--ghost {
    background: rgba(148, 163, 184, 0.12);
    color: #6b7280;
}
.td-cal-modal__btn--ghost:hover {
    background: rgba(148, 163, 184, 0.20);
    color: #1f2937;
}
.td-cal-modal__btn--primary {
    background: #ff6b35;
    color: #fff;
    flex: 1.5; /* "Gotovo" je širi (kao na slici) */
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.30);
}
.td-cal-modal__btn--primary:hover {
    background: #ed5826;
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.40);
}

body.td-modal-open { overflow: hidden; }

/* Mobile — full-screen modal sa puno prostora za prst */
@media (max-width: 480px) {
    .td-cal-modal { padding: 0.5rem; }
    .td-cal-modal__dialog { max-width: 100%; }
    .td-cal-modal__body .td-cal-day { max-width: 40px; font-size: 0.9rem; }
    .td-cal-modal__month-label { font-size: 1.15rem; }
}


/* Pax stepper */
.td-pax-stepper {
    border-top: 1px solid var(--td-color-border);
    padding-top: var(--td-spacing-4);
    margin-bottom: var(--td-spacing-4);
}
.td-pax-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--td-spacing-2) 0;
}
.td-pax-row__labels {
    display: flex;
    flex-direction: column;
}
.td-pax-row__labels strong { font-size: .95rem; }
.td-pax-info {
    color: var(--td-color-muted);
    font-size: .8rem;
}
.td-pax-row__controls {
    display: inline-flex;
    align-items: center;
    gap: var(--td-spacing-3);
}
.td-pax-btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--td-color-border);
    background: #fff;
    color: var(--td-color-text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.td-pax-btn:hover:not(:disabled) {
    background: var(--td-color-bg-soft);
    border-color: var(--td-color-text);
}
.td-pax-btn:disabled { opacity: .4; cursor: not-allowed; }
.td-pax-count {
    min-width: 24px;
    text-align: center;
    font-weight: 700;
}

/* Tiered mode — dropdown umjesto +/- stepera */
.td-pax-stepper[data-mode="tiered"] { padding-top: var(--td-spacing-4); }
.td-tier-label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--td-spacing-2);
    font-size: .9rem;
}
.td-tier-select {
    width: 100%;
    border-radius: var(--td-radius-sm);
    border: 1px solid var(--td-color-border);
    padding: .55rem .75rem;
    font-size: .95rem;
    background: #fff;
    color: var(--td-color-text);
    transition: border-color .15s, box-shadow .15s;
}
.td-tier-select:focus {
    outline: 0;
    border-color: var(--td-color-primary);
    box-shadow: 0 0 0 .15rem rgba(255, 107, 53, .15);
}
.td-tier-empty {
    margin: var(--td-spacing-2) 0 0;
    font-size: .9rem;
}
.td-tier-note {
    margin-top: var(--td-spacing-2);
    color: var(--td-color-muted);
    font-size: .8rem;
    line-height: 1.4;
}

/* Private mode — info banner ispod stepera */
.td-private-note {
    margin: var(--td-spacing-3) 0 0;
    color: var(--td-color-muted);
    font-size: .8rem;
    line-height: 1.4;
}

/* Total + CTA */
.td-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--td-spacing-3) 0;
    border-top: 1px solid var(--td-color-border);
    border-bottom: 1px solid var(--td-color-border);
    margin-bottom: var(--td-spacing-4);
}
.td-total-label {
    font-weight: 600;
    color: var(--td-color-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .8rem;
}
.td-total-amount {
    font-size: 1.4rem;
    color: var(--td-color-primary);
}
.td-book-cta {
    width: 100%;
    background: var(--td-color-primary);
    color: #fff;
    border: 0;
    border-radius: var(--td-radius-md);
    padding: .85rem 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    /* E4 — Apple-grade transitions sa scale-press feedback-om */
    transition: background 0.2s var(--tr-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                box-shadow 0.2s var(--tr-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                transform 0.12s var(--tr-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.td-book-cta:hover:not(:disabled) {
    background: var(--td-color-primary-dk);
    box-shadow: var(--tr-shadow-2, 0 4px 12px rgba(255, 107, 53, .25));
}
.td-book-cta:active:not(:disabled) {
    transform: scale(0.98);
}
.td-book-cta:disabled {
    background: var(--td-color-bg-soft);
    color: var(--td-color-muted);
    cursor: not-allowed;
}
.td-book-hint {
    margin: .5rem 0 0;
    color: var(--td-color-muted);
    font-size: .85rem;
    text-align: center;
}

.td-policy-link {
    margin-top: var(--td-spacing-4);
    border-top: 1px solid var(--td-color-border);
    padding-top: var(--td-spacing-4);
}
.td-policy-link summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--td-color-text);
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.td-policy-link summary::-webkit-details-marker { display: none; }
.td-policy-link summary::before {
    content: "+";
    width: 20px;
    text-align: center;
    font-weight: 700;
    color: var(--td-color-primary);
}
.td-policy-link[open] summary::before { content: "−"; }
.td-policy-link .td-rich {
    margin-top: var(--td-spacing-3);
    font-size: .9rem;
    color: var(--td-color-muted);
}

/* =============================================================================
   Related tours
   ============================================================================= */
.td-related {
    margin-top: var(--td-spacing-6);
}
.td-related h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 var(--td-spacing-4);
}
/* Related tours — 3-col grid (3 vertikalne kartice u jednoj liniji) na desktop+tablet, 2-col na užim, 1-col na mobile.
   Koristi shared `tc-card` markup iz partials/tour-card.php (isti kao homepage
   i tours archive). Paritet sa `home-featured__grid` na naslovnoj. */
.td-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
/* Tablet — 2 kartice u redu */
@media (max-width: 1023.98px) {
    .td-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* Mobile — 1 kartica (vertikalni stack) */
@media (max-width: 639.98px) {
    .td-related-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin-inline: auto;
    }
}

/* Legacy .td-related-card markup — više se ne koristi (zamjenjeno tc-card-om).
   Stari stilovi zadržani DOLJE radi backward-compat (ako je markup negdje
   drugdje keširan), ali safe da se izbrišu u sljedećoj revizi. */
.td-related-card {
    display: block;
    background: #fff;
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--td-shadow-sm);
    transition: transform .2s, box-shadow .2s;
}
.td-related-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--td-shadow-md);
    color: inherit;
}
.td-related-card__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--td-color-bg-soft);
}
.td-related-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s;
}
.td-related-card:hover .td-related-card__image img { transform: scale(1.05); }

.td-related-card__body {
    padding: var(--td-spacing-3);
}
.td-related-card__title {
    margin: 0 0 .35rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.td-related-card__rating {
    color: var(--td-color-warning);
    font-size: .85rem;
    margin-right: .5rem;
}
.td-related-card__price {
    margin-top: .5rem;
    font-size: .9rem;
}
.td-related-card__price .tr-price-amount {
    color: var(--td-color-primary);
    font-weight: 700;
    font-size: 1.05rem;
}
.td-related-card__price .tr-price-discounted {
    color: var(--td-color-primary);
    font-weight: 700;
}
.td-related-card__price .tr-price-original {
    text-decoration: line-through;
    color: var(--td-color-muted);
    font-size: .85rem;
}
.td-related-card__price .tr-price-prefix {
    color: var(--td-color-muted);
    font-size: .8rem;
    text-transform: uppercase;
}

/* =============================================================================
   Booking modal (multi-step) — Bootstrap-compat markup ali bez Bootstrap JS-a.
   FlexModal handler iz tour-booking.js otvara/zatvara dodavanjem .show klase
   na .modal element + body.modal-open + .modal-backdrop element u DOM-u.
   ============================================================================= */
/* Base modal — sakriven po default-u, .show toggle-ujemo iz JS-a */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    width: 100%;
    height: 100%;
}
.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translate(0, -50px);
}
.modal.show .modal-dialog { transform: none; }
.modal-dialog {
    position: relative;
    width: auto;
    margin: 0.5rem;
    pointer-events: none;
}
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}
.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 1rem);
    overflow: hidden;
}
.modal-dialog-scrollable .modal-body { overflow-y: auto; }
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: var(--td-radius-lg);
    outline: 0;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
}
.modal-title { margin: 0; line-height: 1.5; }
.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}
.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
    gap: 0.5rem;
}
.btn-close {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E") center/1em auto no-repeat;
    border: 0;
    width: 1em; height: 1em;
    padding: .25em;
    cursor: pointer;
    opacity: .5;
}
.btn-close:hover { opacity: .75; }

/* Modal sizes */
@media (min-width: 576px) {
    .modal-dialog { max-width: 500px; margin: 1.75rem auto; }
    .modal-dialog-centered { min-height: calc(100% - 3.5rem); }
    .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 3.5rem); }
}
@media (min-width: 992px) {
    .modal-lg { max-width: 800px; }
}

/* Backdrop — otvarac modal poziva FlexModal.ensureBackdrop() koji
   appendje <div class="modal-backdrop fade flex-modal-backdrop"> u body.
   E4 — subtle Apple-style backdrop blur za depth ispod modal-a. */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity .15s linear;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal-backdrop.show { opacity: 1; }
@supports not (backdrop-filter: blur(4px)) {
    .modal-backdrop { background: rgba(0, 0, 0, 0.5); }
    .modal-backdrop.show { opacity: 1; }
}

/* Body lock — sprječava scroll dok je modal otvoren */
body.modal-open { overflow: hidden; }

/* Fade utility za .modal i .modal-backdrop */
.fade {
    transition: opacity .15s linear;
    opacity: 0;
}
.fade.show, .modal.show { opacity: 1; }

/* Tour-specific overrides — primjenjuju se NA postojeći .modal markup */
.td-booking-modal .modal-content {
    border-radius: var(--td-radius-lg);
    overflow: hidden;
}
.td-booking-modal .modal-header {
    border-bottom: 1px solid var(--td-color-border);
    background: var(--td-color-bg-soft);
}

.td-stepper {
    list-style: none;
    padding: var(--td-spacing-3) var(--td-spacing-4);
    margin: 0;
    display: flex;
    gap: var(--td-spacing-2);
    border-bottom: 1px solid var(--td-color-border);
    background: #fff;
    counter-reset: step;
    overflow-x: auto;
    scrollbar-width: none;
}
.td-stepper::-webkit-scrollbar { display: none; }
.td-stepper li {
    display: flex;
    align-items: center;
    gap: var(--td-spacing-2);
    color: var(--td-color-muted);
    font-size: .85rem;
    font-weight: 600;
    flex: 0 0 auto;
}
.td-stepper li + li::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--td-color-border);
    margin-right: var(--td-spacing-2);
}
.td-stepper__num {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--td-color-bg-soft);
    border: 1px solid var(--td-color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
}
.td-stepper li.active {
    color: var(--td-color-primary);
}
.td-stepper li.active .td-stepper__num {
    background: var(--td-color-primary);
    color: #fff;
    border-color: var(--td-color-primary-dk);
}
.td-stepper li.completed {
    color: var(--td-color-success);
}
.td-stepper li.completed .td-stepper__num {
    background: var(--td-color-success);
    color: #fff;
    border-color: var(--td-color-success);
}

/* Step content */
.td-step { padding: 0; }

/* Generic .d-none utility — Bootstrap CSS nije učitan u frontend layout-u,
   pa Bootstrap-ova .d-none klasa nije dostupna. Tour-detail markup i JS koriste
   .d-none za inicijalno skrivene step-ove, submit button, discount row, pickup
   address wrap itd. — bez ovog selektora svi bi se prikazivali u start state-u.
   Refaktor 2026-05-13: dodato kao globalna utility unutar tour-detail scope-a.
   2026-05-17: Dodato .td-bk2-summary za checkout page summary card (deposit
   row, discount row, balance paragraf) — bez ovog scope-a "Avans —"
   placeholder se prikazivao iako JS guard nikad ne ukloni d-none. */
.td-step.d-none,
.td-final-row.d-none,
.td-pickup-address-wrap.d-none,
.td-participants-section.d-none,
.td-booking-section__form .d-none,
.td-booking-card .d-none,
.td-bk2-summary .d-none,
.td-bk2-summary__row.d-none {
    display: none !important;
}

/* Step 1 summary */
.td-summary {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--td-spacing-3) var(--td-spacing-4);
    align-items: baseline;
}
.td-summary dt {
    color: var(--td-color-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .04em;
}
.td-summary dd {
    margin: 0;
    font-weight: 600;
}

/* Step 2 extras */
.td-extras-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--td-spacing-2);
}
.td-extra-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--td-spacing-3);
    background: var(--td-color-bg-soft);
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-md);
    padding: var(--td-spacing-3);
}
.td-extra-row__label {
    flex: 1;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 0;
}
.td-extra-row__label .badge { margin-left: .5rem; font-size: .75rem; }
.td-extra-row__qty {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}
.td-extra-row__qty input[type="number"] {
    width: 70px;
}
.td-extra-row__price {
    text-align: right;
    font-weight: 700;
    color: var(--td-color-primary);
    white-space: nowrap;
}
.td-extra-row__price small { display: block; color: var(--td-color-muted); font-weight: 500; }

/* Step 4 final breakdown */
.td-final-breakdown {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--td-spacing-4);
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-md);
    overflow: hidden;
}
.td-final-breakdown li {
    display: flex;
    justify-content: space-between;
    padding: var(--td-spacing-3);
    border-bottom: 1px solid var(--td-color-border);
}
.td-final-breakdown li:last-child { border-bottom: 0; }
.td-final-breakdown li small { display: block; color: var(--td-color-muted); }

.td-final-totals {
    background: var(--td-color-bg-soft);
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-md);
    padding: var(--td-spacing-3);
}
.td-final-row {
    display: flex;
    justify-content: space-between;
    padding: .35rem 0;
    font-size: .95rem;
}
.td-final-row--total {
    border-top: 1px solid var(--td-color-border);
    margin-top: .5rem;
    padding-top: .65rem;
    font-size: 1.15rem;
    color: var(--td-color-primary);
}
.td-final-row--discount strong { color: var(--td-color-success); }

.td-final-consent {
    margin-top: var(--td-spacing-4);
    background: var(--td-color-bg-soft);
    border-radius: var(--td-radius-md);
    padding: var(--td-spacing-3);
    border: 1px solid var(--td-color-border);
}
.td-final-consent .form-check-label a {
    color: var(--td-color-primary);
    text-decoration: underline;
}

/* Modal footer */
.td-modal-footer {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--td-color-border);
    background: var(--td-color-bg-soft);
}

/* Passenger names */
.td-passenger-names {
    background: var(--td-color-bg-soft);
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-md);
    padding: var(--td-spacing-3);
    margin-top: var(--td-spacing-3);
}
.td-passenger-names .td-pax-name-row {
    display: flex;
    gap: var(--td-spacing-2);
    margin-bottom: var(--td-spacing-2);
}
.td-passenger-names .td-pax-name-row label {
    flex: 0 0 100px;
    font-weight: 600;
    color: var(--td-color-muted);
    font-size: .85rem;
    align-self: center;
}

/* hCaptcha widget container — centriran ispod terms checkbox-a */
.td-captcha {
    display: flex;
    justify-content: center;
    margin-top: var(--td-spacing-3);
    min-height: 78px; /* prevent layout shift dok widget učita */
}
.td-captcha iframe { max-width: 100%; }

/* Hero gallery Swiper — fix-aspect ratio za stable LCP */
.td-swiper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--td-color-bg-soft);
    border-radius: var(--td-radius-lg);
    overflow: hidden;
}
.td-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.td-swiper .swiper-button-prev,
.td-swiper .swiper-button-next {
    color: #fff;
    background: rgba(0, 0, 0, .35);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    --swiper-navigation-size: 18px;
    transition: background .2s;
}
.td-swiper .swiper-button-prev:hover,
.td-swiper .swiper-button-next:hover { background: rgba(0, 0, 0, .55); }
.td-swiper .swiper-pagination-bullet {
    background: #fff;
    opacity: .55;
}
.td-swiper .swiper-pagination-bullet-active {
    background: #fff;
    opacity: 1;
}

/* ============================================================
   Responsive — tablet < 992px, mobile < 768px
   ============================================================ */
@media (max-width: 991.98px) {
    .td-swiper { aspect-ratio: 16 / 10; }
}
@media (max-width: 767.98px) {
    .td-swiper { aspect-ratio: 4 / 3; border-radius: var(--td-radius-md); }
    .td-pax-stepper[data-mode="tiered"] { padding-top: var(--td-spacing-3); }
    .td-pax-row { padding: var(--td-spacing-1) 0; }
    .td-modal-footer {
        flex-wrap: wrap;
        gap: .5rem;
    }
    .td-modal-footer button { flex: 1 1 auto; }
    .td-captcha { transform: scale(.92); transform-origin: center top; }
}

/* =============================================================================
   Participants UI (D3) — strukturirana lista putnika u Step 3 modal-a.
   Renderuje se iz JS-a (renderParticipants) na osnovu pax brojeva.
   ============================================================================= */
.td-participants-section {
    background: var(--td-color-bg-soft);
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-md);
    padding: var(--td-spacing-3);
    margin-bottom: var(--td-spacing-4);
}
.td-participants-list {
    display: flex;
    flex-direction: column;
    gap: var(--td-spacing-2);
}
.td-participant-row {
    display: grid;
    grid-template-columns: 90px 1fr 1fr;
    gap: var(--td-spacing-2);
    align-items: center;
}
.td-participant-num {
    font-weight: 600;
    font-size: .85rem;
    color: var(--td-color-muted);
    white-space: nowrap;
}
.td-participant-type {
    font-weight: 400;
    font-size: .75rem;
    color: var(--td-color-primary);
    text-transform: lowercase;
}

/* Mobile <576px → stack vertikalno (label + 2 inputa u jednoj koloni) */
@media (max-width: 575.98px) {
    .td-participant-row {
        grid-template-columns: 1fr;
        gap: var(--td-spacing-1);
        padding-bottom: var(--td-spacing-2);
        border-bottom: 1px dashed var(--td-color-border);
    }
    .td-participant-row:last-child { border-bottom: 0; }
}

/* =============================================================================
   E3 — Mobile fullscreen booking sheet (Faza 8.5).
   Single-DOM pattern: sticky widget na desktop ↔ fullscreen sheet na mobile.
   Sheet header + FAB bar su vidljivi samo na mobile breakpoint-u.
   FlexModal pattern reuse: body.td-sheet-open lock + backdrop kroz pseudo-el.
   ============================================================================= */
/* Desktop: shell je "transparent" za grid layout — widget postaje direktan grid
   child sa full .td-layout height kao sticky scroll context. Bez ovoga sticky
   widget nema gdje da klizi (shell ima isti height kao widget). */
.td-booking-shell {
    position: relative;
    display: contents;
}
/* Mobile (<768px): shell ponovo postaje normalni blok jer su FAB + sheet
   transformacije zavisni od shell-a kao positioning anchor. */
@media (max-width: 767.98px) {
    .td-booking-shell {
        display: block;
    }
}

/* Desktop default — sheet header skriven, FAB skriven */
.td-booking-sheet__header,
.td-booking-fab {
    display: none;
}

/* Mobile breakpoint — widget se transformiše u fullscreen sheet */
@media (max-width: 767.98px) {
    /* Sheet container (postojeći aside.td-booking-widget) */
    .td-booking-widget {
        position: fixed;
        inset: 0;
        z-index: 1060;
        margin: 0;
        padding: var(--td-spacing-4);
        padding-bottom: calc(var(--td-spacing-4) + env(safe-area-inset-bottom, 0));
        background: var(--tr-frosted-bg);
        backdrop-filter: var(--tr-frosted-blur);
        -webkit-backdrop-filter: var(--tr-frosted-blur);
        border: 0;
        border-radius: var(--tr-radius-xl) var(--tr-radius-xl) 0 0;
        box-shadow: var(--tr-shadow-4);
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateY(100%);
        /* 0.25s — brz feedback nakon X tap-a. Mora ostati u sync-u sa
           SHEET_EXIT_MS u tour-calendar.js setupMobileSheet(). */
        transition: transform 0.25s var(--tr-ease-out);
        will-change: transform;
        -webkit-overflow-scrolling: touch;
    }
    .td-booking-shell.is-sheet-open .td-booking-widget {
        transform: translateY(0);
        pointer-events: auto;
    }
    /* DEFINITIVAN guard (2026-05-21): kad shell NIJE u is-sheet-open state-u,
       widget MORA biti off-screen i ne-interaktivan. !important sprečava bilo
       koji drugi CSS pravilo da ga zadrži vidljivim (cache, specificity,
       inline style itd.). Ovo je hard fallback za iOS Safari render bug-ove. */
    .td-booking-shell:not(.is-sheet-open) .td-booking-widget {
        transform: translateY(100%) !important;
        pointer-events: none !important;
    }

    /* Fallback za browsere bez backdrop-filter — opaque solid */
    @supports not (backdrop-filter: blur(20px)) {
        .td-booking-widget {
            background: rgba(255, 255, 255, 0.96);
        }
    }

    /* Sheet header — vidljiv samo dok je sheet open */
    .td-booking-sheet__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: var(--td-spacing-3);
        margin-bottom: var(--td-spacing-3);
        border-bottom: 1px solid var(--td-color-border);
    }
    .td-booking-sheet__title {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--td-color-text);
        font-family: var(--tr-font-display);
    }
    .td-booking-sheet__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* Apple HIG: 44x44 minimum touch target za pouzdan tap na iOS */
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: rgba(0, 0, 0, .06);
        color: var(--td-color-text);
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
        /* iOS Safari fix (2026-05-21): touch-action manipulation eliminiše
           300ms click delay i double-tap zoom gesture; bez ovoga iOS može
           "pojesti" tap na X dugme. tap-highlight daje vizuelni feedback. */
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, .12);
        -webkit-appearance: none;
        appearance: none;
        transition: background 0.18s var(--tr-ease-out);
        /* Stacking context guarantee — X mora biti iznad bilo kog header
           background-a / pseudo elemenata u istom contextu. */
        position: relative;
        z-index: 1;
    }
    .td-booking-sheet__close:hover,
    .td-booking-sheet__close:active {
        background: rgba(0, 0, 0, .12);
    }

    /* FAB — fixed bottom CTA bar; uvijek u DOM-u (display: flex), ali
       visibility/opacity/pointer-events se prebacuju zavisno od sheet state-a.
       NE koristimo display:none za toggle jer je instant — dok widget radi
       0.25s exit animaciju, FAB bi se odmah vratio i kupio drugi tap (uzrok
       "5 klikova" bug-a). Sa transition-delay na vraćanje, FAB čeka 0.25s
       da widget završi pa se onda pojavi. */
    .td-booking-fab {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1055;
        padding: var(--td-spacing-3) var(--td-spacing-4);
        padding-bottom: calc(var(--td-spacing-3) + env(safe-area-inset-bottom, 0));
        background: var(--tr-frosted-bg);
        backdrop-filter: var(--tr-frosted-blur);
        -webkit-backdrop-filter: var(--tr-frosted-blur);
        border-top: 1px solid rgba(0, 0, 0, .08);
        align-items: center;
        gap: var(--td-spacing-3);
        box-shadow: var(--tr-shadow-3);
        /* Default state (sheet closed): vidljiv, dohvatljiv. Delay na opacity
           i visibility = 0.25s ⇒ FAB se ne pojavi dok widget exit animacija
           ne završi. Bez delay-a, "5 klikova" bug se vraća. */
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition:
            opacity 0.2s ease 0.25s,
            transform 0.25s ease 0.25s,
            visibility 0s linear 0.25s;
    }
    @supports not (backdrop-filter: blur(20px)) {
        .td-booking-fab {
            background: rgba(255, 255, 255, 0.96);
        }
    }
    .td-booking-shell.is-sheet-open .td-booking-fab {
        /* Sheet je open ⇒ FAB se odmah sakriva (no delay). */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(100%);
        transition:
            opacity 0.2s ease,
            transform 0.25s ease,
            visibility 0s linear;
    }
    .td-booking-fab[hidden] {
        /* JS skida [hidden] tek nakon što verifikuje modal strukturu. Dok je
           [hidden] aktivan, FAB je potpuno display:none. */
        display: none;
    }
    .td-booking-fab__price {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        line-height: 1.2;
    }
    .td-booking-fab__price-label {
        font-size: .68rem;
        text-transform: uppercase;
        color: var(--td-color-muted);
        font-weight: 600;
        letter-spacing: .05em;
    }
    .td-booking-fab__price-amount {
        font-size: 1.05rem;
        color: var(--td-color-primary);
        font-weight: 700;
    }
    .td-booking-fab__cta {
        flex: 1 1 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
        padding: .75rem 1rem;
        background: var(--td-color-primary);
        color: #fff;
        border: 0;
        border-radius: var(--tr-radius-pill);
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.2s var(--tr-ease-out), transform 0.12s var(--tr-ease-out);
    }
    .td-booking-fab__cta:hover { background: var(--td-color-primary-dk); }
    .td-booking-fab__cta:active { transform: scale(0.97); }
    .td-booking-fab__cta:disabled {
        background: var(--td-color-muted);
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* Backdrop — pseudo-element na shell-u kad je sheet open */
    .td-booking-shell.is-sheet-open::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 1058;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    /* Body lock dok je sheet otvoren — class postavlja JS */
    body.td-sheet-open {
        overflow: hidden;
    }
}

/* =============================================================================
   E5 — A11y polish (Faza 8.5).
   Focus-visible: keyboard-only outline-i sa primary color (Apple HIG).
   Reduced motion: poštujemo prefers-reduced-motion za korisnike sa motion
   sensitivity (vestibular disorders, etc.).
   ============================================================================= */

/* Focus-visible — interactive elementi dobijaju jasan keyboard outline.
   :focus-visible engaguje SAMO kad korisnik dolazi tabom (ne na klik miša). */
.td-cal-day:focus-visible,
.td-pax-btn:focus-visible,
.td-book-cta:focus-visible,
.td-booking-fab__cta:focus-visible,
.td-tabs .nav-link:focus-visible,
.td-extras-list label:focus-within,
.tr-tour-card__link:focus-visible,
.tr-chip:focus-visible,
.tr-pill:focus-visible,
.tr-pagination__link:focus-visible {
    outline: 2px solid var(--td-color-primary);
    outline-offset: 2px;
    border-radius: var(--tr-radius-md, 8px);
}

/* Sheet close X — outline bez border-radius override-a (drži kružni 50% stil).
   Prije fix-a (2026-05-21), inkluzija u gornji selektor grupi je override-ovala
   border-radius sa 50% na 8px nakon klika → X bi postao kvadrat. */
.td-booking-sheet__close:focus-visible {
    outline: 2px solid var(--td-color-primary);
    outline-offset: 2px;
}

/* Klikabilna kartica — focus na sam link sav DOM ide outline preko cijele kartice */
.tr-tour-card:focus-within {
    border-color: var(--td-color-primary);
}

/* Reduced motion — poništi sve animacije/transitions/transforms za korisnike
   koji imaju OS prefer-reduced-motion. Preserve-uje funkcionalnost,
   uklanja samo vizualne pokrete. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Sheet i modal — zadržati funkcionalnost (open/close radi), ali bez
       slide animacija. Transform se trenutno postavi (no animation). */
    .td-booking-widget,
    .modal,
    .modal-backdrop,
    .flex-toast {
        transition: none !important;
    }
    .td-booking-widget {
        will-change: auto;
    }
    /* Hover scale-up/down disabled */
    .td-cal-day:hover,
    .td-cal-day:active,
    .tr-tour-card:hover,
    .td-book-cta:active,
    .td-booking-fab__cta:active {
        transform: none !important;
    }
}

/* =============================================================================
   Inline Booking Section (premium body flow) — refaktor 2026-05-13.
   Zamjena za prijašnji Bootstrap modal #td-booking-modal. Sekcija je
   `display:none` (atribut `hidden`) sve dok korisnik ne klikne "Rezerviši"
   CTA u widget-u — onda JS skida atribut + dodaje `.is-open` klasu, a CSS
   animira reveal (slide-down + fade-in).

   Layout pyramide:
       <section.td-booking-section>
         .td-booking-section__container (centered, max-width 980px)
           header (back link + eyebrow + title)
           ol.td-stepper (4 koraka, circular nodes + connectors)
           form
             .td-booking-section__body (white card stack)
               .td-step.td-booking-card x4 (svaki je pojedinačni step)
             footer .td-booking-section__footer (sticky desktop, total + actions)
   ============================================================================= */
.td-booking-section {
    background: linear-gradient(180deg, var(--td-color-bg-soft) 0%, var(--td-color-bg) 70%);
    border-top: 1px solid var(--td-color-border);
    padding: var(--td-spacing-6) 0;
    margin-top: var(--td-spacing-6);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
    scroll-margin-top: 80px; /* prostor pri smooth scroll-u (account for sticky nav) */
}
.td-booking-section.is-open {
    opacity: 1;
    transform: translateY(0);
}
.td-booking-section[hidden] {
    display: none !important;
}
.td-booking-section__container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--td-spacing-4);
}

/* Header — back link iznad title-a */
.td-booking-section__header {
    margin-bottom: var(--td-spacing-5);
}
.td-booking-section__close {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: transparent;
    border: 0;
    color: var(--td-color-muted);
    font-size: .9rem;
    font-weight: 600;
    padding: .4rem .8rem .4rem 0;
    cursor: pointer;
    margin-bottom: var(--td-spacing-3);
    transition: color .2s;
}
.td-booking-section__close:hover {
    color: var(--td-color-primary);
}
.td-booking-section__close i {
    font-size: 1rem;
}

.td-booking-section__heading {
    margin: 0;
}
.td-booking-section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(40, 167, 69, .08);
    color: var(--td-color-success);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .35rem .7rem;
    border-radius: 100px;
    margin-bottom: var(--td-spacing-3);
}
.td-booking-section__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--td-color-text);
    margin: 0;
}
.td-booking-section__title-tour {
    color: var(--td-color-primary);
    display: inline;
}

/* Stepper override — circular numbered nodes sa animated connector */
.td-booking-section__stepper {
    background: #fff;
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-lg);
    padding: var(--td-spacing-4) var(--td-spacing-5);
    margin-bottom: var(--td-spacing-4);
    box-shadow: var(--td-shadow-sm);
    display: flex;
    justify-content: space-between;
    gap: 0;
    overflow-x: auto;
    list-style: none;
}
.td-booking-section__stepper li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    flex: 1 1 0;
    min-width: 80px;
    position: relative;
    color: var(--td-color-muted);
    font-weight: 600;
    font-size: .85rem;
    text-align: center;
}
/* Connector linija između step nodes */
.td-booking-section__stepper li + li::before {
    content: "";
    position: absolute;
    top: 18px; /* center of node circle */
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--td-color-border);
    z-index: 0;
    transition: background .3s;
}
.td-booking-section__stepper li.completed + li::before,
.td-booking-section__stepper li.active::before {
    background: var(--td-color-primary);
}
.td-booking-section__stepper li .td-stepper__num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--td-color-border);
    color: var(--td-color-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    margin: 0;
    position: relative;
    z-index: 1;
    transition: all .25s;
}
.td-booking-section__stepper li.active .td-stepper__num {
    background: var(--td-color-primary);
    border-color: var(--td-color-primary);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(255, 107, 53, .15);
}
.td-booking-section__stepper li.completed .td-stepper__num {
    background: var(--td-color-success);
    border-color: var(--td-color-success);
    color: #fff;
}
.td-booking-section__stepper li.completed .td-stepper__num::before {
    /* Replace number sa check icon kad je step završen */
    content: "\F26E"; /* bi-check-lg */
    font-family: "bootstrap-icons";
    font-size: 1.1rem;
}
.td-booking-section__stepper li.completed .td-stepper__num {
    font-size: 0;
}
.td-booking-section__stepper li.active {
    color: var(--td-color-primary);
}
.td-booking-section__stepper .td-stepper__label {
    margin: 0;
    line-height: 1.2;
}

/* Form body — flat stack of card sections */
.td-booking-section__form {
    display: flex;
    flex-direction: column;
    gap: var(--td-spacing-4);
}
.td-booking-section__body {
    display: flex;
    flex-direction: column;
    gap: var(--td-spacing-4);
}

/* Step card — one per step */
.td-booking-card {
    background: #fff;
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-lg);
    padding: var(--td-spacing-5);
    box-shadow: var(--td-shadow-sm);
    animation: tdStepFadeIn .3s ease;
}
@keyframes tdStepFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.td-booking-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--td-color-text);
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 var(--td-spacing-2);
}
.td-booking-card__title i {
    color: var(--td-color-primary);
    font-size: 1.4rem;
}
.td-booking-card__lead {
    color: var(--td-color-muted);
    font-size: .92rem;
    margin: 0 0 var(--td-spacing-4);
}
.td-booking-card__empty {
    background: var(--td-color-bg-soft);
    border: 1px dashed var(--td-color-border);
    border-radius: var(--td-radius-md);
    padding: var(--td-spacing-4);
    color: var(--td-color-muted);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

/* Step 1 summary refresh — compact key-value sa highlighted total */
.td-booking-card .td-summary {
    background: var(--td-color-bg-soft);
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-md);
    padding: var(--td-spacing-4);
    margin: 0;
}
.td-summary__subtotal {
    color: var(--td-color-primary);
    font-size: 1.15rem;
    font-weight: 800;
}

/* Step 3 fieldset blokovi — premium dizajn sa header (icon badge + title + help)
   i kolekcijom inputs-a unutra. 4 varijante (default, primary, callout, secondary)
   sa različitim background-ima da vizuelno odvajaju namjenu. */
.td-form-fieldset {
    background: var(--td-color-bg-soft);
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-md);
    padding: var(--td-spacing-4);
    margin-bottom: var(--td-spacing-3);
    transition: border-color .2s, box-shadow .2s;
}
.td-form-fieldset:last-child { margin-bottom: 0; }
.td-form-fieldset:focus-within {
    border-color: var(--td-color-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, .08);
}
.td-form-fieldset--primary {
    background: #fff;
    border-color: var(--td-color-border);
    box-shadow: var(--td-shadow-sm);
}
.td-form-fieldset--callout {
    background: linear-gradient(135deg, #fff8e6, #fef0d0);
    border-color: #f6deaa;
}
.td-form-fieldset--secondary {
    background: #fafbfc;
}
.td-form-fieldset__header {
    display: flex;
    align-items: flex-start;
    gap: var(--td-spacing-3);
    margin-bottom: var(--td-spacing-3);
}
.td-form-fieldset__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--td-radius-md);
    background: rgba(255, 107, 53, .08);
    color: var(--td-color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.td-form-fieldset--callout .td-form-fieldset__icon {
    background: rgba(184, 121, 19, .15);
    color: #b87913;
}
.td-form-fieldset--secondary .td-form-fieldset__icon {
    background: rgba(108, 123, 138, .12);
    color: var(--td-color-muted);
}
.td-form-fieldset__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--td-color-text);
    line-height: 1.3;
}
.td-form-fieldset__help {
    margin: .15rem 0 0;
    color: var(--td-color-muted);
    font-size: .85rem;
    line-height: 1.4;
}

/* Premium input-group sa ikona prefix-om (person/envelope/telephone/...) */
.td-input-group {
    transition: box-shadow .15s;
}
.td-input-group .input-group-text {
    background: #fff;
    border-color: var(--td-color-border);
    color: var(--td-color-muted);
    font-size: 1rem;
    padding-left: .85rem;
    padding-right: .85rem;
}
.td-input-group .form-control,
.td-input-group .form-select {
    border-color: var(--td-color-border);
    padding: .55rem .85rem;
    font-size: .95rem;
}
.td-input-group:focus-within .input-group-text {
    color: var(--td-color-primary);
    border-color: var(--td-color-primary);
}
.td-input-group .form-control:focus,
.td-input-group .form-select:focus {
    border-color: var(--td-color-primary);
    box-shadow: none;
}
.td-input-group:focus-within {
    border-radius: var(--td-radius-md);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, .12);
}

/* Pickup callout check — vizuelno bogatiji od običnog Bootstrap form-check.
   Title + help linije ispod naslova checkbox-a. */
.td-pickup-check {
    padding: 0;
    background: transparent;
    border: 0;
    margin: 0;
}
.td-pickup-check .form-check-input {
    margin-top: .35rem;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}
.td-pickup-check .form-check-input:checked {
    background-color: var(--td-color-primary);
    border-color: var(--td-color-primary);
}
.td-pickup-check .form-check-label {
    margin-left: .25rem;
    cursor: pointer;
}
.td-pickup-check__title {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    color: var(--td-color-text);
    font-size: 1rem;
}
.td-pickup-check__title i {
    color: #b87913;
    font-size: 1.1rem;
}
.td-pickup-check__help {
    display: block;
    color: var(--td-color-muted);
    font-size: .85rem;
    margin-top: .15rem;
    line-height: 1.4;
}

/* Section subtitle (zamjena za eyebrow koja je premještena u Step 4) */
.td-booking-section__subtitle {
    color: var(--td-color-muted);
    font-size: 1rem;
    margin: var(--td-spacing-2) 0 0;
    line-height: 1.5;
}

/* Step 4 — eyebrow "Sigurna rezervacija" sad ide na vrhu poslednje kartice
   (umjesto na svakom step-u). Add small spacing iznad title-a. */
.td-booking-card .td-booking-section__eyebrow {
    margin: 0 0 var(--td-spacing-3);
}

/* Premium footer — sticky na desktop sa total pillom + akcionim dugmadima */
.td-booking-section__footer {
    background: #fff;
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-lg);
    padding: var(--td-spacing-4) var(--td-spacing-5);
    box-shadow: var(--td-shadow-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--td-spacing-4);
    flex-wrap: wrap;
    position: sticky;
    bottom: 16px;
    z-index: 10;
}
.td-booking-section__footer-total {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    flex: 0 0 auto;
}
.td-booking-section__footer-total[hidden] {
    display: none !important;
}
.td-booking-section__footer-total-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: var(--td-color-muted);
}
.td-booking-section__footer-total-amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--td-color-primary);
    line-height: 1;
}
.td-booking-section__footer-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.td-booking-section__footer-actions .btn {
    min-width: 120px;
    padding: .7rem 1.4rem;
    font-weight: 600;
    border-radius: var(--td-radius-md);
}
.td-booking-section__footer-actions .btn-primary {
    background: var(--td-color-primary);
    border-color: var(--td-color-primary);
}
.td-booking-section__footer-actions .btn-primary:hover {
    background: var(--td-color-primary-dk);
    border-color: var(--td-color-primary-dk);
}
.td-booking-section__footer-actions .btn-success {
    background: var(--td-color-success);
    border-color: var(--td-color-success);
    box-shadow: 0 4px 14px rgba(40, 167, 69, .25);
}

/* Mobile responsive — stepper labels skrivene na <576px (samo brojevi),
   footer prelazi u stack layout. */
@media (max-width: 575.98px) {
    .td-booking-section { padding: var(--td-spacing-4) 0; }
    .td-booking-section__container { padding: 0 var(--td-spacing-3); }
    .td-booking-card { padding: var(--td-spacing-4); }
    .td-booking-section__stepper {
        padding: var(--td-spacing-3);
    }
    .td-booking-section__stepper .td-stepper__label {
        font-size: .7rem;
    }
    .td-booking-section__stepper li .td-stepper__num {
        width: 30px; height: 30px;
        font-size: .85rem;
    }
    .td-booking-section__stepper li + li::before {
        top: 15px;
    }
    .td-booking-section__footer {
        flex-direction: column;
        align-items: stretch;
        position: static;
        padding: var(--td-spacing-3);
    }
    .td-booking-section__footer-total {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: .5rem;
        padding-bottom: var(--td-spacing-3);
        border-bottom: 1px solid var(--td-color-border);
    }
    .td-booking-section__footer-actions {
        justify-content: stretch;
    }
    .td-booking-section__footer-actions .btn {
        flex: 1 1 0;
        min-width: 0;
        padding: .65rem .8rem;
    }
}

/* Reduced motion — disable animacije */
@media (prefers-reduced-motion: reduce) {
    .td-booking-section,
    .td-booking-card,
    .td-booking-section__stepper li .td-stepper__num {
        transition: none !important;
        animation: none !important;
    }
    .td-booking-section__stepper li.active .td-stepper__num {
        transform: none;
    }
}