/*
 * VORIK Shared Mobile App / Early Access
 *
 * Exact component CSS extracted from home-mobile.css.
 * Do not redesign independently from the Home component.
 */

/* =========================================================
   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 SHARED MOBILE APP — GLOBAL COMPATIBILITY
   The component styles above are extracted from Home.
   These rules only adapt visibility/integration outside Home.
   ========================================================= */

/*
 * Mobile acquisition entry never appears on desktop.
 */
@media (min-width: 761px) {

    .vorik-mobile-app-entry,
    .vorik-mobile-app-overlay,
    .vorik-mobile-app-sheet {
        display: none !important;
    }

}


/*
 * The original Home stylesheet reserves bottom space through
 * .vorik-mobile-home-page. Other public pages need the same
 * protection without altering the component itself.
 */
@media (max-width: 760px) {

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


    /*
     * Navigation drawer temporarily takes priority.
     */
    body.vorik-mobile-menu-open
    .vorik-mobile-app-entry {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

}


@media (max-width: 360px) {

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

}