/**
 * VORIK Mobility Framework
 * Map Engine v1.0
 */

.vorik-map-engine {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: #dce6ec;
}

.vorik-map-engine .maplibregl-canvas {
    outline: none;
}

.vorik-map-engine .maplibregl-ctrl-bottom-left,
.vorik-map-engine .maplibregl-ctrl-bottom-right {
    z-index: 4;
}

.vorik-map-engine .maplibregl-ctrl-attrib {
    max-width: min(72vw, 360px);
    color: #41566c;
    background: rgba(255, 255, 255, 0.82);
    font-size: 9px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.vorik-map-engine .maplibregl-ctrl-attrib a {
    color: #173e6c;
}

.vorik-map-engine.is-map-ready {
    animation: vorik-map-engine-appear 320ms ease both;
}

.vorik-map-user-marker {
    position: relative;
    width: 22px;
    height: 22px;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: #1463d6;
    box-shadow:
        0 3px 12px rgba(7, 26, 51, 0.28),
        0 0 0 1px rgba(7, 26, 51, 0.12);
}

.vorik-map-user-marker::before,
.vorik-map-user-marker::after {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    content: "";
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.vorik-map-user-marker::before {
    width: 42px;
    height: 42px;
    background: rgba(20, 99, 214, 0.17);
    animation:
        vorik-map-user-pulse 2.2s ease-out infinite;
}

.vorik-map-user-marker::after {
    width: 5px;
    height: 5px;
    background: #ffffff;
}

.vorik-vtc-map.has-live-map
.vorik-vtc-map-grid,
.vorik-vtc-map.has-live-map
.vorik-vtc-map-road,
.vorik-vtc-map.has-live-map
.vorik-vtc-zone,
.vorik-vtc-map.has-live-map
[data-vtc-route],
.vorik-vtc-map.has-live-map
[data-vtc-user-marker] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.vorik-vtc-map.has-live-map::after {
    z-index: 1;
}

@keyframes vorik-map-engine-appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes vorik-map-user-pulse {
    0% {
        opacity: 0.9;
        transform:
            translate(-50%, -50%)
            scale(0.45);
    }

    75%,
    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(1.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vorik-map-engine.is-map-ready {
        animation: none;
    }

    .vorik-map-user-marker::before {
        animation: none;
    }
}

/* VORIK PREMIUM CURRENT LOCATION MARKER START */

/*
 * IMPORTANT :
 *
 * Aucun transform ne doit être appliqué sur l'élément principal.
 * MapLibre utilise sa propriété inline transform pour placer
 * précisément le marqueur à partir des coordonnées GPS.
 */
.vorik-map-user-marker {
    position: relative;

    width: 38px !important;
    height: 52px !important;

    border: 0 !important;
    border-radius: 50% 50% 50% 8px !important;

    background:
        linear-gradient(
            145deg,
            #2f7cf6 0%,
            #1261dc 55%,
            #0846aa 100%
        ) !important;

    box-shadow:
        0 9px 20px rgba(15, 91, 216, 0.38),
        0 3px 8px rgba(15, 23, 42, 0.24),
        inset 0 1px 2px rgba(255, 255, 255, 0.55) !important;

    /*
     * Le pin est fabriqué avec clip-path.
     * Aucun transform CSS n'est utilisé ici.
     */
    clip-path:
        polygon(
            50% 100%,
            8% 55%,
            5% 39%,
            9% 24%,
            20% 11%,
            35% 3%,
            50% 0,
            65% 3%,
            80% 11%,
            91% 24%,
            95% 39%,
            92% 55%
        );

    overflow: visible !important;
    cursor: default;

    opacity: 1;
    visibility: visible;

    /*
     * Animation uniquement sur l'opacité et le filtre.
     * Ne jamais animer transform sur cet élément.
     */
    animation:
        vorik-location-marker-visible
        420ms
        ease-out
        both;
}

/*
 * Cercle central très visible.
 */
.vorik-map-user-marker::before {
    content: "";

    position: absolute;

    top: 10px;
    left: 10px;

    width: 18px;
    height: 18px;

    box-sizing: border-box;

    border: 4px solid #ffffff;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #ffffff 0 23%,
            #7db5ff 24% 48%,
            #ffffff 49% 100%
        );

    box-shadow:
        0 2px 5px rgba(15, 23, 42, 0.28);

    pointer-events: none;
}

/*
 * Halo indépendant placé sous le pin.
 *
 * Ce pseudo-élément peut être animé puisque son transform
 * ne contrôle pas le positionnement MapLibre du marqueur.
 */
.vorik-map-user-marker::after {
    content: "";

    position: absolute;

    z-index: -1;

    left: -12px;
    bottom: -10px;

    width: 62px;
    height: 28px;

    border: 2px solid rgba(37, 99, 235, 0.34);
    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(37, 99, 235, 0.28) 0 18%,
            rgba(37, 99, 235, 0.14) 19% 44%,
            transparent 68%
        );

    pointer-events: none;

    animation:
        vorik-location-ground-pulse
        2200ms
        ease-out
        infinite;
}

.vorik-map-user-marker:hover {
    filter:
        brightness(1.06)
        saturate(1.10);
}

@keyframes vorik-location-marker-visible {
    from {
        opacity: 0;
        filter: brightness(1.25);
    }

    to {
        opacity: 1;
        filter: brightness(1);
    }
}

@keyframes vorik-location-ground-pulse {
    0% {
        opacity: 0.85;
        transform: scale(0.72);
    }

    65% {
        opacity: 0.22;
        transform: scale(1.20);
    }

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

@media (prefers-reduced-motion: reduce) {
    .vorik-map-user-marker,
    .vorik-map-user-marker::after {
        animation: none !important;
    }
}

/* VORIK PREMIUM CURRENT LOCATION MARKER END */


/* =========================================================
   VORIK DRIVER VEHICLE MARKER V2
   ========================================================= */

.vorik-driver-vehicle-marker {
    position: relative;

    width: 46px;
    height: 64px;

    display: grid;
    place-items: center;

    pointer-events: none;

    /*
     * MapLibre owns the transform on this root element.
     * Never rotate or translate this node in CSS.
     */
}


.vorik-driver-vehicle-marker__vehicle {
    --vorik-vehicle-heading: 0deg;

    position: relative;

    width: 46px;
    height: 64px;

    display: grid;
    place-items: center;

    color: #083e78;

    transform:
        rotate(
            var(--vorik-vehicle-heading)
        );

    transform-origin:
        50% 50%;

    filter:
        drop-shadow(
            0 4px 4px
            rgba(7, 43, 85, 0.22)
        )
        drop-shadow(
            0 8px 12px
            rgba(7, 43, 85, 0.18)
        );

    transition:
        transform
        260ms
        linear;

    will-change:
        transform;
}


.vorik-driver-vehicle-marker__vehicle svg {
    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;
}


.vorik-driver-vehicle-marker__graphic {
    transform-origin:
        24px 36px;
}


.vorik-driver-vehicle-marker__body {
    fill:
        currentColor;

    stroke:
        rgba(255, 255, 255, 0.96);

    stroke-width:
        1.4;
}


.vorik-driver-vehicle-marker__wheel {
    fill:
        #111827;
}


.vorik-driver-vehicle-marker__window {
    fill:
        #dbeafe;

    stroke:
        rgba(255, 255, 255, 0.72);

    stroke-width:
        0.8;
}


.vorik-driver-vehicle-marker__direction {
    fill:
        #ffbf00;

    stroke:
        #ffffff;

    stroke-width:
        0.8;
}


.vorik-driver-vehicle-marker__light {
    fill:
        #ffffff;
}


@media (max-width: 480px) {

    .vorik-driver-vehicle-marker {
        width: 42px;
        height: 59px;
    }

    .vorik-driver-vehicle-marker__vehicle {
        width: 42px;
        height: 59px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .vorik-driver-vehicle-marker__vehicle {
        transition:
            none;
    }
}



/* =========================================================
   VORIK COMPACT CITY CAR MARKER
   ========================================================= */

.vorik-driver-vehicle-marker__bonnet {
    fill:
        rgba(255, 255, 255, 0.18);
}

.vorik-driver-vehicle-marker__roof {
    fill:
        #0f172a;

    opacity:
        0.90;
}

.vorik-driver-vehicle-marker__rear-light {
    fill:
        #ef4444;

    stroke:
        rgba(255, 255, 255, 0.92);

    stroke-width:
        0.7;
}


/* =========================================================
   VORIK DRIVER CITY CAR V2
   ========================================================= */

.vorik-driver-vehicle-marker__bonnet {
    fill:
        rgba(255, 255, 255, 0.16);
}

.vorik-driver-vehicle-marker__roof {
    fill:
        #111827;

    stroke:
        rgba(255, 255, 255, 0.55);

    stroke-width:
        0.7;
}

.vorik-driver-vehicle-marker__rear-light {
    fill:
        #ef4444;

    stroke:
        rgba(255, 255, 255, 0.92);

    stroke-width:
        0.7;
}

.vorik-driver-vehicle-marker__accent {
    fill:
        #ffbf00;

    opacity:
        0.95;
}

.vorik-driver-vehicle-marker__vehicle {
    filter:
        drop-shadow(
            0 3px 3px
            rgba(15, 23, 42, 0.22)
        )
        drop-shadow(
            0 8px 10px
            rgba(15, 23, 42, 0.20)
        );
}


/* =========================================================
   VORIK MAP VEHICLE V3 — DATABASE COLOUR
   ========================================================= */

.vorik-driver-vehicle-marker {
    --vorik-map-vehicle-color:
        #ffffff;

    width:
        54px !important;

    height:
        78px !important;

    display:
        grid !important;

    place-items:
        center !important;

    overflow:
        visible !important;

    pointer-events:
        none !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;
}


.vorik-driver-vehicle-marker::before,
.vorik-driver-vehicle-marker::after {
    display:
        none !important;
}


.vorik-driver-vehicle-marker__vehicle {
    --vorik-vehicle-heading:
        0deg;

    position:
        relative !important;

    width:
        54px !important;

    height:
        78px !important;

    display:
        grid !important;

    place-items:
        center !important;

    overflow:
        visible !important;

    transform:
        rotate(
            var(--vorik-vehicle-heading)
        ) !important;

    transform-origin:
        50% 50% !important;

    transition:
        transform 260ms linear;

    filter:
        drop-shadow(
            0 4px 3px
            rgba(15, 23, 42, 0.25)
        )
        drop-shadow(
            0 9px 10px
            rgba(15, 23, 42, 0.20)
        );

    will-change:
        transform;
}


.vorik-map-car-art {
    position:
        relative !important;

    display:
        block !important;

    width:
        52px !important;

    height:
        76px !important;

    overflow:
        visible !important;
}


/* Main body */

.vorik-map-car-body {
    position:
        absolute;

    z-index:
        2;

    top:
        3px;

    right:
        7px;

    bottom:
        3px;

    left:
        7px;

    border:
        1.5px solid
        rgba(15, 23, 42, 0.24);

    border-radius:
        46% 46% 38% 38%
        / 20% 20% 17% 17%;

    background:
        linear-gradient(
            90deg,
            rgba(15, 23, 42, 0.08),
            transparent 25%,
            rgba(255, 255, 255, 0.34) 48%,
            transparent 72%,
            rgba(15, 23, 42, 0.10)
        ),
        var(
            --vorik-map-vehicle-color,
            #ffffff
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.34);
}


/* Bonnet */

.vorik-map-car-bonnet {
    position:
        absolute;

    z-index:
        3;

    top:
        8px;

    left:
        13px;

    width:
        26px;

    height:
        14px;

    border-radius:
        48% 48% 28% 28%;

    background:
        rgba(255, 255, 255, 0.16);

    border-bottom:
        1px solid
        rgba(15, 23, 42, 0.12);
}


/* Windows and roof */

.vorik-map-car-front-window {
    position:
        absolute;

    z-index:
        4;

    top:
        21px;

    left:
        14px;

    width:
        24px;

    height:
        14px;

    clip-path:
        polygon(
            12% 0,
            88% 0,
            100% 100%,
            0 100%
        );

    border-radius:
        5px;

    background:
        linear-gradient(
            145deg,
            #64748b 0%,
            #172033 52%,
            #020617 100%
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.30);
}


.vorik-map-car-roof {
    position:
        absolute;

    z-index:
        4;

    top:
        35px;

    left:
        14px;

    width:
        24px;

    height:
        18px;

    border-radius:
        5px;

    background:
        linear-gradient(
            145deg,
            #334155,
            #020617
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.26);
}


.vorik-map-car-rear-window {
    position:
        absolute;

    z-index:
        4;

    top:
        53px;

    left:
        14px;

    width:
        24px;

    height:
        13px;

    clip-path:
        polygon(
            0 0,
            100% 0,
            86% 100%,
            14% 100%
        );

    border-radius:
        4px;

    background:
        linear-gradient(
            145deg,
            #475569,
            #020617
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.24);
}


/* Four wheels */

.vorik-map-car-wheel {
    position:
        absolute;

    z-index:
        1;

    width:
        7px;

    height:
        17px;

    border-radius:
        4px;

    background:
        #111827;

    box-shadow:
        inset 0 0 0 1px
        #020617;
}


.vorik-map-car-wheel.is-front-left {
    top:
        17px;

    left:
        2px;
}


.vorik-map-car-wheel.is-front-right {
    top:
        17px;

    right:
        2px;
}


.vorik-map-car-wheel.is-rear-left {
    bottom:
        13px;

    left:
        2px;
}


.vorik-map-car-wheel.is-rear-right {
    right:
        2px;

    bottom:
        13px;
}


/* Lights */

.vorik-map-car-headlight,
.vorik-map-car-rear-light {
    position:
        absolute;

    z-index:
        5;

    width:
        7px;

    height:
        4px;

    border-radius:
        4px;
}


.vorik-map-car-headlight {
    top:
        7px;

    background:
        #fef3c7;

    box-shadow:
        0 0 4px
        rgba(253, 224, 71, 0.60);
}


.vorik-map-car-rear-light {
    bottom:
        6px;

    background:
        #ef4444;
}


.vorik-map-car-headlight.is-left,
.vorik-map-car-rear-light.is-left {
    left:
        11px;
}


.vorik-map-car-headlight.is-right,
.vorik-map-car-rear-light.is-right {
    right:
        11px;
}


@media (max-width: 480px) {

    .vorik-driver-vehicle-marker,
    .vorik-driver-vehicle-marker__vehicle {
        width:
            48px !important;

        height:
            70px !important;
    }

    .vorik-map-car-art {
        transform:
            scale(0.90);

        transform-origin:
            50% 50%;
    }
}


@media (prefers-reduced-motion: reduce) {

    .vorik-driver-vehicle-marker__vehicle {
        transition:
            none;
    }
}









/*
 * VORIK map vehicle
 * Compact hatchback inspired by a Toyota Yaris.
 */

.vorik-driver-vehicle-marker {
    --vorik-map-vehicle-color: #ffffff;

    width: 54px;
    height: 78px;
    display: grid;
    place-items: center;
    overflow: visible;
    pointer-events: none;
}

.vorik-driver-vehicle-marker__vehicle {
    width: 54px;
    height: 78px;
    display: grid;
    place-items: center;
    overflow: visible;
    transform:
        rotate(
            var(
                --vorik-vehicle-heading,
                0deg
            )
        );
    transform-origin: 50% 50%;
    will-change: transform;
}

.vorik-map-car-art.is-yaris-style {
    position: relative;
    display: block;
    width: 42px;
    height: 68px;
    filter:
        drop-shadow(
            0 3px 3px
            rgba(15, 23, 42, 0.24)
        );
}

/*
 * Ground shadow.
 */

.vorik-map-car-shadow {
    position: absolute;
    z-index: 0;
    left: 5px;
    right: 5px;
    top: 5px;
    bottom: 3px;
    border-radius: 45% 45% 38% 38%;
    background:
        rgba(15, 23, 42, 0.24);
    filter: blur(3px);
    transform: translateY(2px);
}

/*
 * Main compact hatchback body.
 *
 * The front is at the top.
 */

.vorik-map-car-body {
    position: absolute;
    z-index: 2;
    left: 6px;
    top: 2px;
    width: 30px;
    height: 64px;
    border: 1px solid
        rgba(15, 23, 42, 0.42);
    border-radius:
        45% 45%
        34% 34%
        /
        18% 18%
        13% 13%;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.44) 0%,
            transparent 20%,
            transparent 76%,
            rgba(15, 23, 42, 0.18) 100%
        ),
        var(
            --vorik-map-vehicle-color,
            #ffffff
        );
    box-shadow:
        inset 2px 0 2px
            rgba(255, 255, 255, 0.28),
        inset -2px 0 2px
            rgba(15, 23, 42, 0.15);
}

/*
 * Short, rounded bonnet typical of a compact Yaris-like hatchback.
 */

.vorik-map-car-bonnet {
    position: absolute;
    z-index: 3;
    left: 9px;
    top: 5px;
    width: 24px;
    height: 14px;
    border-radius:
        48% 48%
        26% 26%;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.38),
            rgba(15, 23, 42, 0.06)
        );
    border-bottom:
        1px solid
        rgba(15, 23, 42, 0.18);
}

