/* ===== 1. OSNOVNI STILOVI ===== */
/* DIJAGNOSTIKA - OBOJI SVE ELEMENTE CRVENO DA VIDIS KOJI ILAZI */


/*html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}*/

/* ===== 2. BODY - POZADINA ===== */
/*body {
    margin-bottom: 60px;
    background-image: url('/images/VanRouteLogo.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
}*/
/*body {
    margin-bottom: 60px;
    margin-top: 80px;
    // background: #070339;
    background: linear-gradient(180deg, #0d54c6 5%,#093e92 20%, #051f48 75%);
    background-position: center;
    color: white;
}

@media (max-width: 768px) {
    body {
        background-size: cover;
        background-position: center;
    }

    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0;
    }

        .mobile-bottom-nav a {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 8px 0;
        }

            .mobile-bottom-nav a svg {
                width: 22px;
                height: 22px;
                margin-bottom: 2px;
            }

            .mobile-bottom-nav a span {
                font-size: 11px;
                line-height: 1.2;
            }
}
}
//rgb(215 232 237)*/
/* ===== 3. MAIN CONTENT ===== */
/*main {
    min-height: calc(100vh - 200px);
    padding-top: 70px;
}*/

/* ===== 4. GLOBALNI ELEMENTI ===== */
/*.btn:focus, .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(37, 140, 251, 0.25);
}*/

/* STATS CARDS (Bootstrap boje) */
/*.bg-primary {
    background: linear-gradient(45deg, #4e73df, #7a8fe8) !important;
}

.bg-success {
    background: linear-gradient(45deg, #1cc88a, #3fe4a7) !important;
}

.bg-warning {
    background: linear-gradient(45deg, #f6c23e, #f9d87c) !important;
}

.bg-info {
    background: linear-gradient(45deg, #36b9cc, #64d2e2) !important;
}*/
/* ===== 5. MOBILNA NAVIGACIJA I NAVBAR ===== */
/*.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1050;*/
    /* Dodaj blur efekat kao na gornjem navbaru */
    /*background-color: rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

    .mobile-bottom-nav a {
        text-decoration: none;
        color: white;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);*/
        /* Ukloni bilo kakvu liniju ili border na hover */
        /*outline: none;
    }

        .mobile-bottom-nav a:hover {
            text-decoration: none;
            color: white;
            outline: none;
        }

    .mobile-bottom-nav i {
        font-size: 18px;
        color: white;
    }*/

/* Navbar - providan */
/*.navbar {
    background-color: transparent !important;
    backdrop-filter: blur(10px);
    box-shadow: none !important;
}

.navbar-brand {
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    margin-left: 10px;
    color: var(--primary-color) !important;
}

.nav-link {
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    color: white !important;
    text-decoration: none !important;
}

    .nav-link:hover {
        color: rgba(255, 255, 255, 0.8) !important;
        background-color: transparent !important;
        text-decoration: none !important;
    }*/

    /* Ukloni liniju ispod linkova */
    /*.nav-link::after,
    .dropdown-toggle::after {
        display: none !important;
    }*/

/* Footer */
/*footer {
    margin-top: 2rem;
    padding: 1rem 0;
}*/

/* Footer na mobilnom - providan */
/*@media (max-width: 768px) {
    footer {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

        footer .text-muted,
        footer a {
            color: rgba(255, 255, 255, 0.8);
        }
}*/
/* ===== 6. DASHBOARD STILOVI - PROVIDNE KARTICE ===== */
/*.card {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s;
}

    .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15) !important;
        background: rgba(255, 255, 255, 0.15) !important;
    }

.card-header {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 1.2rem 1.5rem !important;
}

    .card-header h5 {
        color: white !important;
        font-weight: 600;
        margin: 0;
    }

.card-body {
    background: transparent !important;
    padding: 1.5rem !important;
}*/

/* STATS KARTICE */
/*.stats-card {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

    .stats-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15) !important;
        background: rgba(255, 255, 255, 0.15) !important;
    }

    .stats-card h4 {
        color: white !important;
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .stats-card p {
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 0.9rem;
        margin-bottom: 0;
    }*/

/* BORDER BOTTOM ZA LISTE */
/*.border-bottom {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

    .border-bottom h6 {
        color: white !important;
        font-weight: 600;
        margin-bottom: 0.3rem;
    }

    .border-bottom small {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .border-bottom .text-muted {
        color: rgba(255, 255, 255, 0.6) !important;
    }*/

/* BADGE */
/*.badge {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}*/

/* DUGMAD */
/*.btn-primary, .btn {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    font-weight: 500;
    transition: all 0.3s;
    backdrop-filter: blur(5px);
}

    .btn-primary:hover, .btn:hover {
        background: rgba(255, 255, 255, 0.25) !important;
        transform: translateY(-2px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
    }*/

/* LINKOVI */
/*a {
    color: white !important;
    text-decoration: none;
    font-weight: 500;
    opacity: 0.9;
}

    a:hover {
        opacity: 1;
        text-decoration: underline;
    }*/

/* WELCOME NASLOV */
/*h2 {
    color: white !important;
    font-weight: 600;
    opacity: 0.95;
}*/

/* TEKST */
/*p, .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

small, .small {
    color: rgba(255, 255, 255, 0.7) !important;
}*/

/* ===== 7. LAYOUT STILOVI ===== */
/* Chat modal za mobilni */
/*@media (max-width: 768px) {
    #chatModal .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100vh;
    }

    #chatModal .modal-content {
        height: 100vh;
        border-radius: 0;
        border: none;
    }

    #chatMessages {
        height: calc(100vh - 200px) !important;
    }
}*/

