:root {
    --vorik-vtc-navy: #071a33;
    --vorik-vtc-navy-soft: #0b274d;
    --vorik-vtc-blue: #135fda;
    --vorik-vtc-yellow: #ffc629;
    --vorik-vtc-white: #ffffff;
    --vorik-vtc-text: #0c1c31;
    --vorik-vtc-muted: #728096;
    --vorik-vtc-border: #e7ebf1;
    --vorik-vtc-surface: #f5f7fb;
    --vorik-vtc-success: #20a86b;
    --vorik-vtc-danger: #cf3d4d;
    --vorik-vtc-shadow:
        0 20px 60px rgba(5, 23, 45, 0.18);
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

body.vorik-vtc-body {
    overflow: hidden;
    color: var(--vorik-vtc-text);
    background: #dce6ef;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    -webkit-font-smoothing: antialiased;
}

button,
input {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
    text-decoration: none;
}

.vorik-vtc-app {
    position: relative;
    width: 100%;
    height: 100dvh;
    min-height: 620px;
    overflow: hidden;
    background: var(--vorik-vtc-surface);
}

.vorik-vtc-header {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: 14px;
    left: 14px;
    z-index: 30;
    display: grid;
    grid-template-columns: 46px 1fr 46px;
    align-items: center;
    pointer-events: none;
}

.vorik-vtc-header > * {
    pointer-events: auto;
}

.vorik-vtc-back,
.vorik-vtc-help {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 15px;
    color: var(--vorik-vtc-navy);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 25px rgba(7, 26, 51, 0.13);
    backdrop-filter: blur(14px);
}

.vorik-vtc-back svg {
    width: 23px;
    height: 23px;
}

.vorik-vtc-help {
    border: 0;
    font-weight: 900;
    cursor: pointer;
}

.vorik-vtc-brand {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 9px;
    padding: 7px 13px 7px 8px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 25px rgba(7, 26, 51, 0.13);
    backdrop-filter: blur(14px);
}

.vorik-vtc-brand-mark {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 11px;
    color: var(--vorik-vtc-navy);
    background: var(--vorik-vtc-yellow);
    font-weight: 950;
}

.vorik-vtc-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.vorik-vtc-brand-copy strong {
    letter-spacing: 0.1em;
    font-size: 13px;
}

.vorik-vtc-brand-copy small {
    margin-top: 4px;
    color: var(--vorik-vtc-muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.vorik-vtc-main,
.vorik-vtc-map {
    width: 100%;
    height: 100%;
}

.vorik-vtc-map {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 24% 24%,
            rgba(255, 255, 255, 0.9),
            transparent 24%
        ),
        linear-gradient(145deg, #e3ecf2, #cbdce5);
    transition: transform 240ms ease;
}

.vorik-vtc-map::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(7, 26, 51, 0.08),
            transparent 24%,
            transparent 65%,
            rgba(7, 26, 51, 0.12)
        );
}

.vorik-vtc-map-grid {
    position: absolute;
    inset: -20%;
    opacity: 0.3;
    background-image:
        linear-gradient(
            rgba(76, 116, 143, 0.22) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(76, 116, 143, 0.22) 1px,
            transparent 1px
        );
    background-size: 42px 42px;
    transform: rotate(-9deg) scale(1.2);
}

.vorik-vtc-map-road {
    position: absolute;
    height: 18px;
    border: 5px solid rgba(255, 255, 255, 0.94);
    border-radius: 999px;
    background: #b7c9d3;
    box-shadow:
        0 0 0 1px rgba(114, 141, 157, 0.18),
        0 3px 8px rgba(71, 99, 116, 0.16);
}

.vorik-vtc-map-road-one {
    top: 20%;
    left: -13%;
    width: 132%;
    transform: rotate(19deg);
}

.vorik-vtc-map-road-two {
    top: 42%;
    left: -20%;
    width: 142%;
    transform: rotate(-29deg);
}

.vorik-vtc-map-road-three {
    top: 58%;
    left: 15%;
    width: 110%;
    transform: rotate(64deg);
}

.vorik-vtc-zone {
    position: absolute;
    z-index: 2;
    color: #607589;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.03em;
}

.vorik-vtc-zone-one {
    top: 19%;
    left: 15%;
}

.vorik-vtc-zone-two {
    top: 38%;
    right: 13%;
}

.vorik-vtc-zone-three {
    top: 53%;
    left: 17%;
}

.vorik-vtc-user-marker {
    position: absolute;
    top: 34%;
    left: 48%;
    z-index: 8;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 50%;
    background: rgba(19, 95, 218, 0.15);
    box-shadow: 0 0 0 11px rgba(19, 95, 218, 0.08);
    transform: translate(-50%, -50%);
    transition:
        top 320ms ease,
        left 320ms ease;
}

.vorik-vtc-user-marker span {
    display: block;
    width: 18px;
    height: 18px;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: var(--vorik-vtc-blue);
    box-shadow: 0 5px 15px rgba(19, 95, 218, 0.38);
}

.vorik-vtc-car-marker {
    position: absolute;
    z-index: 6;
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    border-radius: 13px;
    color: var(--vorik-vtc-navy);
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(7, 26, 51, 0.22);
}

.vorik-vtc-car-marker svg {
    width: 22px;
    height: 22px;
}

.vorik-vtc-car-marker-one {
    top: 22%;
    right: 21%;
    transform: rotate(18deg);
}

.vorik-vtc-car-marker-two {
    top: 43%;
    left: 18%;
    transform: rotate(-24deg);
}

.vorik-vtc-car-marker-three {
    top: 50%;
    right: 15%;
    transform: rotate(42deg);
}

.vorik-vtc-route {
    position: absolute;
    top: 27%;
    left: 49%;
    z-index: 5;
    display: none;
    width: 30%;
    height: 24%;
    pointer-events: none;
}

.vorik-vtc-route.is-visible {
    display: block;
}

.vorik-vtc-route-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: var(--vorik-vtc-blue);
    box-shadow: 0 5px 13px rgba(7, 26, 51, 0.25);
}

.vorik-vtc-route-line {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 86%;
    height: 72%;
    border-right: 4px solid var(--vorik-vtc-blue);
    border-bottom: 4px solid var(--vorik-vtc-blue);
    border-radius: 0 0 30px 0;
    transform: rotate(8deg);
}

.vorik-vtc-route-pin {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    border: 5px solid #ffffff;
    border-radius: 50% 50% 50% 0;
    background: var(--vorik-vtc-yellow);
    box-shadow: 0 5px 14px rgba(7, 26, 51, 0.24);
    transform: rotate(-45deg);
}

.vorik-vtc-map-status {
    position: absolute;
    top: calc(max(12px, env(safe-area-inset-top)) + 66px);
    left: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    color: #496176;
    background: rgba(255, 255, 255, 0.83);
    box-shadow: 0 7px 18px rgba(7, 26, 51, 0.1);
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
    transform: translateX(-50%);
    backdrop-filter: blur(11px);
}

.vorik-vtc-map-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vorik-vtc-success);
    box-shadow: 0 0 0 4px rgba(32, 168, 107, 0.13);
}

.vorik-vtc-map-controls {
    position: absolute;
    right: 14px;
    bottom: min(49vh, 440px);
    z-index: 10;
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 25px rgba(7, 26, 51, 0.15);
    backdrop-filter: blur(12px);
}

.vorik-vtc-map-controls button {
    display: grid;
    width: 42px;
    height: 40px;
    place-items: center;
    border: 0;
    border-bottom: 1px solid var(--vorik-vtc-border);
    color: var(--vorik-vtc-navy);
    background: transparent;
    font-size: 21px;
    font-weight: 700;
    cursor: pointer;
}

.vorik-vtc-map-controls button:last-child {
    border-bottom: 0;
}

.vorik-vtc-map-controls svg {
    width: 19px;
    height: 19px;
}

.vorik-vtc-sheet {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    max-height: 76dvh;
    overflow: auto;
    border-radius: 29px 29px 0 0;
    background: #ffffff;
    box-shadow: var(--vorik-vtc-shadow);
    transform: translateY(0);
    transition:
        max-height 260ms ease,
        transform 260ms ease;
    overscroll-behavior: contain;
}

.vorik-vtc-sheet.is-expanded {
    max-height: 92dvh;
}

.vorik-vtc-sheet-handle {
    display: grid;
    width: 100%;
    height: 28px;
    place-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.vorik-vtc-sheet-handle span {
    display: block;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: #d8dee7;
}

.vorik-vtc-sheet-content {
    padding:
        0
        18px
        max(18px, env(safe-area-inset-bottom));
}

.vorik-vtc-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 17px;
}

.vorik-vtc-eyebrow {
    color: var(--vorik-vtc-blue);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.vorik-vtc-heading h1 {
    margin: 5px 0 0;
    color: var(--vorik-vtc-navy);
    font-size: clamp(21px, 6vw, 28px);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.vorik-vtc-secure {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    padding: 7px 9px;
    border-radius: 999px;
    color: #147348;
    background: #eaf8f1;
    font-size: 8px;
    font-weight: 850;
}

.vorik-vtc-secure svg {
    width: 14px;
    height: 14px;
}

.vorik-vtc-form {
    display: grid;
    gap: 14px;
}

.vorik-vtc-route-fields {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr 43px;
    align-items: center;
    min-height: 126px;
    padding: 8px 8px 8px 12px;
    border: 1px solid var(--vorik-vtc-border);
    border-radius: 21px;
    background: #f9fafc;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.vorik-vtc-route-fields:focus-within {
    border-color: rgba(19, 95, 218, 0.4);
    box-shadow: 0 0 0 4px rgba(19, 95, 218, 0.08);
}

.vorik-vtc-route-rail {
    display: flex;
    height: 85px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vorik-vtc-origin-dot {
    width: 11px;
    height: 11px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: var(--vorik-vtc-blue);
    box-shadow: 0 0 0 2px var(--vorik-vtc-blue);
}

.vorik-vtc-rail-line {
    width: 2px;
    height: 41px;
    margin: 4px 0;
    background:
        repeating-linear-gradient(
            to bottom,
            #b8c3d0 0 4px,
            transparent 4px 8px
        );
}

.vorik-vtc-destination-dot {
    width: 12px;
    height: 12px;
    border: 3px solid var(--vorik-vtc-navy);
    border-radius: 3px;
    background: var(--vorik-vtc-yellow);
}

.vorik-vtc-route-inputs {
    min-width: 0;
}

.vorik-vtc-field {
    display: flex;
    min-width: 0;
    height: 53px;
    flex-direction: column;
    justify-content: center;
    padding: 4px 8px;
}

.vorik-vtc-field span {
    margin-bottom: 4px;
    color: var(--vorik-vtc-muted);
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
}

.vorik-vtc-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--vorik-vtc-text);
    background: transparent;
    font-size: 13px;
    font-weight: 750;
}

.vorik-vtc-field input::placeholder {
    color: #9aa5b4;
    font-weight: 600;
}

.vorik-vtc-field-separator {
    height: 1px;
    margin-right: 8px;
    margin-left: 8px;
    background: var(--vorik-vtc-border);
}

.vorik-vtc-location-button {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border: 0;
    border-radius: 13px;
    color: var(--vorik-vtc-blue);
    background: #eaf1ff;
    cursor: pointer;
}

.vorik-vtc-location-button svg {
    width: 19px;
    height: 19px;
}

.vorik-vtc-suggestions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.vorik-vtc-suggestions button {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border: 1px solid var(--vorik-vtc-border);
    border-radius: 15px;
    color: var(--vorik-vtc-text);
    background: #ffffff;
    text-align: left;
    cursor: pointer;
}

.vorik-vtc-suggestion-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 11px;
    color: var(--vorik-vtc-navy);
    background: #f0f3f7;
    font-size: 15px;
}

