/*
 * VORIK
 * Premium mobile landing page
 * Complete clean rewrite
 */


/* =========================================================
 * Design tokens
 * ======================================================= */

.vorik-mobile-home-page {
    --vorik-premium-navy: #082b55;
    --vorik-premium-navy-dark: #052142;
    --vorik-premium-blue: #0876dd;
    --vorik-premium-blue-soft: #eaf5ff;
    --vorik-premium-yellow: #ffd21c;
    --vorik-premium-yellow-dark: #f4bd00;
    --vorik-premium-text: #092b53;
    --vorik-premium-muted: #536b86;
    --vorik-premium-line: #dce8f3;
    --vorik-premium-white: #ffffff;
    --vorik-premium-surface: #f9fcff;
    --vorik-premium-shadow:
        0 20px 55px rgba(17, 66, 111, 0.10);

    min-width: 320px;
    margin: 0;
    color: var(--vorik-premium-text);
    background: #f4f8fc;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

.vorik-mobile-home-page *,
.vorik-mobile-home-page *::before,
.vorik-mobile-home-page *::after {
    box-sizing: border-box;
}

.vorik-mobile-home-page .vorik-home {
    min-height: 100svh;
    background: transparent;
}

.vorik-mobile-home-page #vorik-main {
    min-height: 100svh;
}


/* =========================================================
 * Header
 * ======================================================= */

.vorik-mobile-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    padding-top: env(safe-area-inset-top);
    color: var(--vorik-premium-navy);
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(8, 43, 85, 0.05);
    box-shadow: 0 6px 24px rgba(8, 43, 85, 0.04);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.vorik-mobile-header__inner {
    width: 100%;
    max-width: 520px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 24px;
}

.vorik-mobile-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: var(--vorik-premium-navy);
    text-decoration: none;
}

.vorik-mobile-header__mark {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--vorik-premium-navy);
    background:
        linear-gradient(
            145deg,
            #ffdc36,
            var(--vorik-premium-yellow)
        );
    box-shadow:
        0 8px 18px rgba(255, 199, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    font-size: 20px;
    font-weight: 900;
}

.vorik-mobile-header__name {
    font-size: 23px;
    font-weight: 900;
    letter-spacing: 0.10em;
}

.vorik-mobile-header__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vorik-mobile-header__languages {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #71839a;
    font-size: 14px;
    font-weight: 800;
}

.vorik-mobile-header__languages a {
    color: var(--vorik-premium-navy);
    text-decoration: none;
}

.vorik-mobile-header__languages a.is-active {
    color: var(--vorik-premium-blue);
}

.vorik-mobile-header__avatar {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            #1786ed,
            #0867c7
        );
    box-shadow: 0 8px 18px rgba(8, 118, 221, 0.24);
    font-size: 16px;
    font-weight: 850;
    text-decoration: none;
}

.vorik-mobile-header__menu {
    width: 42px;
    height: 42px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: var(--vorik-premium-navy);
    background: transparent;
    cursor: pointer;
}

.vorik-mobile-header__menu span {
    width: 25px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
}


/* =========================================================
 * Landing shell
 * ======================================================= */

.vorik-mobile-home {
    min-height: 100svh;
    padding:
        calc(
            84px
            + env(safe-area-inset-top)
        )
        0
        env(safe-area-inset-bottom);
    background:
        radial-gradient(
            circle at 50% 17%,
            rgba(209, 232, 255, 0.34),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 58%,
            #f5faff 100%
        );
}

.vorik-mobile-home__shell {
    width: 100%;
    max-width: 520px;
    min-height:
        calc(
            100svh
            - 84px
            - env(safe-area-inset-top)
            - env(safe-area-inset-bottom)
        );
    margin: 0 auto;
    padding: 42px 24px 24px;
}