/* ===== 8. LOGO BOJE ===== */
/*.logo-van {
    color: white;
}

.logo-route {
    color: #000000;
}*/



/* ===== 14. BOOKING CARD ELEMENTI ===== */
/*.booking-card .driver-info-box {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0.25rem;
    padding: 0.5rem;
}

.booking-card .address-box {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 0.25rem;
    padding: 0.5rem;
    margin-top: 0.5rem;
}*/


/* ===== 15. MY BOOKINGS ===== */
/*#routeMap {
    height: 400px;
    width: 100%;
}*/
/* ===== MY BOOKINGS - ISTE KARTICE KAO MY RIDES ===== */
/*.my-bookings .card {
    background: transparent !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

    .my-bookings .card:hover {
        transform: none !important;
        background: transparent !important;
    }*/

/* MOBILNI - samo gornji i donji border, puna širina */
/*@media (max-width: 768px) {
    .my-bookings .card {
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    .my-bookings {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    .my-bookings .col-md-6 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .my-bookings .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}*/

/* Alert poruke - da budu providne */
/*.my-bookings .alert-info,
.my-bookings .alert-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

    .my-bookings .alert-info a,
    .my-bookings .alert-secondary a {
        color: white !important;
        text-decoration: underline;
    }

.my-bookings .btn-primary {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

    .my-bookings .btn-primary:hover {
        background: rgba(255, 255, 255, 0.25) !important;
    }*/


/* ===== 16. MY RIDES ===== */
/*.my-rides-container .route-info-box {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0.25rem;
    color: white;
}

    .my-rides-container .route-info-box .text-primary {
        color: #4a9eff !important;
    }*/

/* Alert poruke */
/*.my-rides-container .alert-info {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

    .my-rides-container .alert-info a,
    .my-rides-container .alert-info .btn-primary {
        color: white !important;
    }*/

/* ===== 17. RIDE DETAILS ===== */
/*.ride-details-alert {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

    .ride-details-alert a,
    .ride-details-alert .btn-link {
        color: #4a9eff !important;
    }

.text-secondary {
    color: rgba(255, 255, 255, 0.7) !important;
}*/

/* Chat messages box */
/*.chat-messages-box {
    height: 300px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 15px;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 5px;
    color: white;
}*/

/* Passenger cards */
/*.ride-details-container .card {
    background: rgba(255, 255, 255, 0.1) !important;
}

.ride-details-container .border-top {
    border-top-color: rgba(255, 255, 255, 0.2) !important;
}*/

/* Naslovi i border-bottom */
/*.ride-details-container h5.border-bottom,
.ride-details-container .border-bottom {
    color: white !important;
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

.ride-details-container h5 i {
    color: white;
}*/

/* Ride Details naslov u headeru */
/*.ride-details-container .card-header h4 {
    color: white !important;
}

    .ride-details-container .card-header h4 i {
        color: white;
    }

.ride-details-container .col-md-6 h6,
.ride-details-container .col-md-6 p,
.ride-details-container .col-md-6 strong {
    color: white !important;
}*/


/* ===== PWA INSTALL DUGMAD ===== */
/*.pwa-install-container,
.pwa-install-mobile {
    position: fixed;
    z-index: 1000;
}

.pwa-install-container {
    bottom: 20px;
    right: 20px;
}

.pwa-install-mobile {
    bottom: 70px;
    right: 10px;
}

#installPwaBtn,
#installPwaMobileBtn {
    display: none;
    background-color: transparent;
    border: none;
    color: white;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
}

#installPwaBtn {
    border-radius: 12px;
    padding: 10px 20px;
}

#installPwaMobileBtn {
    border-radius: 10px;
    padding: 8px 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}*/

    /* Hover efekat (opcionalno) */
    /*#installPwaBtn:hover,
    #installPwaMobileBtn:hover {
        background-color: rgba(255, 255, 255, 0.1);
        transition: background-color 0.3s ease;
    }*/

/* ===== DRIVER COMMENT ALERT ===== */
/*.alert-comment {
    color: #00f2fe;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

    .alert-comment strong {
        color: #00f2fe;
    }*/


/* ===== TABOVI ZA VOZAČA I PUTNIKA - MINIMALISTIČKI ===== */
/*body #myRidesTabs.nav-tabs,
body #bookingTabs.nav-tabs {
    border-bottom: none !important;
    display: flex;
    width: 100%;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    gap: 0;
}

    body #myRidesTabs.nav-tabs .nav-item,
    body #bookingTabs.nav-tabs .nav-item {
        flex: 1;
        margin: 0 !important;
    }

    body #myRidesTabs.nav-tabs .nav-link,
    body #bookingTabs.nav-tabs .nav-link {
        width: 100%;
        padding: 12px 5px !important;
        margin: 0 !important;*/
        /* Ukloni sve stilove */
        /*background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        box-shadow: none !important;*/
        /* Tekst */
        /*color: rgba(255, 255, 255, 0.6) !important;
        font-weight: 500;
        font-size: 14px;
        text-align: center;*/
        /* Samo donji border za active */
        /*border-bottom: 2px solid transparent !important;*/
        /* Bez hover efekata */
        /*transition: none !important;
    }

        body #myRidesTabs.nav-tabs .nav-link:hover,
        body #bookingTabs.nav-tabs .nav-link:hover,
        body #myRidesTabs.nav-tabs .nav-link:focus,
        body #bookingTabs.nav-tabs .nav-link:focus {
            background: transparent !important;
            border: none !important;
            color: rgba(255, 255, 255, 0.8) !important;
            border-bottom: 2px solid transparent !important;
        }

        body #myRidesTabs.nav-tabs .nav-link.active,
        body #bookingTabs.nav-tabs .nav-link.active {
            background: transparent !important;
            border: none !important;
            color: white !important;
            font-weight: 600;
            border-bottom: 2px solid white !important;
            box-shadow: none !important;
        }*/

        /* SVG ikonice */
        /*body #myRidesTabs.nav-tabs .nav-link svg,
        body #bookingTabs.nav-tabs .nav-link svg {
            fill: currentColor;
            width: 18px;
            height: 18px;
            margin-right: 6px;
            vertical-align: middle;
        }*/