.vorik-vtc-suggestions button > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.vorik-vtc-suggestions strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vorik-vtc-suggestions small {
    margin-top: 3px;
    color: var(--vorik-vtc-muted);
    font-size: 8px;
}

.vorik-vtc-when {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.vorik-vtc-when legend {
    margin-bottom: 8px;
    color: var(--vorik-vtc-muted);
    font-size: 9px;
    font-weight: 850;
}

.vorik-vtc-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 5px;
    border-radius: 17px;
    background: #f0f3f7;
}

.vorik-vtc-segmented label {
    cursor: pointer;
}

.vorik-vtc-segmented input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.vorik-vtc-segmented span {
    display: flex;
    min-height: 43px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 13px;
    color: #748196;
    font-size: 10px;
    font-weight: 850;
    transition:
        color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}

.vorik-vtc-segmented svg {
    width: 16px;
    height: 16px;
}

.vorik-vtc-segmented input:checked + span {
    color: var(--vorik-vtc-navy);
    background: #ffffff;
    box-shadow: 0 5px 14px rgba(7, 26, 51, 0.09);
}

.vorik-vtc-schedule {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.vorik-vtc-schedule:not([hidden]) {
    display: grid;
}

.vorik-vtc-schedule label {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    border: 1px solid var(--vorik-vtc-border);
    border-radius: 15px;
}

.vorik-vtc-schedule span {
    color: var(--vorik-vtc-muted);
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
}

.vorik-vtc-schedule input {
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--vorik-vtc-text);
    background: transparent;
    font-size: 11px;
    font-weight: 750;
}

.vorik-vtc-form-feedback {
    display: none;
    padding: 10px 12px;
    border-radius: 13px;
    color: var(--vorik-vtc-danger);
    background: #fff0f2;
    font-size: 10px;
    font-weight: 750;
}

.vorik-vtc-form-feedback.is-visible {
    display: block;
}

.vorik-vtc-primary {
    display: flex;
    min-height: 55px;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 0;
    border-radius: 17px;
    color: var(--vorik-vtc-navy);
    background:
        linear-gradient(
            135deg,
            #ffd757,
            var(--vorik-vtc-yellow)
        );
    box-shadow: 0 12px 26px rgba(255, 198, 41, 0.26);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease;
}

.vorik-vtc-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 31px rgba(255, 198, 41, 0.32);
}

.vorik-vtc-primary:active {
    transform: translateY(1px);
}

.vorik-vtc-primary svg {
    width: 19px;
    height: 19px;
}

.vorik-vtc-disclaimer {
    margin: -5px 0 0;
    color: #8a95a5;
    font-size: 8px;
    line-height: 1.5;
    text-align: center;
}

.vorik-vtc-toast {
    position: fixed;
    top: calc(max(12px, env(safe-area-inset-top)) + 68px);
    left: 50%;
    z-index: 100;
    max-width: calc(100% - 32px);
    padding: 11px 15px;
    border-radius: 13px;
    color: #ffffff;
    background: var(--vorik-vtc-navy);
    box-shadow: 0 12px 30px rgba(7, 26, 51, 0.24);
    font-size: 10px;
    font-weight: 750;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -12px);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.vorik-vtc-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-height: 740px) {
    .vorik-vtc-sheet {
        max-height: 78dvh;
    }

    .vorik-vtc-suggestions {
        display: none;
    }

    .vorik-vtc-heading {
        margin-bottom: 11px;
    }

    .vorik-vtc-form {
        gap: 10px;
    }
}

@media (min-width: 768px) {
    .vorik-vtc-header {
        top: 22px;
        right: 24px;
        left: 24px;
    }

    .vorik-vtc-sheet {
        right: 24px;
        bottom: 24px;
        left: auto;
        width: min(430px, calc(100% - 48px));
        max-height: calc(100dvh - 108px);
        border-radius: 28px;
    }

    .vorik-vtc-sheet.is-expanded {
        max-height: calc(100dvh - 108px);
    }

    .vorik-vtc-sheet-handle {
        display: none;
    }

    .vorik-vtc-sheet-content {
        padding: 25px;
    }

    .vorik-vtc-map-controls {
        right: 478px;
        bottom: 28px;
    }

    .vorik-vtc-user-marker {
        top: 48%;
        left: 41%;
    }

    .vorik-vtc-map-status {
        top: 84px;
    }
}

@media (min-width: 1180px) {
    .vorik-vtc-sheet {
        right: 38px;
        bottom: 38px;
        width: 460px;
        max-height: calc(100dvh - 126px);
    }

    .vorik-vtc-sheet-content {
        padding: 30px;
    }

    .vorik-vtc-map-controls {
        right: 530px;
        bottom: 40px;
    }

    .vorik-vtc-heading h1 {
        font-size: 30px;
    }

    .vorik-vtc-route-fields {
        min-height: 136px;
    }

    .vorik-vtc-primary {
        min-height: 59px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* VORIK HORIZONTAL VTC CATEGORIES */

.vorik-vtc-categories {
    min-width: 0;
    margin-right: -18px;
    margin-left: -18px;
}

.vorik-vtc-category-list {
    display: flex;
    gap: 9px;
    width: 100%;
    padding: 2px 18px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

.vorik-vtc-category-list::-webkit-scrollbar {
    display: none;
}

.vorik-vtc-category {
    position: relative;
    display: flex;
    width: 100px;
    min-width: 100px;
    min-height: 90px;
    flex: 0 0 100px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    scroll-snap-align: start;
    padding: 4px 4px 6px;
    overflow: hidden;
    border: 1px solid var(--vorik-vtc-border);
    border-radius: 19px;
    color: var(--vorik-vtc-text);
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(7, 26, 51, 0.045);
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.vorik-vtc-category::after {
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.vorik-vtc-category:hover {
    transform: translateY(-2px);
}

.vorik-vtc-category:focus-visible {
    outline: 3px solid rgba(19, 95, 218, 0.22);
    outline-offset: 2px;
}

.vorik-vtc-category.is-selected {
    border-color: rgba(255, 198, 41, 0.8);
    background:
        linear-gradient(
            145deg,
            #fff9d9,
            #fff2ad
        );
    box-shadow:
        0 10px 24px rgba(255, 198, 41, 0.2);
}

.vorik-vtc-category.is-selected::after {
    border-color: var(--vorik-vtc-yellow);
}

.vorik-vtc-category-visual {
    position: relative;
    display: grid;
    width: 76px;
    height: 39px;
    flex: 0 0 39px;
    place-items: center;
    margin-bottom: 1px;
}

.vorik-vtc-car-art {
    position: relative;
    display: block;
    width: 72px;
    height: 31px;
    transform: translateY(0) scale(0.86);
}

.vorik-vtc-car-body {
    position: absolute;
    right: 1px;
    bottom: 6px;
    left: 1px;
    height: 19px;
    border-radius: 13px 16px 8px 8px;
    background:
        linear-gradient(
            180deg,
            #fdfefe,
            #dbe1e6
        );
    box-shadow:
        inset 0 -3px 0 rgba(7, 26, 51, 0.08),
        0 5px 9px rgba(7, 26, 51, 0.14);
}

.vorik-vtc-car-body::before {
    position: absolute;
    top: -10px;
    left: 16px;
    width: 38px;
    height: 17px;
    border-radius: 16px 18px 4px 4px;
    content: "";
    background:
        linear-gradient(
            135deg,
            #f8fafc 0 40%,
            #c9d2da 41% 100%
        );
}

.vorik-vtc-car-body::after {
    position: absolute;
    top: 7px;
    right: 3px;
    width: 7px;
    height: 4px;
    border-radius: 99px;
    content: "";
    background: #ffd75a;
}

.vorik-vtc-car-window {
    position: absolute;
    top: 4px;
    left: 28px;
    z-index: 2;
    width: 23px;
    height: 9px;
    border-radius: 8px 8px 2px 2px;
    background:
        linear-gradient(
            135deg,
            #61768a,
            #25394d
        );
    transform: skewX(-15deg);
}

.vorik-vtc-car-wheel {
    position: absolute;
    bottom: 2px;
    z-index: 3;
    width: 11px;
    height: 11px;
    border: 3px solid #263442;
    border-radius: 50%;
    background: #aeb8c1;
}

.vorik-vtc-car-wheel.is-left {
    left: 13px;
}

.vorik-vtc-car-wheel.is-right {
    right: 12px;
}

.vorik-vtc-car-art.is-premium
.vorik-vtc-car-body,
.vorik-vtc-car-art.is-vip
.vorik-vtc-car-body {
    background:
        linear-gradient(
            180deg,
            #354253,
            #0d1824
        );
}

.vorik-vtc-car-art.is-premium
.vorik-vtc-car-body::before,
.vorik-vtc-car-art.is-vip
.vorik-vtc-car-body::before {
    background:
        linear-gradient(
            135deg,
            #485b70 0 40%,
            #172536 41% 100%
        );
}

.vorik-vtc-car-art.is-van {
    width: 74px;
}

.vorik-vtc-car-art.is-van
.vorik-vtc-car-body {
    height: 25px;
    border-radius: 8px 13px 6px 6px;
}

.vorik-vtc-car-art.is-van
.vorik-vtc-car-body::before {
    top: -7px;
    left: 9px;
    width: 50px;
    height: 13px;
    border-radius: 8px 12px 2px 2px;
}

.vorik-vtc-fastest-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    z-index: 5;
    font-size: 22px;
    line-height: 1;
    transform: translateX(-50%);
}

.vorik-vtc-category strong {
    display: block;
    width: 100%;
    overflow: hidden;
    margin-top: 0;
    font-size: 10px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vorik-vtc-category-price {
    display: block;
    margin-top: 2px;
    color: #34465a;
    font-size: 9px;
    font-weight: 750;
    white-space: nowrap;
}

.vorik-vtc-category small {
    display: block;
    margin-top: 1px;
    color: var(--vorik-vtc-success);
    font-size: 8px;
    font-weight: 850;
    white-space: nowrap;
}

.vorik-vtc-category-summary {
    display: flex;
    min-height: 43px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 18px 0;
    padding: 9px 12px;
    border: 1px solid var(--vorik-vtc-border);
    border-radius: 14px;
    background: #f8fafc;
}

.vorik-vtc-category-summary > span {
    flex: 0 0 auto;
    color: var(--vorik-vtc-muted);
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
}

.vorik-vtc-category-summary strong {
    min-width: 0;
    overflow: hidden;
    color: var(--vorik-vtc-navy);
    font-size: 9px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Autorise le scroll horizontal des catégories, tout en gardant
 * le drag vertical du Bottom Sheet sur les autres zones.
 */
.vorik-vtc-sheet[data-bottom-sheet-ready="true"] {
    touch-action: pan-x;
}

@media (min-width: 768px) {
    .vorik-vtc-categories {
        margin-right: 0;
        margin-left: 0;
    }

    .vorik-vtc-category-list {
        padding-right: 1px;
        padding-left: 1px;
    }

    .vorik-vtc-category-summary {
        margin-right: 0;
        margin-left: 0;
    }
}



.vorik-vtc-sheet-content{

    position:relative;

    padding-bottom:95px;

}

/* VORIK BOTTOM SHEET GESTURE ENGINE V3 */

@media (max-width: 767px) {
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"] {
        height: 92dvh;
        max-height: 92dvh;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        will-change: transform;
        cursor: grab;
    }

    .vorik-vtc-sheet[data-bottom-sheet-ready="true"].is-dragging {
        transition: none !important;
        cursor: grabbing;
    }

    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]
    .vorik-vtc-sheet-handle {
        position: relative;
        z-index: 5;
        flex: 0 0 28px;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        cursor: grab;
    }

    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]
    .vorik-vtc-sheet-content {
        height: calc(92dvh - 28px);
        max-height: calc(92dvh - 28px);
        overflow-x: hidden;
        overflow-y: hidden;
        overscroll-behavior: none;
        touch-action: none;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * Le contenu interne ne peut défiler verticalement
     * que lorsque la feuille est complètement ouverte.
     */
    .vorik-vtc-sheet[
        data-bottom-sheet-ready="true"
    ][
        data-bottom-sheet-snap="2"
    ] .vorik-vtc-sheet-content {
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }

    /*
     * Les contrôles peuvent recevoir un clic ou le focus.
     * Le moteur JS décide s'il s'agit d'un clic ou d'un drag.
     */
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]
    button,
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]
    a,
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]
    label,
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]
    [role="button"],
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]
    [role="radio"] {
        touch-action: none;
    }

    /*
     * Les champs gardent la sélection de texte,
     * le clavier et le placement du curseur.
     */
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]
    input,
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]
    textarea,
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]
    select,
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]
    [contenteditable="true"] {
        touch-action: manipulation;
        user-select: text;
        -webkit-user-select: text;
    }

    /*
     * Carrousel horizontal :
     * déplacement horizontal natif,
     * déplacement vertical transmis à la sheet.
     */
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]
    .vorik-vtc-category-list {
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
    }

    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]
    .vorik-vtc-category {
        touch-action: pan-x;
    }

    /*
     * Empêche les effets hover de déplacer les cartes
     * pendant une interaction tactile.
     */
    .vorik-vtc-sheet.is-dragging
    .vorik-vtc-category,
    .vorik-vtc-sheet.is-gesture-pending
    .vorik-vtc-category {
        transform: none !important;
    }
}

