/* La Hiška Čatež — main.css (preneseno iz inline <style> v index.html), v=1 */
:root {
            --bg0: #070A12;
            --bg1: #0B1222;
            --glass: rgba(255, 255, 255, .08);
            --glass2: rgba(255, 255, 255, .12);
            --text: rgba(255, 255, 255, .92);
            --muted: rgba(255, 255, 255, .68);
            --accent: #7CFFB2;
            --accent2: #7CC8FF;
            --accent3: #FFB86B;
            --danger: #FF6B6B;
        }

        html,
        body {
            height: 100%;
        }

        body {
            font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
            background: radial-gradient(1200px 800px at 20% 10%, rgba(124, 255, 178, .18), transparent 60%), radial-gradient(900px 600px at 90% 20%, rgba(124, 200, 255, .14), transparent 55%), radial-gradient(1000px 800px at 60% 95%, rgba(255, 184, 107, .10), transparent 60%), linear-gradient(180deg, var(--bg0), var(--bg1) 55%, #050711);
            color: var(--text);
            overflow-x: hidden;
        }

        /* Soft noise overlay */
        .noise::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .08;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="160" height="160" filter="url(%23n)" opacity="0.45"/></svg>');
            mix-blend-mode: overlay;
            z-index: 0;
        }

        /* Glass */
        .glass {
            background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .06));
            border: 1px solid rgba(255, 255, 255, .14);
            box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
        }

        .glass-soft {
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .12);
        }

        /* Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            padding: .85rem 1.05rem;
            border-radius: 1rem;
            border: 1px solid rgba(255, 255, 255, .14);
            background: rgba(255, 255, 255, .06);
            transition: transform .15s ease, background .15s ease, border-color .15s ease;
        }

        .btn:hover {
            transform: translateY(-1px);
            background: rgba(255, 255, 255, .10);
            border-color: rgba(255, 255, 255, .22);
        }

        .btn:active {
            transform: translateY(0px) scale(.99);
        }

        .btn-primary {
            border: 1px solid rgba(124, 255, 178, .30);
            background: linear-gradient(180deg, rgba(124, 255, 178, .18), rgba(124, 255, 178, .07));
        }

        .btn-primary:hover {
            background: linear-gradient(180deg, rgba(124, 255, 178, .25), rgba(124, 255, 178, .10));
        }            

        /* Bentral: subtle highlight when scrolling to reservation form */
        .bentral-highlight {
            box-shadow: 0 0 0 3px rgba(124, 200, 255, .45), 0 18px 60px rgba(0, 0, 0, .35);
            animation: bentralPulse 1.3s ease-out 1;
            border-radius: 1rem;
        }

        @keyframes bentralPulse {
            0%   { box-shadow: 0 0 0 0 rgba(124, 200, 255, 0), 0 18px 60px rgba(0, 0, 0, .35); }
            40%  { box-shadow: 0 0 0 6px rgba(124, 200, 255, .35), 0 18px 60px rgba(0, 0, 0, .35); }
            100% { box-shadow: 0 0 0 3px rgba(124, 200, 255, 0), 0 18px 60px rgba(0, 0, 0, .35); }
        }
.btn-blue {
            border: 1px solid rgba(124, 200, 255, .32);
            background: linear-gradient(180deg, rgba(124, 200, 255, .18), rgba(124, 200, 255, .06));
        }

        
            /* Light green button used only for Gallery browse CTA */
            .btn-green-light {
                background: rgba(134, 239, 172, 0.90) !important;
                border: 1px solid rgba(22, 163, 74, 0.35) !important;
                color: #0b2e13 !important;
                box-shadow: 0 10px 24px rgba(22, 163, 74, 0.12) !important;
            }
            .btn-green-light:hover {
                background: rgba(74, 222, 128, 0.95) !important;
                border-color: rgba(22, 163, 74, 0.45) !important;
            }
.btn-orange {
            border: 1px solid rgba(255, 184, 107, .30);
            background: linear-gradient(180deg, rgba(255, 184, 107, .18), rgba(255, 184, 107, .06));
        }

        .btn-danger {
            border: 1px solid rgba(255, 107, 107, .30);
            background: linear-gradient(180deg, rgba(255, 107, 107, .18), rgba(255, 107, 107, .07));
        }

        .btn-danger:hover {
            background: linear-gradient(180deg, rgba(255, 107, 107, .25), rgba(255, 107, 107, .10));
        }

        /* Focus */
        :focus-visible {
            outline: 2px solid rgba(124, 255, 178, .55);
            outline-offset: 2px;
        }

        /* Floating blur blobs */
        .blob {
            filter: blur(48px);
            opacity: .55;
            transform: translate3d(0, 0, 0);
        }

        /* Cloud card */
        .cloud {
            position: relative;
            overflow: hidden;
            border-radius: 1.75rem;
        }

        .cloud::before {
            content: "";
            position: absolute;
            inset: -2px;
            background: radial-gradient(500px 220px at 30% 25%, rgba(124, 255, 178, .18), transparent 60%), radial-gradient(420px 240px at 80% 30%, rgba(124, 200, 255, .14), transparent 60%), radial-gradient(560px 300px at 60% 110%, rgba(255, 184, 107, .12), transparent 65%);
            z-index: 0;
        }

        .cloud::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .05));
            border: 1px solid rgba(255, 255, 255, .14);
            border-radius: 1.75rem;
            z-index: 0;
        }

        /* Subtle animated sheen */
        @keyframes sheen {
            0% {
                transform: translateX(-120%) skewX(-12deg);
                opacity: 0;
            }

            15% {
                opacity: .18;
            }

            35% {
                opacity: .10;
            }

            55% {
                opacity: .0;
            }

            100% {
                transform: translateX(140%) skewX(-12deg);
                opacity: 0;
            }
        }

        .sheen {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
            overflow: hidden;
            border-radius: 1.75rem;
        }

        .sheen::before {
            content: "";
            position: absolute;
            top: -40%;
            left: -40%;
            width: 60%;
            height: 180%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
            animation: sheen 6.5s ease-in-out infinite;
        }

        /* Results animation */
        .reveal {
            animation: reveal .32s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
        }

        @keyframes reveal {
            0% {
                opacity: 0;
                transform: translateY(16px) scale(0.96);
            }

            70% {
                opacity: 0.8;
                transform: translateY(-2px) scale(1.02);
            }

            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* 3D Ticket Cloud Animation */
        @keyframes float3d {
            0% {
                transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0px);
            }

            25% {
                transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-10px);
            }

            50% {
                transform: perspective(1000px) rotateX(0deg) rotateY(-4deg) translateY(-5px);
            }

            75% {
                transform: perspective(1000px) rotateX(-2deg) rotateY(-2deg) translateY(-12px);
            }

            100% {
                transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0px);
            }
        }

        .cloud-3d {
            animation: float3d 6s ease-in-out infinite;
            box-shadow: 0 20px 50px rgba(124, 200, 255, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.1);
            background: linear-gradient(135deg, rgba(124, 200, 255, 0.15), rgba(255, 255, 255, 0.05));
            border: 1px solid rgba(124, 200, 255, 0.4);
        }

        /* Card hover effects for results */
        .result-card {
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        }

        .result-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
            border-color: rgba(255, 255, 255, 0.25);
        }

        /* Price badge animation */
        @keyframes pricePulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }

        .price-badge {
            animation: pricePulse 2s ease-in-out infinite;
        }

        /* Canvas sits behind */
        #ambient {
            position: fixed;
            inset: 0;
            z-index: 0;
        }

        /* Safari blur fallback */
        .backdrop {
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        /* Nice scroll */
        .scrollbar::-webkit-scrollbar {
            height: 10px;
            width: 10px;
        }

        .scrollbar::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, .16);
            border-radius: 12px;
        }

        .scrollbar::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, .05);
        }

        /* ===== Variant A (Light tourist) overrides ===== */
        :root {
            --bg0: #FAF8F4;
            --bg1: #FFFFFF;
            --glass: rgba(255, 255, 255, .82);
            --glass2: rgba(255, 255, 255, .92);
            --text: rgba(17, 24, 39, .95);
            --muted: rgba(55, 65, 81, .80);
            --accent: #1FA97A;
            /* primary */
            --accent2: #2C7BE5;
            /* secondary */
            --accent3: #E6A23C;
            /* warm */
            --danger: #E11D48;
        }

        body {
            background: radial-gradient(900px 600px at 10% 10%, rgba(44, 123, 229, .10), transparent 60%),
                radial-gradient(900px 700px at 90% 30%, rgba(31, 169, 122, .10), transparent 60%),
                radial-gradient(900px 700px at 40% 90%, rgba(230, 162, 60, .12), transparent 62%),
                linear-gradient(180deg, #FAF8F4 0%, #F6F3EE 45%, #F2EFE9 100%) !important;
            color: var(--text) !important;
        }

        /* hide ambient/canvas blobs for a cleaner, faster look */
        #ambient {
            display: none !important;
        }

        .blob {
            display: none !important;
        }

        /* make “glass” feel like soft cards */
        .glass {
            background: rgba(255, 255, 255, .86) !important;
            border-color: rgba(17, 24, 39, .10) !important;
            box-shadow: 0 18px 45px rgba(17, 24, 39, .10) !important;
        }

        .backdrop {
            backdrop-filter: blur(10px) !important;
        }

        /* neutralize old dark utility colors */
        .on-light .text-white,
        .on-light .text-white\/70,
        .on-light .text-white\/60,
        .on-light .text-white\/80,
        .on-light .text-white\/90 {
            color: var(--text) !important;
        }

        /* force white text on the Apply button in the datepicker overlay */
        #pdDpApply {
            color: #ffffff !important;
        }
        #pdDpApply:disabled {
            color: #ffffff !important;
        }

        .border-white\/15,
        .border-white\/10 {
            border-color: rgba(17, 24, 39, .10) !important;
        }

        .bg-white\/5,
        .bg-white\/10,
        .bg-white\/15,
        .bg-white\/20 {
            background-color: rgba(255, 255, 255, .70) !important;
        }

        /* pill buttons in nav */
        .pill {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .55rem .9rem;
            border-radius: 9999px;
            background: rgba(255, 255, 255, .92);
            border: 1px solid rgba(17, 24, 39, .10);
            color: rgba(17, 24, 39, .92);
            box-shadow: 0 10px 26px rgba(17, 24, 39, .08);
            transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
            font-weight: 800;
            font-size: .92rem;
            white-space: nowrap;
        }

        .pill:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 32px rgba(17, 24, 39, .10);
            background: #fff;
        }

        .pill.primary {
            background: rgba(230, 162, 60, .22);
            border-color: rgba(230, 162, 60, .35);
        }

        .pill.green {
            background: rgba(31, 169, 122, .16);
            border-color: rgba(31, 169, 122, .28);
        }

        .hero-wrap {
            border-radius: 28px;
            overflow: hidden;
        }

        .hero-media {
            position: relative;
            min-height: 360px;
            border-radius: 24px;
            overflow: hidden;
            background: #D1D5DB;
        }

        /* v2.32: Ensure hero slideshow image always fills container (prevents grey bars on mobile) */
        .hero-media > img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }


        .hero-media::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(17, 24, 39, .25) 0%, rgba(17, 24, 39, .10) 40%, rgba(17, 24, 39, 0) 70%);
            pointer-events: none;
        }

        .chip {
            display: inline-flex;
            align-items: center;
            padding: .35rem .75rem;
            border-radius: 9999px;
            background: rgba(17, 24, 39, .58);
            color: rgba(255, 255, 255, .92);
            font-weight: 800;
            font-size: .8rem;
            box-shadow: 0 10px 26px rgba(17, 24, 39, .22);
        }

        .dots {
            display: flex;
            gap: .4rem;
            align-items: center;
            justify-content: center;
        }

        .dot {
            width: .45rem;
            height: .45rem;
            border-radius: 9999px;
            background: rgba(17, 24, 39, .22);
            cursor: pointer;
        }

        .dot.active {
            background: rgba(230, 162, 60, .95);
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .35rem .75rem;
            border-radius: 9999px;
            background: rgba(230, 162, 60, .18);
            border: 1px solid rgba(230, 162, 60, .30);
            color: rgba(17, 24, 39, .90);
            font-weight: 900;
            font-size: .82rem;
        }

        .kpi {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            padding: .32rem .65rem;
            border-radius: 9999px;
            background: rgba(17, 24, 39, .06);
            border: 1px solid rgba(17, 24, 39, .14);
            color: rgba(17, 24, 39, .82) !important;
            font-weight: 850;
            font-size: .80rem;
            box-shadow: none;
            cursor: default;
            pointer-events: none;
            user-select: none;
        }

        .kpi::before {
            content: '✓';
            font-weight: 900;
            opacity: .72;
            line-height: 1;
        }

        /* ===== Variant A fixes: visible nav buttons ===== */
        .btn {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: .5rem !important;
            padding: .55rem .95rem !important;
            border-radius: 9999px !important;
            background: rgba(255, 255, 255, .92) !important;
            border: 1px solid rgba(17, 24, 39, .12) !important;
            color: rgba(17, 24, 39, .88) !important;
            font-weight: 800 !important;
            font-size: .92rem !important;
            box-shadow: 0 10px 26px rgba(17, 24, 39, .08) !important;
            transition: transform .12s ease, box-shadow .12s ease, background .12s ease !important;
            text-decoration: none !important;
            white-space: nowrap;
        }

        .btn:hover {
            transform: translateY(-1px) !important;
            box-shadow: 0 14px 32px rgba(17, 24, 39, .10) !important;
            background: #fff !important;
        }

        /* Booking button (and other .btn-blue) must stay visibly light-blue, not washed out */
        .btn.btn-blue {
            background: linear-gradient(180deg, rgba(124, 200, 255, .52), rgba(124, 200, 255, .28)) !important;
            border-color: rgba(124, 200, 255, .62) !important;
            color: rgba(17, 24, 39, .92) !important;
            box-shadow: 0 10px 26px rgba(124, 200, 255, .18) !important;
        }

        .btn.btn-blue:hover {
            background: linear-gradient(180deg, rgba(124, 200, 255, .60), rgba(124, 200, 255, .34)) !important;
            box-shadow: 0 14px 32px rgba(124, 200, 255, .22) !important;
        }

        .btn-primary {
            background: rgba(230, 162, 60, .22) !important;
            border-color: rgba(230, 162, 60, .38) !important;
        }

        .btn-primary:hover {
            background: rgba(230, 162, 60, .28) !important;
        }