/* Responsive za mobilni */
/*@media (max-width: 768px) {
    body #myRidesTabs.nav-tabs .nav-link,
    body #bookingTabs.nav-tabs .nav-link {
        font-size: 13px;
        padding: 10px 3px !important;
    }

        body #myRidesTabs.nav-tabs .nav-link svg,
        body #bookingTabs.nav-tabs .nav-link svg {
            width: 16px;
            height: 16px;
            margin-right: 4px;
        }
}*/


/* PROVIDNE KARTICE ZA PUTNIKE - BEZ IMPORTANT */
/*.ride-details-container .col-md-6 .card {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ride-details-container .col-md-6 .card-body {
    background: transparent;
}*/

/* GENERAL ALERT INFO - PROVIDAN SA BLUROM */
/*.alert.alert-info {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 12px;
    padding: 1rem;
}*/

/* CARD NASLOV ZA RIDE  */
/*.card-title {
    color: white;
}*/

/* LABELA ZA DEPARTURE CITY,destination city..... */
/*.form-group .form-label {
    color: white;
}*/

/* CONTACT INFORMATION NASLOV - BELO */
/*.border-top h6 {
    color: white;
}*/

/* IME PUTNIKA U REVIEWS - BELO */
/*.card .border-bottom strong {
    color: white;
}*/


/* DATUM NASLOV - RGB(215, 232, 237) */
/*.date-header.text-success {
    color: rgb(215, 232, 237);
}*/


/* MAPBOX GEOCODER - SAMO POZADINA */
/*.mapboxgl-ctrl-geocoder,
.mapboxgl-ctrl-geocoder *,
.mapboxgl-ctrl-geocoder .suggestions,
.mapboxgl-ctrl-geocoder .suggestions-wrapper,
.mapboxgl-ctrl-geocoder .suggestions > li,
.mapboxgl-ctrl-geocoder .suggestions .mapboxgl-ctrl-geocoder--suggestion,
.mapboxgl-ctrl-geocoder .suggestions .suggestion,
.mapboxgl-ctrl-geocoder input {
    background: #0d54c6 !important;
}

    .mapboxgl-ctrl-geocoder input {
        color: white !important;
        
    }

    .mapboxgl-ctrl-geocoder .suggestions .mapboxgl-ctrl-geocoder--suggestion-title {
        color: white !important;
    }

    .mapboxgl-ctrl-geocoder .suggestions .mapboxgl-ctrl-geocoder--suggestion-address {
        color: #cccccc !important;
    }*/


/* DEPARTURE LOCATION LABEL - BOJA rgb(215, 232, 237) */
/*body .form-group label[for="DepartureCity"],
body .form-group label.control-label[for="DepartureCity"] {
    color: rgb(215, 232, 237);
}*/

/* PLACEHOLDER U DEPARTURE INPUTU */
/*body .mapboxgl-ctrl-geocoder input::placeholder {
    color: rgb(215, 232, 237);
    opacity: 1;
}*/


/* SVE LABELE - BELO */
/*body .form-group label,
body .control-label,
body .form-label,
body h4.mb-3,
body h4.mt-4 {
    color: white;
}*/

/* DUGME ZA DODAVANJE STOPS */
/*body #addStopBtn {
    color: white;
    border-color: rgba(255, 255, 255, 0.5);
}

    body #addStopBtn:hover {
        background: rgba(255, 255, 255, 0.1);
    }*/

/* TEKST ZA Max stops: 10 */
/*body small.form-text.text-muted {
    color: rgba(255, 255, 255, 0.7);
}*/

/* DEPARTURE ADDRESS WRAPPER LABELE */
/*body #departureAddressWrapper label,
body #destinationAddressWrapper label {
    color: white;
}*/

/* INPUT GRUPA TEKST */
/*body .input-group-text {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}*/

/* SMALL TEKST ISPOD INPUTA */
/*body small.text-muted {
    color: rgba(255, 255, 255, 0.7);
}*/

/* VALIDACIJA - crvena */
/*body .text-danger {
    color: #dc3545;
}*/
/* NASLOV U PREGLEDU - BELO */
/*body h4.mb-4 {
    color: white;
}*/

/* STEP 4 I 5 - POZADINA */
/*#step-4, #step-5 {
    background: ##0d54c6;
    padding: 20px;
    border-radius: 12px;
}*/

    /* KARTICE U PREGLEDU */
    /*#step-5 .review-card {
        background: rgba(255,255,255,0.1);
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 12px;
        color: white;
    }*/

    

/* STEP 3 - PLAVA POZADINA */
/*#step-3 {
    background: ##0d54c6;
    border-radius: 12px;
    margin-top: 15px;
}*/

/* STOPS KONTEJNER */


/* STOP ITEMI */

    /*.stop-item label {
        color: white;
    }*/