/* VORIK PREMIUM DRAG EFFECT - STEP 01 START */

/*
 * Effet visuel discret pendant le déplacement.
 * Aucun changement n'est apporté au moteur BottomSheet.
 */

@media (max-width: 991.98px) {
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"] {
        transform-origin: center bottom;
        will-change: transform, box-shadow;
    }

    .vorik-vtc-sheet[data-bottom-sheet-ready="true"].is-dragging {
        box-shadow:
            0 -22px 55px rgba(15, 23, 42, 0.18),
            0 -8px 24px rgba(15, 23, 42, 0.10),
            0 -2px 8px rgba(15, 23, 42, 0.06);
    }

    .vorik-vtc-sheet[data-bottom-sheet-ready="true"].is-dragging::before {
        opacity: 1;
    }

    /*
     * Prise en charge de plusieurs noms possibles pour la poignée,
     * sans dépendre d'un seul sélecteur HTML.
     */
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]
        :is(
            .vorik-sheet-handle,
            .bottom-sheet-handle,
            .sheet-handle,
            [data-bottom-sheet-handle]
        ) {
        transform-origin: center;
        transition:
            transform 170ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 170ms ease,
            background-color 170ms ease;
        will-change: transform;
    }

    .vorik-vtc-sheet[data-bottom-sheet-ready="true"].is-dragging
        :is(
            .vorik-sheet-handle,
            .bottom-sheet-handle,
            .sheet-handle,
            [data-bottom-sheet-handle]
        ) {
        transform: scaleX(1.14);
        opacity: 1;
        background-color: rgba(71, 85, 105, 0.88);
    }

    /*
     * Les cartes ne doivent pas effectuer leur animation hover
     * pendant que l'utilisateur déplace la sheet.
     */
    .vorik-vtc-sheet.is-dragging
        :is(
            button,
            a,
            .vehicle-card,
            .vorik-vehicle-card,
            .vtc-vehicle-card,
            .suggestion-card,
            .vorik-suggestion-card
        ) {
        transition-duration: 0ms !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"],
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"] * {
        transition-duration: 0.01ms !important;
    }
}

/* VORIK PREMIUM DRAG EFFECT - STEP 01 END */

/* VORIK PREMIUM CONTENT REVEAL - STEP 02 START */

/*
 * Apparition progressive du contenu lorsque la Bottom Sheet
 * atteint son niveau totalement ouvert.
 *
 * Aucun changement du moteur JavaScript.
 */

@media (max-width: 991.98px) {

    /*
     * État initial légèrement atténué.
     *
     * :where() garde une faible priorité CSS afin de ne pas
     * écraser les styles fonctionnels des composants.
     */
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]
        :where(
            .vehicle-card,
            .vorik-vehicle-card,
            .vtc-vehicle-card,
            .suggestion-card,
            .vorik-suggestion-card,
            .vorik-vtc-result-card,
            .vorik-vtc-booking-card
        ) {
        opacity: 0.88;
        transform: translate3d(0, 7px, 0);
        transition:
            opacity 260ms ease,
            transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 220ms ease;
        will-change: opacity, transform;
    }

    /*
     * Niveau complètement ouvert.
     */
    .vorik-vtc-sheet[
        data-bottom-sheet-ready="true"
    ][data-bottom-sheet-snap="2"]
        :where(
            .vehicle-card,
            .vorik-vehicle-card,
            .vtc-vehicle-card,
            .suggestion-card,
            .vorik-suggestion-card,
            .vorik-vtc-result-card,
            .vorik-vtc-booking-card
        ) {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    /*
     * Effet séquentiel discret.
     */
    .vorik-vtc-sheet[
        data-bottom-sheet-ready="true"
    ][data-bottom-sheet-snap="2"]
        :where(
            .vehicle-card,
            .vorik-vehicle-card,
            .vtc-vehicle-card,
            .suggestion-card,
            .vorik-suggestion-card,
            .vorik-vtc-result-card,
            .vorik-vtc-booking-card
        ):nth-of-type(1) {
        transition-delay: 0ms;
    }

    .vorik-vtc-sheet[
        data-bottom-sheet-ready="true"
    ][data-bottom-sheet-snap="2"]
        :where(
            .vehicle-card,
            .vorik-vehicle-card,
            .vtc-vehicle-card,
            .suggestion-card,
            .vorik-suggestion-card,
            .vorik-vtc-result-card,
            .vorik-vtc-booking-card
        ):nth-of-type(2) {
        transition-delay: 28ms;
    }

    .vorik-vtc-sheet[
        data-bottom-sheet-ready="true"
    ][data-bottom-sheet-snap="2"]
        :where(
            .vehicle-card,
            .vorik-vehicle-card,
            .vtc-vehicle-card,
            .suggestion-card,
            .vorik-suggestion-card,
            .vorik-vtc-result-card,
            .vorik-vtc-booking-card
        ):nth-of-type(3) {
        transition-delay: 56ms;
    }

    .vorik-vtc-sheet[
        data-bottom-sheet-ready="true"
    ][data-bottom-sheet-snap="2"]
        :where(
            .vehicle-card,
            .vorik-vehicle-card,
            .vtc-vehicle-card,
            .suggestion-card,
            .vorik-suggestion-card,
            .vorik-vtc-result-card,
            .vorik-vtc-booking-card
        ):nth-of-type(n + 4) {
        transition-delay: 84ms;
    }

    /*
     * Pendant le déplacement du doigt, aucun retard ni animation
     * ne doit ralentir la Bottom Sheet.
     */
    .vorik-vtc-sheet.is-dragging
        :where(
            .vehicle-card,
            .vorik-vehicle-card,
            .vtc-vehicle-card,
            .suggestion-card,
            .vorik-suggestion-card,
            .vorik-vtc-result-card,
            .vorik-vtc-booking-card
        ) {
        transition-delay: 0ms !important;
        transition-duration: 0ms !important;
    }

    /*
     * Lorsque le doigt est relâché, les cartes retrouvent
     * immédiatement une animation fluide.
     */
    .vorik-vtc-sheet:not(.is-dragging)
        :where(
            .vehicle-card,
            .vorik-vehicle-card,
            .vtc-vehicle-card,
            .suggestion-card,
            .vorik-suggestion-card,
            .vorik-vtc-result-card,
            .vorik-vtc-booking-card
        ) {
        backface-visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vorik-vtc-sheet
        :where(
            .vehicle-card,
            .vorik-vehicle-card,
            .vtc-vehicle-card,
            .suggestion-card,
            .vorik-suggestion-card,
            .vorik-vtc-result-card,
            .vorik-vtc-booking-card
        ) {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* VORIK PREMIUM CONTENT REVEAL - STEP 02 END */

/* VORIK PREMIUM LIVING SHEET - STEP 03 START */

/*
 * Effet premium dynamique selon l'état de la Bottom Sheet.
 *
 * Cette étape ne modifie ni BottomSheet.js ni MapEngine.js.
 */

@media (max-width: 991.98px) {

    /*
     * État général.
     */
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"] {
        overflow: hidden;

        border-radius:
            28px
            28px
            0
            0;

        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.99) 0%,
                rgba(255, 255, 255, 1) 22%,
                #ffffff 100%
            );

        box-shadow:
            0 -12px 34px rgba(15, 23, 42, 0.12),
            0 -3px 10px rgba(15, 23, 42, 0.06);

        transition:
            border-radius 240ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 240ms ease,
            background 240ms ease;

        isolation: isolate;
    }

    /*
     * Fine lumière supérieure donnant l'impression
     * d'une surface physique.
     */
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]::after {
        content: "";

        position: absolute;
        z-index: 0;

        top: 0;
        left: 18px;
        right: 18px;

        height: 1px;

        pointer-events: none;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.95) 20%,
                rgba(255, 255, 255, 0.95) 80%,
                transparent
            );

        opacity: 0.85;

        transition:
            opacity 220ms ease,
            left 220ms ease,
            right 220ms ease;
    }

    /*
     * Le contenu reste toujours au-dessus
     * de l'effet de lumière.
     */
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"] > * {
        position: relative;
        z-index: 1;
    }

    /*
     * Niveau inférieur.
     * Coins légèrement plus ronds et ombre douce.
     */
    .vorik-vtc-sheet[
        data-bottom-sheet-ready="true"
    ][data-bottom-sheet-snap="0"] {
        border-radius:
            32px
            32px
            0
            0;

        box-shadow:
            0 -10px 28px rgba(15, 23, 42, 0.11),
            0 -2px 8px rgba(15, 23, 42, 0.05);
    }

    /*
     * Niveau intermédiaire.
     */
    .vorik-vtc-sheet[
        data-bottom-sheet-ready="true"
    ][data-bottom-sheet-snap="1"] {
        border-radius:
            27px
            27px
            0
            0;

        box-shadow:
            0 -17px 42px rgba(15, 23, 42, 0.15),
            0 -5px 16px rgba(15, 23, 42, 0.07);
    }

    /*
     * Niveau totalement ouvert.
     * Coins plus resserrés pour donner une impression
     * d'intégration avec l'écran.
     */
    .vorik-vtc-sheet[
        data-bottom-sheet-ready="true"
    ][data-bottom-sheet-snap="2"] {
        border-radius:
            21px
            21px
            0
            0;

        box-shadow:
            0 -22px 54px rgba(15, 23, 42, 0.18),
            0 -7px 20px rgba(15, 23, 42, 0.08);

        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 1) 0%,
                #ffffff 100%
            );
    }

    /*
     * Effet pendant que le doigt tient la sheet.
     */
    .vorik-vtc-sheet[
        data-bottom-sheet-ready="true"
    ].is-dragging {
        border-radius:
            24px
            24px
            0
            0;

        box-shadow:
            0 -28px 64px rgba(15, 23, 42, 0.21),
            0 -10px 28px rgba(15, 23, 42, 0.10),
            0 -2px 7px rgba(15, 23, 42, 0.05);

        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(250, 252, 255, 1) 100%
            );

        transition:
            border-radius 80ms linear,
            box-shadow 100ms linear,
            background 100ms linear;
    }

    .vorik-vtc-sheet[
        data-bottom-sheet-ready="true"
    ].is-dragging::after {
        left: 30px;
        right: 30px;
        opacity: 1;
    }

    /*
     * Poignée : plusieurs sélecteurs sont conservés
     * afin de fonctionner avec la structure réelle actuelle.
     */
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]
        :is(
            .vorik-bottom-sheet__handle,
            .vorik-sheet-handle,
            .bottom-sheet-handle,
            .sheet-handle,
            [data-bottom-sheet-handle]
        ) {
        position: relative;

        opacity: 0.78;

        transition:
            transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 180ms ease,
            filter 180ms ease;
    }

    /*
     * Niveau intermédiaire : poignée légèrement plus présente.
     */
    .vorik-vtc-sheet[
        data-bottom-sheet-ready="true"
    ][data-bottom-sheet-snap="1"]
        :is(
            .vorik-bottom-sheet__handle,
            .vorik-sheet-handle,
            .bottom-sheet-handle,
            .sheet-handle,
            [data-bottom-sheet-handle]
        ) {
        transform: scaleX(1.07);
        opacity: 0.9;
    }

    /*
     * Niveau ouvert : poignée plus fine visuellement.
     */
    .vorik-vtc-sheet[
        data-bottom-sheet-ready="true"
    ][data-bottom-sheet-snap="2"]
        :is(
            .vorik-bottom-sheet__handle,
            .vorik-sheet-handle,
            .bottom-sheet-handle,
            .sheet-handle,
            [data-bottom-sheet-handle]
        ) {
        transform: scaleX(0.94);
        opacity: 0.68;
    }

    /*
     * Pendant le drag : poignée élargie et nette.
     */
    .vorik-vtc-sheet[
        data-bottom-sheet-ready="true"
    ].is-dragging
        :is(
            .vorik-bottom-sheet__handle,
            .vorik-sheet-handle,
            .bottom-sheet-handle,
            .sheet-handle,
            [data-bottom-sheet-handle]
        ) {
        transform: scaleX(1.22);
        opacity: 1;
        filter: contrast(1.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"],
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]::after,
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"]
        :is(
            .vorik-bottom-sheet__handle,
            .vorik-sheet-handle,
            .bottom-sheet-handle,
            .sheet-handle,
            [data-bottom-sheet-handle]
        ) {
        transition: none !important;
    }
}