.nav-more{
  position: relative;
}
.nav-more > summary{
  list-style: none;
  cursor: pointer;
}
.nav-more > summary::-webkit-details-marker{
  display: none;
}
.nav-more > summary::after{
  content: "›";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: .1rem;
  border-radius: 999px;
  background: rgba(124,200,255,.22);
  transform: rotate(90deg);
  transition: transform .14s ease;
}
.nav-more[open] > summary::after{
  transform: rotate(-90deg);
}
.nav-more-menu{
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  z-index: 80;
  width: 260px;
  padding: .55rem;
  border-radius: 22px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.96);
  box-shadow: 0 24px 60px rgba(17,24,39,.16);
}
.nav-more-menu a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: .72rem .85rem;
  border-radius: 16px;
  color: rgba(17,24,39,.88);
  font-weight: 900;
  text-decoration: none;
}
.nav-more-menu a::after{
  content: "›";
  color: rgba(44,123,229,.72);
  font-size: 1.15rem;
}
.nav-more-menu a:hover{
  background: rgba(124,200,255,.18);
}
.btn.text-[11px],
        .btn.text-xs {
            font-size: .82rem !important;
            padding: .45rem .75rem !important;
        }

        .price-amount {
            color: rgba(17, 24, 39, .92) !important;
            font-weight: 900 !important;
        }

        .fineprint {
            color: rgba(17, 24, 39, .75) !important;
        }

        .perk-card-strong {
            background: radial-gradient(1200px 240px at 10% 20%, rgba(230, 162, 60, .20), transparent 55%),
                radial-gradient(900px 220px at 90% 30%, rgba(31, 169, 122, .14), transparent 55%),
                rgba(255, 255, 255, .92) !important;
            border-color: rgba(230, 162, 60, .42) !important;
            box-shadow: 0 18px 40px rgba(17, 24, 39, .12), 0 1px 0 rgba(255, 255, 255, .75) inset !important;
            transform: translateY(-1px);
        }

        .perk-card-strong .perk-title {
            font-weight: 900;
        }

        .perk-card-strong .perk-text {
            color: rgba(17, 24, 39, .78) !important;
        }

        .cal-month {
            font-size: 13px !important;
        }

        /* ~ +30% from 10px */
        .deal-range {
            font-size: 1.5em !important;
        }

        /* +50% */

        /* ===== v6: enforce dark text on light theme ===== */
        .on-light .text-white,
        .on-light .text-white\/50,
        .on-light .text-white\/60,
        .on-light .text-white\/70,
        .on-light .text-white\/80,
        .on-light .text-white\/90,
        .on-light .text-slate-50,
        .on-light .text-gray-50,
        .on-light .text-zinc-50,
        .on-light .text-neutral-50 {
            color: rgba(17, 24, 39, .95) !important;
        }

        .on-light .placeholder\:text-white\/60::placeholder,
        .on-light .placeholder\:text-white\/70::placeholder,
        .on-light .placeholder\:text-white\/80::placeholder,
        .on-light .placeholder\:text-white::placeholder {
            color: rgba(55, 65, 81, .70) !important;
        }

        a,
        button {
            color: inherit;
        }

        /* ===== v6: premium 3D cloud highlight ===== */
        .kopalne-cloud {
            position: relative;
            border-radius: 26px;
            padding: 18px 18px;
            background:
                radial-gradient(140px 110px at 20% 20%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .72) 55%, rgba(255, 255, 255, .58) 100%),
                radial-gradient(260px 190px at 70% 15%, rgba(230, 162, 60, .28), transparent 62%),
                radial-gradient(320px 220px at 30% 95%, rgba(31, 169, 122, .22), transparent 66%),
                linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .68) 100%);
            border: 1px solid rgba(230, 162, 60, .42);
            box-shadow:
                0 26px 70px rgba(17, 24, 39, .12),
                inset 0 1px 0 rgba(255, 255, 255, .75),
                inset 0 -22px 55px rgba(17, 24, 39, .06);
            transform: translateZ(0);
        }

        .kopalne-cloud::before {
            content: "";
            position: absolute;
            inset: -3px;
            border-radius: 28px;
            background: linear-gradient(135deg, rgba(230, 162, 60, .35), rgba(44, 123, 229, .18), rgba(31, 169, 122, .18));
            filter: blur(18px);
            opacity: .55;
            z-index: 0;
            pointer-events: none;
        }

        .kopalne-cloud>* {
            position: relative;
            z-index: 1;
        }

        .kopalne-pill {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .35rem .7rem;
            border-radius: 9999px;
            background: rgba(230, 162, 60, .20);
            border: 1px solid rgba(230, 162, 60, .35);
            font-weight: 900;
            color: rgba(17, 24, 39, .90);
            font-size: .82rem;
            box-shadow: 0 14px 30px rgba(17, 24, 39, .10);
        }

        .kopalne-title {
            font-weight: 950;
            letter-spacing: -.02em;
            font-size: 1.12rem;
            color: rgba(17, 24, 39, .95);
        }

        .kopalne-sub {
            margin-top: .35rem;
            font-weight: 900;
            color: rgba(17, 24, 39, .82);
            line-height: 1.25;
        }

        .kopalne-sub strong {
            color: rgba(17, 24, 39, .95);
        }

        /* ===== v6: nav buttons look like buttons, not plain text ===== */
        .top-nav a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: .55rem .95rem;
            border-radius: 9999px;
            background: rgba(255, 255, 255, .92);
            border: 1px solid rgba(17, 24, 39, .12);
            box-shadow: 0 10px 26px rgba(17, 24, 39, .08);
            font-weight: 800;
            color: rgba(17, 24, 39, .92);
            transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
            white-space: nowrap;
        }

        .top-nav a:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 32px rgba(17, 24, 39, .10);
            background: #fff;
        }

        .top-nav a.cta {
            background: rgba(31, 169, 122, .16);
            border-color: rgba(31, 169, 122, .28);
        }

        .top-nav a.primary {
            background: rgba(230, 162, 60, .22);
            border-color: rgba(230, 162, 60, .35);
        }

        /* ===== v7: date picker (OD / DO) visibility ===== */
        label,
        .date-label,
        .from-label,
        .to-label {
            color: rgba(17, 24, 39, .95) !important;
            font-weight: 800;
        }

        input[type="date"],
        input[type="text"],
        select {
            color: rgba(17, 24, 39, .95) !important;
            background: rgba(255, 255, 255, .95) !important;
            border: 2px solid rgba(17, 24, 39, .25) !important;
            border-radius: 14px !important;
            padding: .55rem .7rem;
        }

        input[type="date"]::-webkit-calendar-picker-indicator {
            filter: invert(0);
            opacity: .85;
        }

        /* ===== v11: visual depth + typography fine-tuning ===== */
        body {
            background:
                radial-gradient(900px 600px at 10% 10%, rgba(44, 123, 229, .14), transparent 58%),
                radial-gradient(900px 700px at 90% 30%, rgba(31, 169, 122, .14), transparent 58%),
                radial-gradient(900px 700px at 40% 90%, rgba(230, 162, 60, .16), transparent 62%),
                linear-gradient(180deg, #FBF8F2 0%, #F4EFE6 48%, #EFE9DF 100%) !important;
            color: rgba(17, 24, 39, .95) !important;
            letter-spacing: -0.01em;
        }

        /* Headings */
        h1 {
            letter-spacing: -0.03em;
            line-height: 1.05;
        }

        h2 {
            letter-spacing: -0.02em;
            line-height: 1.15;
        }

        p {
            line-height: 1.55;
        }

        /* Soft section cards - add contrast (not white-on-white) */
        .glass {
            background: rgba(255, 255, 255, .86) !important;
            border-color: rgba(17, 24, 39, .12) !important;
            box-shadow:
                0 18px 50px rgba(17, 24, 39, .12),
                inset 0 1px 0 rgba(255, 255, 255, .70);
        }

        /* KPI chips - informational chips (not clickable) */
        .kpi {
            background: rgba(17, 24, 39, .06) !important;
            border-color: rgba(17, 24, 39, .14) !important;
            box-shadow: none !important;
            cursor: default !important;
            pointer-events: none;
            user-select: none;
        }
        .kpi:nth-child(1) {
            background: rgba(44, 123, 229, .10) !important;
            border-color: rgba(44, 123, 229, .18) !important;
        }

        .kpi:nth-child(2) {
            background: rgba(31, 169, 122, .10) !important;
            border-color: rgba(31, 169, 122, .18) !important;
        }

        .kpi:nth-child(3) {
            background: rgba(230, 162, 60, .12) !important;
            border-color: rgba(230, 162, 60, .22) !important;
        }

        .kpi:nth-child(4) {
            background: rgba(17, 24, 39, .06) !important;
            border-color: rgba(17, 24, 39, .14) !important;
        }

        /* Pills - slightly deeper colors for life */
        .pill {
            background: rgba(255, 255, 255, .94) !important;
            border-color: rgba(17, 24, 39, .14) !important;
            box-shadow: 0 12px 28px rgba(17, 24, 39, .10) !important;
            font-weight: 800;
        }

        .pill.primary {
            background: rgba(230, 162, 60, .28) !important;
            border-color: rgba(230, 162, 60, .40) !important;
        }

        .pill.green {
            background: rgba(31, 169, 122, .20) !important;
            border-color: rgba(31, 169, 122, .30) !important;
        }

        .pill.blue {
            background: rgba(44, 123, 229, .18) !important;
            border-color: rgba(44, 123, 229, .28) !important;
        }

        /* Cloud 3D tickets - darker (no white-on-white), more premium depth */
        .cloud-3d {
            border: 1px solid rgba(44, 123, 229, .18);
            background:
                radial-gradient(220px 160px at 20% 25%, rgba(44, 123, 229, .16), rgba(255, 255, 255, .72) 55%, rgba(255, 255, 255, .62) 100%),
                radial-gradient(260px 180px at 75% 15%, rgba(31, 169, 122, .18), transparent 62%),
                radial-gradient(320px 220px at 30% 95%, rgba(230, 162, 60, .18), transparent 66%),
                linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .72) 100%);
            box-shadow:
                0 26px 70px rgba(17, 24, 39, .14),
                inset 0 1px 0 rgba(255, 255, 255, .72),
                inset 0 -24px 60px rgba(17, 24, 39, .06);
        }

        /* Terasa card – give it its own tone */
        .perk-card {
            border-radius: 22px;
            border: 1px solid rgba(17, 24, 39, .12);
            background:
                radial-gradient(180px 120px at 15% 25%, rgba(230, 162, 60, .12), transparent 62%),
                linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .72) 100%);
            box-shadow:
                0 18px 48px rgba(17, 24, 39, .10),
                inset 0 1px 0 rgba(255, 255, 255, .65);
        }

        .perk-title {
            font-weight: 900;
            letter-spacing: -0.01em;
        }

        .perk-text {
            color: rgba(55, 65, 81, .86) !important;
            font-weight: 700;
        }

        /* Improve small text readability */
        .chip {
            background: rgba(17, 24, 39, .65) !important;
        }

        .badge,
        .kpi,
        .pill {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Make any remaining white text dark on light surfaces */
        .on-light .text-white,
        .on-light .text-white\/60,
        .on-light .text-white\/70,
        .on-light .text-white\/80,
        .on-light .text-white\/90 {
            color: rgba(17, 24, 39, .92) !important;
        }

        /* ===== v12: eliminate remaining white text inside light surfaces ===== */
        .on-light .glass .text-white,
        .on-light .glass .text-white\/50,
        .on-light .glass .text-white\/60,
        .on-light .glass .text-white\/70,
        .on-light .glass .text-white\/80,
        .on-light .glass .text-white\/90,
        .on-light .perk-card .text-white,
        .on-light .perk-card .text-white\/50,
        .on-light .perk-card .text-white\/60,
        .on-light .perk-card .text-white\/70,
        .on-light .perk-card .text-white\/80,
        .on-light .perk-card .text-white\/90,
        .on-light .cloud-3d .text-white,
        .on-light .cloud-3d .text-white\/50,
        .on-light .cloud-3d .text-white\/60,
        .on-light .cloud-3d .text-white\/70,
        .on-light .cloud-3d .text-white\/80,
        .on-light .cloud-3d .text-white\/90,
        .on-light .top-nav .text-white,
        .on-light .top-nav .text-white\/60,
        .on-light .top-nav .text-white\/70,
        .on-light .top-nav .text-white\/80,
        .on-light .top-nav .text-white\/90 {
            color: rgba(17, 24, 39, .95) !important;
        }

        button.text-white,
        a.text-white {
            color: rgba(17, 24, 39, .95) !important;
        }

        /* ===== v13: Mobile-first experience ===== */
        @media (max-width: 768px) {

            /* Reduce density, tighten typography */
            body {
                font-size: 16px;
            }

            h1 {
                font-size: 2.05rem !important;
            }

            .hero-wrap{
                padding:0 !important;
                background:transparent !important;
                border:0 !important;
                box-shadow:none !important;
                backdrop-filter:none !important;
                -webkit-backdrop-filter:none !important;
                border-radius:0 !important;
            }
            /* Hero chips: move ~30% lower on mobile (less overlap with image) */
            .hero-media .hero-chips{
                transform: translateY(25%);
            }

            .chip {
                font-size: .75rem !important;
                padding: .3rem .65rem !important;
            }

            .kpi {
                font-size: .78rem !important;
            }

            /* KPI chips: force single row on mobile */
            .kpi-row {
                flex-wrap: nowrap !important;
                gap: .35rem !important;
            }

            .kpi-row .kpi {
                flex: 1 1 0 !important;
                min-width: 0 !important;
                justify-content: center !important;
                padding: .26rem .45rem !important;
                font-size: .68rem !important;
                gap: .35rem !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }

            /* Allow the longest chip to be slightly smaller */

            .kpi-row .kpi:nth-child(3) {
                font-size: .64rem !important;
            }

            .pill {
                padding: .55rem .85rem !important;
            }

            /* Make long descriptive paragraphs shorter on mobile */
            .mobile-minimize {
                display: none !important;
            }

            .mobile-only {
                display: block !important;
            }

            /* Hide app-like bottom toolbar if exists */
            #bottomToolbar,
            .bottom-toolbar,
            .app-toolbar,
            .mobile-toolbar {
                display: none !important;
            }

            /* Corner sticky buttons */
            .corner-nav {
                position: fixed;
                inset: 0;
                pointer-events: none;
                z-index: 60;
            }

            .corner-nav a {
                pointer-events: auto;
                position: absolute;
                padding: .62rem .72rem;
                border-radius: 9999px;
                font-weight: 900;
                letter-spacing: -0.01em;
                font-size: .78rem;
                border: 1px solid rgba(17, 24, 39, .16);
                box-shadow: 0 16px 36px rgba(17, 24, 39, .14);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                display: flex;
                align-items: center;
                gap: .45rem;
                color: rgba(17, 24, 39, .92);
            }

            .corner-nav a svg {
                width: 16px;
                height: 16px;
            }

            .corner-nav a.top-left {
                top: 12px;
                left: 12px;
                background: rgba(44, 123, 229, .16);
                border-color: rgba(44, 123, 229, .22);
            }

            .corner-nav a.top-right {
                top: 12px;
                right: 12px;
                background: rgba(230, 162, 60, .22);
                border-color: rgba(230, 162, 60, .30);
            }

            /* At the very top of the page, push the 2 top sticky buttons down so the logo remains visible */
            html.at-top .corner-nav a.top-left,
            html.at-top .corner-nav a.top-right {
                top: calc(env(safe-area-inset-top) + 56px) !important;
            }

            .corner-nav a.bottom-left {
                bottom: 12px;
                left: 12px;
                background: rgba(31, 169, 122, .18);
                border-color: rgba(31, 169, 122, .26);
            }

            .corner-nav a.bottom-right {
                bottom: 12px;
                right: 12px;
                background: rgba(17, 24, 39, .08);
                border-color: rgba(17, 24, 39, .18);
            }

            /* Keep content above corner buttons (avoid overlap) */
            main {
                padding-bottom: 80px;
            }
        }

        /* ===== v13: Language modal ===== */
        /* ===== Kompakten jezikovni dropdown v headerju ===== */
        .lang-menu {
            position: relative;
        }

        .lang-menu-btn {
            min-width: 44px;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: .5rem .7rem;
        }

        .lang-menu-list {
            position: absolute;
            right: 0;
            top: calc(100% + 6px);
            z-index: 90;
            min-width: 178px;
            display: grid;
            gap: 2px;
            padding: 6px;
            border-radius: 14px;
            background: rgba(255, 255, 255, .97);
            border: 1px solid rgba(17, 24, 39, .14);
            box-shadow: 0 18px 44px rgba(17, 24, 39, .16);
        }

        .lang-menu-list[hidden] {
            display: none;
        }

        .lang-menu-list a {
            display: flex;
            align-items: center;
            min-height: 44px;
            padding: 0 12px;
            border-radius: 10px;
            font-weight: 800;
            font-size: .9rem;
            color: rgba(17, 24, 39, .88);
            text-decoration: none;
        }

        .lang-menu-list a:hover {
            background: rgba(17, 24, 39, .06);
        }

        .lang-menu-list a.is-active {
            background: rgba(44, 123, 229, .12);
            color: rgba(17, 24, 39, 1);
        }

        .lang-menu-list a.is-active::after {
            content: "✓";
            margin-left: auto;
            font-weight: 900;
        }

        /* ===== v15: TOP termini – make inner blocks full width (mobile) ===== */
/* ===== v15: TOP termini – make inner blocks full width (mobile) ===== */
        @media (max-width: 768px) {

            /* Ensure the whole TOP termini "cloud" and its inner blocks use full width */
            #termini .cloud,
            #termini .cloud.backdrop,
            #termini .glass-soft,
            #termini #results {
                width: 100% !important;
                max-width: none !important;
            }

            /* Reduce inner padding so calendars can grow */
            #termini .cloud.backdrop {
                padding: 12px !important;
            }

            #termini .glass-soft {
                padding: 12px !important;
            }

            /* Reduce the section horizontal padding slightly to reclaim space */
            section#termini {
                padding-left: 10px !important;
                padding-right: 10px !important;
            }

            /* Results grid stays 2 in a row, with tighter gap */
            #termini #results {
                grid-template-columns: 1fr 1fr !important;
                gap: 10px !important;
            }

            /* Calendar text slightly larger on mobile for readability */
            #termini .cal-month {
                font-size: 12px !important;
                color: rgba(17, 24, 39, .88) !important;
                font-weight: 900 !important;
            }

            #termini .cal-daynum {
                color: rgba(17, 24, 39, .82) !important;
            }

            #termini .cal-dow,
            #termini .cal-dow * {
                color: rgba(55, 65, 81, .75) !important;
            }

            #termini .result-card {
                margin: 0 !important;
            }
        }

        /* ===== v15: Mobile offer fullscreen viewer ===== */
        .offer-modal {
            position: fixed;
            inset: 0;
            z-index: 85;
            display: none;
            background: rgba(17, 24, 39, .45);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 14px;
            align-items: center;
            justify-content: center;
        }

        .offer-modal.open {
            display: flex;
        }

        .offer-modal-card {
            width: 100%;
            max-width: 520px;
            border-radius: 26px;
            background:
                radial-gradient(260px 180px at 20% 15%, rgba(44, 123, 229, .16), transparent 62%),
                radial-gradient(260px 180px at 85% 25%, rgba(31, 169, 122, .16), transparent 62%),
                radial-gradient(260px 180px at 50% 95%, rgba(230, 162, 60, .18), transparent 62%),
                rgba(255, 255, 255, .94);
            border: 1px solid rgba(17, 24, 39, .16);
            box-shadow: 0 40px 110px rgba(17, 24, 39, .35);
            overflow: hidden;
        }

        .offer-modal-topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 12px 12px 8px 12px;
            border-bottom: 1px solid rgba(17, 24, 39, .10);
            background: rgba(255, 255, 255, .78);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .offer-modal-btn {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            padding: .55rem .75rem;
            border-radius: 9999px;
            border: 1px solid rgba(17, 24, 39, .14);
            background: rgba(255, 255, 255, .92);
            box-shadow: 0 14px 34px rgba(17, 24, 39, .12);
            font-weight: 900;
            color: rgba(17, 24, 39, .92);
        }

        .offer-modal-btn svg {
            width: 16px;
            height: 16px;
        }

        .offer-modal-body {
            padding: 14px;
        }

        @media (max-width: 768px) {
            .offer-modal {
                padding: 10px;
            }

            .offer-modal-body {
                padding: 12px;
            }
        }

        /* ===== v16: Mobile TOP section – remove inner bubbles & maximize calendar width ===== */
        @media (max-width: 768px) {

            html,
            body {
                overflow-x: hidden;
            }

            /* Use full width for TOP section and remove extra side padding */
            section#termini {
                padding-left: 8px !important;
                padding-right: 8px !important;
            }

            /* Remove the two large inner "bubble" containers (keep content) */
            #termini .cloud.backdrop {
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
                padding: 0 !important;
            }

            #termini .glass-soft {
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
                padding: 0 !important;
            }

            /* If there are additional inner wrappers, neutralize them too */
            #termini .glass,
            #termini .backdrop {
                box-shadow: none !important;
            }

            /* Results grid: 2 in a row, but ensure no overflow */
            #termini #results {
                width: 100% !important;
                max-width: none !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 10px !important;
                padding: 0 !important;
                margin: 0 !important;
            }

            #termini #results>* {
                min-width: 0 !important;
            }

            /* Cards should fit exactly within column */
            #termini .result-card {
                width: 100% !important;
                margin: 0 !important;
            }

            /* If mini calendar has fixed width, force it to be responsive */
            #termini .mini-cal,
            #termini .mini-calendar,
            #termini .cal-wrap,
            #termini .calendar {
                width: 100% !important;
            }
        }

        /* ===== v17: restore thin border around each offer calendar card (mobile) ===== */
        @media (max-width: 768px) {
            #termini .result-card {
                border: 1px solid rgba(17, 24, 39, .14) !important;
                border-radius: 18px !important;
                background: rgba(255, 255, 255, .78) !important;
                box-shadow: 0 10px 26px rgba(17, 24, 39, .10) !important;
                padding: 8px !important;
                /* minimal spacing to separate cards */
                cursor: pointer;
            }

            #termini .result-card * {
                cursor: inherit;
            }

            /* Keep inner calendar tight */
            #termini .result-card .cal-wrap,
            #termini .result-card .mini-cal,
            #termini .result-card .mini-calendar {
                margin: 0 !important;
            }
        }

        /* ===== v18: Mobile TOP section – remove ALL outer frames, keep only card borders ===== */
        @media (max-width: 768px) {

            #termini .glass,
            #termini .glass.backdrop,
            #termini .backdrop,
            #termini .cloud,
            #termini .cloud.backdrop,
            #termini .glass-soft {
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
            }

            #termini .glass,
            #termini .glass.backdrop,
            #termini .cloud.backdrop,
            #termini .glass-soft {
                padding: 0 !important;
            }

            /* Keep section padding minimal */
            section#termini {
                padding-left: 8px !important;
                padding-right: 8px !important;
            }
        }

        /* ===== v19: restore thin bordered cards for offers (mobile) ===== */
        @media (max-width: 768px) {
            #termini .result-card {
                border: 1px solid rgba(17, 24, 39, .14) !important;
                border-radius: 18px !important;
                background: rgba(255, 255, 255, .78) !important;
                box-shadow: 0 10px 26px rgba(17, 24, 39, .10) !important;
                padding: 8px !important;
            }
        }

        
        /* ===== Calendar (single source of truth): DOW row + weekend coloring ===== */
        .cal-dow {
            color: rgba(55, 65, 81, .72) !important;
            font-weight: 900;
            letter-spacing: .02em;
        }

        .cal-dow .cal-dow-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 2px 0;
            border-radius: 10px;
            background: rgba(17, 24, 39, .06);
            border: 1px solid rgba(17, 24, 39, .10);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
            color: rgba(55, 65, 81, .78);
        }

        .cal-dow .cal-dow-weekend {
            color: rgba(220, 38, 38, .92) !important;
            font-weight: 950 !important;
        }

        .cal-dow .cal-dow-weekend .cal-dow-pill {
            background: rgba(220, 38, 38, .08);
            border-color: rgba(220, 38, 38, .18);
            color: rgba(220, 38, 38, .92);
        }

        /* Weekends (numbers + fallback spans) */
        #termini .cal-weekend,
        #termini .cal-weekend .cal-daynum,
        #termini .cal-weekend span {
            color: rgba(220, 38, 38, .98) !important;
            font-weight: 950 !important;
        }

        /* If a day is "stay" (already black on green), do not force red */
        #termini .cal-day.cal-weekend.bg-\[\#7CFFB2\],
        #termini .cal-day.cal-weekend[style*="linear-gradient"] {
            color: rgba(17, 24, 39, .92) !important;
        }

        /* ===== v28: Mobile layout – remove redundant frames, prevent right-edge clipping, remove bottom app nav ===== */
        @media (max-width: 768px) {

            /* Remove the app-style bottom nav */
            .md\:hidden.fixed.bottom-0.left-0.right-0.z-40 {
                display: none !important;
            }

            /* Global: prevent horizontal overflow issues */
            html,
            body {
                overflow-x: hidden;
            }

            *,
            *::before,
            *::after {
                box-sizing: border-box;
            }

            img,
            svg,
            video,
            canvas {
                max-width: 100%;
                height: auto;
            }

            /* Reduce section side padding to reclaim space */
            section.mx-auto.max-w-6xl {
                padding-left: 10px !important;
                padding-right: 10px !important;
            }

            /* Keep at most one wrapper per section: tighten the main glass card */
            section .glass.backdrop.rounded-3xl {
                width: 100% !important;
                max-width: none !important;
                padding: 12px !important;
                border: 1px solid rgba(17, 24, 39, .12) !important;
                background: rgba(255, 255, 255, .78) !important;
                box-shadow: 0 16px 42px rgba(17, 24, 39, .10) !important;
                overflow: hidden;
            }

            /* Remove nested glass/cards inside sections (redundant frames) */
            section .glass.backdrop.rounded-3xl .glass,
            section .glass.backdrop.rounded-3xl .glass-soft,
            section .glass.backdrop.rounded-3xl .cloud,
            section .glass.backdrop.rounded-3xl .backdrop {
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
            }

            section .glass.backdrop.rounded-3xl .glass,
            section .glass.backdrop.rounded-3xl .glass-soft,
            section .glass.backdrop.rounded-3xl .cloud,
            section .glass.backdrop.rounded-3xl .backdrop {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            /* Smart search / alarm: make forms truly edge-to-edge inside card */
            #cena input,
            #cena select,
            #cena textarea,
            #cena button,
            #cena a {
                max-width: 100% !important;
            }

            #cena .grid,
            #cena .flex {
                min-width: 0;
            }
        }

        /* ===== v29: Mobile remove "Najdi termin" button ===== */
        @media (max-width: 768px) {

            #termini button#btnNajdiTermine,
            #termini .btn-najdi-termin,
            #termini button[data-action="find"],
            #termini .find-term-btn {
                display: none !important;
            }

            /* fallback: hide any button with text "Najdi termin" (if built as <a>) */
            #termini a[href="#najdi"],
            #termini a[aria-label="Najdi termin"] {
                display: none !important;
            }
        }

        /* ===== v29: Sticky header look ===== */
        @media (min-width: 769px) {
            .top-nav.sticky {
                background: rgba(255, 255, 255, .86);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border-bottom: 1px solid rgba(17, 24, 39, .10);
                box-shadow: 0 10px 28px rgba(17, 24, 39, .06);
            }
        }

        /* ===== v31: active selection styling (fills whole button immediately) ===== */
        .btn.btn-active,
        .btn-active {
            background-color: rgba(31, 169, 122, .26) !important;
            background-image: none !important;
            border-color: rgba(31, 169, 122, .40) !important;
            color: rgba(17, 24, 39, .95) !important;
            box-shadow: 0 18px 40px rgba(31, 169, 122, .22) !important;
            transform: translateY(-1px);
        }

        .btn.btn-active:hover,
        .btn-active:hover,
        .btn.btn-active:active,
        .btn-active:active,
        .btn.btn-active:focus,
        .btn-active:focus {
            background-color: rgba(31, 169, 122, .30) !important;
            background-image: none !important;
            border-color: rgba(31, 169, 122, .46) !important;
            color: rgba(17, 24, 39, .95) !important;
        }

        /* ===== v48: CTA hierarchy polish ===== */
        .btn.btn-primary {
            font-weight: 900;
            letter-spacing: .01em;
            padding: 12px 18px;
            border-radius: 18px;
            box-shadow: 0 22px 50px rgba(17, 24, 39, .18);
            transform: translateY(0);
        }

        .btn.btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 26px 60px rgba(17, 24, 39, .20);
        }            

        /* Rezerviraj: light red CTA */
        .btn.btn-reserve {
            font-weight: 900;
            letter-spacing: .01em;
            padding: 12px 18px;
            border-radius: 18px;
            border: 1px solid rgba(255, 107, 107, .42) !important;
            
            color: rgba(17, 24, 39, .95) !important;
            box-shadow: 0 22px 50px rgba(255, 107, 107, .18) !important;
            transform: translateY(0);
        }

        .btn.btn-reserve:hover {
            transform: translateY(-1px);
            border-color: rgba(255, 107, 107, .55) !important;
            
            box-shadow: 0 26px 60px rgba(255, 107, 107, .20) !important;
        }