.vorik-mobile-hero {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.vorik-mobile-hero__content {
    position: relative;
    z-index: 2;
}

.vorik-mobile-hero h1 {
    margin: 0;
    color: var(--vorik-premium-navy);
    font-size: clamp(36px, 9.5vw, 48px);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.vorik-mobile-hero__title-main,
.vorik-mobile-hero__title-accent {
    display: block;
}

.vorik-mobile-hero__title-accent {
    color: var(--vorik-premium-blue);
}

.vorik-mobile-hero__description {
    max-width: 410px;
    margin: 20px auto 0;
    color: var(--vorik-premium-muted);
    font-size: clamp(15px, 4.1vw, 18px);
    line-height: 1.52;
    font-weight: 560;
}


/* =========================================================
 * Premium hero illustration
 * ======================================================= */

.vorik-mobile-visual {
    position: relative;
    width: 100%;
    height: 265px;
    margin-top: 16px;
    overflow: hidden;
}

.vorik-mobile-visual__city {
    position: absolute;
    right: -5%;
    bottom: 0;
    left: -5%;
    width: 110%;
    height: auto;
}

.vorik-mobile-visual__car {
    position: absolute;
    z-index: 3;
    right: 3%;
    bottom: 2px;
    left: 3%;
    width: 94%;
    height: auto;
    filter: drop-shadow(0 16px 16px rgba(12, 51, 86, 0.16));
}

.vorik-mobile-visual__pin,
.vorik-mobile-visual__guest-pin {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vorik-premium-blue);
    filter: drop-shadow(0 10px 12px rgba(0, 105, 205, 0.22));
}

.vorik-mobile-visual__pin {
    top: 5px;
    left: 45%;
    font-size: 66px;
}

.vorik-mobile-visual__route {
    position: absolute;
    z-index: 3;
    right: 3%;
    bottom: 15px;
    left: 3%;
    width: 94%;
    height: auto;
}

.vorik-mobile-visual__guest-pin {
    top: 36px;
    left: 43%;
    font-size: 95px;
}


/* =========================================================
 * Services
 * ======================================================= */

.vorik-mobile-services {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: -3px;
    padding: 17px 8px;
    border: 1px solid rgba(8, 43, 85, 0.055);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--vorik-premium-shadow);
}

.vorik-mobile-service {
    position: relative;
    min-width: 0;
    min-height: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding: 2px 7px;
    color: var(--vorik-premium-text);
    font-size: 12px;
    line-height: 1.18;
    font-weight: 650;
}

.vorik-mobile-service:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 0;
    bottom: 6px;
    width: 1px;
    background: var(--vorik-premium-line);
}

.vorik-mobile-service i {
    color: var(--vorik-premium-blue);
    font-size: 24px;
}

.vorik-mobile-service span {
    max-width: 86px;
    text-align: center;
}


/* =========================================================
 * Calls to action
 * ======================================================= */

.vorik-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 20px;
}

.vorik-mobile-action {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 25px;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.vorik-mobile-action__leading {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    text-align: left;
}

.vorik-mobile-action__leading > i {
    width: 23px;
    font-size: 21px;
    text-align: center;
}

.vorik-mobile-action > i:last-child {
    font-size: 15px;
}

.vorik-mobile-action--primary {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--vorik-premium-navy),
            #0b3d72
        );
    box-shadow:
        0 14px 28px rgba(8, 43, 85, 0.17);
}

.vorik-mobile-home-page:not(.is-authenticated)
.vorik-mobile-action--primary {
    color: var(--vorik-premium-navy);
    background:
        linear-gradient(
            135deg,
            var(--vorik-premium-yellow),
            #ffca14
        );
    box-shadow:
        0 14px 28px rgba(244, 189, 0, 0.17);
}

.vorik-mobile-action--secondary {
    color: var(--vorik-premium-navy);
    background: rgba(255, 255, 255, 0.90);
    border: 2px solid var(--vorik-premium-blue);
}

.vorik-mobile-action:active {
    transform: scale(0.985);
}


/* Guest primary CTA must be yellow */

.vorik-mobile-home
.vorik-mobile-action--primary[href="/register"] {
    color: var(--vorik-premium-navy);
    background:
        linear-gradient(
            135deg,
            var(--vorik-premium-yellow),
            #ffca14
        );
    box-shadow:
        0 14px 28px rgba(244, 189, 0, 0.17);
}


/* =========================================================
 * Trust line
 * ======================================================= */

.vorik-mobile-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 24px;
    color: #637892;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 550;
}

.vorik-mobile-trust__icon {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 8px;
    color: #ffffff;
    background: var(--vorik-premium-blue);
    font-size: 12px;
}


/* =========================================================
 * Drawer
 * ======================================================= */

.vorik-mobile-drawer {
    position: fixed;
    z-index: 1300;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
}

.vorik-mobile-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

.vorik-mobile-drawer__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    background: rgba(2, 21, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 220ms ease;
}

