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

html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Inter,sans-serif;
    color:#1A202C;
    background:#fff;
    line-height:1.5;
}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
::selection{background:#00A8E8;color:#fff}

/* =========================================================
   CUSTOM STYLES IZ ORIGINALA
 /* ========================================================= */
.clip-slant {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.hero-bg {
    background:
        /* Tamni neutralni gradijent (sa 85% i 90% neprozirnosti) koji omogućava da se pozadinska slika vidi, a tekst ostane čitljiv */
        linear-gradient(135deg, rgba(18, 20, 24, 0.85), rgba(35, 39, 47, 0.9)),
        url('IMG_9190.HEIC');
    background-size: cover;
    background-position: center;
}

.watermark-bg {
    /* Mrežica od suptilnih neutralno-sivih tačkica umjesto plavih */
    background-image: radial-gradient(#9CA3AF 0.75px, transparent 0.75px);
    background-size: 16px 16px;
    opacity: 0.1; /* Blago povećano za bolju vidljivost neutralne tačke */
}

.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-6px);
    /* Sjenka promijenjena iz plave u neutralnu crnu sjenku visoke definicije */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25),
                0 10px 10px -5px rgba(0, 0, 0, 0.08);
}
/* =========================================================
   LAYOUT
   ========================================================= */
.container{width:100%;margin-left:auto;margin-right:auto}
.block{display:block}
.inline-block{display:inline-block}
.inline-flex{display:inline-flex}
.flex{display:flex}
.grid{display:grid}
.hidden{display:none}
.group{position:relative}

.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1 1 0%}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.self-start{align-self:flex-start}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}

.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.sticky{position:sticky}

.inset-0{inset:0}
.top-0{top:0}
.top-3{top:.75rem}
.top-4{top:1rem}
.right-0{right:0}
.right-4{right:1rem}
.right-6{right:1.5rem}
.bottom-0{bottom:0}
.-bottom-6{bottom:-1.5rem}
.left-0{left:0}
.left-4{left:1rem}
.-left-6{left:-1.5rem}
.-top-3{top:-.75rem}

.z-10{z-index:10}
.z-40{z-index:40}
.z-50{z-index:50}