.btn.btn-secondary {
            font-weight: 800;
            padding: 11px 16px;
            border-radius: 16px;
        }

        .btn.btn-secondary.text-xs {
            opacity: .92;
        }

        /* Notification button: neutral but clear */
        a.btn.btn-secondary[href="#cena"] {
            background: rgba(17, 24, 39, .06) !important;
            border-color: rgba(17, 24, 39, .14) !important;
            color: rgba(17, 24, 39, .92) !important;
        }

        a.btn.btn-secondary[href="#cena"]:hover {
            background: rgba(17, 24, 39, .08) !important;
            border-color: rgba(17, 24, 39, .18) !important;
        }

        /* Booking tertiary */
        a.btn.btn-secondary.text-xs[href*="booking.com"] {
            background: rgba(255, 255, 255, .70) !important;
            border-color: rgba(17, 24, 39, .12) !important;
            color: rgba(17, 24, 39, .92) !important;
        }

        

        /* ===== v54: mini toggles next to "1) Izberi iskanje" ===== */
        .step1-row{ flex-wrap: nowrap; }
        .step1-label{ white-space: nowrap; flex: 0 0 auto; }

        .mini-toggles {
            display: flex;
            gap: .45rem;
            align-items: center;
            justify-content: flex-start;
            margin-left: .35rem;
            flex: 1 1 auto;
            min-width: 0;
        }

        .mini-toggles button {
            margin: 0 !important;
        }

        /* Compact sizing on mobile without using transform (transform does not affect layout width) */
        @media (max-width: 639px){
            .mini-toggles{ gap: .35rem; }
        }

        /* ===== v55: nights buttons unified style ===== */

        .top-term-toggle .btn {
            background: rgba(226, 240, 255, .95) !important;
            color: rgba(17, 24, 39, .92) !important;
            border: 1px solid rgba(59, 130, 246, .25) !important;
        }

        
        /* ===== v58: guests segmented control (more visible than single toggle) ===== */
        .mini-toggles .guest-seg {
            display: inline-flex;
            align-items: center;
            gap: .22rem;
            padding: .28rem; /* slightly larger than before (~+20%) */
            border-radius: 999px;
            border: 1px solid rgba(124, 200, 255, .32);
            background: rgba(124, 200, 255, .10);
            box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
            flex: 0 0 auto;
        }

        .mini-toggles .guest-seg-label {
            padding: 0 .50rem;
            font-size: 11px;
            font-weight: 900;
            color: rgba(17, 24, 39, .92) !important;
            user-select: none;
            white-space: nowrap;
        }

        .mini-toggles .guest-seg .btn.guests-btn {
            padding: .46rem .72rem !important; /* +20% */
            border-radius: 999px !important;
            background: rgba(255, 255, 255, .78) !important;
            border: 1px solid rgba(17, 24, 39, .14) !important;
            color: rgba(17, 24, 39, .92) !important; /* black text */
            font-weight: 900 !important;
            box-shadow: none !important;
            transform: none !important;
            font-size: 12px !important;
        }

        .mini-toggles .guest-seg .btn.guests-btn:hover {
            background: rgba(255, 255, 255, .88) !important;
        }

        .mini-toggles .guest-seg .btn.guests-btn.is-active {
            background: rgba(124, 200, 255, .55) !important;
            border-color: rgba(124, 200, 255, .85) !important;
            color: rgba(17, 24, 39, .95) !important;
            box-shadow: 0 14px 34px rgba(124, 200, 255, .12) !important;
        }

        @media (max-width: 639px){
            .mini-toggles .guest-seg{ padding: .22rem; }
            .mini-toggles .guest-seg-label{ font-size: 10px; padding: 0 .42rem; }
            .mini-toggles .guest-seg .btn.guests-btn{ padding: .38rem .55rem !important; font-size: 11px !important; }
        }

        .top-term-toggle .btn:hover {
            transform: translateY(-1px);
        }

        .top-term-toggle .btn.is-active {
            background: rgba(30, 64, 175, .98) !important;
            color: #fff !important;
            border-color: rgba(30, 64, 175, .98) !important;
            box-shadow: 0 14px 30px rgba(30, 64, 175, .18);
        }

        /* ===== v57: mobile CTA font-size -20% ===== */
        @media (max-width: 640px) {

            a.btn[href="#cena"],
            a.btn[href="#termini"],
            a.btn[href*="booking.com"] {
                font-size: 0.8em !important;
            }
        }

        @media (max-width: 640px) {
            /* ===== v60: mobile layout for 4 CTA buttons under "Terasa & zelenica" (2 rows) ===== */
            .cta-quad{ gap: .50rem !important; }
            .cta-quad > a{
                flex: 1 1 calc(50% - .50rem);
                min-width: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                padding: .55rem .65rem !important;
                font-size: 12px !important;
                line-height: 1.15 !important;
            }
            /* Booking can be slightly smaller than the other three */
            .cta-quad > a.btn-blue{
                flex: 0 1 calc(44% - .50rem);
                padding: .48rem .55rem !important;
                font-size: 11px !important;
            }
            .cta-quad > a.btn-reserve{ flex: 1 1 calc(56% - .50rem); }
        }
        /* --- Premium date-range picker tweaks --- */
        #pdDatePickerOverlay #pdDpScroll{ -webkit-overflow-scrolling: touch; }
        /* Price line (all viewports): +30% and bold */
        #pdDatePickerOverlay #pdDpNights{ font-size: 14.3px !important; font-weight: 800 !important; line-height: 1.15 !important; color: rgba(0,0,0,.72) !important; }
        /* Selected date range should not look like a button/CTA */
        #pdDatePickerOverlay #pdDpRange{ font-weight: 500 !important; }
        @media (max-width: 640px){
          #pdDatePickerOverlay > div{ width: 100%; }
          #pdDatePickerOverlay #pdDpScroll{ max-height: calc(92vh - 74px); }
          #pdDatePickerOverlay #pdDpScroll .pdDpSticky{ position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,.08); }
          /* keep for safety, but base rule above already applies */
          #pdDatePickerOverlay #pdDpNights{ font-size: 14.3px !important; font-weight: 800 !important; line-height: 1.15 !important; color: rgba(0,0,0,.72) !important; }
        }

        /* Gallery captions: high readability on bright/dark areas */
        #gallery .gallery-caption,
        #lbCaption.gallery-caption {
            color: rgba(255, 255, 255, .96) !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 2px 10px rgba(0, 0, 0, .75) !important;
            background: rgba(0, 0, 0, .55);
            border: 1px solid rgba(255, 255, 255, .14);
            border-radius: 9999px;
            padding: .45rem .7rem;
            display: inline-block;
            max-width: 100%;
            overflow-wrap: anywhere;
            backdrop-filter: blur(7px);
            -webkit-backdrop-filter: blur(7px);
        }

        #gallery .gallery-caption--thumb {
            font-size: .75rem;
            font-weight: 700;
        }

        /* Lightbox caption sits next to the close button */
        #lbCaption.gallery-caption--lightbox {
            font-size: .875rem;
            font-weight: 700;
            background: rgba(0, 0, 0, .45);
            max-width: calc(100% - 4rem);
        }

        /* Mikro doživetja: softer palette (avoid "white boxes" on desktop), keep clear cards on mobile */
        .micro-experiences li {
            position: relative;
            overflow: hidden;
        }
        .micro-experiences li > * {
            position: relative;
            z-index: 1;
        }
        @media (min-width: 641px) {
            /* Desktop/tablet: darker, tinted surfaces with gentle colored accents */
            .micro-experiences li {
                background: linear-gradient(180deg, rgba(15, 23, 42, .28), rgba(15, 23, 42, .16)) !important;
                border: 1px solid rgba(148, 163, 184, .14) !important;
                box-shadow: none !important;
            }
            .micro-experiences li:nth-child(1) { border-color: rgba(124, 255, 178, .22) !important; }
            .micro-experiences li:nth-child(2) { border-color: rgba(124, 200, 255, .22) !important; }
            .micro-experiences li:nth-child(3) { border-color: rgba(255, 184, 107, .22) !important; }
            .micro-experiences li::before {
                content: "";
                position: absolute;
                inset: -1px;
                pointer-events: none;
                opacity: .85;
                background: radial-gradient(420px 220px at 20% 0%, rgba(124, 200, 255, .10), transparent 62%);
            }
            .micro-experiences li:nth-child(1)::before { background: radial-gradient(420px 220px at 20% 0%, rgba(124, 255, 178, .12), transparent 62%); }
            .micro-experiences li:nth-child(2)::before { background: radial-gradient(420px 220px at 20% 0%, rgba(124, 200, 255, .12), transparent 62%); }
            .micro-experiences li:nth-child(3)::before { background: radial-gradient(420px 220px at 20% 0%, rgba(255, 184, 107, .12), transparent 62%); }
        }
        @media (max-width: 640px) {
            /* Mobile: ensure all three are clearly in "okvirčkih" */
            .micro-experiences li {
                background: rgba(255, 255, 255, .08) !important;
                border: 1px solid rgba(255, 255, 255, .16) !important;
                box-shadow: 0 10px 28px rgba(0, 0, 0, .25) !important;
            }
        }

        /* Notification card (mobile): prevent slight right-edge clipping (safe-area + wrapping) */
        @media (max-width: 640px) {
            /* Add safe-area padding on iOS and avoid subpixel cut-offs */
            #cena {
                padding-left: calc(1rem + env(safe-area-inset-left));
                padding-right: calc(1rem + env(safe-area-inset-right));
            }

            #cena .alarm-card {
                /* The card previously used overflow-hidden for the decorative icon; on some mobiles this can clip controls */
                overflow: visible !important;
                padding-left: calc(1.25rem + env(safe-area-inset-left)) !important;  /* matches p-5 */
                padding-right: calc(1.25rem + env(safe-area-inset-right)) !important;
            }

            #cena .alarm-card button,
            #cena .alarm-card input {
                max-width: 100%;
            }
        }

    

        /* ===== LH Lite Mobile (performance-first on slow phones) ===== */
        @media (max-width: 768px) {
            html.lh-lite .noise::before { display: none !important; }
            html.lh-lite .blob { display: none !important; }

            /* Kill expensive blur/backdrop + heavy shadows */
            html.lh-lite .backdrop,
            html.lh-lite [class*="backdrop-blur"] {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }
            html.lh-lite [class*="blur-"] { filter: none !important; }

            html.lh-lite .glass,
            html.lh-lite .glass-soft,
            html.lh-lite .cloud,
            html.lh-lite .cloud-3d {
                box-shadow: none !important;
            }

            /* Remove most transitions/animations (GPU + main-thread relief) */
            html.lh-lite *,
            html.lh-lite *::before,
            html.lh-lite *::after {
                animation: none !important;
                transition: none !important;
            }

            /* Specifically stop long-running decorative animations */
            html.lh-lite .cloud-3d { animation: none !important; }
            html.lh-lite .price-badge { animation: none !important; }
            html.lh-lite .sheen::before { animation: none !important; }

            /* Disable smooth scrolling (can stutter on weak devices) */
            html.lh-lite { scroll-behavior: auto !important; }
        }

        /* ===== v2.20: Premium promo stamp (SL only) ===== */
        #promoStamp {
            position: fixed;
            z-index: 9999;
            top: calc(env(safe-area-inset-top) + 14px);
            left: calc(env(safe-area-inset-left) + 14px);
            width: min(560px, calc(100vw - 28px));
            max-width: min(560px, calc(100vw - 28px));
            pointer-events: none;
            opacity: 0;
            transform: translateY(-8px) rotate(-2deg) scale(.96);
            transform-origin: top left;
        }
        #promoStamp .promo-card{
            pointer-events: auto;
            position: relative;
            overflow: hidden;
            border-radius: 22px;
            padding: 14px 14px 12px 14px;
            border: 2px dashed rgba(34,197,94,.55);
            background: rgba(240,253,244,.96);
            color: rgba(20,83,45,.98);
            box-shadow:
              0 18px 60px rgba(34,197,94,.18),
              0 10px 22px rgba(17,24,39,.08);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        #promoStamp .promo-card::before{
            content:"";
            position:absolute;
            inset:-1px;
            pointer-events:none;
            background:
              radial-gradient(220px 160px at 92% 8%, rgba(34,197,94,.10), transparent 56%),
              linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 34%, rgba(34,197,94,.05) 68%, rgba(255,255,255,0) 100%);
            opacity:.95;
        }
        #promoStamp .promo-card > *{
            position: relative;
            z-index: 1;
        }
        #promoStamp .promo-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-bottom:8px;
        }
        #promoStamp .promo-badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            font-weight: 950;
            letter-spacing: .04em;
            text-transform: uppercase;
            font-size: 11px;
            color: rgba(20,83,45,.98);
        }
        #promoStamp .promo-dot{
            width: 10px;
            height: 10px;
            border-radius: 9999px;
            background: rgba(34,197,94,.92);
            box-shadow: 0 0 0 6px rgba(34,197,94,.12);
            flex: 0 0 auto;
        }
        #promoStamp .promo-close{
            appearance:none;
            border:0;
            background: transparent;
            color: rgba(127,29,29,.90);
            font-weight: 900;
            font-size: 14px;
            line-height: 1;
            border-radius: 9999px;
            padding: 8px 10px;
            cursor: pointer;
            transition: transform .15s ease, background .15s ease;
        }
        #promoStamp .promo-close:hover{
            background: rgba(220,38,38,.10);
            transform: translateY(-1px);
        }
        #promoStamp .promo-headline{
            font-weight: 900;
            line-height: 1.22;
            font-size: 14px;
            color: rgba(20,83,45,.98);
        }
        #promoStamp .promo-sub{
            margin-top: 2px;
            font-weight: 900;
            line-height: 1.22;
            font-size: 14px;
            color: rgba(20,83,45,.98);
        }
        #promoStamp .promo-copy{
            margin-top: 12px;
            display: grid;
            gap: 10px;
        }
        #promoStamp .promo-copy-row{
            display:flex;
            align-items:flex-start;
            gap:10px;
        }
        #promoStamp .promo-check{
            flex: 0 0 auto;
            width: 22px;
            height: 22px;
            border-radius: 9999px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            margin-top: 1px;
            color: rgba(20,83,45,.98);
            background: linear-gradient(180deg, rgba(34,197,94,.20), rgba(34,197,94,.10));
            border: 1px solid rgba(34,197,94,.28);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
        }
        #promoStamp .promo-copy-main{
            min-width: 0;
            font-weight: 900;
            line-height: 1.24;
            color: rgba(20,83,45,.98);
            font-size: 14px;
        }
        #promoStamp .promo-old-line{
            position: relative;
            display: inline-block;
        }
        #promoStamp .promo-copy-main .promo-old{
            position: relative;
            display: inline-block;
            color: rgba(20,83,45,.98);
        }
        #promoStamp .promo-strike{
            position:absolute;
            left: -2px;
            right: -2px;
            top: 51%;
            height: 2px;
            border-radius: 9999px;
            background: linear-gradient(90deg, rgba(239,68,68,0), rgba(239,68,68,.96) 16%, rgba(239,68,68,.96) 84%, rgba(239,68,68,0));
            transform: scaleX(0);
            transform-origin: left center;
            transition: transform .42s cubic-bezier(.22,.9,.24,1);
            box-shadow: 0 0 0 4px rgba(239,68,68,.08);
        }
        #promoStamp.promo-claimed .promo-strike{
            transform: scaleX(1);
        }
        #promoStamp .promo-reveal{
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transform: translateY(-4px);
            transition: max-height .42s ease, opacity .32s ease, transform .32s ease;
        }
        #promoStamp.promo-claimed .promo-reveal{
            max-height: 500px;
            opacity: 1;
            transform: translateY(0);
        }
        #promoStamp .promo-claimed-pill{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding: 8px 12px;
            border-radius: 9999px;
            font-weight: 950;
            font-size: 11px;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: rgba(127,29,29,.96);
            background: rgba(254,226,226,.92);
            border: 1px solid rgba(248,113,113,.26);
            box-shadow: 0 10px 24px rgba(248,113,113,.10);
        }
        #promoStamp .promo-divider{
            margin-top: 12px;
            height: 1px;
            background: linear-gradient(90deg, rgba(34,197,94,0), rgba(34,197,94,.30), rgba(34,197,94,0));
        }
        #promoStamp .promo-form-wrap{
            margin-top: 12px;
            padding: 12px;
            border-radius: 18px;
            background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.58));
            border: 1px solid rgba(34,197,94,.18);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
        }
        #promoStamp .promo-form-title{
            font-size: 13px;
            font-weight: 950;
            letter-spacing: -.01em;
            color: rgba(17,24,39,.96);
        }
        #promoStamp .promo-form-sub{
            margin-top: 4px;
            font-size: 12px;
            line-height: 1.4;
            color: rgba(55,65,81,.82);
            font-weight: 700;
        }
        #promoStamp .promo-form{
            margin-top: 10px;
            display: flex;
            gap: 8px;
            align-items: stretch;
        }
        #promoStamp .promo-input{
            flex: 1 1 auto;
            min-width: 0;
            border-radius: 16px;
            border: 1px solid rgba(34,197,94,.20);
            background: rgba(255,255,255,.94);
            color: rgba(17,24,39,.96);
            padding: 12px 14px;
            font-size: 14px;
            font-weight: 700;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
        }
        #promoStamp .promo-input::placeholder{
            color: rgba(100,116,139,.86);
            font-weight: 700;
        }
        #promoStamp .promo-input:focus{
            outline: none;
            border-color: rgba(34,197,94,.45);
            box-shadow: 0 0 0 4px rgba(34,197,94,.10);
        }
        #promoStamp .promo-submit{
            flex: 0 0 auto;
            border: 1px solid rgba(34,197,94,.34);
            background: linear-gradient(180deg, rgba(34,197,94,.18), rgba(22,163,74,.10));
            color: rgba(20,83,45,.98);
            padding: 0 16px;
            min-height: 48px;
            border-radius: 16px;
            font-weight: 950;
            font-size: 13px;
            letter-spacing: .01em;
            box-shadow:
              0 14px 30px rgba(34,197,94,.12),
              inset 0 1px 0 rgba(255,255,255,.52);
            transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
        }
        #promoStamp .promo-submit:hover{
            transform: translateY(-1px);
            filter: saturate(1.04);
            box-shadow:
              0 18px 36px rgba(34,197,94,.16),
              inset 0 1px 0 rgba(255,255,255,.58);
        }
        #promoStamp .promo-submit:disabled{
            opacity: .72;
            cursor: wait;
            transform: none;
        }
        #promoStamp .promo-note{
            margin-top: 9px;
            display:flex;
            align-items:flex-start;
            gap:7px;
            font-size: 11px;
            line-height: 1.42;
            color: rgba(55,65,81,.78);
            font-weight: 700;
        }
        #promoStamp .promo-note span:first-child{
            color: rgba(34,197,94,.88);
        }
        #promoStamp .promo-state{
            margin-top: 9px;
            font-size: 12px;
            line-height: 1.4;
            font-weight: 800;
            color: rgba(55,65,81,.88);
            min-height: 17px;
        }
        #promoStamp .promo-state.is-error{
            color: rgba(185,28,28,.96);
        }
        #promoStamp .promo-state.is-success{
            color: rgba(21,128,61,.96);
        }
        #promoStamp.promo-show{
            opacity: 1;
            transform: translateY(0) rotate(-1deg) scale(1);
            pointer-events: none;
        }
        #promoStamp.promo-show .promo-card{
            pointer-events: auto;
        }
        @keyframes promoStampIn {
            0% { opacity: 0; transform: translateY(-14px) rotate(-6deg) scale(.90); filter: blur(1px); }
            55% { opacity: 1; transform: translateY(2px) rotate(-1deg) scale(1.03); filter: blur(0); }
            100% { opacity: 1; transform: translateY(0) rotate(-1deg) scale(1); }
        }
        #promoStamp.promo-animate{
            animation: promoStampIn .70s cubic-bezier(.18,.89,.32,1.25) both;
        }
        @keyframes promoShake {
            0%   { transform: translateX(0) rotate(0deg); }
            12%  { transform: translateX(-6px) rotate(-1.2deg); }
            24%  { transform: translateX(6px) rotate(1.2deg); }
            36%  { transform: translateX(-4px) rotate(-0.8deg); }
            48%  { transform: translateX(4px) rotate(0.8deg); }
            60%  { transform: translateX(-2px) rotate(-0.4deg); }
            72%  { transform: translateX(2px) rotate(0.4deg); }
            100% { transform: translateX(0) rotate(0deg); }
        }
        #promoStamp.promo-shake .promo-card{
            animation: promoShake .55s cubic-bezier(.36,.07,.19,.97) both;
        }
        @keyframes promoStampOut {
            0%   { opacity: 1; transform: translateY(0) rotate(-1deg) scale(1); filter: blur(0); }
            100% { opacity: 0; transform: translateY(-12px) rotate(-5deg) scale(.95); filter: blur(1px); }
        }
        #promoStamp.promo-hide{
            animation: promoStampOut .45s ease both !important;
            pointer-events: none !important;
        }
        #promoStamp.promo-hide .promo-card{
            pointer-events: none !important;
        }