.vorik-mobile-drawer.is-open
.vorik-mobile-drawer__backdrop {
    opacity: 1;
}

.vorik-mobile-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(85vw, 370px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding:
        calc(
            24px
            + env(safe-area-inset-top)
        )
        24px
        calc(
            28px
            + env(safe-area-inset-bottom)
        );
    color: var(--vorik-premium-text);
    background: #ffffff;
    box-shadow: -25px 0 60px rgba(3, 29, 57, 0.20);
    transform: translateX(103%);
    transition:
        transform
        270ms
        cubic-bezier(0.22, 0.8, 0.2, 1);
}

.vorik-mobile-drawer.is-open
.vorik-mobile-drawer__panel {
    transform: translateX(0);
}

.vorik-mobile-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vorik-mobile-drawer__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--vorik-premium-navy);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-decoration: none;
}

.vorik-mobile-drawer__mark {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--vorik-premium-navy);
    background: var(--vorik-premium-yellow);
    letter-spacing: 0;
}

.vorik-mobile-drawer__close {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    color: var(--vorik-premium-navy);
    background: var(--vorik-premium-blue-soft);
    font-size: 18px;
}

.vorik-mobile-drawer__tagline {
    margin: 20px 0 24px;
    color: var(--vorik-premium-muted);
    font-size: 14px;
}