/*
 * Large swept windscreen.
 */

.vorik-map-car-front-window {
    position: absolute;
    z-index: 4;
    left: 9px;
    top: 17px;
    width: 24px;
    height: 14px;
    clip-path: polygon(
        13% 0,
        87% 0,
        100% 100%,
        0 100%
    );
    border-radius: 5px 5px 3px 3px;
    background:
        linear-gradient(
            145deg,
            rgba(226, 240, 250, 0.96),
            rgba(51, 65, 85, 0.88)
        );
    box-shadow:
        inset 2px 1px 2px
        rgba(255, 255, 255, 0.35);
}

/*
 * Narrow roof section to keep the vehicle compact.
 */

.vorik-map-car-roof {
    position: absolute;
    z-index: 4;
    left: 10px;
    top: 31px;
    width: 22px;
    height: 19px;
    border-radius: 4px;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.32),
            transparent 35%,
            rgba(15, 23, 42, 0.13)
        ),
        var(
            --vorik-map-vehicle-color,
            #ffffff
        );
    border-left:
        1px solid
        rgba(15, 23, 42, 0.16);
    border-right:
        1px solid
        rgba(15, 23, 42, 0.16);
}

/*
 * Compact rear glass and hatch.
 */

.vorik-map-car-rear-window {
    position: absolute;
    z-index: 4;
    left: 9px;
    top: 49px;
    width: 24px;
    height: 11px;
    clip-path: polygon(
        0 0,
        100% 0,
        86% 100%,
        14% 100%
    );
    border-radius: 3px 3px 6px 6px;
    background:
        linear-gradient(
            35deg,
            rgba(30, 41, 59, 0.94),
            rgba(148, 163, 184, 0.78)
        );
}