@media (max-width: 640px){
            #promoStamp {
                top: calc(env(safe-area-inset-top) + 10px);
                left: calc(env(safe-area-inset-left) + 10px);
                width: min(100vw - 20px, 100%);
                max-width: calc(100vw - 20px);
            }
            #promoStamp .promo-card{
                padding: 14px 14px 12px 14px;
                border-radius: 22px;
            }
            #promoStamp .promo-headline{
                font-size: 17px;
            }
            #promoStamp .promo-sub{
                font-size: 12px;
            }
            #promoStamp .promo-copy-main{
                font-size: 13px;
            }
            #promoStamp .promo-form{
                flex-direction: column;
            }
            #promoStamp .promo-submit{
                min-height: 44px;
                width: 100%;
            }
        }


        /* ===== v2.24: Premium CTA (Izberi termin) ===== */
        .btn-premium{
            position: relative;
            overflow: hidden;
            border-radius: 9999px !important;
            padding: 10px 16px !important;
            font-weight: 900 !important;
            letter-spacing: .02em;
            transform: translateZ(0);
            box-shadow:
              0 18px 40px rgba(124,255,178,.18),
              0 10px 22px rgba(124,200,255,.16),
              0 8px 18px rgba(17,24,39,.12);
            border: 1px solid rgba(255,255,255,.22) !important;
            background:
              radial-gradient(120% 140% at 20% 20%, rgba(124,255,178,.95) 0%, rgba(124,200,255,.92) 38%, rgba(255,184,107,.88) 86%);
            color: rgba(7,10,18,.92) !important;
            transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
        }
        .btn-premium::before{
            content:"";
            position:absolute;
            inset:-2px;
            background: linear-gradient(115deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.40) 45%, rgba(255,255,255,.0) 70%);
            transform: translateX(-140%);
            animation: premiumShimmer 2.4s ease-in-out infinite;
            pointer-events:none;
            mix-blend-mode: soft-light;
        }
        .btn-premium::after{
            content:"";
            position:absolute;
            inset:0;
            background: radial-gradient(60% 90% at 50% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
            opacity:.55;
            pointer-events:none;
        }
        .btn-premium:hover{
            transform: translateY(-1px) scale(1.02);
            filter: saturate(1.05);
            box-shadow:
              0 26px 65px rgba(124,255,178,.26),
              0 16px 36px rgba(124,200,255,.22),
              0 10px 22px rgba(17,24,39,.14);
        }
        .btn-premium:active{
            transform: translateY(0px) scale(0.995);
        }
        .btn-premium.pulse-active{
            animation: premiumPulse 1.2s ease-out;
        }
        .btn-premium:focus-visible{
            outline: none;
            box-shadow:
              0 0 0 4px rgba(124,200,255,.35),
              0 0 0 8px rgba(124,255,178,.22),
              0 18px 40px rgba(124,255,178,.18);
        }
        .btn-premium .cta-icon{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            width: 20px;
            height: 20px;
            margin-left: 10px;
            border-radius: 9999px;
            background: rgba(7,10,18,.10);
            border: 1px solid rgba(7,10,18,.10);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
            transform: translateZ(0);
        }
        .btn-premium .cta-icon svg{
            width: 14px;
            height: 14px;
        }
        @keyframes premiumShimmer{
            0%   { transform: translateX(-140%); opacity: .0; }
            15%  { opacity: .65; }
            50%  { opacity: .55; }
            100% { transform: translateX(140%); opacity: .0; }
        }
        @keyframes premiumPulse{
            0%   { transform: translateY(0) scale(1); }
            35%  { transform: translateY(-2px) scale(1.06); }
            70%  { transform: translateY(1px) scale(0.98); }
            100% { transform: translateY(0) scale(1); }
        }
        @media (prefers-reduced-motion: reduce){
            .btn-premium::before{ animation: none; }
            .btn-premium{ transition: none; }
        }

        /* ===== v2.28: Desktop fixed top bar (always visible, no blur) ===== */
        @media (min-width: 768px){
            header{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 1200; /* above content */
            }
            body{
                /* padding is set precisely by JS below; keep a safe fallback */
                padding-top: 92px;
            }
        }


/* ===== v2.39: HARD OVERRIDE Premium CTA ===== */
button.btn-reserve,
a.btn-reserve,
button.btn.btn-reserve,
a.btn.btn-reserve{
    background: radial-gradient(120% 140% at 20% 20%, rgba(124,255,178,.95) 0%, rgba(124,200,255,.92) 38%, rgba(255,184,107,.88) 86%) !important;
    color: rgba(7,10,18,.92) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    box-shadow:
      0 18px 40px rgba(124,255,178,.18),
      0 10px 22px rgba(124,200,255,.16),
      0 8px 18px rgba(17,24,39,.12) !important;
}


/* ===== v2.37: Minimal social coupon popup ===== */
#promoStamp{width:min(420px,calc(100vw - 28px))!important;}
#promoStamp .promo-card{padding:16px!important;border:1px solid rgba(17,24,39,.10)!important;border-radius:24px!important;background:rgba(255,255,255,.96)!important;box-shadow:0 18px 50px rgba(17,24,39,.14)!important;}
#promoStamp .promo-top{margin-bottom:8px!important;}
#promoStamp .promo-badge{font-size:10px!important;color:rgba(15,23,42,.70)!important;letter-spacing:.08em!important;}
#promoStamp .promo-dot{width:8px!important;height:8px!important;background:rgba(31,169,122,.92)!important;box-shadow:0 0 0 5px rgba(31,169,122,.10)!important;}
#promoStamp .promo-close{color:rgba(15,23,42,.58)!important;background:rgba(15,23,42,.04)!important;width:34px!important;height:34px!important;padding:0!important;}
#promoStamp .promo-headline{font-size:18px!important;line-height:1.18!important;color:rgba(15,23,42,.96)!important;letter-spacing:-.02em!important;}
#promoStamp .promo-sub{margin-top:6px!important;font-size:13px!important;line-height:1.35!important;color:rgba(51,65,85,.86)!important;font-weight:800!important;}
#promoStamp .promo-social-actions{margin-top:14px;display:flex;align-items:center;gap:12px;}
#promoStamp .promo-social-btn{width:48px;height:48px;min-width:48px;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none!important;background:#fff;border:1px solid rgba(15,23,42,.12);box-shadow:0 10px 26px rgba(15,23,42,.10);transition:transform .15s ease,box-shadow .15s ease;}
#promoStamp .promo-social-btn:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(15,23,42,.14);}
#promoStamp .promo-social-icon{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;}
#promoStamp .promo-social-icon svg{width:30px;height:30px;display:block;}
#promoStamp .promo-instagram{color:#E1306C!important;}
#promoStamp .promo-facebook{color:#1877F2!important;}
#promoStamp .promo-x{color:#111827!important;}
@media (max-width:640px){#promoStamp{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;}#promoStamp .promo-card{padding:14px!important;}#promoStamp .promo-headline{font-size:17px!important;}#promoStamp .promo-sub{font-size:12.5px!important;}#promoStamp .promo-social-actions{gap:10px;}#promoStamp .promo-social-btn{width:46px;height:46px;min-width:46px;}}
/* ===== v2.39: Promo popup must not block mobile clicks before it appears ===== */
#promoStamp{display:none;}
#promoStamp:not(.promo-show),
#promoStamp:not(.promo-show) .promo-card{pointer-events:none!important;}
#promoStamp.promo-show{display:block;}
#promoStamp.promo-show .promo-card{pointer-events:auto!important;}



/* Performance-safe: keep non-critical sections out of the initial render path */
#gallery{ content-visibility:auto; contain-intrinsic-size: 1200px; }


/* ===== v2.35: Desktop sticky nav compact + CTA arrow polish ===== */
@media (min-width: 768px){
  header nav.mx-auto{
    max-width: min(100%, 1440px) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  header nav > div.flex.items-center.justify-between{
    gap: 10px !important;
  }
  header nav a[aria-label="Domov"]{
    flex: 0 0 auto !important;
  }
  header nav a[aria-label="Domov"] .h-12{
    width: 2.35rem !important;
    height: 2.35rem !important;
    border-radius: 1rem !important;
  }
  header nav a[aria-label="Domov"] img{
    width: 2.08rem !important;
    height: 2.08rem !important;
  }
  header nav a[aria-label="Domov"] .font-extrabold{
    font-size: .88rem !important;
    line-height: 1.05 !important;
  }
  header nav a[aria-label="Domov"] .text-xs{
    font-size: .64rem !important;
    line-height: 1.05 !important;
  }
  header .hidden.md\:flex{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    gap: .32rem !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }
  header .hidden.md\:flex > a.btn{
    font-size: clamp(10px, .68vw, 12px) !important;
    padding: .40rem .58rem !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    flex: 0 1 auto !important;
  }
  header .hidden.md\:flex > a.btn.btn-premium{
    padding: .43rem .64rem !important;
  }
  header .hidden.md\:flex > a.btn.btn-premium .cta-icon{
    width: 18px !important;
    height: 18px !important;
    margin-left: 6px !important;
  }
  header .hidden.md\:flex > div.ml-3{
    margin-left: .15rem !important;
    flex: 0 0 auto !important;
    padding: .18rem .32rem !important;
    border-radius: 9999px !important;
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(17,24,39,.12) !important;
    box-shadow: 0 10px 26px rgba(17,24,39,.08) !important;
  }
  header .hidden.md\:flex > div.ml-3 button{
    color: rgba(17,24,39,.88) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    padding: .18rem .28rem !important;
    border-radius: 9999px !important;
    line-height: 1.05 !important;
  }
  header .hidden.md\:flex > div.ml-3 button.bg-white\/20{
    background: rgba(31,169,122,.18) !important;
  }
}
@media (min-width: 768px) and (max-width: 1100px){
  header nav a[aria-label="Domov"] .leading-tight{
    display: none !important;
  }
  header .hidden.md\:flex > a.btn{
    padding-left: .45rem !important;
    padding-right: .45rem !important;
    font-size: 10px !important;
  }
}

/* Premium circular arrow for non-sticky clickable CTAs */
main a.btn:not(.btn-premium):not(.no-cta-arrow)::after,
footer a.btn:not(.btn-premium):not(.no-cta-arrow)::after,
main a.pill[href]:not(.no-cta-arrow)::after,
main button.btn-primary:not(.btn-premium):not(.discount-btn):not(.guests-btn):not(.no-cta-arrow)::after,
main button.btn-blue:not(.btn-premium):not(.no-cta-arrow)::after,
main button.btn-green-light:not(.no-cta-arrow)::after{
  content: '›';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-left: 7px;
  border-radius: 9999px;
  color: rgba(7,10,18,.92);
  background: rgba(17,24,39,.10);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  font-size: 22px;
  font-weight: 900;
  line-height: 18px;
  transform: translateY(-1px);
}
header .btn::after,
#mobileMenu .btn::after,
.corner-nav a::after,
main .top-term-toggle .btn::after,
main .guest-seg .btn::after,
main .discount-btn::after,
main #addDateRowBtn::after,
main #admin .btn::after{
  content: none !important;
  display: none !important;
}
@media (max-width: 640px){
  main a.btn:not(.btn-premium):not(.no-cta-arrow)::after,
  footer a.btn:not(.btn-premium):not(.no-cta-arrow)::after,
  main a.pill[href]:not(.no-cta-arrow)::after,
  main button.btn-primary:not(.btn-premium):not(.discount-btn):not(.guests-btn):not(.no-cta-arrow)::after,
  main button.btn-blue:not(.btn-premium):not(.no-cta-arrow)::after,
  main button.btn-green-light:not(.no-cta-arrow)::after{
    width: 19px;
    height: 19px;
    margin-left: 5px;
    font-size: 19px;
  }
}

/* ===== v2.40: Bentral-first CTA polish + mobile tap safety ===== */
:root{
  --mobile-cta-height: 76px;
}
a,
button{
  touch-action: manipulation;
}
.btn,
.pill{
  min-height: 44px;
  max-width: 100%;
  line-height: 1.14;
  text-align: center;
}
.cta-quad{
  align-items: stretch;
}
.cta-quad > a{
  min-height: 46px;
}
.cta-quad > a.btn-premium{
  min-height: 52px;
}
#results .result-card .btn{
  min-height: 40px !important;
  height: auto !important;
  padding: .55rem .65rem !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  border-radius: 14px !important;
}
#results .result-card button.btn{
  width: 44px !important;
  flex-basis: 44px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
[id^="price_"] a.btn{
  min-height: 36px !important;
  height: auto !important;
  padding: .45rem .68rem !important;
  font-size: 11.5px !important;
  line-height: 1.08 !important;
}
@media (max-width: 767px){
  .corner-nav{
    display: none !important;
  }
  body{
    padding-bottom: calc(var(--mobile-cta-height) + env(safe-area-inset-bottom));
  }
  main{
    padding-bottom: calc(var(--mobile-cta-height) + 28px + env(safe-area-inset-bottom)) !important;
  }
  header .btn,
  #mobileMenu .btn{
    width: 100%;
    min-height: 46px;
    justify-content: center !important;
    white-space: normal !important;
  }
  .cta-quad{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .62rem !important;
  }
  .cta-quad > a{
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: .72rem .72rem !important;
    border-radius: 16px !important;
    white-space: normal !important;
    font-size: 12.5px !important;
    line-height: 1.12 !important;
  }
  .cta-quad > a.btn-premium{
    grid-column: 1 / -1;
    min-height: 54px;
    font-size: 14px !important;
  }
  .cta-quad > a.btn-premium .cta-icon{
    margin-left: 6px;
  }
  .mobile-cta-bar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(116px, 32vw);
    align-items: end;
    gap: .55rem;
    min-height: calc(var(--mobile-cta-height) + 10px + env(safe-area-inset-bottom));
    padding: .58rem .72rem calc(.62rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(7,10,18,0), rgba(7,10,18,.30));
    border-top: 0;
    box-shadow: none;
    pointer-events: none;
  }
  .mobile-cta-secondary{
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .22rem;
    padding: .32rem;
    border-radius: 26px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .72);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .20), inset 0 1px 0 rgba(255,255,255,.70);
    backdrop-filter: blur(18px) saturate(1.18);
    -webkit-backdrop-filter: blur(18px) saturate(1.18);
    pointer-events: auto;
  }
  .mobile-cta-bar a{
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .22rem;
    padding: .40rem .24rem;
    border-radius: 20px;
    color: rgba(17, 24, 39, .70);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-cta-bar a:hover,
  .mobile-cta-bar a:focus-visible{
    color: rgba(7, 10, 18, .94);
    background: rgba(255, 255, 255, .62);
    border-color: rgba(124, 200, 255, .42);
  }
  .mobile-cta-bar a:active{
    transform: translateY(1px);
  }
  .mobile-cta-bar svg{
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    stroke-width: 2.25;
  }
  .mobile-cta-bar span{
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
    font-size: 10px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: 0;
  }
  .mobile-cta-bar .mobile-cta-primary{
    min-height: 66px;
    pointer-events: auto;
    flex-direction: row;
    gap: .42rem;
    padding: .72rem .76rem;
    border-radius: 28px;
    color: rgba(7, 10, 18, .94);
    background: radial-gradient(120% 140% at 20% 20%, rgba(124,255,178,.96) 0%, rgba(124,200,255,.94) 44%, rgba(255,184,107,.90) 100%);
    border-color: rgba(255, 255, 255, .25);
    box-shadow: 0 20px 46px rgba(124, 200, 255, .28), 0 10px 24px rgba(7,10,18,.16);
  }
  .mobile-cta-bar .mobile-cta-primary span{
    font-size: 13px;
    font-weight: 950;
    color: rgba(7, 10, 18, .94);
    white-space: nowrap;
  }
}
@media (max-width: 374px){
  .cta-quad{
    grid-template-columns: 1fr;
  }
  .mobile-cta-bar{
    grid-template-columns: minmax(0, 1fr) 108px;
    gap: .42rem;
    padding-left: .48rem;
    padding-right: .48rem;
  }
  .mobile-cta-secondary{
    gap: .14rem;
    padding: .24rem;
    border-radius: 22px;
  }
  .mobile-cta-bar a{
    min-height: 52px;
    border-radius: 17px;
    padding-left: .12rem;
    padding-right: .12rem;
  }
  .mobile-cta-bar span{
    font-size: 9.2px;
  }
  .mobile-cta-bar .mobile-cta-primary{
    min-height: 62px;
    gap: .25rem;
    padding-left: .48rem;
    padding-right: .48rem;
  }
.mobile-cta-bar .mobile-cta-primary span{
    font-size: 11.5px;
  }
  .mobile-cta-bar svg{
    width: 17px;
    height: 17px;
  }
}