/* BELA SENKA NA INPUTIMA */
/*input, select, textarea, .mapboxgl-ctrl-geocoder input {
    box-shadow: 0 4px 12px rgb(26 22 22 / 25%);
}*/

    /* Kad je input fokusiran - malo jača bela senka */
    /*input:focus, select:focus, textarea:focus, .mapboxgl-ctrl-geocoder input:focus {
        box-shadow: 0 6px 16px rgb(26 22 22 / 25%);
        outline: none;
    }*/


/* ===== MY RIDES - JEDNOSTAVNE KARTICE I PUNE ŠIRINE ===== */
/*.my-rides-container {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

    .my-rides-container .card {
        background: transparent !important;
        backdrop-filter: none !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

        .my-rides-container .card:hover {
            transform: none !important;
            background: transparent !important;
        }*/

/* MOBILNI - uklanjanje levog i desnog bordera */
/*@media (max-width: 768px) {
    .my-rides-container .card {
        border-left: none !important;
        border-right: none !important;
    }

    .my-rides-container .col-md-6 {
        padding-left: 0;
        padding-right: 0;
    }

    .my-rides-container .ride-card {
        margin-left: 0;
        margin-right: 0;
    }
}*/

/* TABOVI NA CELOJ SIRINI */
/*#myRidesTabs {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 768px) {
    #myRidesTabs {
        display: flex;
        width: 100%;
    }

        #myRidesTabs .nav-item {
            flex: 1;
            margin: 0;
        }

        #myRidesTabs .nav-link {
            width: 100%;
            text-align: center;
            border-bottom: 2px solid transparent !important;
            border-radius: 0 !important;
            margin: 0;
        }

            #myRidesTabs .nav-link.active {
                border-bottom: 1px solid white !important;
            }*/

    /* Kartice na mobilnom */
    /*.my-rides-container .col-md-6 {
        padding-left: 0;
        padding-right: 0;
    }
}*/

/* Šire kartice na mobilnom */
/*@media (max-width: 768px) {
    #step-5 .row {
        margin-left: 0;
        margin-right: 0;
    }

    #step-5 [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}
@media (max-width: 768px) {
    #step-5 .review-card {
        border-radius: 0;
    }
}*/


/* MOBILNA FORMA - VanRoute stil */
/*.mobile-search-form {
    padding: 0 10px;
}

.mobile-fieldset {
    border: 2px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 10px;
    padding: 0;
    position: relative;
}

    .mobile-fieldset legend {
        float: none;
        width: auto;
        padding: 0 8px;
        margin-left: 12px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
        background: transparent;
    }

.mobile-search-input {
    padding: 8px 16px 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border: none;
}

    .mobile-search-input span {
        color: white;
        font-size: 16px;
    }

    .mobile-search-input svg {
        stroke: white;
        opacity: 0.6;
    }

.mobile-search-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

    .mobile-search-actions .btn {
        flex: 1;
        padding: 10px;
        font-size: 16px !important;
        border-radius: 0;
        background: #00C853;
    }*/

/* Modal */
/*.mobile-city-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #0d54c6 5%, #093e92 20%, #051f48 75%);
    z-index: 2000;
    flex-direction: column;
}

.mobile-modal-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.1);
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-modal-back {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

    .mobile-modal-back svg {
        stroke: white;
    }

.mobile-modal-search {
    flex: 1;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 16px;
    gap: 10px;
}

    .mobile-modal-search svg {
        stroke: white;
    }

    .mobile-modal-search input {
        flex: 1;
        background: transparent;
        border: none;
        color: white;
        font-size: 16px;
        outline: none;
    }

        .mobile-modal-search input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

.mobile-modal-results {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.mobile-result-item {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

    .mobile-result-item:hover {
        background: rgba(255, 255, 255, 0.1);
    }

.mobile-result-name {
    color: white;
    font-size: 16px;
    font-weight: 500;
}

.mobile-result-country {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin-top: 4px;
}*/

/* Mobilna forma - uvek prikazana */
/*.mobile-search-form {
    display: block;
}*/

/* Desktop forma - potpuno sakrivena, ne koristimo je */
/*#searchFormContainer {
    display: none !important;
}*/

/* Dugme za povratak na pretragu */
/*#backToSearchContainer {
    margin-bottom: 1rem;
}


.mobile-date-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}*/

/* ===== 1. OSNOVNI STILOVI ===== */
/* DIJAGNOSTIKA - OBOJI SVE ELEMENTE CRVENO DA VIDIS KOJI ILAZI */


html {
    font-size: 15px;
    position: relative;
    min-height: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
    html::-webkit-scrollbar {
        display: none;
    }

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    *::-webkit-scrollbar {
        display: none;
    }

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* ===== 2. BODY - POZADINA ===== */
/*body {
    margin-bottom: 60px;
    background-image: url('/images/VanRouteLogo.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
}*/
body {
    margin-bottom: 60px;
    margin-top: 80px;
    background-image: conic-gradient(from 36deg at 20% 80%, #c7ddeb 0% 25%, #ffffff 25% 34%, #f1f1f1 30% 50%);
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;
    background-position: center;
    color: #093e92;
}

   

@media (max-width: 768px) {
    body {
        background-size: cover;
        background-position: center;
    }

    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0;
    }

        .mobile-bottom-nav a {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 8px 0;
        }

            .mobile-bottom-nav a svg {
                width: 22px;
                height: 22px;
                margin-bottom: 2px;
            }

            .mobile-bottom-nav a span {
                font-size: 11px;
                line-height: 1.2;
            }
}


//rgb(215 232 237)
/* ===== 3. MAIN CONTENT ===== */
main {
    min-height: calc(100vh - 200px);
    padding-top: 70px;
}

/* ===== 4. GLOBALNI ELEMENTI ===== */
.btn:focus, .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(37, 140, 251, 0.25);
}