/*
 * Small front grille.
 */

.vorik-map-car-front-grille {
    position: absolute;
    z-index: 5;
    left: 15px;
    top: 2px;
    width: 12px;
    height: 3px;
    border-radius: 50%;
    background:
        rgba(15, 23, 42, 0.75);
}

/*
 * Wheels.
 */

.vorik-map-car-wheel {
    position: absolute;
    z-index: 1;
    width: 5px;
    height: 13px;
    border-radius: 3px;
    background:
        linear-gradient(
            90deg,
            #020617,
            #334155,
            #020617
        );
}

/*
 * Sharp swept headlights.
 */

.vorik-map-car-headlight {
    position: absolute;
    z-index: 6;
    top: 7px;
    width: 7px;
    height: 4px;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fde68a
        );
    box-shadow:
        0 0 3px
        rgba(253, 230, 138, 0.72);
}

.vorik-map-car-headlight.is-left {
    left: 8px;
    border-radius:
        70% 20%
        50% 30%;
    transform: rotate(-12deg);
}

.vorik-map-car-headlight.is-right {
    right: 8px;
    border-radius:
        20% 70%
        30% 50%;
    transform: rotate(12deg);
}

/*
 * Vertical rear lamps, common on compact hatchbacks.
 */

.vorik-map-car-rear-light {
    position: absolute;
    z-index: 6;
    bottom: 5px;
    width: 5px;
    height: 7px;
    background:
        linear-gradient(
            180deg,
            #fb7185,
            #b91c1c
        );
    box-shadow:
        0 0 2px
        rgba(220, 38, 38, 0.65);
}

.vorik-map-car-rear-light.is-left {
    left: 8px;
    border-radius:
        2px 1px
        3px 2px;
    transform: rotate(5deg);
}

.vorik-map-car-rear-light.is-right {
    right: 8px;
    border-radius:
        1px 2px
        2px 3px;
    transform: rotate(-5deg);
}

/*
 * Roues rapprochées de la carrosserie.
 */

.vorik-map-car-wheel.is-front-left {
    left: 14px;
    top: 13px;
}

.vorik-map-car-wheel.is-front-right {
    right: 14px;
    top: 13px;
}

.vorik-map-car-wheel.is-rear-left {
    left: 14px;
    bottom: 10px;
}

.vorik-map-car-wheel.is-rear-right {
    right: 14px;
    bottom: 10px;
}