/* ===== v2.41: image-contained hero labels, compact inquiry, Bentral polish ===== */
.hero-media .hero-top-chips,
.hero-media .hero-chips{
  position: absolute;
  left: 16px;
  right: 16px;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .45rem .55rem;
  pointer-events: none;
}
.hero-media .hero-top-chips{
  top: 16px;
  align-content: flex-start;
}
.hero-media .hero-chips{
  bottom: 16px;
  align-content: flex-end;
  flex-wrap: wrap-reverse;
  padding-right: 0;
}
.hero-media .chip{
  color: #fff;
  background: rgba(7, 10, 18, .56);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
}
.hero-media > .absolute.left-0.right-0.bottom-4{
  bottom: 54px !important;
}
.hero-compact-note{
  border-radius: 18px;
  border: 1px solid rgba(31, 169, 122, .22);
  background: rgba(31, 169, 122, .08);
  color: rgba(17,24,39,.84);
  font-size: .92rem;
  line-height: 1.35;
  font-weight: 750;
  padding: .85rem 1rem;
}
.booking-score-btn{
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 244, 214, .92)) !important;
  border-color: rgba(230, 162, 60, .42) !important;
  color: rgba(17,24,39,.94) !important;
}
#cena{
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}
#cena > .glass.backdrop{
  padding: clamp(1rem, 2.2vw, 1.75rem) !important;
}
#cena .alarm-card{
  padding: clamp(1rem, 2vw, 1.35rem) !important;
}
#cena .alarm-card .absolute.top-0.right-0{
  display: none !important;
}
#cena .alarm-card .mb-6{
  margin-bottom: .9rem !important;
}
#cena .alarm-card .mt-8{
  margin-top: 1rem !important;
  padding-top: 1rem !important;
}
#cena #dateRowsContainer{
  gap: .55rem !important;
}
#cena input,
#cena .btn{
  min-height: 42px;
}
#cena #notifySubmitBtn{
  width: 100%;
  justify-content: center;
}
#cena .hidden.lg\:block{
  display: none !important;
}
.learn-more-hub{
  border-radius: 28px;
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid rgba(17,24,39,.10);
  background:
    radial-gradient(660px 220px at 0% 0%, rgba(124,200,255,.14), transparent 64%),
    radial-gradient(620px 220px at 100% 0%, rgba(31,169,122,.10), transparent 62%),
    rgba(255,255,255,.72);
  box-shadow: 0 20px 54px rgba(17,24,39,.10);
}
.learn-more-head{
  display: grid;
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin-bottom: .95rem;
}
.learn-more-heading{
  min-width: 0;
}
.learn-more-head h2{
  margin-top: .15rem;
  color: rgba(17,24,39,.95);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.1;
  font-weight: 950;
}
.learn-more-primary{
  min-height: 56px;
  border-radius: 20px !important;
  padding: .9rem 1.1rem !important;
  box-shadow: 0 16px 38px rgba(44,123,229,.16);
  white-space: normal !important;
  text-align: center;
}
.learn-more-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
}
.learn-more-card{
  position: relative;
  overflow: hidden;
  min-height: 86px;
  border-radius: 20px;
  padding: .9rem 3.15rem .9rem .95rem;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.72);
  color: rgba(17,24,39,.88);
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(17,24,39,.07);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.learn-more-card::after{
  content: "›";
  position: absolute;
  right: .78rem;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgba(17,24,39,.90);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 20px rgba(17,24,39,.10);
  font-size: 1.35rem;
  font-weight: 950;
  line-height: 1;
  transition: transform .14s ease, background .14s ease;
}
.learn-more-grid .learn-more-card:nth-child(1){
  background: linear-gradient(135deg, rgba(124,200,255,.34), rgba(255,255,255,.82));
  border-color: rgba(44,123,229,.22);
}
.learn-more-grid .learn-more-card:nth-child(2){
  background: linear-gradient(135deg, rgba(255,184,107,.34), rgba(255,255,255,.82));
  border-color: rgba(230,162,60,.24);
}
.learn-more-grid .learn-more-card:nth-child(3){
  background: linear-gradient(135deg, rgba(124,255,178,.30), rgba(255,255,255,.82));
  border-color: rgba(31,169,122,.22);
}
.learn-more-grid .learn-more-card:nth-child(4){
  background: linear-gradient(135deg, rgba(244,114,182,.22), rgba(255,255,255,.82));
  border-color: rgba(219,39,119,.18);
}
.learn-more-card:hover{
  transform: translateY(-2px);
  border-color: rgba(44,123,229,.24);
  box-shadow: 0 18px 42px rgba(44,123,229,.12);
}
.learn-more-card:hover::after{
  transform: translate(3px, -50%);
  background: rgba(255,255,255,.86);
}
.learn-more-card span,
.learn-more-card small{
  display: block;
}
.learn-more-card span{
  font-size: .94rem;
  font-weight: 950;
}
.learn-more-card small{
  margin-top: .25rem;
  color: rgba(55,65,81,.60);
  font-size: .74rem;
  line-height: 1.25;
  font-weight: 760;
}
.notify-hub{
  background:
    radial-gradient(900px 300px at 0% 0%, rgba(124,200,255,.16), transparent 64%),
    radial-gradient(820px 320px at 100% 0%, rgba(255,184,107,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.66)) !important;
  box-shadow: 0 26px 70px rgba(17,24,39,.12);
}
.notify-intro{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.notify-mode-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}
.notify-option{
  border-radius: 26px;
  padding: .42rem;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.48);
  box-shadow: 0 14px 42px rgba(17,24,39,.08);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.notify-option.is-active{
  border-color: rgba(44,123,229,.22);
  background: rgba(255,255,255,.68);
  box-shadow: 0 22px 58px rgba(44,123,229,.12);
}
.notify-mode-btn{
  width: 100%;
  position: relative;
  min-height: 78px;
  border-radius: 22px;
  padding: .9rem 3.2rem .9rem 1rem;
  text-align: left;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.66);
  color: rgba(17,24,39,.90);
  box-shadow: 0 12px 34px rgba(17,24,39,.08);
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.notify-mode-btn strong,
.notify-mode-btn small,
.notify-mode-kicker{ display: block; }
.notify-mode-kicker{
  color: rgba(17,24,39,.52);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.notify-mode-btn strong{
  margin-top: .18rem;
  font-size: 1.08rem;
  font-weight: 950;
}
.notify-mode-btn small{
  margin-top: .2rem;
  color: rgba(55,65,81,.72);
  font-size: .78rem;
  font-weight: 780;
}
.notify-mode-btn.is-active{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(230,246,255,.90));
  border-color: rgba(44,123,229,.34);
  box-shadow: 0 18px 44px rgba(44,123,229,.13);
  transform: translateY(-1px);
}
.notify-mode-arrow{
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  color: rgba(17,24,39,.78);
  background: rgba(124,200,255,.20);
  border: 1px solid rgba(44,123,229,.16);
  font-size: 1.35rem;
  line-height: 1;
  transition: transform .16s ease, background .16s ease;
}
.notify-mode-btn.is-active .notify-mode-arrow{
  transform: translateY(-50%) rotate(90deg);
  background: rgba(124,255,178,.22);
}
.notify-panel{
  display: none;
  margin-top: .5rem;
}
.notify-panel.is-active{ display: block; }
.notify-panel-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.notify-submit-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .9rem;
  align-items: end;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(17,24,39,.08);
}
.notify-email-field label,
.notify-discount-field label,
.notify-choice-block label{
  display: block;
  margin: 0 0 .38rem .15rem;
  color: rgba(17,24,39,.52);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.notify-email-field input{
  width: 100%;
  min-height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.86);
  color: rgba(17,24,39,.92);
  padding: .78rem .95rem;
  font-size: .92rem;
  font-weight: 760;
  outline: none;
}
.notify-email-field input:focus{
  border-color: rgba(44,123,229,.42);
  box-shadow: 0 0 0 4px rgba(124,200,255,.18);
}
.notify-submit-btn{
  min-height: 46px !important;
  padding-left: 1.2rem !important;
  padding-right: 1.2rem !important;
  white-space: nowrap;
}
.notify-status-row{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .75rem;
  color: rgba(55,65,81,.62);
  font-size: .74rem;
  font-weight: 760;
}
.notify-status-row > div:first-child{
  color: rgba(17,24,39,.78);
  font-weight: 900;
}
.notify-status-row > div:first-child.is-error{
  color: rgba(185,28,28,.96);
}
.notify-status-row > div:first-child.is-success{
  color: rgba(21,128,61,.96);
}
.notify-email-field input.is-error{
  border-color: rgba(220,38,38,.72) !important;
  background: rgba(254,242,242,.94) !important;
  box-shadow: 0 0 0 4px rgba(248,113,113,.18) !important;
}
.last-minute-card{
  border-radius: 24px;
  padding: 1rem;
  border: 1px solid rgba(17,24,39,.10);
  background:
    radial-gradient(600px 180px at 10% 0%, rgba(255,184,107,.18), transparent 62%),
    radial-gradient(520px 180px at 90% 0%, rgba(124,255,178,.14), transparent 62%),
    rgba(255,255,255,.82);
  box-shadow: 0 18px 50px rgba(17,24,39,.10);
}
.last-minute-hero{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.last-minute-hero h3{
  margin-top: .2rem;
  color: rgba(17,24,39,.94);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.08;
  font-weight: 950;
}
.last-minute-hero p{
  margin-top: .45rem;
  color: rgba(55,65,81,.76);
  max-width: 650px;
  font-size: .92rem;
  font-weight: 780;
}
.last-minute-discount{
  flex: 0 0 120px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(7,10,18,.88);
  background: radial-gradient(120% 140% at 20% 20%, rgba(124,255,178,.94), rgba(124,200,255,.90) 58%, rgba(255,184,107,.86));
  border: 1px solid rgba(255,255,255,.32);
  font-size: .8rem;
  font-weight: 950;
  line-height: 1.05;
  box-shadow: 0 18px 44px rgba(124,200,255,.18);
}
.last-minute-discount strong{
  display: block;
  font-size: 2rem;
}
.notify-choice-block{ margin-top: .85rem; }
.notify-choice-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}
.notify-choice-grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.notify-choice-btn{
  min-height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.74);
  color: rgba(17,24,39,.86);
  font-weight: 900;
  font-size: .9rem;
  box-shadow: 0 10px 26px rgba(17,24,39,.07);
}
.notify-choice-btn span,
.notify-choice-btn small{
  display: block;
}
.notify-choice-btn small{
  margin-top: .12rem;
  color: rgba(55,65,81,.56);
  font-size: .66rem;
  line-height: 1.1;
  font-weight: 850;
}
.notify-choice-btn[data-discount]{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  padding-left: .85rem;
  padding-right: .72rem;
}
.notify-choice-btn[data-discount] small{
  margin-top: 0;
  padding: .24rem .48rem;
  border-radius: 999px;
  background: rgba(230,162,60,.16);
  border: 1px solid rgba(230,162,60,.28);
  color: rgba(17,24,39,.74);
  white-space: nowrap;
}
.notify-choice-btn.is-active{
  background: rgba(31,169,122,.18);
  border-color: rgba(31,169,122,.34);
  color: rgba(17,24,39,.96);
  box-shadow: 0 14px 34px rgba(31,169,122,.13);
}
.notify-choice-btn.is-active small{
  color: rgba(17,24,39,.66);
}
.notify-choice-btn.is-active[data-discount] small{
  background: rgba(31,169,122,.18);
  border-color: rgba(31,169,122,.28);
}
.last-minute-summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1rem;
  padding: .78rem .9rem;
  border-radius: 18px;
  border: 1px solid rgba(44,123,229,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(230,246,255,.66));
  color: rgba(17,24,39,.88);
  box-shadow: 0 12px 30px rgba(44,123,229,.08);
}
.last-minute-summary span{
  color: rgba(55,65,81,.55);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  white-space: nowrap;
}
.last-minute-summary strong{
  font-size: .92rem;
  font-weight: 950;
  text-align: right;
}
.last-minute-submit{ grid-template-columns: minmax(0, 1fr) auto; }
.notify-confirmation{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 26px;
  border: 1px solid rgba(31,169,122,.24);
  background:
    radial-gradient(520px 170px at 0% 0%, rgba(124,255,178,.22), transparent 66%),
    radial-gradient(460px 170px at 100% 0%, rgba(124,200,255,.18), transparent 62%),
    rgba(255,255,255,.86);
  color: rgba(17,24,39,.90);
  box-shadow: 0 22px 58px rgba(31,169,122,.13);
}
.notify-confirmation.hidden{
  display: none !important;
}
.notify-confirmation-icon{
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(124,255,178,.92), rgba(124,200,255,.86));
  color: rgba(7,10,18,.88);
  font-weight: 950;
  box-shadow: 0 14px 34px rgba(31,169,122,.18);
}
.notify-confirmation-copy span{
  display: block;
  color: rgba(55,65,81,.52);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.notify-confirmation-copy strong{
  display: block;
  margin-top: .1rem;
  font-size: 1.08rem;
  line-height: 1.15;
  font-weight: 950;
}
.notify-confirmation-copy p{
  margin-top: .18rem;
  color: rgba(55,65,81,.68);
  font-size: .82rem;
  font-weight: 760;
}
.home-faq{
  border-radius: 30px;
  padding: clamp(1rem, 2.4vw, 1.7rem);
  border: 1px solid rgba(17,24,39,.10);
  background:
    radial-gradient(780px 260px at 0% 0%, rgba(124,200,255,.16), transparent 62%),
    radial-gradient(720px 260px at 100% 0%, rgba(31,169,122,.12), transparent 62%),
    rgba(255,255,255,.76);
  box-shadow: 0 24px 64px rgba(17,24,39,.11);
}
.home-faq-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.home-faq-head h2{
  margin-top: .15rem;
  color: rgba(17,24,39,.95);
  font-size: clamp(1.45rem, 2.8vw, 2.1rem);
  line-height: 1.08;
  font-weight: 950;
}
.home-faq-head p{
  margin-top: .45rem;
  max-width: 680px;
  color: rgba(55,65,81,.68);
  font-size: .92rem;
  font-weight: 760;
}
.home-faq-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .72rem;
}
.home-faq-item{
  border-radius: 20px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.74);
  box-shadow: 0 12px 34px rgba(17,24,39,.07);
  overflow: hidden;
}
.home-faq-item summary{
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  padding: .95rem 1rem;
  color: rgba(17,24,39,.90);
  font-weight: 950;
  cursor: pointer;
  list-style: none;
}
.home-faq-item summary::-webkit-details-marker{
  display: none;
}
.home-faq-item summary::after{
  content: ">";
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgba(17,24,39,.80);
  background: rgba(124,200,255,.20);
  border: 1px solid rgba(44,123,229,.16);
  font-size: 1rem;
  transition: transform .16s ease, background .16s ease;
}
.home-faq-item[open] summary::after{
  transform: rotate(90deg);
  background: rgba(124,255,178,.22);
}
.home-faq-item p{
  padding: 0 1rem 1rem;
  color: rgba(55,65,81,.72);
  font-size: .9rem;
  line-height: 1.55;
  font-weight: 720;
}
.home-faq-cta{
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid rgba(17,24,39,.08);
}
.home-faq-cta span{
  color: rgba(55,65,81,.62);
  font-size: .82rem;
  font-weight: 800;
}
#rezervacija > .glass.backdrop{
  background:
    radial-gradient(900px 300px at 10% 0%, rgba(124,200,255,.12), transparent 64%),
    radial-gradient(760px 260px at 100% 4%, rgba(124,255,178,.10), transparent 62%),
    rgba(255,255,255,.72) !important;
}
#rezervacija .glass-soft{
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(17,24,39,.10) !important;
}
#rezervacija{
  color: rgba(17,24,39,.92);
  scroll-margin-top: 124px;
}
#rezervacija .text-white\/65,
#rezervacija .text-white\/60,
#rezervacija .text-white\/55,
#rezervacija .text-white\/45{
  color: rgba(17,24,39,.62) !important;
}
#rezervacija h2,
#rezervacija .font-extrabold{
  color: rgba(17,24,39,.92);
}
.bentral-layout{
  display: grid;
  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.bentral-card{
  min-width: 0;
}
.bentral-calendar-card{
  width: 100%;
  scroll-margin-top: 96px;
}
.bentral-booking-card{
  width: 100%;
  scroll-margin-top: 96px;
}
.bentral-calendar-viewport,
.bentral-booking-viewport{
  background: #fff !important;
  border-color: rgba(17,24,39,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 12px 32px rgba(17,24,39,.08);
}
#bentralCalendar,
#bentralBooking{
  background: #fff !important;
  color: #111827 !important;
  border-radius: 16px !important;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#bentralCalendar{
  min-height: 760px;
}
#bentralBooking{
  min-height: 720px;
}
#bentralCalendar iframe,
#bentralBooking iframe{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
}
#bentralCalendar iframe{
  min-height: 740px !important;
}
#bentralBooking iframe{
  min-height: 700px !important;
}
#bentralCalendar table,
#bentralBooking table{
  max-width: 100%;
}
#bentralBooking input,
#bentralBooking select,
#bentralBooking textarea,
#bentralBooking button,
#bentralCalendar button{
  font-family: inherit !important;
  border-radius: 8px !important;
}
@media (max-width: 767px){
  .hero-media .hero-top-chips,
  .hero-media .hero-chips{
    left: 12px;
    right: 12px;
    justify-content: space-between;
    gap: .32rem .38rem;
  }
  .hero-media .hero-top-chips{
    top: 12px;
  }
  .hero-media .hero-chips{
    bottom: 12px;
    padding-right: 0;
    transform: none !important;
  }
  .hero-media .chip{
    font-size: clamp(.58rem, 2.45vw, .68rem) !important;
    padding: .28rem clamp(.42rem, 1.85vw, .52rem) !important;
  }
  .hero-media > .absolute.left-0.right-0.bottom-4{
    display: none !important;
  }
  .hero-compact-note{
    font-size: .84rem;
    padding: .72rem .85rem;
  }
  #cena .flex.items-start.justify-between{
    gap: .75rem !important;
  }
  #cena h2{
    font-size: 1.35rem !important;
    line-height: 1.12 !important;
  }
  #cena .alarm-card .flex.flex-col.lg\:flex-row{
    gap: .75rem !important;
  }
  #cena #discountWrapper{
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #cena #discountWrapper .discount-btn{
    width: 100% !important;
  }
  .learn-more-head{
    align-items: stretch;
    grid-template-columns: 1fr;
    gap: .75rem;
  }
  .learn-more-primary{
    width: 100%;
  }
  .learn-more-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .learn-more-card{
    min-height: 82px;
  }
  .notify-mode-grid{
    grid-template-columns: 1fr;
  }
  .notify-mode-btn{
    min-height: auto;
    padding: .82rem .9rem;
  }
  .notify-panel-head{
    gap: .75rem;
  }
  .notify-submit-row,
  .last-minute-submit{
    grid-template-columns: 1fr;
    gap: .72rem;
  }
  .notify-submit-btn{
    width: 100%;
    justify-content: center !important;
  }
  .last-minute-hero{
    flex-direction: column;
  }
  .last-minute-discount{
    flex: none;
    min-height: 82px;
  }
  .notify-choice-grid,
  .notify-choice-grid-4{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .last-minute-summary{
    align-items: flex-start;
    flex-direction: column;
    gap: .25rem;
  }
  .last-minute-summary strong{
    text-align: left;
  }
  .notify-confirmation{
    grid-template-columns: auto minmax(0, 1fr);
  }
  .notify-confirmation #notifyChooseAgainBtn{
    grid-column: 1 / -1;
    width: 100%;
  }
  .home-faq-head{
    align-items: flex-start;
    flex-direction: column;
  }
  .home-faq-grid{
    grid-template-columns: 1fr;
  }
  .home-faq-cta .btn{
    width: 100%;
  }
  #rezervacija{
    padding-bottom: calc(var(--mobile-cta-height) + 30px) !important;
  }
  #rezervacija > .glass.backdrop{
    padding: 1rem !important;
  }
  .bentral-layout{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .bentral-calendar-card,
  .bentral-booking-card{
    padding: 1rem !important;
  }
  .bentral-calendar-card .text-\[10px\]{
    display: none !important;
  }
  .bentral-calendar-viewport{
    aspect-ratio: 1 / 1;
    max-height: min(92vw, 390px);
  }
  #bentralCalendar{
    min-height: 100%;
    height: 100%;
    overflow: hidden;
    padding: .45rem !important;
  }
  #bentralCalendar iframe{
    min-height: 100% !important;
    height: 100% !important;
    transform-origin: top left;
  }
  #bentralBooking{
    min-height: 620px;
    padding: .5rem !important;
  }
  #bentralBooking iframe{
    min-height: 620px !important;
  }
}

/* ===== R7: ghost/outline pill gumba v hero (Poglej slike, Kaj je vključeno) ===== */
.ghost-pill{
  border-color: rgba(44,123,229,.35) !important;
  background: rgba(255,255,255,.30) !important;
  color: rgba(17,24,39,.82) !important;
  font-weight: 700;
}
.ghost-pill:hover{
  background: rgba(255,255,255,.55) !important;
  border-color: rgba(44,123,229,.55) !important;
}
.ghost-pill svg{ width: 1rem; height: 1rem; flex: 0 0 auto; }