/* VORIK PREMIUM LIVING SHEET - STEP 03 END */

/* VORIK CURRENT LOCATION ONE-LINE FIELD START */

/*
 * L'adresse actuelle reste sur une seule ligne.
 * Les adresses longues sont terminées par des points de suspension.
 */
[data-vtc-pickup] {
    display: block;
    width: 100%;
    min-width: 0;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * Les conteneurs flex doivent accepter de rétrécir,
 * sinon l'ellipsis ne peut pas fonctionner correctement.
 */
.vorik-vtc-route-fields,
.vorik-vtc-route-fields > *,
.vorik-vtc-route-field,
.vorik-vtc-route-field-content {
    min-width: 0;
}

/* VORIK CURRENT LOCATION ONE-LINE FIELD END */

/* VORIK MOBILE COMPACT CATEGORIES START */

@media (max-width: 767px) {

    /*
     * ========================================================
     * 1. ZONE DÉPART / DESTINATION PLUS COMPACTE
     * ========================================================
     */

    .vorik-vtc-route-fields {
        margin:
            10px
            12px
            8px !important;

        padding:
            13px
            14px
            12px !important;

        min-height: 0 !important;

        border-radius: 24px !important;
    }

    /*
     * Réduction de l'espace vertical entre Départ
     * et Destination.
     */
    .vorik-vtc-route-fields [data-vtc-pickup],
    .vorik-vtc-route-fields [data-vtc-destination] {
        min-height: 24px !important;

        padding:
            0
            4px
            2px
            0 !important;

        font-size: 16px !important;
        line-height: 1.18 !important;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /*
     * Libellés DÉPART / DESTINATION.
     */
    .vorik-vtc-route-fields label,
    .vorik-vtc-route-fields label span,
    .vorik-vtc-route-fields
        [class*="label"] {
        margin-bottom: 2px !important;

        font-size: 10px !important;
        line-height: 1.1 !important;
        letter-spacing: 0.03em !important;
    }

    /*
     * Réduction des espacements internes des lignes.
     */
    .vorik-vtc-route-fields
        > div,
    .vorik-vtc-route-fields
        [class*="route-field"] {
        min-width: 0;
    }

    /*
     * Le bouton de localisation reste bien aligné,
     * mais devient légèrement plus compact.
     */
    [data-vtc-location] {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;

        border-radius: 18px !important;
    }

    /*
     * ========================================================
     * 2. CATÉGORIES TOUJOURS VISIBLES
     * ========================================================
     */

    /*
     * La bande des catégories ne doit jamais être écrasée
     * par les autres éléments de la Bottom Sheet.
     */
    [data-vtc-category-list] {
        position: relative;
        z-index: 25;

        display: flex !important;
        flex: 0 0 auto !important;

        width: 100%;
        min-height: 108px;

        gap: 8px !important;

        padding:
            7px
            12px
            8px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x proximity;
        scroll-padding-inline: 12px;

        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;

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

        border-top:
            1px solid rgba(203, 213, 225, 0.72);

        scrollbar-width: none;
    }

    [data-vtc-category-list]::-webkit-scrollbar {
        display: none;
    }

    /*
     * Cartes véhicules plus compactes.
     */
    [data-vtc-category] {
        flex:
            0
            0
            112px !important;

        width: 112px !important;
        min-width: 112px !important;
        min-height: 96px !important;

        padding:
            7px
            6px
            6px !important;

        gap: 1px !important;

        border-radius: 20px !important;

        scroll-snap-align: start;
    }

    /*
     * Image du véhicule.
     */
    [data-vtc-category] img {
        display: block;

        width: auto !important;
        max-width: 74px !important;
        height: 39px !important;

        margin:
            0
            auto
            1px !important;

        object-fit: contain;
    }

    /*
     * Nom de la catégorie :
     * Economy, Confort, Confort+, Fastest.
     */
    [data-vtc-category]
        [class*="name"],
    [data-vtc-category]
        [class*="title"],
    [data-vtc-category]
        strong {
        margin: 0 !important;

        font-size: 13px !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /*
     * Prix rapproché du nom.
     */
    [data-vtc-category]
        [class*="price"] {
        margin:
            1px
            0
            0 !important;

        font-size: 11px !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;

        white-space: nowrap;
    }

    /*
     * Temps d'arrivée.
     */
    [data-vtc-category]
        [class*="eta"],
    [data-vtc-category]
        [class*="time"] {
        margin-top: 2px !important;

        font-size: 10px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    /*
     * Au cas où les textes ne disposent pas encore
     * de classes spécifiques, on compacte tous les spans.
     */
    [data-vtc-category] span {
        max-width: 100%;

        line-height: 1.08;
    }

    /*
     * ========================================================
     * 3. BOTTOM SHEET : PROTECTION DE LA BANDE VÉHICULES
     * ========================================================
     */

    [data-vtc-sheet] {
        /*
         * La Bottom Sheet fonctionne en colonne.
         * Les catégories et les actions conservent leur hauteur.
         */
        display: flex;
        flex-direction: column;
    }

    /*
     * Quand la feuille est au niveau bas ou moyen,
     * on réduit encore légèrement la zone trajet.
     */
    [data-vtc-sheet][data-vtc-sheet-level="0"]
        .vorik-vtc-route-fields,
    [data-vtc-sheet][data-vtc-sheet-level="1"]
        .vorik-vtc-route-fields {
        margin-top: 7px !important;
        margin-bottom: 6px !important;

        padding-top: 11px !important;
        padding-bottom: 10px !important;
    }

    /*
     * Les catégories restent visibles même lorsque la partie
     * supérieure comporte beaucoup de contenu.
     */
    [data-vtc-sheet]
        [data-vtc-category-list] {
        flex-shrink: 0 !important;
    }
}

/*
 * Très petits téléphones.
 */
@media (max-width: 380px) {
    [data-vtc-category] {
        flex-basis: 104px !important;
        width: 104px !important;
        min-width: 104px !important;
    }

    [data-vtc-category] img {
        max-width: 67px !important;
        height: 36px !important;
    }

    .vorik-vtc-route-fields {
        margin-left: 9px !important;
        margin-right: 9px !important;

        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* VORIK MOBILE COMPACT CATEGORIES END */

/* VORIK INITIAL VEHICLE VISIBILITY START */

@media (max-width: 767px) {

    /*
     * La feuille est structurée verticalement.
     * Aucun élément commercial ne doit être écrasé.
     */
    [data-vtc-sheet] {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /*
     * Le contenu principal peut rétrécir, mais ne doit pas
     * pousser la bande des véhicules hors de la feuille.
     */
    [data-vtc-sheet]
        .vorik-vtc-sheet-content,
    [data-vtc-sheet]
        .vorik-vtc-booking-content,
    [data-vtc-sheet]
        .vorik-vtc-content {
        min-height: 0;
    }

    /*
     * Bloc Départ/Destination compact au premier niveau.
     */
    [data-vtc-sheet][data-vtc-sheet-level="0"]
        .vorik-vtc-route-fields {
        flex: 0 0 auto !important;

        margin:
            8px
            12px
            5px !important;

        padding:
            11px
            13px
            10px !important;
    }

    /*
     * La bande des véhicules dispose toujours de sa propre
     * hauteur et reste visible dès le chargement.
     */
    [data-vtc-category-list] {
        display: flex !important;

        flex:
            0
            0
            108px !important;

        height: 108px !important;
        min-height: 108px !important;
        max-height: 108px !important;

        visibility: visible !important;
        opacity: 1 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    /*
     * Empêche un parent de masquer les cartes véhicules.
     */
    [data-vtc-category-list],
    [data-vtc-category-list] > * {
        flex-shrink: 0 !important;
    }

    /*
     * Cartes légèrement compactées pour conserver :
     * image + nom + prix + délai.
     */
    [data-vtc-category] {
        height: 96px !important;
        min-height: 96px !important;
        max-height: 96px !important;

        padding:
            5px
            6px
            4px !important;
    }

    [data-vtc-category] img {
        height: 36px !important;
        max-height: 36px !important;

        margin-bottom: 0 !important;
    }

    /*
     * Barre d'action toujours disponible sous les véhicules.
     */
    [data-vtc-sheet]
        .vorik-vtc-actions,
    [data-vtc-sheet]
        .vorik-vtc-footer,
    [data-vtc-sheet]
        [class*="booking-action"] {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
    }
}

/*
 * Téléphones très courts en hauteur.
 */
@media (max-width: 767px) and (max-height: 720px) {
    [data-vtc-category-list] {
        flex-basis: 98px !important;

        height: 98px !important;
        min-height: 98px !important;
        max-height: 98px !important;
    }

    [data-vtc-category] {
        height: 88px !important;
        min-height: 88px !important;
        max-height: 88px !important;
    }

    [data-vtc-category] img {
        height: 32px !important;
        max-height: 32px !important;
    }
}

/* VORIK INITIAL VEHICLE VISIBILITY END */

/* VORIK PREMIUM MAP INTRO START */

/*
 * Apparition douce de la carte.
 *
 * Aucun transform n'est appliqué sur le canvas MapLibre,
 * car cela pourrait altérer le calcul des coordonnées.
 */
.vorik-vtc-map {
    --vorik-map-intro-overlay-opacity: 0;
}

.vorik-vtc-map::after {
    content: "";

    position: absolute;
    z-index: 8;
    inset: 0;

    pointer-events: none;

    opacity:
        var(
            --vorik-map-intro-overlay-opacity
        );

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(255, 255, 255, 0) 20%,
            rgba(255, 255, 255, 0.12) 68%,
            rgba(255, 255, 255, 0.28) 100%
        );

    transition:
        opacity
        800ms
        ease;
}

.vorik-vtc-map.is-map-intro-running {
    --vorik-map-intro-overlay-opacity: 1;
}

.vorik-vtc-map.is-map-intro-complete {
    --vorik-map-intro-overlay-opacity: 0;
}

/*
 * Les contrôles de la carte arrivent légèrement après
 * le mouvement principal pour renforcer l'effet premium.
 */
.vorik-vtc-map.is-map-intro-running
    .maplibregl-ctrl,
.vorik-vtc-map.is-map-intro-running
    [data-vtc-map-control],
.vorik-vtc-map.is-map-intro-running
    .vorik-vtc-map-control {
    opacity: 0.65;

    transition:
        opacity
        650ms
        ease;
}

.vorik-vtc-map.is-map-intro-complete
    .maplibregl-ctrl,
.vorik-vtc-map.is-map-intro-complete
    [data-vtc-map-control],
.vorik-vtc-map.is-map-intro-complete
    .vorik-vtc-map-control {
    opacity: 1;

    transition:
        opacity
        420ms
        ease;
}

@media (prefers-reduced-motion: reduce) {
    .vorik-vtc-map::after,
    .vorik-vtc-map
        .maplibregl-ctrl,
    .vorik-vtc-map
        [data-vtc-map-control],
    .vorik-vtc-map
        .vorik-vtc-map-control {
        transition: none !important;
    }
}

/* VORIK PREMIUM MAP INTRO END */

/* VORIK FIXED FOOTER VEHICLE RESERVATION START */

:root {
    --vorik-sticky-action-height: 82px;
    --vorik-vehicle-footer-gap: 12px;
}

@media (max-width: 767px) {

    /*
     * Le footer reste fixe.
     */
    .vorik-sticky-action-bar,
    [data-sticky-action-bar] {
        z-index: 90;
    }

    /*
     * La marge se trouve après la bande des véhicules.
     *
     * Elle réserve dans le contenu exactement la hauteur
     * occupée visuellement par le footer fixe.
     */
    [data-vtc-category-list] {
        flex-shrink: 0 !important;

        margin-bottom:
            calc(
                var(--vorik-sticky-action-height)
                + var(--vorik-vehicle-footer-gap)
                + env(safe-area-inset-bottom, 0px)
            ) !important;

        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    /*
     * Les cartes restent totalement visibles.
     */
    [data-vtc-category] {
        flex-shrink: 0 !important;

        margin-bottom: 0 !important;
    }

    /*
     * Le conteneur de la Bottom Sheet ne doit pas compresser
     * les catégories après le calcul du snap.
     */
    [data-vtc-sheet] {
        display: flex !important;
        flex-direction: column !important;
    }

    [data-vtc-sheet]
        .vorik-vtc-route-fields,
    [data-vtc-sheet]
        [data-vtc-category-list] {
        flex-shrink: 0 !important;
    }
}

/*
 * Écrans courts :
 * conserver la protection tout en réduisant légèrement
 * la respiration visuelle.
 */
@media (max-width: 767px) and (max-height: 720px) {
    :root {
        --vorik-vehicle-footer-gap: 8px;
    }
}

/* VORIK FIXED FOOTER VEHICLE RESERVATION END */

/* VORIK COMPACT ROUTE AND VEHICLE ETA START */

@media (max-width: 767px) {

    /*
     * ========================================================
     * 1. DÉPART ET DESTINATION SUR LA MÊME LIGNE
     * ========================================================
     */

    .vorik-vtc-route-fields {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            52px !important;

        align-items: center !important;

        column-gap: 10px !important;

        min-height: 0 !important;

        margin:
            8px
            12px
            7px !important;

        padding:
            12px
            12px
            11px !important;

        border-radius: 24px !important;
    }

    /*
     * L'ancien rail vertical n'est plus nécessaire.
     * Chaque champ possède désormais son propre indicateur.
     */
    .vorik-vtc-route-rail {
        display: none !important;
    }

    .vorik-vtc-route-inputs {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            1px
            minmax(0, 1fr) !important;

        align-items: center !important;

        gap: 12px !important;

        width: 100% !important;
        min-width: 0 !important;
    }

    /*
     * Le séparateur devient vertical entre Départ
     * et Destination.
     */
    .vorik-vtc-field-separator {
        display: block !important;

        width: 1px !important;
        height: 46px !important;

        margin: 0 !important;

        background:
            rgba(203, 213, 225, 0.72) !important;
    }

    .vorik-vtc-field {
        position: relative;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        min-width: 0 !important;
        min-height: 52px !important;

        padding:
            0
            0
            0
            28px !important;

        margin: 0 !important;
    }

    /*
     * Indicateur bleu du point de départ.
     */
    .vorik-vtc-field:first-of-type::before {
        content: "";

        position: absolute;

        top: 50%;
        left: 2px;

        width: 17px;
        height: 17px;

        box-sizing: border-box;

        border:
            3px
            solid
            #155eef;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                #155eef 0 25%,
                #ffffff 27% 100%
            );

        transform:
            translateY(-50%);

        box-shadow:
            0 0 0 2px
            rgba(21, 94, 239, 0.08);
    }

    /*
     * Indicateur jaune de la destination.
     */
    .vorik-vtc-field:last-of-type::before {
        content: "";

        position: absolute;

        top: 50%;
        left: 3px;

        width: 15px;
        height: 15px;

        box-sizing: border-box;

        border:
            3px
            solid
            #0f172a;

        border-radius: 4px;

        background:
            #ffd21c;

        transform:
            translateY(-50%);

        box-shadow:
            0 2px 4px
            rgba(15, 23, 42, 0.16);
    }

    /*
     * Libellés DÉPART et DESTINATION.
     */
    .vorik-vtc-field > span {
        display: block !important;

        margin:
            0
            0
            3px !important;

        font-size: 10px !important;
        line-height: 1 !important;
        font-weight: 800 !important;

        letter-spacing: 0.045em !important;

        color:
            #71809b !important;

        white-space: nowrap;
    }

    /*
     * Valeur ou placeholder sur une seule ligne.
     */
    .vorik-vtc-field input {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        height: 24px !important;

        padding: 0 !important;
        margin: 0 !important;

        border: 0 !important;
        outline: 0;

        background:
            transparent !important;

        font-size: 15px !important;
        line-height: 24px !important;
        font-weight: 700 !important;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .vorik-vtc-field input::placeholder {
        font-size: 14px !important;
        font-weight: 600 !important;

        color:
            #9aa7bb !important;

        opacity: 1;
    }

    /*
     * Bouton de positionnement conservé à droite.
     */
    .vorik-vtc-location-button,
    [data-vtc-location] {
        grid-column: 2 !important;

        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 18px !important;
    }

    /*
     * ========================================================
     * 2. DURÉE POSITIONNÉE SUR LE VÉHICULE
     * ========================================================
     */

    [data-vtc-category] {
        position: relative !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        min-height: 86px !important;
        height: 86px !important;
        max-height: 86px !important;

        padding:
            5px
            6px
            5px !important;

        overflow: hidden !important;
    }

    /*
     * La zone visuelle du véhicule occupe le haut
     * de la carte.
     */
    [data-vtc-category]
        .vorik-vtc-category-visual {
        position: relative !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 39px !important;
        min-height: 39px !important;

        margin:
            0
            0
            1px !important;

        overflow: visible !important;
    }

    /*
     * La durée existante reste dans le HTML,
     * mais elle quitte complètement le flux vertical.
     *
     * Elle apparaît au-dessus du véhicule, dans son coin
     * supérieur droit.
     */
    [data-vtc-category] > [data-vtc-category-eta] {
        position: absolute !important;

        z-index: 6;

        top: 7px !important;
        right: 7px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 35px;
        height: 20px;

        padding:
            0
            7px !important;

        margin: 0 !important;

        border:
            1px
            solid
            rgba(21, 128, 61, 0.12);

        border-radius: 999px;

        background:
            rgba(220, 252, 231, 0.96);

        box-shadow:
            0 3px 8px
            rgba(15, 23, 42, 0.10);

        color:
            #15803d !important;

        font-size: 10px !important;
        line-height: 20px !important;
        font-weight: 800 !important;

        white-space: nowrap;

        pointer-events: none;
    }

    /*
     * Le véhicule reste visible derrière le badge.
     * Une petite réserve est créée à droite.
     */
    [data-vtc-category]
        .vorik-vtc-car-art {
        margin-right: 4px;
    }

    /*
     * Nom du véhicule.
     */
    [data-vtc-category] > strong {
        display: block !important;

        max-width: 100%;

        margin:
            1px
            0
            1px !important;

        font-size: 13px !important;
        line-height: 1.05 !important;
        font-weight: 800 !important;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /*
     * Prix désormais en dernière ligne.
     */
    [data-vtc-category]
        .vorik-vtc-category-price {
        display: block !important;

        margin: 0 !important;

        font-size: 11px !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;

        white-space: nowrap;
    }

    /*
     * La bande complète gagne de la hauteur utile.
     */
    [data-vtc-category-list] {
        flex-basis: 96px !important;

        height: 96px !important;
        min-height: 96px !important;
        max-height: 96px !important;

        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
}

/*
 * Très petits écrans.
 */
@media (max-width: 380px) {

    .vorik-vtc-route-fields {
        grid-template-columns:
            minmax(0, 1fr)
            46px !important;

        column-gap: 7px !important;

        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .vorik-vtc-route-inputs {
        gap: 8px !important;
    }

    .vorik-vtc-field {
        padding-left: 23px !important;
    }

    .vorik-vtc-field input {
        font-size: 13px !important;
    }

    .vorik-vtc-field input::placeholder {
        font-size: 12px !important;
    }

    .vorik-vtc-location-button,
    [data-vtc-location] {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;

        border-radius: 16px !important;
    }

    [data-vtc-category] > [data-vtc-category-eta] {
        right: 5px !important;

        min-width: 32px;

        padding:
            0
            5px !important;

        font-size: 9px !important;
    }
}

/* VORIK COMPACT ROUTE AND VEHICLE ETA END */

/* VORIK TWO-LINE COMPACT ROUTE START */

@media (max-width: 767px) {

    /*
     * ========================================================
     * CONTENEUR PRINCIPAL
     * ========================================================
     *
     * Colonne gauche : Départ + Destination.
     * Colonne droite : bouton GPS sur les deux lignes.
     */
    .vorik-vtc-route-fields {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            50px !important;

        grid-template-rows: auto !important;

        align-items: center !important;

        column-gap: 8px !important;

        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;

        margin:
            7px
            8px
            6px !important;

        padding:
            9px
            10px
            9px !important;

        border-radius: 22px !important;
    }

    /*
     * L'ancien rail vertical n'est plus utilisé.
     * Les icônes sont directement intégrées aux lignes.
     */
    .vorik-vtc-route-rail {
        display: none !important;
    }

    /*
     * Les deux champs sont maintenant empilés.
     */
    .vorik-vtc-route-inputs {
        grid-column: 1 !important;
        grid-row: 1 !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        grid-template-rows:
            minmax(38px, auto)
            1px
            minmax(38px, auto) !important;

        align-items: center !important;

        gap: 0 !important;

        width: 100% !important;
        min-width: 0 !important;

        padding: 0 !important;
        margin: 0 !important;
    }

    /*
     * Séparateur horizontal très léger.
     */
    .vorik-vtc-field-separator {
        display: block !important;

        width:
            calc(100% - 25px) !important;

        height: 1px !important;

        margin:
            0
            0
            0
            25px !important;

        background:
            rgba(203, 213, 225, 0.60) !important;
    }

    /*
     * Chaque ligne possède :
     *
     * icône | libellé | valeur
     */
    .vorik-vtc-field {
        position: relative;

        display: grid !important;

        grid-template-columns:
            20px
            auto
            minmax(0, 1fr) !important;

        align-items: center !important;

        column-gap: 6px !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;

        padding:
            2px
            0 !important;

        margin: 0 !important;
    }

    /*
     * Icône Départ.
     */
    .vorik-vtc-field:first-of-type::before {
        content: "";

        grid-column: 1;

        display: block;

        width: 17px;
        height: 17px;

        box-sizing: border-box;

        border:
            3px
            solid
            #155eef;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                #155eef 0 24%,
                #ffffff 27% 100%
            );

        box-shadow:
            0 0 0 2px
            rgba(21, 94, 239, 0.08);
    }

    /*
     * Icône Destination.
     */
    .vorik-vtc-field:last-of-type::before {
        content: "";

        grid-column: 1;

        display: block;

        width: 16px;
        height: 16px;

        box-sizing: border-box;

        border:
            3px
            solid
            #0f172a;

        border-radius: 4px;

        background:
            #ffd21c;

        box-shadow:
            0 2px 4px
            rgba(15, 23, 42, 0.16);
    }

    /*
     * Libellé et valeur apparaissent sur la même ligne :
     *
     * Départ : Nkolafamba
     */
    .vorik-vtc-field > span {
        grid-column: 2;

        display: inline-flex !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 0 !important;

        color:
            #155eef !important;

        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 800 !important;

        letter-spacing: 0 !important;
        text-transform: none !important;

        white-space: nowrap;
    }

    .vorik-vtc-field > span::after {
        content: " :";

        display: inline;

        margin-left: 2px;

        color:
            #73819a;
    }

    /*
     * Valeur du champ.
     */
    .vorik-vtc-field input {
        grid-column: 3;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;

        padding: 0 !important;
        margin: 0 !important;

        border: 0 !important;
        outline: 0;

        background:
            transparent !important;

        color:
            #17233a !important;

        font-size: 15px !important;
        line-height: 30px !important;
        font-weight: 700 !important;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .vorik-vtc-field input::placeholder {
        color:
            #94a0b4 !important;

        font-size: 14px !important;
        font-weight: 600 !important;

        opacity: 1;
    }

    /*
     * Bouton GPS aligné à droite et centré
     * par rapport aux deux lignes.
     */
    .vorik-vtc-location-button,
    [data-vtc-location] {
        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: center !important;
        justify-self: center !important;

        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;

        padding: 0 !important;
        margin: 0 !important;

        border-radius: 17px !important;
    }

    .vorik-vtc-location-button svg,
    [data-vtc-location] svg {
        width: 23px !important;
        height: 23px !important;
    }
}

/*
 * Téléphones étroits.
 */
@media (max-width: 380px) {

    .vorik-vtc-route-fields {
        grid-template-columns:
            minmax(0, 1fr)
            44px !important;

        column-gap: 5px !important;

        margin-left: 6px !important;
        margin-right: 6px !important;

        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .vorik-vtc-field {
        grid-template-columns:
            18px
            auto
            minmax(0, 1fr) !important;

        column-gap: 4px !important;
    }

    .vorik-vtc-field > span {
        font-size: 11px !important;
    }

    .vorik-vtc-field input {
        font-size: 13px !important;
    }

    .vorik-vtc-field input::placeholder {
        font-size: 12px !important;
    }

    .vorik-vtc-location-button,
    [data-vtc-location] {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;

        border-radius: 15px !important;
    }
}

/* VORIK TWO-LINE COMPACT ROUTE END */

/* VORIK PLAIN TWO-LINE ROUTE START */

@media (max-width: 767px) {

    /*
     * ========================================================
     * CONTENEUR SANS CARTE NI CADRE
     * ========================================================
     */

    .vorik-vtc-route-fields {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            44px !important;

        align-items: center !important;

        column-gap: 6px !important;

        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;

        margin:
            4px
            8px
            3px !important;

        padding:
            4px
            2px
            4px
            0 !important;

        border: 0 !important;
        border-radius: 0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;
    }

    .vorik-vtc-route-fields::before,
    .vorik-vtc-route-fields::after {
        display: none !important;
    }

    /*
     * Ancien rail retiré.
     */
    .vorik-vtc-route-rail {
        display: none !important;
    }

    /*
     * Deux lignes très rapprochées.
     */
    .vorik-vtc-route-inputs {
        grid-column: 1 !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        grid-template-rows:
            31px
            31px !important;

        align-items: center !important;

        gap: 0 !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /*
     * Aucun séparateur visible entre les lignes.
     */
    .vorik-vtc-field-separator {
        display: none !important;
    }

    /*
     * Structure de chaque ligne :
     *
     * icône | libellé | valeur
     */
    .vorik-vtc-field {
        position: relative;

        display: grid !important;

        grid-template-columns:
            19px
            auto
            minmax(0, 1fr) !important;

        align-items: center !important;

        column-gap: 5px !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 31px !important;
        height: 31px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        background:
            transparent !important;
    }

    /*
     * Icône Départ.
     */
    .vorik-vtc-field:first-of-type::before {
        content: "";

        grid-column: 1;

        width: 16px;
        height: 16px;

        box-sizing: border-box;

        border:
            3px
            solid
            #155eef;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                #155eef 0 23%,
                #ffffff 27% 100%
            );

        box-shadow:
            0 0 0 2px
            rgba(21, 94, 239, 0.07);
    }

    /*
     * Icône Destination.
     */
    .vorik-vtc-field:last-of-type::before {
        content: "";

        grid-column: 1;

        width: 15px;
        height: 15px;

        box-sizing: border-box;

        border:
            3px
            solid
            #0f172a;

        border-radius: 4px;

        background:
            #ffd21c;

        box-shadow:
            0 1px 3px
            rgba(15, 23, 42, 0.16);
    }

    /*
     * Départ : / Destination :
     */
    .vorik-vtc-field > span {
        grid-column: 2;

        display: inline !important;

        margin: 0 !important;
        padding: 0 !important;

        color:
            #52627a !important;

        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 800 !important;

        letter-spacing: 0 !important;
        text-transform: none !important;

        white-space: nowrap;
    }

    .vorik-vtc-field > span::after {
        content: " :";

        margin-left: 1px;

        color:
            #71809a;
    }

    /*
     * Valeur du départ ou de la destination.
     */
    .vorik-vtc-field input {
        grid-column: 3;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        height: 28px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;
        outline: 0;

        background:
            transparent !important;

        color:
            #17233a !important;

        font-size: 14px !important;
        line-height: 28px !important;
        font-weight: 700 !important;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .vorik-vtc-field input::placeholder {
        color:
            #94a0b4 !important;

        font-size: 14px !important;
        font-weight: 600 !important;

        opacity: 1;
    }

    /*
     * Bouton GPS compact, sans agrandir le bloc.
     */
    .vorik-vtc-location-button,
    [data-vtc-location] {
        grid-column: 2 !important;

        align-self: center !important;
        justify-self: end !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 14px !important;
    }

    .vorik-vtc-location-button svg,
    [data-vtc-location] svg {
        width: 21px !important;
        height: 21px !important;
    }
}

/*
 * Très petits écrans.
 */
@media (max-width: 380px) {

    .vorik-vtc-route-fields {
        grid-template-columns:
            minmax(0, 1fr)
            39px !important;

        margin-left: 6px !important;
        margin-right: 6px !important;

        column-gap: 3px !important;
    }

    .vorik-vtc-field {
        grid-template-columns:
            17px
            auto
            minmax(0, 1fr) !important;

        column-gap: 3px !important;
    }

    .vorik-vtc-field > span {
        font-size: 11px !important;
    }

    .vorik-vtc-field input,
    .vorik-vtc-field input::placeholder {
        font-size: 12px !important;
    }

    .vorik-vtc-location-button,
    [data-vtc-location] {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;

        border-radius: 13px !important;
    }
}

/* VORIK PLAIN TWO-LINE ROUTE END */

/* VORIK VEHICLE FOOTER REPULSOR START */

/*
 * Le footer est fixe et recouvre potentiellement le contenu.
 * Cette réserve garantit que la dernière ligne des véhicules
 * reste toujours au-dessus du footer.
 */
.vorik-vtc-category-list {
    margin-bottom: calc(
        var(--vorik-sticky-action-height, 78px)
        + var(--vorik-vehicle-footer-gap, 16px)
    );
}

/*
 * La zone de sécurité reste active pendant le déplacement,
 * lorsque la feuille est ouverte ou lorsqu'elle redescend.
 */
[data-vtc-sheet] {
    scroll-padding-bottom: calc(
        var(--vorik-sticky-action-height, 78px)
        + var(--vorik-vehicle-footer-gap, 16px)
    );
}


.vorik-vtc-field {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 14px 16px;
    transition: background .25s ease,
                border-color .25s ease,
                box-shadow .25s ease;
}

.vorik-vtc-field:hover {
    background: #eef2f7;
}

.vorik-vtc-field:focus-within {
    background: #ffffff;
    border-color: #f5b301;
    box-shadow: 0 0 0 4px rgba(245,179,1,.14);
}
/* VORIK VEHICLE FOOTER REPULSOR END */

/* ==========================================================
   VTC-UX-014 — Route fields typography
   Better readability without increasing component height
   ========================================================== */

@media (max-width: 767px) {

    .vorik-vtc-field {
        min-width: 0;
    }

    /* Départ / Destination */
    .vorik-vtc-field > span {
        margin-bottom: 2px;
        color: #64748b;
        font-size: 11px;
        font-weight: 750;
        line-height: 1.05;
        letter-spacing: 0.01em;
        text-transform: none;
    }

    /* Adresse sélectionnée */
    .vorik-vtc-field input {
        display: block;
        width: 100%;
        min-width: 0;
        overflow: hidden;

        color: #0f172a;
        background: transparent;

        font-size: 15px;
        font-weight: 650;
        line-height: 1.15;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Placeholder légèrement moins fort que l'adresse réelle */
    .vorik-vtc-field input::placeholder {
        color: #94a3b8;
        font-size: 14px;
        font-weight: 500;
        opacity: 1;
    }
}

/* VTC-UX-014 END */

/* ==========================================================
   GEO-MAP-01 — Pickup / Destination markers
   ========================================================== */

.vorik-map-route-marker {
    position: relative;
    width: 26px;
    height: 26px;
    pointer-events: none;
}

.vorik-map-route-marker::before {
    position: absolute;
    inset: 3px;
    content: "";
    border: 4px solid #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.28);
}

.vorik-map-route-marker.is-pickup::before {
    border-radius: 50%;
    background: #135fda;
}

.vorik-map-route-marker.is-destination::before {
    border-radius: 50% 50% 50% 5px;
    background: #ffc629;
    transform: rotate(-45deg);
}

/* GEO-MAP-01 END */

/* ==========================================================
   GEO-MAP-03 — Route distance / duration summary
   ========================================================== */

.vorik-vtc-route-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 22px;
    margin: 2px 0 4px;

    color: #475569;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.vorik-vtc-route-summary[hidden] {
    display: none;
}

.vorik-vtc-route-summary-dot {
    color: #94a3b8;
}

/* GEO-MAP-03 END */


/* =========================================================
   VORIK CLIENT SHEET STATES
   Same BottomSheet engine as Driver UI
   ========================================================= */


/*
 * Booking preparation has its own minimum height.
 *
 * getDynamicSheetSnapPoints() guarantees that route fields
 * and vehicle categories remain above the fixed footer.
 */
[data-vtc-sheet][
    data-client-sheet-state="booking_setup"
] {
    --vorik-client-sheet-mode:
        booking;
}


/*
 * Contextual states use a compact resting position.
 */
[data-vtc-sheet][
    data-client-sheet-state="searching"
],
[data-vtc-sheet][
    data-client-sheet-state="driver_assigned"
],
[data-vtc-sheet][
    data-client-sheet-state="arriving"
],
[data-vtc-sheet][
    data-client-sheet-state="waiting"
],
[data-vtc-sheet][
    data-client-sheet-state="trip_active"
],
[data-vtc-sheet][
    data-client-sheet-state="completed"
] {
    --vorik-client-sheet-mode:
        contextual;
}


/* =========================================================
   CONTEXT PANEL
   ========================================================= */

.vorik-client-state-panel {
    min-height: 92px;

    box-sizing: border-box;

    display: grid;

    grid-template-columns:
        auto minmax(0, 1fr);

    align-items: center;

    column-gap: 14px;
    row-gap: 5px;

    padding:
        14px 18px
        calc(
            14px
            + env(
                safe-area-inset-bottom,
                0px
            )
        );

    color: #0f2748;
}


.vorik-client-state-panel[hidden] {
    display: none !important;
}


.vorik-client-state-panel__status {
    width: 42px;
    height: 42px;

    grid-row:
        1 / span 2;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        #e8f1ff;

    color:
        #1262d6;
}


.vorik-client-state-panel__status > span {
    width: 13px;
    height: 13px;

    display: block;

    border-radius: 50%;

    background:
        currentColor;

    box-shadow:
        0 0 0 5px
        rgba(
            18,
            98,
            214,
            0.12
        );
}


.vorik-client-state-panel__copy {
    min-width: 0;

    display: grid;

    gap: 4px;
}


.vorik-client-state-panel__copy strong {
    overflow: hidden;

    color:
        #0b2345;

    font-size:
        17px;

    line-height:
        1.15;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.vorik-client-state-panel__copy > span {
    overflow: hidden;

    color:
        #71819d;

    font-size:
        13px;

    line-height:
        1.3;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.vorik-client-state-panel__hint {
    grid-column:
        1 / -1;

    padding-top:
        4px;

    color:
        #8a99b0;

    font-size:
        11px;

    text-align:
        center;
}


/* =========================================================
   STATE COLORS
   ========================================================= */

.vorik-client-state-panel[
    data-state="searching"
]
.vorik-client-state-panel__status {
    color:
        #2563eb;
}


.vorik-client-state-panel[
    data-state="driver_assigned"
]
.vorik-client-state-panel__status {
    color:
        #16a34a;

    background:
        #ecfdf3;
}


.vorik-client-state-panel[
    data-state="arriving"
]
.vorik-client-state-panel__status {
    color:
        #2563eb;
}


.vorik-client-state-panel[
    data-state="waiting"
]
.vorik-client-state-panel__status {
    color:
        #d97706;

    background:
        #fff7e6;
}


.vorik-client-state-panel[
    data-state="trip_active"
]
.vorik-client-state-panel__status {
    color:
        #1262d6;
}


.vorik-client-state-panel[
    data-state="completed"
]
.vorik-client-state-panel__status {
    color:
        #16a34a;

    background:
        #ecfdf3;
}


/*
 * Subtle pulse while searching.
 */
.vorik-client-state-panel[
    data-state="searching"
]
.vorik-client-state-panel__status > span {
    animation:
        vorik-client-search-pulse
        1.45s
        ease-out
        infinite;
}


@keyframes vorik-client-search-pulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(
                37,
                99,
                235,
                0.28
            );
    }

    70% {
        box-shadow:
            0 0 0 10px
            rgba(
                37,
                99,
                235,
                0
            );
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(
                37,
                99,
                235,
                0
            );
    }
}


/*
 * When operational, the booking form is not another sheet.
 * The same sheet displays only the context corresponding
 * to the current state.
 */
[data-vtc-sheet]:not(
    [data-client-sheet-state="booking_setup"]
)
.vorik-vtc-form {
    display:
        none !important;
}



/* =========================================================
   VORIK — ROUTE FIELDS ONE-LINE PREMIUM
   ========================================================= */

[data-client-sheet-state="booking_setup"]
.vorik-vtc-route-inputs {
    display: grid;
    gap: 0;

    margin:
        2px 10px 7px;

    padding:
        3px 13px;

    border:
        1px solid rgba(15, 39, 72, 0.08);

    border-radius:
        18px;

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

    box-shadow:
        0 7px 20px
        rgba(15, 39, 72, 0.065);
}


/* Une seule ligne :
   marqueur | label | adresse | chevron
*/
[data-client-sheet-state="booking_setup"]
.vorik-vtc-field {
    position: relative;

    display: grid !important;

    grid-template-columns:
        18px
        auto
        minmax(0, 1fr)
        18px !important;

    grid-template-rows:
        42px !important;

    column-gap:
        9px;

    align-items:
        center;

    min-height:
        42px !important;

    height:
        42px;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/* Départ / Destination */
[data-client-sheet-state="booking_setup"]
.vorik-vtc-field > span:first-child {
    grid-column:
        2 !important;

    grid-row:
        1 !important;

    margin:
        0 !important;

    align-self:
        center;

    color:
        #607089;

    font-size:
        11px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        0.025em;

    text-transform:
        none;
}


/* Adresse */
[data-client-sheet-state="booking_setup"]
.vorik-vtc-field
> .is-search-sheet-trigger {
    grid-column:
        3 !important;

    grid-row:
        1 !important;

    width:
        100%;

    min-width:
        0;

    height:
        30px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    outline:
        0;

    background:
        transparent !important;

    color:
        #102949;

    font-size:
        13.5px;

    font-weight:
        650;

    line-height:
        30px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    cursor:
        pointer;
}


[data-client-sheet-state="booking_setup"]
.vorik-vtc-field
> .is-search-sheet-trigger::placeholder {
    color:
        #8190a4;

    opacity:
        1;
}


/* Point départ */
[data-client-sheet-state="booking_setup"]
.vorik-vtc-field::before {
    content: '';

    grid-column:
        1 !important;

    grid-row:
        1 !important;

    justify-self:
        center;

    width:
        8px;

    height:
        8px;

    border:
        2px solid #ffffff;

    border-radius:
        50%;

    background:
        #1769e0;

    box-shadow:
        0 0 0 2px
        rgba(23, 105, 224, 0.16);
}


/* Destination */
[data-client-sheet-state="booking_setup"]
.vorik-vtc-field[
    for="vtc-destination"
]::before {
    border-radius:
        2px;

    background:
        #ef4444;

    box-shadow:
        0 0 0 2px
        rgba(239, 68, 68, 0.13);

    transform:
        rotate(45deg);
}


/* Chevron droit */
[data-client-sheet-state="booking_setup"]
.vorik-vtc-field::after {
    content:
        '›';

    grid-column:
        4 !important;

    grid-row:
        1 !important;

    justify-self:
        end;

    color:
        #9aa7b8;

    font-size:
        22px;

    font-weight:
        300;

    line-height:
        1;
}


/* Ligne entre Départ / Destination */
[data-client-sheet-state="booking_setup"]
.vorik-vtc-field-separator {
    height:
        1px;

    margin:
        0 18px 0 27px !important;

    background:
        rgba(15, 39, 72, 0.075);
}


/* Petit trait vertical reliant les marqueurs */
[data-client-sheet-state="booking_setup"]
.vorik-vtc-field-separator::before {
    content: '';

    position:
        absolute;

    left:
        7px;

    top:
        -11px;

    width:
        1px;

    height:
        23px;

    background:
        repeating-linear-gradient(
            to bottom,
            #c8d2df 0,
            #c8d2df 3px,
            transparent 3px,
            transparent 6px
        );
}


/* Très petits écrans */
@media (max-width: 380px) {

    [data-client-sheet-state="booking_setup"]
    .vorik-vtc-field {
        grid-template-columns:
            16px
            auto
            minmax(0, 1fr)
            15px !important;

        column-gap:
            7px;
    }


    [data-client-sheet-state="booking_setup"]
    .vorik-vtc-field > span:first-child {
        font-size:
            10.5px;
    }


    [data-client-sheet-state="booking_setup"]
    .vorik-vtc-field
    > .is-search-sheet-trigger {
        font-size:
            12.5px;
    }
}



/* =========================================================
   VORIK TAXI — VEHICLE CATEGORY IDENTITY
   =========================================================
   Applies ONLY to ?service=taxi.
   VTC rendering remains untouched.
   ========================================================= */


/* ECONOMY — Cameroon taxi yellow */

html[data-vorik-service="taxi"]
.vorik-vtc-category[data-category="economy"]
.vorik-vtc-car-body {
    background:
        linear-gradient(
            180deg,
            #ffd83d 0%,
            #ffc400 55%,
            #e9a900 100%
        );
}


/* COMFORT — richer taxi yellow */

html[data-vorik-service="taxi"]
.vorik-vtc-category[data-category="comfort"]
.vorik-vtc-car-body {
    background:
        linear-gradient(
            180deg,
            #ffd94a 0%,
            #f7bd16 55%,
            #d99a00 100%
        );
}


/* PREMIUM — gold yellow */

html[data-vorik-service="taxi"]
.vorik-vtc-category[data-category="premium"]
.vorik-vtc-car-body {
    background:
        linear-gradient(
            180deg,
            #ffd75a 0%,
            #eeb41d 50%,
            #c88b00 100%
        );
}


/* VIP — deeper premium gold */

html[data-vorik-service="taxi"]
.vorik-vtc-category[data-category="vip"]
.vorik-vtc-car-body {
    background:
        linear-gradient(
            180deg,
            #f7ce54 0%,
            #dba526 50%,
            #ad7600 100%
        );
}


/* Dark glazing */

html[data-vorik-service="taxi"]
.vorik-vtc-category
.vorik-vtc-car-window {
    background:
        linear-gradient(
            180deg,
            #26384a 0%,
            #101c2b 100%
        );
}


/* Dark wheels */

html[data-vorik-service="taxi"]
.vorik-vtc-category
.vorik-vtc-car-wheel {
    background:
        #17212e;
}


/* =========================================================
   VORIK TAXI — VISUAL IDENTITY FINAL
   ========================================================= */


/* =========================================================
   VORIK TAXI — VISUAL IDENTITY FINAL
   =========================================================
   Taxi receives a yellow/gold service identity while
   VORIK brand blue remains the primary product color.

   These rules apply ONLY to:
       html[data-vorik-service="taxi"]

   VTC remains untouched.
   ========================================================= */


/* ---------------------------------------------------------
   SELECTED TAXI CATEGORY
   --------------------------------------------------------- */

html[data-vorik-service="taxi"]
.vorik-vtc-category.is-selected {
    border-color:
        #f3b400;

    box-shadow:
        0 0 0 2px
        rgba(243, 180, 0, 0.16),
        0 8px 20px
        rgba(16, 42, 76, 0.08);

    background:
        linear-gradient(
            180deg,
            #fffdf6 0%,
            #fff9df 100%
        );
}


html[data-vorik-service="taxi"]
.vorik-vtc-category.is-selected strong {
    color:
        #17365d;
}


/* ---------------------------------------------------------
   SELECTED TAXI PRICE / STATUS ACCENT
   --------------------------------------------------------- */

html[data-vorik-service="taxi"]
.vorik-vtc-category.is-selected
.vorik-vtc-category-price {
    color:
        #a86f00;
}


/* ---------------------------------------------------------
   PRIMARY TAXI ACTION
   "Rechercher un chauffeur"
   --------------------------------------------------------- */

html[data-vorik-service="taxi"]
.vorik-action-primary[
    form="vorik-vtc-form"
] {
    background:
        linear-gradient(
            180deg,
            #ffd83d 0%,
            #f6bf00 100%
        );

    color:
        #132238;

    border-color:
        #e1aa00;

    box-shadow:
        0 10px 28px
        rgba(225, 170, 0, 0.28);
}


html[data-vorik-service="taxi"]
.vorik-action-primary[
    form="vorik-vtc-form"
]:hover {
    background:
        linear-gradient(
            180deg,
            #ffe36d 0%,
            #f7c819 100%
        );
}


html[data-vorik-service="taxi"]
.vorik-action-primary[
    form="vorik-vtc-form"
]:active {
    transform:
        translateY(1px);
}


/* ---------------------------------------------------------
   TAXI FOCUS / ACCESSIBILITY
   --------------------------------------------------------- */

html[data-vorik-service="taxi"]
.vorik-vtc-category:focus-visible,
html[data-vorik-service="taxi"]
.vorik-action-primary[
    form="vorik-vtc-form"
]:focus-visible {
    outline:
        3px solid
        rgba(243, 180, 0, 0.34);

    outline-offset:
        2px;
}





/* =========================================================
   VORIK CATEGORY FOOTER SAFE GAP START

   JS performs the real collision measurement.
   This CSS variable documents and preserves the desired
   visual breathing room.
   ========================================================= */

:root {
    --vorik-vtc-category-footer-gap: 12px;
}

[data-vtc-category-list] {
    /*
     * Helpful when the category row is programmatically
     * scrolled into view.
     *
     * It does NOT create a large permanent empty block.
     */
    scroll-margin-bottom:
        calc(
            var(
                --vorik-sticky-action-height,
                72px
            )
            +
            var(
                --vorik-vtc-category-footer-gap,
                12px
            )
        );
}

/* VORIK CATEGORY FOOTER SAFE GAP END */


/* VORIK VTC LAPTOP B02 TWO COLUMN START */

/*
 * Desktop architecture
 * -----------------------------------------------------------
 * Mobile / tablet < 1024px remain owned by the existing
 * Vaul / bottom-sheet implementation.
 *
 * Laptop:
 *
 *     MAP                BOOKING
 *     flexible           fixed / bounded column
 *
 * No transform is ever applied to the MapLibre canvas.
 */

@media (min-width: 1024px) {

    /*
     * -------------------------------------------------------
     * 1. BOOKING COLUMN
     * -------------------------------------------------------
     *
     * The existing Vaul sheet becomes a permanent desktop
     * booking column.
     */

    .vorik-vaul-sheet,
    .vorik-vtc-sheet,
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"] {

        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        width: 42vw !important;
        min-width: 400px !important;
        max-width: 520px !important;

        height: 100dvh !important;
        max-height: none !important;

        margin: 0 !important;

        overflow: hidden !important;

        border: 0 !important;
        border-left:
            1px solid
            rgba(11, 31, 58, 0.10) !important;

        border-radius: 0 !important;

        background: #ffffff !important;

        box-shadow:
            -16px 0 40px
            rgba(11, 31, 58, 0.08) !important;

        transform: none !important;
        translate: none !important;

        touch-action: auto !important;

        z-index: 30 !important;
    }


    /*
     * Vaul internal host
     */

    .vorik-vaul-content-host {

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        overflow: hidden !important;
    }


    /*
     * No drag handle on laptop.
     */

    .vorik-vtc-sheet-handle,
    .vorik-bottom-sheet__handle {

        display: none !important;
    }


    /*
     * -------------------------------------------------------
     * 2. BOOKING CONTENT
     * -------------------------------------------------------
     */

    .vorik-vtc-sheet-content,
    .vorik-bottom-sheet__content {

        box-sizing: border-box !important;

        width: 100% !important;
        height: 100% !important;
        max-height: none !important;

        padding:
            clamp(28px, 3vh, 42px)
            clamp(24px, 2.6vw, 38px)
            112px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain !important;

        scrollbar-width: thin;

        background: #ffffff !important;
    }


    /*
     * Premium readable heading.
     */

    .vorik-vtc-heading {

        margin-bottom: 22px !important;
    }


    .vorik-vtc-heading h1 {

        font-size:
            clamp(
                27px,
                2.15vw,
                34px
            ) !important;

        line-height: 1.08 !important;

        letter-spacing: -0.035em;
    }


    /*
     * -------------------------------------------------------
     * 3. ROUTE FIELDS
     * -------------------------------------------------------
     */

    .vorik-vtc-route-fields {

        min-height: 126px !important;

        margin:
            0
            0
            22px !important;

        padding:
            10px
            10px
            10px
            14px !important;

        border-radius: 20px !important;
    }


    /*
     * -------------------------------------------------------
     * 4. VEHICLE CATEGORIES
     * -------------------------------------------------------
     *
     * Desktop must no longer behave like horizontal mobile
     * carousel.
     */

    .vorik-vtc-categories {

        margin-right: 0 !important;
        margin-left: 0 !important;
    }


    .vorik-vtc-category-list {

        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 10px !important;

        width: 100% !important;

        margin:
            0
            0
            18px !important;

        padding: 0 !important;

        overflow: visible !important;

        scroll-snap-type: none !important;
    }


    .vorik-vtc-category {

        width: 100% !important;
        min-width: 0 !important;

        min-height: 104px !important;

        scroll-snap-align: none !important;
    }


    /*
     * -------------------------------------------------------
     * 5. MAP
     * -------------------------------------------------------
     *
     * The map occupies all space left of booking column.
     *
     * IMPORTANT:
     * the MapLibre canvas itself is not transformed.
     */

    .vorik-vtc-map {

        top: 0 !important;
        right: min(42vw, 520px) !important;
        bottom: 0 !important;
        left: 0 !important;

        width: auto !important;
        height: 100% !important;
    }


    /*
     * Map controls now belong to map itself.
     * No more historical 478/530px offset.
     */

    .vorik-vtc-map-controls {

        right: 18px !important;
        bottom: 24px !important;
    }


    /*
     * -------------------------------------------------------
     * 6. PRIMARY CTA
     * -------------------------------------------------------
     *
     * CTA belongs visually to booking column instead of
     * spanning complete viewport.
     */

    .vorik-sticky-action-bar {

        position: fixed !important;

        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        box-sizing: border-box !important;

        width: 42vw !important;
        min-width: 400px !important;
        max-width: 520px !important;

        margin: 0 !important;

        padding:
            12px
            clamp(24px, 2.6vw, 38px)
            max(
                14px,
                env(safe-area-inset-bottom)
            ) !important;

        border-top:
            1px solid
            rgba(11, 31, 58, 0.10) !important;

        background:
            rgba(
                255,
                255,
                255,
                0.97
            ) !important;

        backdrop-filter:
            blur(16px);

        -webkit-backdrop-filter:
            blur(16px);

        box-shadow:
            0
            -10px
            28px
            rgba(11, 31, 58, 0.07) !important;

        z-index: 40 !important;
    }


    /*
     * Desktop no longer needs mobile footer safety space
     * below category cards.
     */

    .vorik-vtc-category-list {

        margin-bottom: 18px !important;
    }

}


/*
 * ==========================================================
 * MEDIUM LAPTOP
 * 1024 -> 1279
 *
 * MAP ~58%
 * BOOKING ~42%
 * ==========================================================
 */

@media
    (min-width: 1024px)
    and
    (max-width: 1279px) {

    .vorik-vaul-sheet,
    .vorik-vtc-sheet,
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"],
    .vorik-sticky-action-bar {

        width: 42vw !important;

        min-width: 400px !important;

        max-width: none !important;
    }


    .vorik-vtc-map {

        right: 42vw !important;
    }

}


/*
 * ==========================================================
 * STANDARD LAPTOP / DESKTOP
 * 1280 -> 1599
 *
 * MAP ~62%
 * BOOKING ~38%
 * ==========================================================
 */

@media
    (min-width: 1280px)
    and
    (max-width: 1599px) {

    .vorik-vaul-sheet,
    .vorik-vtc-sheet,
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"],
    .vorik-sticky-action-bar {

        width: 38vw !important;

        min-width: 460px !important;

        max-width: none !important;
    }


    .vorik-vtc-map {

        right: 38vw !important;
    }

}


/*
 * ==========================================================
 * LARGE DESKTOP
 * >= 1600
 *
 * Booking column stops growing.
 * Extra space belongs to map.
 * ==========================================================
 */

@media (min-width: 1600px) {

    .vorik-vaul-sheet,
    .vorik-vtc-sheet,
    .vorik-vtc-sheet[data-bottom-sheet-ready="true"],
    .vorik-sticky-action-bar {

        width: 560px !important;

        min-width: 560px !important;

        max-width: 560px !important;
    }


    .vorik-vtc-map {

        right: 560px !important;
    }

}


/* VORIK VTC LAPTOP B02 TWO COLUMN END */


/* VORIK VTC LAPTOP B03 CTA COLUMN START */


/*
 * ==========================================================
 * LAPTOP CTA CORRECTION
 * ==========================================================
 *
 * Goal:
 *
 * MAP | BOOKING
 *     | ┌─────────────────────────────┐
 *     | │ booking content             │
 *     | │                             │
 *     | ├─────────────────────────────┤
 *     | │ [wallet] [SEARCH] [options] │
 *     | └─────────────────────────────┘
 *
 * The action bar must NEVER overlap the map.
 */


@media (min-width: 1024px) {

    /*
     * Completely neutralize the old mobile/full-screen
     * horizontal positioning.
     */

    .vorik-sticky-action-bar {

        position: fixed !important;

        top: auto !important;

        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        transform: none !important;
        translate: none !important;

        box-sizing: border-box !important;

        margin: 0 !important;

        border-radius: 0 !important;

        border-top:
            1px solid
            rgba(11, 31, 58, 0.09) !important;

        border-left:
            1px solid
            rgba(11, 31, 58, 0.09) !important;

        background:
            rgba(
                255,
                255,
                255,
                0.985
            ) !important;

        box-shadow:
            0
            -12px
            30px
            rgba(
                11,
                31,
                58,
                0.06
            ) !important;

        z-index: 50 !important;
    }


    /*
     * Keep the internal actions entirely within the booking
     * column.
     */

    .vorik-sticky-action-bar > * {

        max-width: 100% !important;
    }


    /*
     * Main search button remains the dominant action.
     */

    .vorik-sticky-action-bar
    .vorik-vtc-primary {

        min-width: 0 !important;

        min-height: 54px !important;

        font-size: 16px !important;
        font-weight: 800 !important;

        border-radius: 16px !important;
    }

}


/*
 * ----------------------------------------------------------
 * 1024 -> 1279
 * Booking = 42vw
 * ----------------------------------------------------------
 */

@media
    (min-width: 1024px)
    and
    (max-width: 1279px) {

    .vorik-sticky-action-bar {

        width: 42vw !important;
        min-width: 400px !important;
        max-width: none !important;

        padding:
            12px
            18px
            max(
                14px,
                env(safe-area-inset-bottom)
            ) !important;
    }

}


/*
 * ----------------------------------------------------------
 * 1280 -> 1599
 * Booking = 38vw
 * ----------------------------------------------------------
 */

@media
    (min-width: 1280px)
    and
    (max-width: 1599px) {

    .vorik-sticky-action-bar {

        width: 38vw !important;
        min-width: 460px !important;
        max-width: none !important;

        padding:
            12px
            22px
            max(
                14px,
                env(safe-area-inset-bottom)
            ) !important;
    }

}


/*
 * ----------------------------------------------------------
 * >= 1600
 * Booking = fixed 560px
 * ----------------------------------------------------------
 */

@media (min-width: 1600px) {

    .vorik-sticky-action-bar {

        width: 560px !important;
        min-width: 560px !important;
        max-width: 560px !important;

        padding:
            12px
            24px
            max(
                14px,
                env(safe-area-inset-bottom)
            ) !important;
    }

}


/* VORIK VTC LAPTOP B03 CTA COLUMN END */