/* STATS CARDS (Bootstrap boje) */
/*.bg-primary {
    background: linear-gradient(45deg, #4e73df, #7a8fe8) !important;
}

.bg-success {
    background: linear-gradient(45deg, #1cc88a, #3fe4a7) !important;
}

.bg-warning {
    background: linear-gradient(45deg, #f6c23e, #f9d87c) !important;
}

.bg-info {
    background: linear-gradient(45deg, #36b9cc, #64d2e2) !important;
}*/
/* ===== 5. MOBILNA NAVIGACIJA I NAVBAR ===== */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    border-top: 1px solid #a2bee8;
    justify-content: space-around;
    align-items: center;
    z-index: 1050;
    /* Dodaj blur efekat kao na gornjem navbaru */
    background-color: transparent;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

    .mobile-bottom-nav a {
        text-decoration: none;
        color: #093e92;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        /* Ukloni bilo kakvu liniju ili border na hover */
        outline: none;
    }

        .mobile-bottom-nav a:hover {
            text-decoration: none;
            color: #093e92;
            outline: none;
        }

    .mobile-bottom-nav i {
        font-size: 18px;
        color: #093e92;
    }

/* Navbar - providan */
.navbar {
    background-color: transparent !important;
    backdrop-filter: blur(20px);
    box-shadow: none !important;
    border-bottom: 1px solid #a2bee8 !important;
}

.navbar-brand {
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    margin-left: 10px;
    color: var(--primary-color) !important;
}

.nav-link {
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    color: #093e92 !important;
    text-decoration: none !important;
}

    

    /* Ukloni liniju ispod linkova */
    .nav-link::after,
    .dropdown-toggle::after {
        display: none !important;
    }

/* Footer */
footer {
    margin-top: 2rem;
    padding: 1rem 0;
}

/* Footer na mobilnom - providan */
@media (max-width: 768px) {
    footer {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
        border-top: 1px solid #a2bee8 !important;
    }

        footer .text-muted,
        footer a {
            color: #093e92;
        }
}
/* ===== 6. DASHBOARD STILOVI - PROVIDNE KARTICE ===== */
.card {
    background: transparent !important;
    border: 1px solid #bfd0e9;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(9, 62, 146, 0.2) !important;
    transition: all 0.3s;
}

    .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15) !important;
        background: rgba(255, 255, 255, 0.15) !important;
    }

.card-header {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 2px solid #bfd0e9;
    padding: 1.2rem 1.5rem !important;
}

    .card-header h5 {
        color: #093e92 !important;
        font-weight: 600;
        margin: 0;
    }

.card-body {
    background: transparent !important;
    padding: 1.5rem !important;
}

/* STATS KARTICE */
.stats-card {
    background: transparent !important;
    border: 1px solid #bfd0e9;
    border-radius: 10px;
    padding: 1.1rem;
    box-shadow: 0 4px 6px rgba(9, 62, 146, 0.2);
    transition: all 0.3s ease;
}

    .stats-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15) !important;
        background: rgba(255, 255, 255, 0.15) !important;
    }

    .stats-card h4 {
        color: #093e92 !important;
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .stats-card p {
        color: #093e92;
        font-size: 0.9rem;
        margin-bottom: 0;
    }

/* BORDER BOTTOM ZA LISTE */
.border-bottom {
    border-bottom: 1px solid #bfd0e9;
}

    .border-bottom h6 {
        color: #bfd0e9;
        font-weight: 600;
        margin-bottom: 0.3rem;
    }

    .border-bottom small {
        color: #bfd0e9;
    }

    .border-bottom .text-muted {
        color: #bfd0e9;
    }

/* BADGE */
.badge {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #093e92 !important;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    backdrop-filter: blur(5px);
    border: 1px solid #bfd0e9;
}

/* DUGMAD */
.btn-primary, .btn {
    background: rgba(255, 255, 255, 0.15) ;
    color: #093e92 !important;
    border: 1px solid #bfd0e9;
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    font-weight: 500;
    transition: all 0.3s;
    backdrop-filter: blur(5px);
}

    .btn-primary:hover, .btn:hover {
        background: rgba(255, 255, 255, 0.25) ;
        transform: translateY(-2px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
        border: 1px solid #bfd0e9;
    }

/* LINKOVI */
a {
    color: #093e92 !important;
    text-decoration: none;
    font-weight: 500;
    opacity: 0.9;
}

    a:hover {
        opacity: 1;
    }

/* WELCOME NASLOV */
h2 {
    color: #093e92 !important;
    font-weight: 600;
    opacity: 0.95;
}

/* TEKST */
p, .text-muted {
    color: #093e92;
}

small, .small {
    color: #093e92;
}

/* ===== 7. LAYOUT STILOVI ===== */
/* Chat modal za mobilni */
@media (max-width: 768px) {
    #chatModal .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100vh;
    }

    #chatModal .modal-content {
        height: 100vh;
        border-radius: 0;
        border: none;
    }

    #chatMessages {
        height: calc(100vh - 200px) !important;
    }
}

/* ===== 8. LOGO BOJE ===== */
.logo-van {
    color: #093e92;
}

.logo-route {
    color: #093e92;
}



/* ===== 14. BOOKING CARD ELEMENTI ===== */
.booking-card .driver-info-box {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid #bfd0e9;
    border-radius: 0.25rem;
    padding: 0.5rem;
}