.mx-auto{margin-left:auto;margin-right:auto}
.ml-auto{margin-left:auto}
.mr-1{margin-right:.25rem}
.mt-2{margin-top:.5rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-16{margin-top:4rem}
.mb-1{margin-bottom:.25rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-12{margin-bottom:3rem}
.mb-16{margin-bottom:4rem}

.p-2{padding:.5rem}
.p-3{padding:.75rem}
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}

.px-2\.5{padding-left:.625rem;padding-right:.625rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.pt-6{padding-top:1.5rem}
.pt-8{padding-top:2rem}
.pt-12{padding-top:3rem}
.pb-6{padding-bottom:1.5rem}
.pb-8{padding-bottom:2rem}
.pb-12{padding-bottom:3rem}

.w-2{width:.5rem}
.w-4{width:1rem}
.w-8{width:2rem}
.w-9{width:2.25rem}
.w-10{width:2.5rem}
.w-12{width:3rem}
.w-4\/5{width:80%}
.w-full{width:100%}
.h-2{height:.5rem}
.h-8{height:2rem}
.h-9{height:2.25rem}
.h-10{height:2.5rem}
.h-12{height:3rem}
.h-20{height:5rem}
.h-48{height:12rem}
.h-full{height:100%}
.h-\[350px\]{height:350px}
.h-\[380px\]{height:380px}
.h-\[450px\]{height:450px}
.min-h-\[85vh\]{min-height:85vh}

.max-w-sm{max-width:24rem}
.max-w-md{max-width:28rem}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-7xl{max-width:80rem}

.gap-1{gap:.25rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-8{gap:2rem}
.gap-12{gap:3rem}

.space-y-2>:not([hidden])~:not([hidden]){margin-top:.5rem}
.space-y-3>:not([hidden])~:not([hidden]){margin-top:.75rem}
.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}
.space-y-6>:not([hidden])~:not([hidden]){margin-top:1.5rem}

.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.overflow-hidden{overflow:hidden}
.overflow-x-hidden{overflow-x:hidden}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
.font-sans{font-family:Inter,sans-serif}
.font-heading{font-family:Montserrat,sans-serif}
.font-normal{font-weight:400}
.font-light{font-weight:300}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.font-black{font-weight:900}

.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.italic{font-style:italic}
.uppercase{text-transform:uppercase}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.text-\[10px\]{font-size:10px;line-height:1.2}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}

.leading-none{line-height:1}
.leading-tight{line-height:1.25}
.leading-snug{line-height:1.375}
.leading-relaxed{line-height:1.625}

.tracking-tight{letter-spacing:-.025em}
.tracking-wide{letter-spacing:.025em}
.tracking-wider{letter-spacing:.05em}
.tracking-widest{letter-spacing:.1em}

/* =========================================================
   COLORS
   ========================================================= */
.bg-white{background-color:#fff}
.bg-gray-50{background-color:#f9fafb}
.bg-gray-800{background-color:#1f2937}
.bg-dark-charcoal{background-color:#1A202C}
.bg-soft-gray{background-color:#F8F9FA}
.bg-royal-blue{background-color:#0F52BA}
.bg-sky-blue{background-color:#00A8E8}
.bg-accent-orange{background-color:#FF6B00}
.bg-red-500{background-color:#ef4444}
.bg-amber-500{background-color:#f59e0b}
.bg-emerald-600{background-color:#059669}
.bg-green-500{background-color:#22c55e}
.bg-green-100{background-color:#dcfce7}
.bg-purple-600{background-color:#9333ea}
.bg-lime-400{background-color:#a3e635}
.bg-transparent{background-color:transparent}

.text-white{color:#fff}
.text-black{color:#000}
.text-dark-charcoal{color:#1A202C}
.text-royal-blue{color:#0F52BA}
.text-sky-blue{color:#00A8E8}
.text-gray-200{color:#e5e7eb}
.text-gray-300{color:#d1d5db}
.text-gray-400{color:#9ca3af}
.text-gray-500{color:#6b7280}
.text-gray-600{color:#4b5563}
.text-gray-700{color:#374151}
.text-blue-100{color:#dbeafe}
.text-blue-200{color:#bfdbfe}
.text-green-500{color:#22c55e}
.text-green-700{color:#15803d}
.text-amber-300{color:#fcd34d}
.text-amber-400{color:#fbbf24}

/* Opacity colors */
.bg-white\/95{background-color:rgba(255,255,255,.95)}
.bg-black\/60{background-color:rgba(0,0,0,.6)}
.bg-gray-800\/80{background-color:rgba(31,41,55,.8)}
.bg-sky-blue\/20{background-color:rgba(0,168,232,.2)}
.bg-royal-blue\/10{background-color:rgba(15,82,186,.1)}
.border-white\/20{border-color:rgba(255,255,255,.2)}
.border-sky-blue\/40{border-color:rgba(0,168,232,.4)}

/* =========================================================
   BORDERS / RADIUS / SHADOWS
   ========================================================= */
.border{border-width:1px;border-style:solid;border-color:#e5e7eb}
.border-0{border:0}
.border-2{border-width:2px;border-style:solid}
.border-4{border-width:4px;border-style:solid}
.border-t{border-top:1px solid #e5e7eb}
.border-b{border-bottom:1px solid #e5e7eb}
.border-y{border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.border-l-4{border-left:4px solid}

.border-gray-100{border-color:#f3f4f6}
.border-gray-200{border-color:#e5e7eb}
.border-gray-800{border-color:#1f2937}
.border-royal-blue{border-color:#0F52BA}
.border-sky-blue{border-color:#00A8E8}
.border-white{border-color:#fff}

.rounded{border-radius:.25rem}
.rounded-md{border-radius:.375rem}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-full{border-radius:9999px}

.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}
.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}

/* =========================================================
   EFFECTS / TRANSITIONS
   ========================================================= */
.object-cover{object-fit:cover}
.opacity-50{opacity:.5}
.backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.backdrop-blur-md{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

.transition-all{transition-property:all;transition-duration:150ms}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:150ms}
.transition-transform{transition-property:transform;transition-duration:150ms}
.duration-300{transition-duration:300ms}
.duration-500{transition-duration:500ms}
.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}

.transform{transform:translateZ(0)}
.-rotate-1{transform:rotate(-1deg)}
.-translate-y-2{transform:translateY(-.5rem)}
.translate-x-full{transform:translateX(100%)}

.bg-gradient-to-t{
    background-image:linear-gradient(to top,var(--tw-gradient-stops));
}
.from-black\/90{
    --tw-gradient-from:rgba(0,0,0,.9);
    --tw-gradient-to:rgba(0,0,0,0);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);
}
.via-black\/40{
    --tw-gradient-to:rgba(0,0,0,0);
    --tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,.4),var(--tw-gradient-to);
}
.to-transparent{--tw-gradient-to:transparent}

.line-clamp-2{
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp: 2;
}
.fill-current{fill:currentColor}

.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{
    75%,100%{transform:scale(2);opacity:0}
}

/* =========================================================
   HOVER / FOCUS
   ========================================================= */
.hover\:text-sky-blue:hover{color:#00A8E8}
.hover\:text-white:hover{color:#fff}
.hover\:text-dark-charcoal:hover{color:#1A202C}
.hover\:border-royal-blue:hover{border-color:#0F52BA}
.hover\:bg-royal-blue:hover{background-color:#0F52BA}
.hover\:bg-sky-blue:hover{background-color:#00A8E8}
.hover\:bg-blue-700:hover{background-color:#1d4ed8}
.hover\:bg-blue-400:hover{background-color:#60a5fa}
.hover\:bg-gray-100:hover{background-color:#f3f4f6}
.hover\:bg-blue-50:hover{background-color:#eff6ff}
.hover\:bg-orange-50:hover{background-color:#fff7ed}
.hover\:bg-orange-600:hover{background-color:#ea580c}
.hover\:shadow-xl:hover{
    box-shadow:0 20px 25px -5px rgba(0,0,0,.1),
               0 8px 10px -6px rgba(0,0,0,.1);
}

.group:hover .group-hover\:scale-105{transform:scale(1.05)}
.group:hover .group-hover\:bg-sky-blue{background-color:#00A8E8}

.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:border-royal-blue:focus{border-color:#0F52BA}

/* =========================================================
   CONTAINER — isto ponašanje kao Tailwind container
   ========================================================= */
@media (min-width:640px){.container{max-width:640px}}
@media (min-width:768px){.container{max-width:768px}}
@media (min-width:1024px){.container{max-width:1024px}}
@media (min-width:1280px){.container{max-width:1280px}}
@media (min-width:1536px){.container{max-width:1536px}}

/* =========================================================
   SM
   ========================================================= */
@media (min-width:640px){
    .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
    .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .sm\:text-base{font-size:1rem;line-height:1.5rem}
    .sm\:text-xl{font-size:1.25rem;line-height:1.75rem}
    .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
    .sm\:text-5xl{font-size:3rem;line-height:1}
}

/* =========================================================
   MD
   ========================================================= */
@media (min-width:768px){
    .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .md\:flex-row{flex-direction:row}
    .md\:items-end{align-items:flex-end}
    .md\:mt-0{margin-top:0}
    .md\:-translate-y-2{transform:translateY(-.5rem)}
}

/* =========================================================
   LG
   ========================================================= */
@media (max-width:1023px){
    .lg\:hidden{display:block}
    .lg\:flex{display:none}
}
@media (min-width:1024px){
    .lg\:hidden{display:none}
    .lg\:flex{display:flex}
    .lg\:px-8{padding-left:2rem;padding-right:2rem}
    .lg\:py-36{padding-top:9rem;padding-bottom:9rem}
    .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
    .lg\:col-span-3{grid-column:span 3/span 3}
    .lg\:col-span-4{grid-column:span 4/span 4}
    .lg\:col-span-5{grid-column:span 5/span 5}
    .lg\:col-span-6{grid-column:span 6/span 6}
    .lg\:col-span-7{grid-column:span 7/span 7}
    .lg\:text-6xl{font-size:3.75rem;line-height:1}
}

/* =========================================================
   STRANICA-SPECIFIČNE KLASE
   ========================================================= */
.route-filter-btn{cursor:pointer}
.active-link{color:#00A8E8}

/* Font Awesome ostaje vanjska biblioteka, nije Tailwind. */


/* =========================================================
   DODATNE KONAČNE KOMPATIBILNOSTI
   ========================================================= */
.selection\:bg-sky-blue::selection{background-color:#00A8E8}
.selection\:text-white::selection{color:#fff}

/* Klasa postoji u HTML-u; zadržava osnovno ponašanje kartice. */
.route-card{position:relative}

/* =========================================================
   GALERIJA, FORME I STATUS PORUKE (backend integracija)
   ========================================================= */
.gallery-item{margin:0;position:relative;border-radius:1rem;overflow:hidden;cursor:pointer;aspect-ratio:1/1}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-caption{
    position:absolute;inset:auto 0 0 0;padding:.75rem;
    background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
    color:#fff;font-size:.7rem;font-weight:600;
    opacity:0;transition:opacity .25s ease;
}
.gallery-item:hover .gallery-caption{opacity:1}

.lightbox-overlay{
    position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.88);
    display:flex;align-items:center;justify-content:center;padding:1.5rem;
}
.lightbox-img{max-width:92vw;max-height:85vh;border-radius:.5rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;top:1.25rem;right:1.5rem;color:#fff;font-size:1.75rem;cursor:pointer}

.form-msg{font-size:.75rem;font-weight:600;border-radius:.5rem;padding:.5rem .75rem;margin-top:.5rem}
.form-msg-success{background:#dcfce7;color:#15803d}
.form-msg-error{background:#fee2e2;color:#b91c1c}

.btn-disabled{opacity:.6;cursor:not-allowed}

.event-badge-count{
    display:inline-flex;align-items:center;gap:.25rem;
    font-size:.65rem;font-weight:700;color:#e5e7eb;
}

.empty-state{
    text-align:center;color:#9ca3af;font-size:.8rem;padding:2rem 0;
    grid-column:1/-1;
}


/* Skriveno polje protiv spam botova */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* =========================================================
   KARTICA DOGAĐAJA (klikabilna)
   ========================================================= */
.event-card{cursor:pointer;outline:none;transition:transform .3s ease,box-shadow .3s ease}
.event-card:hover{transform:translateY(-4px);box-shadow:0 20px 25px -5px rgba(0,0,0,.3)}
.event-card:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px #00A8E8}
.event-card:hover > img{transform:scale(1.05)}
.event-card__cta{
    display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
    padding:.65rem 1rem;border-radius:.75rem;background:#0F52BA;color:#fff;
    font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
    transition:background-color .2s ease;
}
.event-card:hover .event-card__cta{background:#00A8E8}
.event-card__cta i{transition:transform .2s ease}
.event-card:hover .event-card__cta i{transform:translateX(3px)}

/* =========================================================
   POPUP DOGAĐAJA
   ========================================================= */
html.modal-open{overflow:hidden}
.ev-modal[hidden]{display:none}
.ev-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.ev-modal__backdrop{
    position:absolute;inset:0;background:rgba(10,14,22,.7);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    opacity:0;transition:opacity .2s ease;
}
.ev-modal__dialog{
    position:relative;width:100%;max-width:560px;max-height:calc(100vh - 3rem);
    background:#fff;border-radius:1.5rem;overflow:hidden;display:flex;flex-direction:column;
    box-shadow:0 30px 60px -15px rgba(0,0,0,.5);
    opacity:0;transform:translateY(16px) scale(.97);
    transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1);
}
.ev-modal.is-open .ev-modal__backdrop{opacity:1}
.ev-modal.is-open .ev-modal__dialog{opacity:1;transform:none}

.ev-modal__close{
    position:absolute;top:.9rem;right:.9rem;z-index:2;width:2.5rem;height:2.5rem;border:0;border-radius:9999px;
    display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;
    background:rgba(0,0,0,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    transition:background-color .2s ease,transform .2s ease;
}
.ev-modal__close:hover{background:rgba(0,0,0,.7);transform:rotate(90deg)}
.ev-modal__close:focus-visible{outline:3px solid #00A8E8;outline-offset:2px}

.ev-modal__hero{
    position:relative;flex-shrink:0;min-height:190px;display:flex;align-items:flex-end;
    padding:1.5rem;background-size:cover;background-position:center;color:#fff;
}
.ev-modal__hero::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to top,rgba(10,14,22,.95) 0%,rgba(10,14,22,.55) 55%,rgba(15,82,186,.25) 100%);
}
.ev-modal__hero-content{position:relative;width:100%}
.ev-modal__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem}
.ev-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:9999px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.ev-chip--date{background:#a3e635;color:#111}
.ev-chip--cat{background:#FF6B00;color:#fff}
.ev-chip[hidden]{display:none}
.ev-modal__title{margin:0;font-family:Montserrat,sans-serif;font-weight:900;font-size:1.6rem;line-height:1.15;text-transform:uppercase;letter-spacing:-.01em;padding-right:2.5rem}

.ev-modal__body{padding:1.5rem;overflow-y:auto;overscroll-behavior:contain}
.ev-modal__desc{margin:0 0 1rem;font-size:.88rem;color:#4b5563;line-height:1.6}
.ev-modal__route[hidden]{display:none}
.ev-route{
    display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.75rem;align-items:center;
    padding:.75rem .9rem;margin-bottom:1.25rem;border-radius:1rem;background:#F8F9FA;border:1px solid #eef0f3;
    transition:border-color .2s ease,background-color .2s ease;
}
.ev-route:hover{border-color:#0F52BA;background:#eff6ff}
.ev-route__icon{grid-row:span 2;width:2.4rem;height:2.4rem;border-radius:.75rem;background:#0F52BA;color:#fff;display:flex;align-items:center;justify-content:center}
.ev-route__name{font-size:.85rem;font-weight:700;color:#1A202C}
.ev-route__stats{font-size:.72rem;color:#6b7280;font-weight:600}

.ev-note{display:flex;align-items:center;gap:.5rem;margin:0;padding:.85rem 1rem;border-radius:.9rem;background:#fef3c7;color:#92400e;font-size:.8rem;font-weight:600}
.ev-note[hidden]{display:none}

/* ---------- Forma ---------- */
.ev-form[hidden],.ev-success[hidden],.ev-error[hidden],#evModalExternal[hidden]{display:none}
.ev-form{border-top:1px solid #f1f2f4;padding-top:1.25rem}
.ev-form__heading{margin:0 0 1rem;font-size:.8rem;font-weight:600;color:#6b7280}
.ev-field{margin:0 0 1rem;padding:0;border:0;min-width:0}
.ev-field > label,.ev-field > legend{display:block;padding:0;margin-bottom:.4rem;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#374151}
.ev-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}

.ev-input{position:relative}
.ev-input i{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);font-size:.8rem;color:#9ca3af;pointer-events:none;transition:color .2s ease}
.ev-input input,.ev-textarea{
    width:100%;padding:.75rem .95rem;border:1.5px solid #e5e7eb;border-radius:.8rem;background:#fff;
    font-size:.88rem;color:#1A202C;transition:border-color .2s ease,box-shadow .2s ease;
}
.ev-input input{padding-left:2.5rem}
.ev-textarea{resize:vertical;min-height:4.5rem}
.ev-input input:focus,.ev-textarea:focus{outline:none;border-color:#0F52BA;box-shadow:0 0 0 4px rgba(15,82,186,.12)}
.ev-input:focus-within i{color:#0F52BA}
.ev-input input.is-invalid{border-color:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.1)}

.ev-pills{display:flex;flex-wrap:wrap;gap:.5rem}
.ev-pill{position:relative;cursor:pointer}
.ev-pill input{position:absolute;opacity:0;width:1px;height:1px}
.ev-pill span{
    display:inline-flex;align-items:center;justify-content:center;min-width:2.9rem;
    padding:.5rem .9rem;border-radius:9999px;border:1.5px solid #e5e7eb;background:#fff;
    font-size:.78rem;font-weight:600;color:#374151;user-select:none;
    transition:all .15s ease;
}
.ev-pill:hover span{border-color:#0F52BA;color:#0F52BA}
.ev-pill input:checked + span{background:#0F52BA;border-color:#0F52BA;color:#fff;box-shadow:0 4px 10px -2px rgba(15,82,186,.4)}
.ev-pill input:focus-visible + span{outline:3px solid #00A8E8;outline-offset:2px}

.ev-error{margin:0 0 1rem;padding:.7rem .9rem;border-radius:.8rem;background:#fee2e2;color:#b91c1c;font-size:.8rem;font-weight:600}

.ev-btn{
    display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
    padding:.95rem 1.25rem;border:0;border-radius:.9rem;background:#0F52BA;color:#fff;
    font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
    box-shadow:0 10px 20px -8px rgba(15,82,186,.6);
    transition:background-color .2s ease,transform .15s ease,box-shadow .2s ease;
}
.ev-btn:hover{background:#00A8E8;box-shadow:0 12px 24px -8px rgba(0,168,232,.6)}
.ev-btn:active{transform:scale(.98)}
.ev-btn:focus-visible{outline:3px solid #00A8E8;outline-offset:3px}
.ev-btn:disabled{cursor:wait;opacity:.8}
.ev-btn--ghost{background:#F3F4F6;color:#1A202C;box-shadow:none}
.ev-btn--ghost:hover{background:#e5e7eb;box-shadow:none}
.ev-btn.is-loading span,.ev-btn.is-loading i{visibility:hidden}
.ev-btn.is-loading{position:relative}
.ev-btn.is-loading::after{
    content:"";position:absolute;width:1.15rem;height:1.15rem;border-radius:50%;
    border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:ev-spin .7s linear infinite;
}
@keyframes ev-spin{to{transform:rotate(360deg)}}

/* ---------- Uspjeh ---------- */
.ev-success{text-align:center;padding:1rem 0 .25rem;border-top:1px solid #f1f2f4}
.ev-success__icon{
    width:4rem;height:4rem;margin:.75rem auto 1rem;border-radius:50%;background:#dcfce7;color:#16a34a;
    display:flex;align-items:center;justify-content:center;font-size:1.6rem;
    animation:ev-pop .4s cubic-bezier(.2,1.4,.4,1);
}
.ev-success h4{margin:0 0 .35rem;font-family:Montserrat,sans-serif;font-weight:900;font-size:1.25rem;text-transform:uppercase;color:#1A202C}
.ev-success p{margin:0 0 1.5rem;font-size:.88rem;color:#6b7280}
@keyframes ev-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- Mobitel: popup kao "bottom sheet" ---------- */
@media (max-width:640px){
    .ev-modal{align-items:flex-end;padding:0}
    .ev-modal__dialog{max-width:none;max-height:92vh;border-radius:1.5rem 1.5rem 0 0;transform:translateY(100%)}
    .ev-modal.is-open .ev-modal__dialog{transform:none}
    .ev-modal__hero{min-height:160px;padding:1.25rem}
    .ev-modal__title{font-size:1.3rem}
    .ev-modal__body{padding:1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom))}
    .ev-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
    .ev-modal__backdrop,.ev-modal__dialog,.event-card,.ev-success__icon{transition:none;animation:none}
}