.vorik-mobile-drawer__navigation,
.vorik-mobile-drawer__account {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vorik-mobile-drawer__navigation a,
.vorik-mobile-drawer__account a {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 15px;
    border-radius: 13px;
    color: var(--vorik-premium-navy);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.vorik-mobile-drawer__navigation a:hover,
.vorik-mobile-drawer__navigation a:focus-visible,
.vorik-mobile-drawer__account a:hover,
.vorik-mobile-drawer__account a:focus-visible,
.vorik-mobile-drawer__account a.is-primary {
    background: var(--vorik-premium-blue-soft);
}

.vorik-mobile-drawer__navigation i,
.vorik-mobile-drawer__account i {
    width: 21px;
    color: var(--vorik-premium-blue);
    text-align: center;
}

.vorik-mobile-drawer__account {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--vorik-premium-line);
}

body.vorik-mobile-menu-open {
    overflow: hidden;
}


/* =========================================================
 * Accessibility
 * ======================================================= */

.vorik-mobile-header a:focus-visible,
.vorik-mobile-header button:focus-visible,
.vorik-mobile-action:focus-visible,
.vorik-mobile-drawer a:focus-visible,
.vorik-mobile-drawer button:focus-visible {
    outline: 3px solid rgba(8, 118, 221, 0.38);
    outline-offset: 3px;
}


/* =========================================================
 * Responsive adjustments
 * ======================================================= */

@media (max-width: 390px) {
    .vorik-mobile-header__inner {
        height: 76px;
        padding-right: 17px;
        padding-left: 17px;
    }

    .vorik-mobile-header__mark {
        width: 40px;
        height: 40px;
    }

    .vorik-mobile-header__name {
        font-size: 20px;
    }

    .vorik-mobile-header__actions {
        gap: 8px;
    }

    .vorik-mobile-header__languages {
        gap: 5px;
        font-size: 12px;
    }

    .vorik-mobile-home {
        padding-top:
            calc(
                76px
                + env(safe-area-inset-top)
            );
    }

    .vorik-mobile-home__shell {
        padding: 32px 17px 20px;
    }

    .vorik-mobile-hero h1 {
        font-size: 36px;
    }

    .vorik-mobile-hero__description {
        margin-top: 16px;
        font-size: 15px;
    }

    .vorik-mobile-visual {
        height: 235px;
    }

    .vorik-mobile-service {
        min-height: 70px;
        padding-right: 4px;
        padding-left: 4px;
        font-size: 10.5px;
    }

    .vorik-mobile-service i {
        font-size: 21px;
    }

    .vorik-mobile-action {
        min-height: 62px;
        padding-right: 20px;
        padding-left: 20px;
        font-size: 16px;
    }

    .vorik-mobile-action__leading {
        gap: 14px;
    }

    .vorik-mobile-trust {
        font-size: 10.5px;
    }
}

@media (max-width: 340px) {
    .vorik-mobile-header__languages {
        display: none;
    }

    .vorik-mobile-home__shell {
        padding-right: 13px;
        padding-left: 13px;
    }

    .vorik-mobile-hero h1 {
        font-size: 33px;
    }

    .vorik-mobile-services {
        padding-right: 3px;
        padding-left: 3px;
    }

    .vorik-mobile-service {
        font-size: 9.5px;
    }
}

@media (min-width: 521px) {
    .vorik-mobile-home-page {
        padding: 24px 0;
    }

    .vorik-mobile-header {
        top: 24px;
        right: auto;
        left: 50%;
        width: 520px;
        overflow: hidden;
        border-radius: 28px 28px 0 0;
        transform: translateX(-50%);
    }

    .vorik-mobile-home {
        width: 520px;
        margin: 0 auto;
        border-radius: 28px;
        box-shadow:
            0 30px 90px rgba(8, 43, 85, 0.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vorik-mobile-action,
    .vorik-mobile-drawer__panel,
    .vorik-mobile-drawer__backdrop {
        transition: none;
    }
}


/* Location service is now a link */

a.vorik-mobile-service {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a.vorik-mobile-service:active {
    transform: scale(0.97);
}


/* =========================================================
   ROLE-AWARE DRIVER HOME
   ========================================================= */

.vorik-mobile-driver-progress {
    margin:
        0 0 18px;

    padding:
        17px 18px;

    color:
        #09254a;

    background:
        #ffffff;

    border:
        1px solid #dce8f4;

    border-radius:
        17px;

    box-shadow:
        0 11px 28px rgba(7, 38, 76, .07);
}


.vorik-mobile-driver-progress__heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        11px;
}


.vorik-mobile-driver-progress__heading span {
    font-size:
        14px;

    font-weight:
        750;
}


.vorik-mobile-driver-progress__heading strong {
    color:
        #0877ed;

    font-size:
        17px;

    font-weight:
        850;
}


.vorik-mobile-driver-progress__bar {
    height:
        10px;

    overflow:
        hidden;

    background:
        #e6edf5;

    border-radius:
        999px;
}


.vorik-mobile-driver-progress__bar > span {
    display:
        block;

    width:
        var(--driver-home-progress);

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            #0877ed,
            #1689ff
        );

    border-radius:
        inherit;
}


.vorik-mobile-driver-progress p {
    margin:
        10px 0 0;

    color:
        #60748d;

    font-size:
        13px;
}


.vorik-mobile-drawer__progress-badge {
    margin-left:
        auto;

    padding:
        4px 8px;

    color:
        #09254a;

    background:
        #ffc928;

    border-radius:
        999px;

    font-size:
        12px;

    font-weight:
        850;
}


/* =========================================================
   VORIK MOBILE APP EARLY ACCESS R14C1
   ========================================================= */

.vorik-mobile-app-entry {
    margin: 4px 0 18px;
}

.vorik-mobile-app-entry__button {
    display: flex;
    width: 100%;
    min-height: 68px;
    align-items: center;
    gap: 13px;
    padding: 11px 15px;
    border: 0;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #082f59,
            #0f4c81 60%,
            #0877ed
        );
    color: #fff;
    box-shadow:
        0 13px 30px rgba(8,55,105,.20);
    text-align: left;
}

.vorik-mobile-app-entry__icon {
    display: grid;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    place-items: center;
    border-radius: 13px;
    background: #fff;
    color: #0f4c81;
    font-size: 19px;
}

.vorik-mobile-app-entry__copy {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.vorik-mobile-app-entry__copy small {
    color: #83cdf7;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .1em;
}

.vorik-mobile-app-entry__copy strong {
    margin-top: 2px;
    font-size: 15px;
}


.vorik-mobile-app-overlay {
    position: fixed;
    z-index: 9990;
    inset: 0;
    visibility: hidden;
    background: rgba(2,17,34,.52);
    opacity: 0;
    backdrop-filter: blur(4px);
    transition: opacity .2s ease;
}

.vorik-mobile-app-overlay.is-open {
    visibility: visible;
    opacity: 1;
}


.vorik-mobile-app-sheet {
    position: fixed !important;
    z-index: 9991 !important;
    right: 0;
    bottom: 0;
    left: 0;
    width: min(100%, 520px);
    height: 92dvh;
    margin: auto;
    visibility: hidden;
    border-radius: 27px 27px 0 0;
    background: #fff;
    box-shadow:
        0 -25px 70px rgba(4,30,59,.24);
}

.vorik-mobile-app-sheet.is-open {
    visibility: visible;
}

.vorik-mobile-app-sheet__handle {
    display: block;
    width: 100%;
    height: 29px;
    border: 0;
    background: transparent;
}

.vorik-mobile-app-sheet
.vorik-bottom-sheet__content {
    height: calc(100% - 29px);
    overflow-y: auto;
    padding:
        5px
        19px
        calc(30px + env(safe-area-inset-bottom));
}


.vorik-mobile-app-sheet__header {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.vorik-mobile-app-sheet__header span {
    color: #0877ed;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .11em;
}

.vorik-mobile-app-sheet__header h2 {
    margin: 5px 0 0;
    color: #092d55;
    font-size: 24px;
}

.vorik-mobile-app-sheet__header p {
    margin: 7px 0 0;
    color: #6b7f93;
    font-size: 12px;
}

.vorik-mobile-app-sheet__close {
    display: grid;
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #edf4fa;
    color: #61778e;
}


.vorik-mobile-app-sheet__apps {
    display: grid;
    gap: 11px;
}

.vorik-mobile-app-card {
    display: flex;
    width: 100%;
    min-height: 88px;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border: 1px solid #dce7f1;
    border-radius: 19px;
    background: #fff;
    color: #092d55;
    text-align: left;
    box-shadow:
        0 9px 25px rgba(8,43,85,.06);
}

.vorik-mobile-app-card img {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 16px;
    object-fit: cover;
}

.vorik-mobile-app-card > span {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.vorik-mobile-app-card strong {
    font-size: 16px;
}

.vorik-mobile-app-card small {
    margin-top: 2px;
    color: #0877ed;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.vorik-mobile-app-card em {
    margin-top: 5px;
    color: #6c8094;
    font-size: 11px;
    font-style: normal;
}


.vorik-mobile-app-access__back {
    margin-bottom: 15px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0877ed;
    font-weight: 750;
}

.vorik-mobile-app-access__identity {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.vorik-mobile-app-access__identity img {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    object-fit: cover;
}

.vorik-mobile-app-access__identity small,
.vorik-mobile-app-access__identity strong {
    display: block;
}

.vorik-mobile-app-access__identity small {
    color: #8293a4;
    font-size: 9px;
    font-weight: 800;
}

.vorik-mobile-app-access__identity strong {
    margin-top: 3px;
    color: #092d55;
    font-size: 17px;
}


[data-vorik-mobile-state] h3 {
    margin: 0 0 7px;
    color: #092d55;
    font-size: 21px;
}

[data-vorik-mobile-state] p {
    color: #6a7e91;
    font-size: 12px;
    line-height: 1.5;
}

[data-vorik-mobile-early-form] label {
    display: block;
    color: #405b73;
    font-size: 11px;
    font-weight: 750;
}

[data-vorik-mobile-early-email] {
    box-sizing: border-box;
    width: 100%;
    min-height: 54px;
    margin-top: 7px;
    padding: 0 14px;
    border: 1px solid #d8e5ef;
    border-radius: 14px;
    background: #f8fbfd;
    color: #092d55;
    font: inherit;
    font-size: 15px;
    outline: none;
}

[data-vorik-mobile-early-email]:focus {
    border-color: #38bdf8;
    box-shadow:
        0 0 0 3px rgba(56,189,248,.12);
}


.vorik-mobile-app-submit {
    display: flex;
    width: 100%;
    min-height: 55px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 13px;
    border: 0;
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            #0877ed,
            #0f4c81
        );
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 850;
}

.vorik-mobile-app-error {
    margin-top: 8px;
    padding: 9px 11px;
    border-radius: 10px;
    background: #fff0f0;
    color: #a33333;
    font-size: 11px;
}

.vorik-mobile-app-privacy {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    color: #8798a8 !important;
    font-size: 10px !important;
}


.vorik-mobile-app-state {
    padding: 18px 5px;
    text-align: center;
}

.vorik-mobile-app-state > i {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #eaf7ee;
    color: #238354;
    font-size: 22px;
}


.vorik-mobile-app-loader {
    display: block;
    width: 37px;
    height: 37px;
    margin: 18px auto 17px;
    border: 4px solid #deebf7;
    border-top-color: #0877ed;
    border-radius: 50%;
    animation:
        vorikMobileAppSpin .75s
        linear infinite;
}

@keyframes vorikMobileAppSpin {
    to {
        transform: rotate(360deg);
    }
}


[data-vorik-mobile-state][hidden],
.vorik-mobile-app-access[hidden],
.vorik-mobile-app-sheet__apps[hidden] {
    display: none !important;
}


body.vorik-mobile-app-open {
    overflow: hidden;
}


/* =========================================================
   VORIK MOBILE EARLY ACCESS - FIXED FOOTER CTA R14D1
   ========================================================= */

/*
 * Reserve space for the persistent app CTA so it never
 * covers the last content block.
 */
.vorik-mobile-home-page {
    padding-bottom:
        calc(
            92px
            + env(safe-area-inset-bottom)
        );
}


/*
 * Persistent footer container.
 */
.vorik-mobile-app-entry {
    position:
        fixed;

    z-index:
        9500;

    right:
        0;

    bottom:
        0;

    left:
        0;

    width:
        min(100%, 520px);

    margin:
        0 auto;

    padding:
        8px
        10px
        calc(
            8px
            + env(safe-area-inset-bottom)
        );

    pointer-events:
        none;

    background:
        linear-gradient(
            to top,
            rgba(244, 249, 253, .98) 0%,
            rgba(244, 249, 253, .95) 68%,
            rgba(244, 249, 253, 0) 100%
        );
}


/*
 * The CTA itself remains interactive.
 */
.vorik-mobile-app-entry__button {
    pointer-events:
        auto;

    min-height:
        66px;

    margin:
        0;

    border:
        1px solid rgba(255,255,255,.20);

    border-radius:
        18px;

    box-shadow:
        0 10px 34px rgba(4,45,88,.28);
}


/*
 * Improve hierarchy while fixed.
 */
.vorik-mobile-app-entry__copy small {
    font-size:
        9px;
}

.vorik-mobile-app-entry__copy strong {
    font-size:
        15px;
}


/*
 * Keep arrow visually obvious.
 */
.vorik-mobile-app-entry__button > .fa-chevron-up {
    margin-left:
        auto;

    color:
        #ffffff;

    font-size:
        15px;
}


/*
 * While sheet is open, hide the persistent CTA.
 * The sheet itself becomes the active interaction surface.
 */
body.vorik-mobile-app-open
.vorik-mobile-app-entry {
    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;
}


/*
 * Smooth state transition.
 */
.vorik-mobile-app-entry {
    transition:
        opacity .18s ease,
        visibility .18s ease;
}


/*
 * On slightly larger mobile preview containers,
 * preserve the centered 520px mobile shell.
 */
@media (min-width: 521px) {

    .vorik-mobile-app-entry {
        border-radius:
            0 0 28px 28px;
    }
}


/*
 * Very small phones need a slightly more compact footer.
 */
@media (max-width: 360px) {

    .vorik-mobile-home-page {
        padding-bottom:
            calc(
                86px
                + env(safe-area-inset-bottom)
            );
    }

    .vorik-mobile-app-entry {
        padding-right:
            7px;

        padding-left:
            7px;
    }

    .vorik-mobile-app-entry__button {
        min-height:
            61px;

        padding-right:
            13px;

        padding-left:
            13px;
    }

    .vorik-mobile-app-entry__icon {
        width:
            39px;

        height:
            39px;

        flex-basis:
            39px;
    }

    .vorik-mobile-app-entry__copy strong {
        font-size:
            14px;
    }
}


/* =========================================================
   VORIK MOBILE HOME - THREE CORE SERVICES R14D3
   TAXI / VTC / CAR RENTAL
   ========================================================= */

.vorik-mobile-services--three {
    display:
        grid;

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

    align-items:
        stretch;

    padding:
        10px 5px;

    background:
        #ffffff;

    border-radius:
        20px;
}


/*
 * Each service now has more horizontal space because
 * the previous four-column layout has become three columns.
 */
.vorik-mobile-services--three
.vorik-mobile-service {
    position:
        relative;

    display:
        flex;

    min-width:
        0;

    min-height:
        82px;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        7px;

    padding:
        8px 7px;

    color:
        #082f59;

    text-align:
        center;

    background:
        transparent;

    border:
        0;
}


/*
 * Vertical separators only between services.
 */
.vorik-mobile-services--three
.vorik-mobile-service
+ .vorik-mobile-service {
    border-left:
        1px solid #dbe7f2;
}


/*
 * Larger icons, as requested.
 */
.vorik-mobile-services--three
.vorik-mobile-service__icon {
    display:
        grid;

    min-height:
        34px;

    place-items:
        center;

    color:
        #0877ed;
}


.vorik-mobile-services--three
.vorik-mobile-service__icon i {
    font-size:
        30px;

    line-height:
        1;
}


/*
 * Rental receives a very small yellow accent,
 * consistent with the VORIK identity.
 */
.vorik-mobile-services--three
.vorik-mobile-service--rental
.vorik-mobile-service__icon {
    position:
        relative;
}


.vorik-mobile-services--three
.vorik-mobile-service--rental
.vorik-mobile-service__icon::after {
    position:
        absolute;

    right:
        -7px;

    bottom:
        0;

    width:
        9px;

    height:
        9px;

    content:
        '';

    background:
        #ffc928;

    border:
        2px solid #ffffff;

    border-radius:
        50%;
}


/*
 * Compact but clear labels.
 */
.vorik-mobile-services--three
.vorik-mobile-service__label {
    display:
        block;

    max-width:
        112px;

    color:
        #082f59;

    font-size:
        12px;

    font-weight:
        850;

    line-height:
        1.18;

    letter-spacing:
        -.01em;
}


/*
 * Slight differentiation for Taxi while remaining
 * within the same visual system.
 */
.vorik-mobile-services--three
.vorik-mobile-service--taxi
.vorik-mobile-service__icon {
    color:
        #0877ed;
}


/*
 * Small phones.
 */
@media (max-width: 360px) {

    .vorik-mobile-services--three {
        padding-right:
            2px;

        padding-left:
            2px;
    }

    .vorik-mobile-services--three
    .vorik-mobile-service {
        min-height:
            76px;

        padding-right:
            4px;

        padding-left:
            4px;
    }

    .vorik-mobile-services--three
    .vorik-mobile-service__icon i {
        font-size:
            27px;
    }

    .vorik-mobile-services--three
    .vorik-mobile-service__label {
        font-size:
            10.5px;
    }
}

/* =========================================================
   MOBILE HOME TRUST R01 — READABILITY
   ========================================================= */

@media (max-width: 760px) {

    .vorik-mobile-trust,
    .vorik-mobile-trust span,
    .vorik-mobile-trust-strip,
    .vorik-mobile-trust-strip span {
        font-size: 13px !important;
        font-weight: 750 !important;
        line-height: 1.35 !important;
        color: #496986 !important;
    }

}

@media (max-width: 360px) {

    .vorik-mobile-trust,
    .vorik-mobile-trust span,
    .vorik-mobile-trust-strip,
    .vorik-mobile-trust-strip span {
        font-size: 12px !important;
    }

}

/* =========================================================
   MOBILE HOME TRUST R01B — FINAL READABILITY
   ========================================================= */

@media (max-width: 760px) {

    .vorik-mobile-trust {
        display: flex;
        align-items: center;
        justify-content: center;

        gap: 9px;

        width: 100%;

        font-size: 14px !important;
        font-weight: 750 !important;
        line-height: 1.3 !important;

        color: #355b7e !important;

        text-align: center;
    }


    .vorik-mobile-trust > span:not(.vorik-mobile-trust__icon) {
        font-size: 14px !important;
        font-weight: 750 !important;
        line-height: 1.3 !important;

        color: #355b7e !important;
    }


    .vorik-mobile-trust__icon {
        flex: 0 0 auto;
    }

}


@media (max-width: 360px) {

    .vorik-mobile-trust,
    .vorik-mobile-trust > span:not(.vorik-mobile-trust__icon) {
        font-size: 13px !important;
    }

}

/* =========================================================
   MOBILE HOME TRUST R01C — LARGER TYPOGRAPHY
   ========================================================= */

@media (max-width: 760px) {

    .vorik-mobile-trust,
    .vorik-mobile-trust > span:not(.vorik-mobile-trust__icon) {
        font-size: 16px !important;
        font-weight: 750 !important;
        line-height: 1.35 !important;
        color: #355b7e !important;
    }

}

@media (max-width: 360px) {

    .vorik-mobile-trust,
    .vorik-mobile-trust > span:not(.vorik-mobile-trust__icon) {
        font-size: 15px !important;
    }

}