.booking-card .address-box {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 0.25rem;
    padding: 0.5rem;
    margin-top: 0.5rem;
}


/* ===== 15. MY BOOKINGS ===== */
#routeMap {
    height: 400px;
    width: 100%;
}
/* ===== MY BOOKINGS - ISTE KARTICE KAO MY RIDES ===== */
.my-bookings .card {
    background: transparent !important;
    backdrop-filter: none !important;
    border: 1px solid #bfd0e9;
    border-radius: 0 !important;
    box-shadow: none !important;
}

    .my-bookings .card:hover {
        transform: none !important;
        background: transparent !important;
    }

/* MOBILNI - samo gornji i donji border, puna širina */
@media (max-width: 768px) {
    .my-bookings .card {
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid #bfd0e9;
        border-bottom: 1px solid #bfd0e9;
    }

    .my-bookings {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

        .my-bookings .col-md-6 {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .my-bookings .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
}

/* Alert poruke - da budu providne */
.my-bookings .alert-info,
.my-bookings .alert-secondary {
    background: transparent !important;
    border: 1px solid #bfd0e9;
    color: #093e92 !important;
}

    .my-bookings .alert-info a,
    .my-bookings .alert-secondary a {
        color: #093e92 !important;
        text-decoration: underline;
    }

.my-bookings .btn-primary {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid #1859c0;
}

    .my-bookings .btn-primary:hover {
        background: rgba(255, 255, 255, 0.25) !important;
    }


/* ===== 16. MY RIDES ===== */
.my-rides-container .route-info-box {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid #bfd0e9;
    border-radius: 0.25rem;
    color: #093e92;
}

    .my-rides-container .route-info-box .text-primary {
        color: #4a9eff !important;
    }

/* Alert poruke */
.my-rides-container .alert-info {
    background: transparent !important;
    border: 1px solid #bfd0e9;
    color: #093e92 !important;
}

    .my-rides-container .alert-info a,
    .my-rides-container .alert-info .btn-primary {
        color: #093e92 !important;
    }

/* ===== 17. RIDE DETAILS ===== */
.ride-details-alert {
    background: transparent !important;
    border: 1px solid #bfd0e9;
    color: #093e92 !important;
}

    .ride-details-alert a,
    .ride-details-alert .btn-link {
        color: #4a9eff !important;
    }

.text-secondary {
    color: #093e92
}

/* Chat messages box */
.chat-messages-box {
    height: 300px;
    overflow-y: auto;
    border: 1px solid #bfd0e9;
    padding: 15px;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 5px;
    color: #093e92;
}

/* Passenger cards */
.ride-details-container .card {
    background: transparent !important;
}

.ride-details-container .border-top {
    border-top-color: #bfd0e9;
}

/* Naslovi i border-bottom */
.ride-details-container h5.border-bottom,
.ride-details-container .border-bottom {
    color: #093e92 !important;
    border-bottom-color: #bfd0e9;
}

.ride-details-container h5 i {
    color: #093e92;
}

/* Ride Details naslov u headeru */
.ride-details-container .card-header h4 {
    color: #093e92 !important;
}

    .ride-details-container .card-header h4 i {
        color: #093e92;
    }

.ride-details-container .col-md-6 h6,
.ride-details-container .col-md-6 p,
.ride-details-container .col-md-6 strong {
    color: #093e92 !important;
}


/* ===== PWA INSTALL DUGMAD ===== */
.pwa-install-container,
.pwa-install-mobile {
    position: fixed;
    z-index: 1000;
}

.pwa-install-container {
    bottom: 20px;
    right: 20px;
}

.pwa-install-mobile {
    bottom: 70px;
    right: 10px;
}

#installPwaBtn,
#installPwaMobileBtn {
    display: none;
    background-color: transparent;
    border: 1px solid #93c4e2;
    color: #093e92;
    font-weight: 500;
  //  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
}

#installPwaBtn {
    border-radius: 5px;
    padding: 3px 32px;
}

#installPwaMobileBtn {
    border-radius: 5px;
    padding: 3px 30px;
    // box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    border: 1px solid #eff3f6;
}

    /* Hover efekat (opcionalno) */
    #installPwaBtn:hover,
    #installPwaMobileBtn:hover {
        background-color: rgba(255, 255, 255, 0.1);
        transition: background-color 0.3s ease;
    }

/* ===== DRIVER COMMENT ALERT ===== */
.alert-comment {
    color: #094a2c;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

    .alert-comment strong {
        color: #094a2c;
    }

/* ===== TABOVI ZA VOZAČA I PUTNIKA - MINIMALISTIČKI ===== */
body #myRidesTabs.nav-tabs,
body #bookingTabs.nav-tabs,
body #registerTabs.nav-tabs {
    border-bottom: none !important;
    display: flex;
    width: 100%;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    gap: 0;
}

    body #myRidesTabs.nav-tabs .nav-item,
    body #bookingTabs.nav-tabs .nav-item,
    body #registerTabs.nav-tabs .nav-item {
        flex: 1;
        margin: 0 !important;
    }

    body #myRidesTabs.nav-tabs .nav-link,
    body #bookingTabs.nav-tabs .nav-link,
    body #registerTabs.nav-tabs .nav-link {
        width: 100%;
        padding: 12px 5px !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        color: #093e92;
        font-weight: 500;
        font-size: 14px;
        text-align: center;
        border-bottom: 1px solid transparent !important;
        transition: none !important;
    }

        body #myRidesTabs.nav-tabs .nav-link:hover,
        body #bookingTabs.nav-tabs .nav-link:hover,
        body #registerTabs.nav-tabs .nav-link:hover,
        body #myRidesTabs.nav-tabs .nav-link:focus,
        body #bookingTabs.nav-tabs .nav-link:focus,
        body #registerTabs.nav-tabs .nav-link:focus {
            background: transparent !important;
            border: none !important;
            color: #093e92;
            border-bottom: 1px solid transparent !important;
        }

        body #myRidesTabs.nav-tabs .nav-link.active,
        body #bookingTabs.nav-tabs .nav-link.active,
        body #registerTabs.nav-tabs .nav-link.active {
            background: transparent !important;
            border: none !important;
            color: #093e92 !important;
            font-weight: 600;
            border-bottom: 1px solid #093e92 !important;
            box-shadow: none !important;
        }

        body #myRidesTabs.nav-tabs .nav-link svg,
        body #bookingTabs.nav-tabs .nav-link svg,
        body #registerTabs.nav-tabs .nav-link svg {
            fill: currentColor;
            width: 18px;
            height: 18px;
            margin-right: 6px;
            vertical-align: middle;
        }

/* Responsive za mobilni */
@media (max-width: 768px) {
    body #myRidesTabs.nav-tabs .nav-link,
    body #bookingTabs.nav-tabs .nav-link,
    body #registerTabs.nav-tabs .nav-link {
        font-size: 13px;
        padding: 10px 3px !important;
    }

        body #myRidesTabs.nav-tabs .nav-link svg,
        body #bookingTabs.nav-tabs .nav-link svg,
        body #registerTabs.nav-tabs .nav-link svg {
            width: 16px;
            height: 16px;
            margin-right: 4px;
        }
}


/* PROVIDNE KARTICE ZA PUTNIKE - BEZ IMPORTANT */
.ride-details-container .col-md-6 .card {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid #bfd0e9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ride-details-container .col-md-6 .card-body {
    background: transparent;
}

/* GENERAL ALERT INFO - PROVIDAN SA BLUROM */
.alert.alert-info {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #bfd0e9;
    color: #093e92;
    border-radius: 12px;
    padding: 1rem;
}

/* CARD NASLOV ZA RIDE  */
.card-title {
    color: #093e92;
}

/* LABELA ZA DEPARTURE CITY,destination city..... */
.form-group .form-label {
    color: #093e92;
}

/* CONTACT INFORMATION NASLOV - BELO */
.border-top h6 {
    color: #093e92;
}

/* IME PUTNIKA U REVIEWS - BELO */
.card .border-bottom strong {
    color: #093e92;
}


/* DATUM NASLOV - RGB(215, 232, 237) */
.date-header.text-success {
    color: #093e92;
}


    .mapboxgl-ctrl-geocoder input {
        color: #093e92 !important;
    }

    .mapboxgl-ctrl-geocoder .suggestions .mapboxgl-ctrl-geocoder--suggestion-title {
        color: #093e92 !important;
    }

    .mapboxgl-ctrl-geocoder .suggestions .mapboxgl-ctrl-geocoder--suggestion-address {
        color: #093e92 !important;
    }


/* DEPARTURE LOCATION LABEL - BOJA rgb(215, 232, 237) */
body .form-group label[for="DepartureCity"],
body .form-group label.control-label[for="DepartureCity"] {
    color: #093e92;
}

/* PLACEHOLDER U DEPARTURE INPUTU */
body .mapboxgl-ctrl-geocoder input::placeholder {
    color: #093e92;
    opacity: 1;
}


/* SVE LABELE - BELO */
body .form-group label,
body .control-label,
body .form-label,
body h4.mb-3,
body h4.mt-4 {
    color: #093e92;
}

/* DUGME ZA DODAVANJE STOPS */
body #addStopBtn {
    color: #093e92;
    border-color: #bfd0e9;
}

    body #addStopBtn:hover {
        background: rgba(255, 255, 255, 0.1);
    }

/* TEKST ZA Max stops: 10 */
body small.form-text.text-muted {
    color: #093e92;
}

/* DEPARTURE ADDRESS WRAPPER LABELE */
body #departureAddressWrapper label,
body #destinationAddressWrapper label {
    color: #093e92;
}

/* INPUT GRUPA TEKST */
body .input-group-text {
    color: #093e92;
    background: rgba(255, 255, 255, 0.1);
    border-color: #bfd0e9;
}

/* SMALL TEKST ISPOD INPUTA */
body small.text-muted {
    color: #093e92;
}

/* VALIDACIJA - crvena */
body .text-danger {
    color: #dc3545;
}
/* NASLOV U PREGLEDU - BELO */
body h4.mb-4 {
    color: #093e92;
}

/* STEP 4 I 5 - POZADINA */
#step-4, #step-5 {
    background: white;
    padding: 20px;
    border-radius: 12px;
}

    /* KARTICE U PREGLEDU */
    #step-5 .review-card {
        background: rgba(255,255,255,0.1);
        border: 1px solid #bfd0e9;
        border-radius: 12px;
        color: #093e92;
    }



/* STEP 3 - PLAVA POZADINA */
#step-3 {
    border-radius: 12px;
    margin-top: 15px;
}



/* STOP ITEMI */

.stop-item label {
    color: #093e92;
}

/* BELA SENKA NA INPUTIMA */
input, select, textarea, .mapboxgl-ctrl-geocoder input {
    box-shadow: 0 4px 12px rgb(26 22 22 / 25%);
}

    /* Kad je input fokusiran - malo jača bela senka */
    input:focus, select:focus, textarea:focus, .mapboxgl-ctrl-geocoder input:focus {
        box-shadow: 0 6px 16px rgb(26 22 22 / 25%);
        outline: none;
    }


/* ===== MY RIDES - JEDNOSTAVNE KARTICE I PUNE ŠIRINE ===== */
.my-rides-container {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

    .my-rides-container .card {
        background: transparent !important;
        border: 1px solid #bfd0e9;
        border-radius: 12px !important; /* DODAT RADIJUS */
        box-shadow: 0 4px 6px rgba(9, 62, 146, 0.2) !important; /* DODATA SENKA */
        transition: all 0.3s;
    }

        .my-rides-container .card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15) !important;
            background: rgba(255, 255, 255, 0.15) !important;
        }

/* MOBILNI - uklanjanje levog i desnog bordera */
@media (max-width: 768px) {
    .my-rides-container .card {
        border-left: 1px solid #bfd0e9 !important; /* VRAĆAMO LEVI BORDER */
        border-right: 1px solid #bfd0e9 !important; /* VRAĆAMO DESNI BORDER */
        border-radius: 12px !important; /* ZADRŽAVAMO RADIJUS */
        margin: 16px;
    }

    .my-rides-container .col-md-6 {
        padding-left: 0;
        padding-right: 0;
    }

    .my-rides-container .ride-card {
        margin-left: 0;
        margin-right: 0;
    }
}

/* TABOVI NA CELOJ SIRINI */
#myRidesTabs {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 768px) {
    #myRidesTabs {
        display: flex;
        width: 100%;
    }

        #myRidesTabs .nav-item {
            flex: 1;
            margin: 0;
        }

        #myRidesTabs .nav-link {
            width: 100%;
            text-align: center;
            border-bottom: 2px solid #bfd0e9 !important;
            border-radius: 0 !important;
            margin: 0;
        }

            #myRidesTabs .nav-link.active {
                border-bottom: 1px solid #093e92 !important;
            }

    /* Kartice na mobilnom */
    .my-rides-container .col-md-6 {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Šire kartice na mobilnom */
@media (max-width: 768px) {
    #step-5 .row {
        margin-left: 0;
        margin-right: 0;
    }

    #step-5 [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    #step-5 .review-card {
        border-radius: 0;
    }
}
.stops-timeline {
    position: relative;
    margin: 10px 0;
}

.stops-timeline-item {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.stops-timeline-line {
    position: relative;
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stops-timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #093e92;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #093e92;
    z-index: 2;
}

.stops-timeline-vertical {
    width: 2px;
    background: #093e92;
    flex: 1;
    min-height: 20px;
}

.stops-timeline-content {
    flex: 1;
    padding-left: 12px;
    padding-bottom: 15px;
}

.stops-timeline-item:last-child .stops-timeline-content {
    padding-bottom: 0;
}

.stops-timeline-item:last-child .stops-timeline-vertical {
    display: none;
}

.stop-city {
    font-weight: 600;
    color: #2c3e50;
}

.stop-address {
    font-size: 12px;
    color: #7f8c8d;
    margin-top: 3px;
}

.passengers-list-container .text-info {
    color: #015527 !important;
}


/* ===== MOBILNA NAVIGACIJA (bottom nav) ===== */

/* Find Rides mobilni */
body[data-page*="Rides_Index"] .mobile-bottom-nav a[href*="Index"] {
    color: #3c4349 !important;
    font-weight: 300 !important;
}

    body[data-page*="Rides_Index"] .mobile-bottom-nav a[href*="Index"] svg {
        stroke: #3c4349 !important;
        fill: #3c4349 !important;
        stroke-width: 0.8 !important;
    }

/* My Bookings mobilni */
body[data-page*="Bookings_MyBookings"] .mobile-bottom-nav a[href*="MyBookings"] {
    color: #3c4349 !important;
    font-weight: 300 !important;
}

    body[data-page*="Bookings_MyBookings"] .mobile-bottom-nav a[href*="MyBookings"] svg {
        stroke: #3c4349 !important;
        fill: #3c4349 !important;
        stroke-width: 0.8 !important;
    }

/* Dashboard mobilni */
body[data-page*="Home_Dashboard"] .mobile-bottom-nav a[href*="Dashboard"] {
    color: #3c4349 !important;
    font-weight: 300 !important;
}

    body[data-page*="Home_Dashboard"] .mobile-bottom-nav a[href*="Dashboard"] svg {
        stroke: #3c4349 !important;
        fill: #3c4349 !important;
        stroke-width: 0.8 !important;
    }

/* My Rides mobilni */
body[data-page*="Bookings_MyRides"] .mobile-bottom-nav a[href*="MyRides"] {
    color: #3c4349 !important;
    font-weight: 300 !important;
}

    body[data-page*="Bookings_MyRides"] .mobile-bottom-nav a[href*="MyRides"] svg {
        stroke: #3c4349 !important;
        fill: #3c4349 !important;
        stroke-width: 0.8 !important;
    }

/* Publish Ride mobilni */
body[data-page*="Rides_Create"] .mobile-bottom-nav a[href*="Create"] {
    color: #3c4349 !important;
    font-weight: 300 !important;
}

    body[data-page*="Rides_Create"] .mobile-bottom-nav a[href*="Create"] svg {
        stroke: #3c4349 !important;
        fill: #3c4349 !important;
        stroke-width: 0.8 !important;
    }

/* Driver comments alert */
.driver-comments-alert {
    background: transparent;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(9, 62, 146, 0.2);
}

    .driver-comments-alert strong,
    .driver-comments-alert span {
        color: #094a2c !important;
    }